:root {
	--green: #628A29;
	--l-green: #cbdd38;
	--d-green: #4d7921;
	--black: black;
	--white: white;
}

:focus-visible { outline: 2px var(--l-green) solid; box-shadow: 0 0 0 4px var(--d-green); }

a, a:link, a:visited { color: var(--l-green); }
a:hover, a:focus-visible { color: var(--white); }

body {
	background: var(--green);
	
	> 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); max-height: 17vh; }
		p { margin: .25em 0 .5em 0; }
	}
}

/* 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);
		transition: transform .2s;
		&:hover, &:focus-visible {
			transform: scale(1.1);
		}
	}
}

#playlists-disc { display: inline-block; }
/* spin on hover */
#playlists-disc img {
	transition: transform .5s;
}
#playlists-disc { &:hover, &:focus-visible { img {
		transform: scale(1.2);
		animation: spin 4s linear infinite;
} } }
@keyframes spin{
  0%{ rotate: 0deg; }
  100%{ rotate: 360deg; }
}

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

section {
	h3, h4 {
		margin-bottom: 0;
	}
}

.prompt {
	font-weight: normal;
	.prompt {
		text-decoration: underline;
		font-family: Verdana, sans-serif;
	}
	&::before {
		content: '> ';
	}
}