body {
      background-image: url('backgrounds/bg_sunset2.png');
      background-repear: repeat;
}

.big-container {
	width: 1075px;
	height: auto;
	border: 1px solid black;
	margin: auto;
	padding: 20px;
	background-color: #ffebbd;
}

@font-face {
  font-family: 'Sysfont';
  src: url('fonts/sysfont.woff2') format('woff2'),
  url('fonts/sysfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Sysfont';
  src: url('fonts/sysfont.woff2') format('woff2'),
  url('fonts/sysfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Nunito';
  src: url('fonts/Nunito-Regular.woff2') format('woff2'),
  url('fonts/Nunito-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

p {
	font-family: 'MS Gothic', consolas;
	font-size: 15px;
}

h1 {
	font-family: 'Sysfont';
}

img.kirbyvibe {
	bottom: 0;
	right: 0;
	position: fixed;
	margin: 0 3% 3% 0;
}

.header {
	width: auto;
	height: 140px;
	border: 2px solid #62128b;
	border-radius: 10px 10px 0px 0px;
	margin-bottom: 10px;
	background-image: url('assets/header.png');
}

.top {
	width: auto;
	height: auto;
	border: none;
}

.welcome-sign, .update-corner {
	width: 800px;
	height: 355px;
	border: 1px solid #B8388B;
	margin-bottom: 5px;
	padding: 10px;
	background-color: #FEF2DA;
}

.welcome2 {
	border: 2px solid #B8388B;
	width: auto;
	height: auto;
	padding: 15px;
	border-radius: 15px;
	background-color: #FFB0AE;
	
}

.update-corner {
	width: 800px;
	height: auto;
	border: 1px solid #B8388B;
	margin-top: 5px;
	padding: 15px;
	box-shadow: inset 0px 0px 2px 2px white, 0px 5px #00000038;
}

.currently {
	width: auto;
	height: auto;
	border: 1px solid black;
	padding: 5px;
}

.nav {
	width: 200px;
	height: 610px;
	border: 2px solid #B93A8B;
	background-color: #FFB0AE;
	margin-right: 3px;
}

.main-nav {
	width: auto;
	height: auto;
	margin-right: 10px;
}

.flex {
	display: flex;
}

.big-container, .welcome-sign, .update-corner, .currently, .nav, .bottom, .changelog, .latest-doodle  {
	border-radius: 10px;
}

.latest-doodle, .latest-art {
	margin: auto;
}

.button-marquee {
	width: 780px;
	height: 50px;
	border: none;
	margin-top: 5px;
	align-content: center;
}

.bottom {
	border: 1px solid black;
	width: auto;
	height: auto;
	margin-top: 5px;
}

.changelog {
	border: 1px solid black;
	width: 200px;
	height: 500px;
	margin-right: 70px;
}

.latest-art {
	border: none;
	width: 500px;
	height: 200px;
	background-image: url('latestart.jpg');
}

.latest-doodle {
	border: 1px solid black;
	width: 500px;
	height: 200px;
	background-image: url('latestdoodle.jpg');
}

.latest-border {
	width: 500px;
	height: 250px;
	padding: 10px;
	border: 1px solid black;
	
}

.latest-art-header {
	border: 1px solid black;
	width: auto;
	height: auto;
	background-image: linear-gradient(180deg, rgba(185,58,139,1) 0%, rgba(252,139,133,1) 100%);
	padding: 5px;
	border-radius: 10px 10px 0px 0px;
	font-family: 'Sysfont';
	font-size: 25px;
}

.latest-art {
	border: 1px solid orchid;
	width: 340px;
	height: 300px;
	background-image: url('latestart.jpg');
}

.latest-art, .latest-art-header {
	margin-right: 70px;
}

.flex-2 {
	display: flex;
	flex-direction: column;
}

.flex-3 {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}


.nav-button {
	background-color: #FD8A85;
	margin: 15px;
	border-radius: 0px 100px 100px 100px;
	font-family: "Sysfont";
	font-size: 17px;
	font-weight: bold;
	color: #1B0341;
	padding: 7px 7px;
	display: block;
	margin-bottom: 5px;
	box-shadow: 8px 8px 0px 0px #62128b;
}

.changelog2 {
	border: 5px solid #FD8A85;
	height: 230px;
	width: 100%;
	background-color: #FD8A85;
	font-family: 'Sysfont';
	color: white;
	font-size: 35px;
	text-align: left;
	border-radius: 10px;
	margin-right: 20px;
}

.changelog { 
  color: white;
  height: auto;
  width: 90%;
  border: none;
  scrollbar-width: thin;
  text-align: left;
  margin-top: 5px;
}

.changelog-frame {
	target: parent;
}

.changelog-full {
    font-family: "Sysfont";
    font-size: 25px;
    color: #C44C5C;
    margin: 0;
    border-bottom: 7px dotted #C44C5C;
    width: 100%;
	float: left;
}
.changelog-full > span {
    float: right;
    font-weight: bold;
    font-family: "Sysfont";
    font-size: 20px;
}


h1.welcome {
	font-size: 40px;
	font-family: 'Sysfont';
}

.playing {
	background-image: linear-gradient(180deg, rgba(103,215,46,1) 0%, rgba(190,255,52,1) 100%);
	height: auto;
	border-radius: 10px;
	width: auto;
}

.watching {
	background-color: pink;
	height: auto;
	border-radius: 10px;
	width: auto;
}

.reading {
	background-color: orange;
	height: auto;
	border-radius: 10px;
	width: auto;
}

.playing, .watching, .reading {
	margin-right: 10px;
	justify-content: center;
	border: 1px solid black;
	padding: 1px;
	box-shadow: inset 0px 1px white;
	font-size: 15px;
}

.webrings {
	border: 1px solid black;
	padding: 3px;
	height: 300px;
	width: 70%;
	overflow: auto;
	scrollbar-width: thin;
}

.chatbox {
	border: none;
	width: 50%;
	height: 300px;
}

.proj-main{
	width: 830px;
	height: auto;
	border: 1px solid #B8388B;
	margin-bottom: 5px;
	padding: 15px;
	background-color: #F88781;
	border-radius: 10px;
}

.proj-main-2{
	width: auto;
	height: auto;
	border: 1px solid #B8388B;
	margin-bottom: 5px;
	padding: 10px;
	background-color: #FEF2DA;
	border-radius: 10px;
}

.proj-sub {
	width: auto;
	height: auto;
	border: 1px solid black;
	background-color: #f7a846;
	padding: 5px;
	border-radius: 0px 25px 0px 25px;
}

.proj-sub-inner {
	width: 250px;
	height: 230px;
	border-radius: 0px 0px 0px 25px;
	border: 1px solid black;
	background-image: url('backgrounds/kirbystarbg7.png');
}

.proj-sub-inner.sq {
	background-image: url('gallery/2023gallery/starquest.jpg');
	background-size: cover;
	background-repeat: no-repeat;
}

.proj-sub-inner.cal {
	background-image: url('gallery/2021gallery/dontwander.png');
	background-size: cover;
	background-repeat: no-repeat;
	justify-content: center;
	background-position: 40% 10%;
}

.proj-sub-inner.en {
	background-image: url('gallery/2021gallery/springchild.png');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: 40% 10%;
}

.proj-sub-inner.aa {
	background-image: url('gallery/2022gallery/adastra.jpg');
	background-size: cover;
	background-repeat: no-repeat;
}

.proj-sub-inner.mp {
	background-image: url('gallery/2024gallery/besties.jpg');
	background-size: cover;
	background-repeat: no-repeat;
}

.proj-sub-inner-2 {
	width: 65%;
	height: 200px;
	border-radius:  0px 25px 0px 0px;
	border: 1px solid black;
	background-color: #FEF2DA;
	padding: 15px;
}

.proj-desc {
	width: auto;
	height: auto;
	margin: auto;
	padding: 15px;
	border-radius: 15px;
	background-color: rgba(255,255,255,0.50);
	border: 1px solid #F88781;
}

h1.proj {
	background-image: linear-gradient(16deg, rgba(248,101,168) 20%, rgba(248,220,146) 100%);
	font-family: MS Gothic;
	width: auto;
	margin: auto;
}

.abt-small-box {
	width: 1000px;
	height: auto;
	border: 1px solid #B8388B;
	margin-bottom: 5px;
	padding: 10px;
	background-color: #B8388B;
}

.abt-smaller-box {
	width: auto;
	height: 300px;
	border: 1px solid #6b05b2;
	padding: 10px;
	background-color: #FEF2DA;
	margin-top: 35px;
	justify-content: center;
	overflow: auto;
	scrollbar-width: thin;
	border-radius: 15px;
}

#abtimg {
	width: 70%;
	padding: 15px;
}

h3.resource {
	font-family: Sysfont;
	font-size: 35px;
	background: linear-gradient(16deg, rgba(248,101,168) 20%, rgba(248,220,146) 100%);
}

a.resource {
	font-size: 15px;
	color: #df1678;
	font-family: "Sysfont";
	text-decoration: none;
	background: #faa571;
	border-radius: 5px;
	padding: 3px;
}

h2 {
	font-family: 'Sysfont';
}

.button-resource {
	padding: 10px;
	margin-right: 5px;
	background-color: #faa571;
	border-radius: 15px;
	box-shadow: 0px 5px #00000038;
	font-family: 'MS Gothic';
}


.gallery-flex {
	display: flex;
	margin: auto;
	max-width: 1170px;
}

.gallery-header {
	height: 150px;
	width: 900px;
	margin-bottom: 20px;
	border: 1px solid white;
	border-radius: 35px 35px 0px 0px;
	margin: auto;
	background-image: url('assets/gallery-header.png');
}

.gallery-side {
	height: auto;
	width: 200px;
	padding: 15px;
	border: 1px solid white;
	border-radius: 15px;
	margin-right: 15px;
	background-color: #FD8A85;
	
}

.gallery-main {
	height: auto;
	max-width: 850px;
	border: 1px solid #B8388B;
	border-radius: 15px;
	margin: auto;
	background-color: #FD8A85;
	padding: 15px;
}

.gallery-main-2 {
	height: auto;
	width: auto;
	background-color: #FEF2DA;
	border-radius: 15px;
	padding: 10px;
	
}

.gallery-block {
	width: auto;
	height: auto;
	background-color: rgb(95,186,217, 0.50);
	padding: 5px;
	border: 1px solid #087da9;
	border-radius: 15px;
}

.art-card {
	border: 1px solid #B8388B;
	background-color: #FFB0AE;
	height: 250px;
	width: 170px;
	padding: 10px;
	margin-right: 10px;
}

.art-card-inner {
	width: auto;
	height: 180px;
	border: 1px solid #B8388B;
	
}

.art-card-inner.twofive {
	background-image: url('gallery/2025gallery/sqanni.jpg');
	background-size: cover;
}

.art-card-inner.twofour {
	background-image: url('gallery/2024gallery/opiliu.jpg');
	background-size: cover;
}

.art-card-inner.twothree {
	background-image: url('gallery/2023gallery/starquest.jpg');
	background-size: cover;
}

.art-card-inner.twotwo {
	background-image: url('gallery/2022gallery/leavinghome.jpg');
	background-size: cover;
}

.art-card-inner.twoone {
	background-image: url('gallery/2022gallery/chaosbattle.jpg');
	background-size: cover;
}

.art-card-inner.twozero {
	background-image: url('gallery/2020gallery/bluelake.png');
	background-size: cover;
}

.art-card-inner.archive {
	background-image: url('gallery/2014gallery/asapile.png');
	background-size: cover;
}

.art-card-inner.sketchlog {
	background-image: url('gallery/2024gallery/051524.jpg');
	background-size: cover;
}

.art-card-title {
	width: auto;
	background-color: #FD8A85;
	height: auto;
	padding: 15px;
	margin-top: 10px;
	font-family: MS Gothic;
}

.gallery-nav-button {
	width: 100%;
	height: 40px;
	padding: 5px;
	border: 1px solid white;
	
}

p.gallery {
	font-family: MS Gothic;
}

/* ---------------- */
/* --- TOY BOX --- */
/* --------------- */

.tb-outer {
	padding: 10px; 
	width: 97%;
	max-height: 300px;
	border: 1px solid #3f40db;
	border-radius: 15px;
	background-color: #75c9ff;
}

.tb-inner {
	padding: 5px;
	width: 99%;
	border: 1px solid #3f40db;
	max-height: 200px;
	border-radius: 15px;
	background-color: #c6e8ed;
}

.tb-inner-side {
	width: 150px;
	border: 1px solid black;
	height: 80px;
	border-radius: 15px;
	margin-right: 10px;
	background-image: url('backgrounds/kirbystarbg7.png');
	background-repeat: repeat;
}

.tb-inner-side-2 {
	width: 90%;
	border: 1px solid #80bbe2;
	border-radius: 15px;
	padding: 10px;
	overflow: auto;
	background-color: #deebf3;
}

.splash-outer {
	border: 2px solid #B8388B;
	width: 900px;
	max-height: auto;
	margin: auto;
	padding: 15px;
	background-color: #FFB0AE;
	border-radius: 15px;
}

.splash {
	border: 1px solid #B8388B;
	width: 100%;
	height: 100%;
	background-color: #FEF2DA;
	border-radius: 15px;
}

/* ---------------- */
/* --- GAMING LOG--- */
/* --------------- */

.game-box {
	border: 1px solid white;
	padding: 15px;
	margin: auto;
	height: 800px;
	width: 650px;
	overflow: auto;
	scrollbar-width: thin;
	background-color: rgb(10,5,0,0.95);
}

h1.game {
	font-family: MS UI Gothic;
	color: white;
	background-image: linear-gradient(16deg, rgba(236,100,133) 20%, rgba(248,220,146) 100%);
}

li.game, ul.game {
	color: white;
	font-family: MS UI Gothic;
}

.game-intro-outer {
	border: 1px solid #b4074a;
	width: 95%;
	height: auto;
	padding: 15px;
	background-color: #fbc6b5;
}

.game-intro-inner {
	display: flex;
}

.game-intro-inner-left {
	border: 1px solid #b4074a;
	width: 30%;
	height: auto;
	margin-right: 10px;
	background-image: url('assets/rr.png');
	background-position: 45%;
}

.game-intro-inner-right {
	border: 1px solid #b4074a;
	width: 75%;
	height: auto;
	padding: 10px;
	background-color: black;
}

/* ---------------- */
/* --- READING LOG--- */
/* --------------- */

.read-box {
	border: 5px solid #00628A;
	border-radius: 15px;
	padding: 15px;
	width: 600px;
	height: auto;
	margin: auto;
	background-color: #C1FFE5;
}

.read-inner {
	border: 1px solid white;
	padding: 10px;
	width: auto;
	height: auto;
	background-color: white;
	border-radius: 0px 0px 20px 20px;
}

.read-header {
	height: 40px;
	width: auto;
	border: 1px solid #00628A;
	text-align: center;
	padding: 5px;
	font-size: 30px;
	font-family: 'MS Gothic';
	background-color: #00CCD5;
	border-radius: 20px 20px 0px 0px;
}

.read-enjoy {
	background-color: #83FAFF;
	padding: 2px;
	width: auto;
	margin-top: 10px;
}

.read-entry {
	border: 1px solid white;
	padding: 5px;
	width: auto;
	height: auto;
	
}

p.readlog {
	color: #197175;
	font-size: 15px;
	
}

@media only screen and (max-width: 800px) {
	.read-box, .read-inner, .read-header, .read-enjoy, .read-entry  {
		width: auto;
	}
}


#statuscafe {
    padding: .5em;
    background-color: #fee7d3;
    border: 2px solid #FD8A85;
	border-radius: 5px;
	width: auto;
}
#statuscafe-username {
    margin-bottom: .5em;
	font-family: 'Sysfont';
}
#statuscafe-content {
    margin: 0 1em 0.5em 1em;
	font-family: 'MS Gothic';
}