/*
	1ost.dev main stylesheet
	made with love by ava1ost <3
*/

/* /\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\ */
/* general styles */

body {
	font-family: "Thryomanes", serif;
	font-size: 16px;
	image-rendering: pixelated; /* aliased backgrounds r yummy*/
	
	/* prevents extra spacing when the background is centered*/
	min-height: calc(100vh - 2rem);
	margin: 1rem;
	justify-content: center;
	
	display: grid;
	grid-template-columns: min(48rem, 100%);
	
	/* rows are calculated in head.php */
	gap: .5rem;
}
body > * { grid-column: 1; }

main {
	position: relative;

	padding: .25rem;
	padding-bottom: calc(1.75rem + 22px); /* .25rem plus 1.5rem and 22px for footer */
	align-self: stretch;
	
	border-radius: .5rem;
}
main > * { margin: .25rem; }

section	{
	padding: .25rem;
	
	border-radius: .5rem;
}
section > * {
	margin: .25rem;
	padding: .25rem;
	width: fit-content;
	
	border-radius: .25rem;
}

img { max-width: 100%; }

h2 { font-size: 1.5em; }
h3 { font-size: 1.25em; }

a {
	color: #88f;
	transition: color .5s;
}
a:hover { color: #ccf; }

/* page layout classes */
.layout-main-auto { grid-template-rows: repeat(2, max-content) auto; }
.layout-main-auto #footer {
	position: absolute;
	bottom: .5rem;
	right: 50%;
	transform: translateX(50%);
}

/* palette: #000 #888 #fff*/
.border-eb-plain {
	border: 5px solid white;
	border-radius: 16px;
	border-image: url("/images/borders/eb-plain.png") 5 / 10px repeat;
}
/* palette: #230c20 #3b2737 #a9a8f4 #cce2fd */
.border-eb-peri {
	border: 8px solid #a9a8f4;
	border-radius: 16px;
	border-image: url("/images/borders/eb-peri.png") 8 / 16px repeat;
}
/* palette: #2c0f2b #333650 #62cdbe #efe6b6 */
.border-eb-mint {
	border: 8px solid #62cdbe;
	border-radius: 16px;
	border-image: url("/images/borders/eb-mint.png") 8 / 16px repeat;
}
/* palette: #280828 #402048 #f890a8 #f8e8c8 */
.border-eb-strawberry {
	border: 8px solid #f890a8;
	border-radius: 16px;
	border-image: url("/images/borders/eb-strawberry.png") 8 / 16px repeat;
}
/* palette: #280828 #483050 #e8f858 #f8f8d0 */
.border-eb-banana {
	border: 8px solid #e8f858;
	border-radius: 16px;
	border-image: url("/images/borders/eb-banana.png") 8 / 16px repeat;
}
/* palette: #402444 #613549 #f0b97b #e0e3cc */
.border-eb-peanut {
	border: 8px solid #f0b97b;
	border-radius: 16px;
	border-image: url("/images/borders/eb-peanut.png") 8 / 16px repeat;
}

/* /\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\ */
/* specific styles */

/* dependants: navbar.php */
.rainbow-link {
	/* rainbow text for links on hover */
	color: white;
	text-decoration: none;
	transition: color .5s; /* rainbows!!! */
	
	/* colors in oklch: oklch(0.75 0.15 0), oklch(0.78 0.15 60), oklch(0.93 0.21 120), oklch(0.90 0.15 180), oklch(0.80 0.11 240), oklch(0.75 0.15 300), oklch(0.75 0.15 0) */
	background: linear-gradient(to right, #f982aa, #fc9e47, #d7fb2f, #43fee2, #78c7fd, #bd96fe, #f982aa);
	background-size: 600% 100%;
	background-clip: text;
	animation: rainbow-animation 10s linear infinite;
}
.rainbow-link:hover { color: transparent; }

@keyframes rainbow-animation {
	0% { background-position: 0 0; }
	100% { background-position: -600% 0; }
}

/* see wavy-text.css before modifying */
#aesthetic > .wavyText{
	animation-duration: 1s;
	animation-delay: calc(var(--i) * -.2s);
}

/* /\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\ */
/* php include classes */

#header {
 	white-space: nowrap;
	overflow: hidden;
	user-select: none;
}

#header-title {
	color: black;
	font-family: "ZT Bros Oskon 90s";
	font-weight: 300;
	font-smooth: always;
	-webkit-font-smoothing : auto;
	-moz-osx-font-smoothing: auto;
	font-size: 4rem;
	
	height: 5rem;
	padding-top: .25rem;
}

/* wavy-text.js custom animation ;) */
#header-title > .wavyText{
	animation-name: title;
	animation-duration: 2s;
}

@keyframes title {
	0% 		{ opacity: .50; top: -.5rem; }
	50% 	{ opacity: .75; }
	100% 	{ opacity: .50; top: .5rem; }
}

#navbar {
	color: white;
	font-family: "VCR OSD Mono";
	font-size: 21px;
	font-smooth: never; /* prevents antialiasing on pixel fonts */
	-webkit-font-smoothing : none;
	-moz-osx-font-smoothing: none;
	
	border-radius: .5rem;
	
	padding: .5rem;
	
	background-image: url("/images/backgrounds/stars1.gif");
	background-color: #000;
}

#navbar a {
	display: inline-block;
	margin: .25rem;
	
	color: white;
	filter: drop-shadow(0px 2px black) drop-shadow(2px 0px black)
    drop-shadow(0px -2px black) drop-shadow(-2px 0px black);
}
#navbar a:hover { color: transparent; }

#footer {
	font-family: "Thryomanes", serif;
	font-size: 1rem;
	place-self: end center;
	text-align:	center;
	margin-inline: auto;
}

#footer.light 				{ color: black; }
#footer.light a 			{ color: #326; }
#footer.light a:hover { color: #64d; }

#footer.dark 					{ color: white; }
#footer.dark a 				{ color: #ccf; }
#footer.dark a:hover 	{ color: #eef; }

#notice-noscript{
	position: fixed;
	top: .5rem;
	right: .5rem;
	z-index: 999;
	width: 25ch;
}

/* /\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\ */
/* mobile specific (yuck! >P<) */

/* TODO if mobile style are needed; otherwise, just leave it alone */
/* @media only screen and (max-width: 767px) { } */