@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap');
@import url('https://dl.dropbox.com/scl/fi/bqitfm4rr6tfgt3ea2jrq/Spirit.ttf?rlkey=r8hrj9c01d3cmv2iqt3vxm9tp&dl=0');
@import url('https://files.catbox.moe/jtvuhg.ttf');
body {
	font-family: Courier, sans-serif;
	font-size: 13px;
	margin: 0;
	padding: 6px;
	color: #940054;
	background-image: url('https://files.catbox.moe/kggo18.png');
	margin-top: 0px;
	margin-bottom: 30px;
	/* REMOVED: height: 1400px; <- this forced all pages to be tall */
}

/* ensure pages loaded into the iframe don't have the default browser body margin */
body.page {
  margin: 0;
  padding: 12px; /* optional spacing inside iframe pages */
}

@font-face {
   font-family: 'Spirit';
   src: url('https://dl.dropbox.com/scl/fi/bqitfm4rr6tfgt3ea2jrq/Spirit.ttf?rlkey=r8hrj9c01d3cmv2iqt3vxm9tp&dl=0') format('truetype');
   font-weight: normal;
   font-style: normal;
  }
.site-title {
    font-family: 'Spirit', cursive, sans-serif;
  }
      
.page { /* inside background */
	background-color: #fff;
	overflow: hidden;
}

.outer { /* non containers, just the whole thing */
	width: 900px;
	height: 850px;
	padding: 15px;
  border: 15px solid transparent;
  border-image: url('https://files.catbox.moe/tb0lcu.png') 7 fill round;
	background-color: #FDEFCF;
	margin: auto;
	background-image: url('https://files.catbox.moe/n86mmb.png');
  background-size: 3%;
  background-position: center;
  background-repeat: repeat;
	border-radius: 30px;
}

.title { /* top title image */
	border: 3px solid white;
	display: inline-block;
	vertical-align: top;
	width: 890px;
	height: 200px;
	margin-bottom: 6px;
	background-image: url('https://files.catbox.moe/tde1li.gif');
}

