@font-face {font-family: winkle; src: url(assets/KGMissKindyChunky.ttf)}

body {
	color: #2d3151;
	font-family: winkle, sans-serif;

	/* background & overlay */
	background:
		url(assets/overlay.png) center / cover fixed,
		url(assets/background.gif) fixed #24243e;

	padding-block: 52px;
	margin: 0;

	/* vignette (in here so overscrolling doesnt fuck it up) */
	&::before {
		content: "";
		box-shadow: 0 0 600px black inset;
		position: fixed;
		inset: 0;
		z-index: -1;
	}
}
#wrapper {
	/* glow */
	filter: drop-shadow(0px 0px 10px lightblue);
	/* centering */
	> * {margin-inline: auto}
}


/* header */
header {
	background: url(assets/header.png) top / cover;
	max-width: 739px;
	aspect-ratio: 739/168;
	padding-top: 35px;
	box-sizing: border-box;
	margin-bottom: -15px;

	/* title image */
	img {
		display: block;
		margin-inline: auto;
		image-rendering: pixelated;
	}
}


/* main content */
#panel {
	max-width: 608px;
	background-color: #e4e5f9;
	padding: 0 1.625em 2em;
	border-bottom-left-radius: 48px;
	border-bottom-right-radius: 48px;
}
.box {
	padding: 5px 15px;
	border: 4px solid #a09ab3;
	border-radius: 10px;
	background: #ffffff80;
}
.section {
	border-radius: 20px;
	margin-block: 1.625em;
}
.no-box {
	text-align: center;
	margin: 1em 4em 0;
}


/* navigation & boxed links/buttons */
nav {
  font-size: 1.125em;
	text-align: center;
}
a.box {color: inherit; text-decoration: none}
:is(a.box, button.box):nth-of-type(odd):hover {background-color: #71bcfd80}
:is(a.box, button.box):nth-of-type(even):hover {background-color: #ff9fde80}


/* content */
h2 {
	font-size: 1em;
	font-weight: normal;
	text-align: center;
	border-bottom: 2px solid;
	border-image: linear-gradient(to right, transparent, #71bcfd, #ff9fde, white, #ff9fde, #71bcfd, transparent) 1;
	margin-bottom: 1.5em;
}
h3 {
  font-size: 1em;
}
p, ul {font-size: 0.875em}
li {padding-left: 0.5em; margin-left: 0; margin-block: 0.25em}
button {all: unset; margin: 0.25em; cursor: pointer}

details {margin-block: 1em}
summary {font-weight: bold}

/* footer */
footer {
	display: flex;
	justify-content: end;
	align-items: end;
	background: url(assets/footer.png);
	aspect-ratio: 1203/200;
	max-width: 1203px;
	margin-top: -115px;
	position: relative;
	left: 50px;
	pointer-events: none;

	/* penny */
	img {
		position: absolute;
		top: -130px;
		right: 230px;
	}
}