:root {
	--green: #628A29;
	--black: black;
	--white: white;
}

html, body { height: 100%; width: 100%; }

body {
	margin: 0;
	font-family: Courier, monospace;
	font-weight: bold;
	text-align: center;
	background: var(--green);
	display: flex; flex-direction: column;
	
	> header {
		background: var(--white);
		padding: .25rem;
		margin-bottom: .75rem;
		h1 { font-size: 2.5rem; margin: .25em 0 0 0; line-height: 1; }
		img { max-width: min(600px,90vw); }
		p { margin: .25em 0 .5em 0; }
	}
}

main {
	flex-grow: 1;
	min-height: 0;
	overflow: scroll;
	padding-bottom: 2rem;
}

img { image-rendering: pixelated; }

/* main navigation */
nav {
	width: 100%;
	padding: 1rem .5rem;
	-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
	background: var(--white);
	color: var(--black);
	font-size: 1.5rem;
	font-weight: bold;
	display: flex;
	justify-content: center;
	gap: 1.5em;
	a {
		&:visited, &:link {
			color: inherit;
		}
		&:hover {
			color: var(--green);
		}
	}
}

/* links to characters */
#character-nav {
	a { display: inline-block; }
	img { max-width: 90vw; }
}

#shipping-nav {
	width: fit-content;
	max-width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 1rem;
	margin: 0 auto;
	img { max-width: min(5rem,20vw); }
}

/* spin on hover */
#playlists-disc img { transition: rotate 3s linear; }
#playlists-disc:hover, #playlists-disc:focus-visible { img { rotate: 360deg; } }

.text-section {
	padding: 0 1em;
	max-width: min(600px,100%);
	margin: 0 auto;
}

.text-section, .ministrife {
	h3, h4 {
		margin-bottom: 0;
		&:has(.prompt) {
			font-weight: normal;
			.prompt {
				text-decoration: underline;
				font-family: Verdana, sans-serif;
			}
			&::before {
				content: '> ';
			}
		}
	}
}