@font-face {
	font-family: "Onli";
	src: url("Fonts/Onli/OnliLight.ttf") format("truetype"), ;
}

@font-face {
	font-family: "OffbitTrial-Bold";
	src: url("Fonts/offbit-trial/OffBitTrial-Bold.otf") format("opentype");
}

@font-face {
	font-family: "NDS-Bios";
	src: url("Fonts/nds-bios.ttf") format("truetype");
}

@font-face {
	font-family: "basiic";
	src: url("Fonts/basiic.ttf") format("truetype");
}

body {
	cursor: url(img/misc/cursor.gif);
	background-image: url("img/misc/grid2.jpg");
	background-repeat: repeat;
	margin: 0 auto;
	width: 1200px;
	height: 1080px;
	display: grid;
	grid-gap: 10px;
	overflow-x: hidden;
	grid-template: "header header rightSidebar"
		"leftSidebar main rightSidebar"
		"footer footer footer" / 1fr 2fr 1fr;

}

#statuscafe {
    padding: .25em;
    background-color: transparent;
	overflow-y: scroll;
	height: 50px;
}
#statuscafe-username {
    margin-bottom: .5em;
}

#statuscafe-username:hover {
    cursor: url(img/misc/cursorpoint.gif);
}

#statuscafe-content {
    margin: 0 1em 0.5em 1em;
	color: black;
}

.myfont {
	font-family: "NDS-Bios";
	font-size: 16px;
}

#chattable {
	position: relative;
	width: 260px;
	height: 400px;
	margin-left: -13px;
	margin-top: 20px;
	z-index: 4;
}

.layout {
	display: grid;
	grid-gap: 10px;
	grid-template: "header header rightSidebar"
		"leftSidebar main rightSidebar"
		"footer footer footer" / auto;


}

main {
	grid-area: main;
}

.content {
	max-height: 70px;
	cursor: url(img/misc/cursor.gif), auto !important;
}

#content {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(3, 1fr);
	gap: 20px;

	width: 100%;

}

#abouttxt {
	margin-left: 205px;

}


aside {
	grid-area: aside;
	border: var(--border);
	border-radius: var(--round-borders);
	overflow: hidden;
	background: var(--sidebar-background-color);
	padding: var(--padding);
	color: var(--sidebar-text-color);
}

header {
	grid-area: header;
	height: 150px;
	margin-top: 80px;
}

.character {
	position: relative;
	top: -270px;
	left: 500px;
	height: 300px;
}

.headergif {
	width: 580px;
}

.left {
	grid-area: leftSidebar;
	width: 280px;
	height: 900px;
	max-height: 900px;
	overflow: hidden;
}

.right {
	grid-area: rightSidebar;
	margin-top: 80px;
	width: 275px;
}


.site-title {
	letter-spacing: 3px;
	font-size: 60px;
	font-family: "OffbitTrial-Bold", sans-serif;
	font-weight: bold;
	text-decoration: none;
}

.site-subtitle {
	align-self: flex-end;
	letter-spacing: 3px;
	font-size: 20px;
	font-family: "NDS-Bios", sans-serif;
}


.nav {
	margin-top: 90px;
	border-width: 0px;
}


.l {
	font-size: 25px;
	padding-bottom: 3px;
	margin-bottom: 3px;
	list-style-type: none;

}

.l:hover {
	padding-left: 10px;

}

.l img:hover {
	background-image: url;
}

#welcome {
	grid-column: span 3 / span 3;
}

#about {
	grid-column: span 3 / span 3;
	grid-row-start: 2;
}

#notice {
	grid-row-start: 3;
	position: relative;
	top: -242px;
	left: 20px;
}

#blinkies {
	grid-column: span 2 / span 2;
	grid-row-start: 3;
	height: 150px;
}

/* [1] The container */
.img-hover-zoom {
	height: auto;
	overflow: visible;
	/* [1.2] Hide the overflowing of child elements */
}

/* [2] Transition property for smooth transformation of images */
.img-hover-zoom img {

	transition: transform .5s ease;
}

#cats img {
	width: 180px;
}

/* [3] Finally, transforming the image when container gets hovered */
.img-hover-zoom:hover img {
	transform: scale(1.15);
}


.blinking-text {
	font-size: 16px;
	text-align: center;
	color: rgb(234, 117, 96);
	animation: blinker 2s linear infinite;
	/* Apply the animation */
}

