/* fonts */

@font-face {
	font-family: "main";
	src: url("assets/fonts/PixelOperator.ttf");
}
/* scrolling background n shi */
	
body {
	font-family: "main";
	color: white;
	
	background-image: url("/assets/tile_bg.png");
	animation-name: bgScroll;
	animation-duration: 2s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	image-rendering: pixelated;
	
	margin: 0;
	padding: 0;
	
	display: flex;
	flex-direction: column;
    align-items: center;
	
	cursor:
	  url("/assets/cursor/default.png") 0 0,
	  auto;
}

@keyframes bgScroll {
	0% {background-position: 0px 0px;}
	100% {background-position: 64px 64px;}
}

/* no margin/padding for text and stuff (genuinely screw default margin and padding) */

html { margin:0; padding:0;}
p,a,div,h1,h2,h3,h4,h5,h6 { margin:0; padding:0; }
	p,b,a,i,li { font-size: 20px; }

/* main (banner,navbar,content) */

a { color: white;
	text-decoration: none;
	cursor:
	  url("/assets/cursor/pointer.png") 0 0,
	  auto;
}

a:hover { font-weight: bold; }

.main { margin-top:20px; max-width: 900px; }

.banner { width:900px; height: 200px; border: 1px solid white; box-shadow: 0 0 0 1px white, inset 0 0 0 1px white; position:relative; }
.banner img {user-select:none; pointer-events:none; }

.navbar img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; user-select:none; pointer-events:none;  }
.navbar a { z-index: 3; user-select:none; }
.navbar { display: flex; flex-direction: row; justify-content: center; position: relative; }
.navbar a:not(:first-child) { margin-left: 5px; }
.navbar a:not(:last-child)::after { content: " | "; font-weight: normal !important;}

.bar a:not(:last-child)::after { content: " | "; font-weight: normal !important;}
.bar a:not(:first-child) { margin-left: 5px; }

.content { background-color: #000000; border: 2px solid white;  padding:10px; padding-top: 30px; margin-bottom: 30px; z-index: 1; box-sizing: border-box; }

.footer { margin-top: 100px; }
.footer p { color: gray; font-size: 16px; }

.footer p::after {content: "\00A9  2023-2026 StackingBooks | welcome to the revamp!";}

.timestamp { color: gray; font-size: 16px; }

.music { width:32px; height: 32px; right: 10px; bottom: 10px; position: absolute; background: url("/assets/icons/music_on.png"); }
.music.muted { background: url("/assets/icons/music_off.png"); }

button { font-family: "main"; background-color: black; color: white; border: 2px white solid; font-size: 20px; }

/* game iframe */

.gameframe { width:700px; height:540px; overflow: hidden; display: flex; justify-self: center; }

/* list/navbar markers */

.marker { display: inline-block; width:29px; height:13px; margin-right: 6px;}
.new { background-image: url("/assets/markers/new.png"); }
.upd { background-image: url("/assets/markers/upd.png"); }
.new-nav { background-image: url("/assets/markers/new2.png"); width:13px !important; }
.yt { background-image: url("/assets/markers/yt.png"); width:13px !important; }
.dc { background-image: url("/assets/markers/dc.png"); width:13px !important; }
.rd { background-image: url("/assets/markers/reddit.png"); width:13px !important; }
.tw { background-image: url("/assets/markers/tw.png"); width:13px !important; }

/* it's Me!!!!! */
.mynameyay { color: #00ffff; filter: drop-shadow(0px 0px 2px #4444dd); }