.site-title { /* ^ it's text */
	font-family: 'Fredoka One', sans-serif;
	font-size: 110px;
	text-align: center;
	padding-left: 350px;
	padding-top: 20px;
	box-sizing: border-box;
	transform: rotate(5deg);
	background: -webkit-linear-gradient(#940054, #F6A1B6);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	-webkit-text-stroke-width: 2px;
	-webkit-text-stroke-color: white;
	letter-spacing: 5px;
	animation: floatTitle 2s ease-in-out infinite;
}

@keyframes floatTitle {
	0% { transform: rotate(5deg) translateY(0); }
	50% { transform: rotate(4deg) translateY(-15px); }
	100% { transform: rotate(5deg) translateY(0); }
}

.sidebanner { /* the directory banner */
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 60px;
	background-image: url('https://files.catbox.moe/odu24b.gif');
	background-size: 100% 100%;
	background-position: left center;
	background-repeat: no-repeat;
	border-top-left-radius: 7px;
	border-top-right-radius: 7px;
	overflow: auto;
	margin-top: -24px;
	margin-bottom: 5px;
	clip-path: inset(0 0 0 0);
	position: relative;
	left: 0px;
	font-family: 'Fredoka One', cursive, sans-serif;
	font-size: 30px;
	color: #940054;
	text-align: center;
}

.marquee {
	overflow: hidden;
	display: flex;
	line-height: 20px;
}

.left {
	display: inline-block;
	vertical-align: top;
	width: 185px;
}

.menu {
  border: 3px solid #fff;
	display: inline-block;
	vertical-align: top;
	padding-top: 24px;
	padding-bottom: 0px;
	box-sizing: border-box;
  background-position: center;
  background-repeat: no-repeat;
	background-color: #fff;
  border-radius: 5px;
	width: 185px;
}


.small {
	display: inline-block;
	vertical-align: top;
	box-sizing: border-box;
}

.main {
  display: inline-block;
  vertical-align: top;
  width: 700px;
  height: 640px;         /* visible viewport is 640px */
  overflow-y: auto;      /* scroll when iframe is taller */
  overflow-x: hidden;
}

.main iframe {
  width: 100%;
  min-height: 640px;
  border: 3px solid white;
  display: block;
}

.right {
	width: 186px;
	display: inline-block;
	vertical-align: top;
}

.menu a {
	height: 27px;
	line-height: 25px;
	width: 100%;
	display: inline-block;
	color: inherit;
	text-decoration: none;
	background: linear-gradient(to bottom, #fff 70%, #f9e1e1 100%);
	text-align: left;
	position: relative;
	font-family: 'Spirit', cursive, sans-serif;
	font-size: 13px;
	border: 1px solid #FFBCBF;
	border-radius: 2px;
	box-sizing: border-box;
	padding-left: 35px;
	margin-top: 0px;
	margin-bottom: 1px;
}

.menu a:before { /* THE icon PART OF THE MENU */
	content: "";
	display: inline-block;
	vertical-align: middle;
	height: 17px;
	width: 17px;
	background: transparent url('https://files.catbox.moe/j5c29r.gif') center/contain no-repeat;
	position: absolute;
	left: 7px;
	top: 4px;
}

/* alt icon for even menu items */
.menu a:nth-child(even):before {
	background-image: url('https://files.catbox.moe/3eq7tb.gif');
}


img {
	max-width: 100%;
}

h1 {
	background: #FFBCBF;
	color: #FDEFCF;
	font-size: 15px;
	font-weight: normal;
	letter-spacing: 1px;
	margin-top: 0px;
	margin-bottom: 0px;
	padding-left: 10px;
	font-family: 'Fredoka One';
}

h2 {
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 2px;
	padding: 3px;
}

.width-50 {
	width: 50%;
}

th, td {
	padding: 6px 12px;
    vertical-align: top;
}

th {
	background: #FFBCBF;
	color: #FDEFCF;
}

a:link {
  color: #F599B4;
}

a:visited {
  color: #F599B4
}

a:hover {
  color: #940054;
	font-style: italic;
}

a:active {
  color: #940054;
}

a:focus {
  color: #940054;
}

/* Custom Scrollbar Styles */
::-webkit-scrollbar {
	width: 12px;
	background: #feefd0;
}

::-webkit-scrollbar-thumb {
	background: linear-gradient(to bottom, #F599B4 70%, #FFBCBF 100%);
	border-radius: 6px;
	border: 2px solid #feefd0;
}

::-webkit-scrollbar-thumb:hover {
	background: #940054;
}

::-webkit-scrollbar-track {
	background: #fff;
	border-radius: 6px;
}

/* Firefox */
* {
	scrollbar-width: thin;
	scrollbar-color: #F599B4 #fff;
}

#statuscafe {
    padding: .5em;
    background-color: transparent;
		border-radius: 40px;
		border: 13px solid transparent;
		width: 200px;
		position: absolute;
		top: 20px;
		left: 20px;
		background-image: url('https://files.catbox.moe/u9whpa.png');
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center;
		height: 165px;
}
#statuscafe-username {
	position: absolute;
	left: 0;
	top: 50px;
	left: -15px;
	width: 100%;
	text-align: center;
	font-size: 10px;
}
#statuscafe-content {
	margin-top: 60px;
	font-style: italic;
}

/* Home-exclusive */
.updates-container {
	margin-top: 10px;
  display: flex;
  gap: 20px;
  justify-content: center;
	border: 10px solid transparent;
	background: transparent;
	height: 321px;
}

.updates {
  flex: 1;
  min-width: 200px;
	border: 12px solid transparent;
	background: transparent;
  border-image: url('https://files.catbox.moe/tb0lcu.png') 7 fill round;
  border-radius: 10px;
  padding: 10px;
	overflow-y: scroll;
}

/* About-exclusive */
          .characters-list {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            justify-content: flex-start;
            padding: 0;
            margin: 0;
          }
          .characters-list figure {
            text-align: center;
            margin: 0;
            padding: 0;
            width: 110px;
          }
          .characters-list img {
            width: 100px;
            height: auto;
            border-radius: 8px;
						border: 3px dashed #febcbe;
					  transition: transform 0.2s ease-in-out;
          }
          .characters-list figcaption {
            font-size: 0.95em;
            margin-top: 4px;
          }
					.characters-list img:hover {
						transform: scale(1.05); rotate: 2deg;
					}