@keyframes ripple {
	from {outline-offset: -1px; outline: 1px solid var(--color-2)}
	to {outline-offset: 16px; outline: 2px solid var(--color-1)}
}

@keyframes lap {
	from {margin: 0; padding: 32px}
	50% {margin: -4px; padding: 36px}
	to {margin: 0; padding: 32px}
}

:root {
	--color-1: #5b4ecc;
	--color-2: #82b4e6;
	--color-3: #fefff3;
	max-width: 400px;
	padding: 64px;
	margin-inline: auto;
}

body {
	color: var(--color-3);
	font-family: mspgothic;
	background-color: var(--color-1);
	border: 1px solid var(--color-2);
	border-radius: 16px;
	animation:
		ripple 2.5s linear infinite,
		lap 8s infinite;
}

h1 {
	font-size: unset;
}

a {
	text-decoration: underline;
}

audio {
	color: var(--color-2);
	background-color: var(--color-1);
	width: 100%;
	border-radius: 4px;
}

dt, dd {margin-block: 0.25em}

dt {
	font-style: italic;
	margin-top: 0.5em;
}

img {
	max-width: 64px;
	margin-inline: auto;
	image-rendering: pixelated;
}