@keyframes blinker {
	50% {
		opacity: 0;
		/* Make the text invisible at 50% of the animation */
	}
}

th {
	background-color: #9ec89f;
	margin: 20px 0px;
}

td,
th {
	border: 1px solid #ddd;
	padding: 8px;
}


/*----- variables -----*/

:root {
	/*-- page background --*/
	--unit: 80px;
	/* changes how big the boxes in the background appear */
	--page-background: white;
	--grid-color: #ddd;
	--scan-color: #eee;

	/*-- sizing stuff --*/
	--p: 4;
	/* pixel multiplier. needs to be a unitless integer. */
	--pixel: calc(var(--p) * 1px);
	/* don't change this */
	--s: calc(var(--pixel) * 3);
	/* size of the cut. you can change the number on the right of the asterisk for a deeper or shallower cut */
	--wrapper-width: 90%;
	/* changes the width of the boxes. i recommend keeping the unit as %, vw, or dvw so the boxes scale relative to the page size. this will make your page mobile responsive out of the box. */
	--wrapper-max-width: 68em;
	/* changes the maximum width of the boxes. makes it easier to read on desktop. */

	/*-- colors --*/
	--box-text: black;
	--box-background: white;
	--box-border: rgb(249, 108, 177);

	/* "date" refers to the upper left hand section, where the username would be in the original pictochat. */
	--date-text: var(--box-border);
	--date-background: rgb(249, 108, 177, 0.3);

	--link: var(--box-border);
	--link-hover: rgb(93, 139, 227);

	/*-- dark mode --*/
	--page-background-dark: rgb(19, 19, 19);
	--grid-color-dark: #161616;
	--scan-color-dark: #3b3b3b;

	--box-text-dark: #ddd;
	--box-background-dark: rgb(34, 34, 34);
	--box-border-dark: var(--box-border);

	--date-text-dark: var(--box-border-dark);
	--date-background-dark: var(--date-background);

	--link-dark: var(--box-border-dark);
	--link-hover-dark: var(--link-hover);
}

/*----- fonts -----*/

@font-face {
	font-family: "NDS BIOS";
	src: url("https://files.catbox.moe/ipi8ww.woff") format("woff");
	font-weight: normal;
	font-style: normal;
}

/*----- body -----*/

* {
	cursor: url(stylus.gif) 0 32, auto;
	-webkit-font-smoothing: subpixel-antialiased;
}

::-webkit-scrollbar {
	display: none;
}


a {
	text-decoration: none;
	color: var(--link);
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

a:hover {
	color: var(--link-hover);
}


/*----- wrapper for the messages -----*/

#wrapper {
	width: var(--wrapper-width);
	max-width: var(--wrapper-max-width);
	margin: 0 auto;
	position: relative;
}

/*----- styling for each box -----*/

.box {
	box-sizing: border-box;
	font-family: "NDS BIOS", Arial, sans-serif;
	font-size: calc(var(--pixel) * 16);
	position: relative;
	margin: calc(var(--pixel) * 16) 0;
	background-color: var(--box-background);
	color: var(--box-text);
	clip-path: polygon(var(--s) 0%,
			calc(100% - var(--s)) 0%,
			100% var(--s), 100% calc(100% - var(--s)),
			calc(100% - var(--s)) 100%,
			var(--s) 100%,
			0% calc(100% - var(--s)),
			0% var(--s));
}

.box:before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(45deg, var(--box-border), var(--box-border));
	--g1: #000 var(--pixel), #0000 0 calc(100% - var(--pixel)), #000 0;
	--g2: #0000 calc(0.707*var(--s)),
		#000 0 calc(0.707*var(--s) + var(--pixel)),
		#0000 0 calc(100% - 0.707*var(--s) - var(--pixel)),
		#000 0 calc(100% - 0.707*var(--s)),
		#0000 0;
	-webkit-mask:
		linear-gradient(45deg, var(--g2)),
		linear-gradient(-45deg, var(--g2)),
		linear-gradient(90deg, var(--g1)) 50%/100% calc(100% - 2*var(--s)) no-repeat,
		linear-gradient(180deg, var(--g1)) 50%/calc(100% - 2*var(--s)) 100% no-repeat;
	mask:
		linear-gradient(45deg, var(--g2)),
		linear-gradient(-45deg, var(--g2)),
		linear-gradient(90deg, var(--g1)) 50%/100% calc(100% - 2*var(--s)) no-repeat,
		linear-gradient(180deg, var(--g1)) 50%/calc(100% - 2*var(--s)) 100% no-repeat;
}

