:root {
	--green: oklch(82.34% 0.1977 121.07);
	--blue: oklch(45.1% 0.2832 271.54);
	--width: 375px;
	--spacer: 3.5rem;
	--radius: 2rem;
}

* {
	box-sizing: border-box;
	text-rendering: optimizeLegibility;
}

*:focus-visible {
	outline: none;
}

::selection {
	background-color: var(--green);
	color: var(--blue);
}

html {
	font-size: 62.5%;
}

body {
	background-color: var(--blue);
	color: var(--green);
	font: 2rem/1.4 ui-sans-serif, sans-serif;
	font-weight: bold;
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	row-gap: var(--spacer);
	max-width: var(--width);
	min-width: var(--width);
	min-height: 100vh;
	padding: var(--spacer);
	margin: 0 auto;
}

h1 {
	padding-inline: 2rem;
	margin-block: 0;
}

img {
	display: block;
	max-width: 100%;
}

p {
	margin-block: 0;
}

p a {
	color: currentColor;
	text-decoration: none;
}

p a:hover {
	text-decoration: underline;
	text-decoration-style: wavy;
	text-decoration-color: currentColor;
}

ul {
	display: grid;
	row-gap: 0.5rem;
	list-style: none;
	padding-inline-start: 0;
	margin-block: 0;
}

details {
	border-top-left-radius: var(--radius);
	border-top-right-radius: var(--radius);
	overflow: hidden;
}

details ::selection {
	background-color: var(--blue);
	color: var(--green);
}

details div {
	position: relative;
	padding-inline: 2rem;
	padding-block-end: 2.5rem;
}

summary ::marker {
	display: none;
}

summary ::-webkit-details-marker {
	display: none;
}

.button {
	font-size: 1.75em;
	text-decoration: none;
	text-align: center;
	line-height: 1;
	display: block;
	padding: 2rem;
}

:is(a.button, details) {
	background-color: var(--green);
	color: var(--blue);
	outline: 0.5rem solid var(--blue);
	transition: transform 0.15s;
}

:is(a.button:hover, a.button:focus, details:has(.button:hover, .button:focus-visible)) {
	transform: scale(1.1);
	cursor: pointer;
	position: relative;
	z-index: 1;
}

li:last-child .button {
	border-bottom-left-radius: var(--radius);
	border-bottom-right-radius: var(--radius);
}

.sprite {
	display: inline;
	width: auto;
	height: 8rem;
	position: absolute;
	right: -0.5rem;
	bottom: -3rem;
	image-rendering: pixelated;
	user-select: none;
}

footer {
	text-align: center;
}