/*----- date/username/text in the upper left styling -----*/

.date {
	float: left;
	position: relative;
	z-index: -2;
	padding: calc(var(--pixel) * 0) calc(var(--pixel) * 4);
	color: var(--date-text);
	background: var(--date-background);
	clip-path: polygon(var(--s) 0, 100% 0, 100% calc(100% - var(--s)), calc(100% - var(--s)) 100%, 0 100%, 0 var(--s));
	margin-right: calc(var(--pixel) * 3);
	line-height: calc(var(--pixel) * 18);
	margin-top: calc(var(--pixel) * -1);
	box-sizing: border-box;
}

.date:before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(45deg, var(--box-border), var(--box-border));
	--g3: #0000 0 calc(100% - var(--pixel)), #000 0;
	--g4: #0000 calc(0.707*var(--s)),
		#000 0 calc(0.707*var(--s) + var(--pixel)),
		#0000 0 calc(100% - 0.707*var(--s) - var(--pixel)),
		#0000 0;
	-webkit-mask:
		linear-gradient(-45deg, var(--g4)),
		linear-gradient(90deg, var(--g3)) 100% calc(100% - var(--s)) no-repeat,
		linear-gradient(180deg, var(--g3)) calc(100% - var(--s)) 100% no-repeat;
	mask:
		linear-gradient(-45deg, var(--g4)),
		linear-gradient(90deg, var(--g3)) 100% calc(100% - var(--s)) no-repeat,
		linear-gradient(180deg, var(--g3)) calc(100% - var(--s)) 100% no-repeat;
}

/*----- styling for the message inside the box -----*/

.message {
	padding: calc(var(--pixel) * 0) calc(var(--pixel) * 4) calc(var(--pixel) * 0) calc(var(--pixel) * 4);
	line-height: calc(var(--pixel) * 18);
}

/*----- unique styles. add these classes to divs with the class "box" -----*/

.onepx {
	--pixel: 1px;
	--s: calc(var(--pixel) * 3);
	width: 200px;
	margin: 0 auto;
}

.blue {
	--date-text: rgb(93, 139, 227);
	--date-background: rgb(93, 139, 227, 0.3);
	--box-border: rgb(93, 139, 227);
	--link-hover: rgb(249, 108, 177);

	--box-border-dark: var(--box-border);

	--date-text-dark: var(--box-border-dark);
	--date-background-dark: var(--date-background);

	--link-dark: var(--box-border-dark);
	--link-hover-dark: var(--link-hover);
}

.twitch:hover {
	color: #328c13;
	cursor: url(img/misc/cursorpoint.gif), auto;
}

#a:hover {
	cursor: url(img/misc/cursorpoint.gif), auto;
}

.iframe-container {
	position: relative;
	overflow: hidden;
	/* Calculate padding-top for desired aspect ratio (e.g., 16:9) */
}

.iframe-container iframe {
	position: relative;
	overflow: hidden;
	margin-top: 20px;
	margin-left: -10px;
	width: 275px;
	height: 381px;

}

iframe::-webkit-scrollbar {
	display: none;
}

iframe {
	scrollbar-width: none;
	/* Firefox */
}

/* Can be whatever you want */
:root {
  --pink: #ffc8ea;
  --blue: #3d03fc;
}


/* Preloader */
#preloader {
  background: #000
    url("img/graphics/windows-7-boot-animation-win7.gif")
    no-repeat center;
  align-items: center;
  justify-content: center;
  width: 100%;
  display: flex;
  position: fixed;
  height: 100vh;
  left: 0;
  top: 0;
  z-index: 9999;
}


.wave-text span {
    display: inline-block;
    font-size: 4rem;
    animation: wave 2s ease-in-out infinite;
}

.wave-text span:nth-child(1) {
    animation-delay: 0s;
}
.wave-text span:nth-child(2) {
    animation-delay: 0.2s;
}
.wave-text span:nth-child(3) {
    animation-delay: 0.4s;
}
.wave-text span:nth-child(4) {
    animation-delay: 0.6s;
}

@keyframes wave {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px);
    }
}