@charset "UTF-8";
@font-face {
	font-family: "PopFont";
	src: local("Hachi Maru Pop"), url("HachiMaruPop-Regular.woff2") format("woff2");
	font-display: swap;
}
body {
	background: white;
	text-align: center;
}
h1, h2, h3 {
	padding: 0 1ex;
	margin: 1ex auto;
	max-width: max-content;
}
h1 {
	color: dodgerblue;
	font: bold 3em/1.8 "PopFont", sans-serif;
	text-shadow: 2px 2px 4px royalblue;
	letter-spacing: .1em;
	transform: rotate(-5deg);
}
h1::first-letter {
	border: 1px solid skyblue;
	border-radius: 36px;
	padding: 0 .12em;
}
h2, h3 {
	border-radius: 18px;
	color: white;
	text-shadow: 2px 2px mediumorchid;
}
h2 {
	background: royalblue;

}
h3 {
	background: lightcoral;
}
h1 + p {
	margin: 0 auto;
}
ul {
	list-style: "🐰" inside;
	padding: 0;
}
section {
	border: 2px solid lightsteelblue;
	border-radius: 12px;
	margin: 1em auto;
	max-width: max-content;
	padding: 0 1em;
	background: transparent;
}
section ul li {
	list-style-position: outside;
	margin: 0 0 0 1em;
	text-align: justify;
}
nav {
	border: 2px solid orange;
	border-radius: 12px;
	max-width: max-content;
	margin: 0 auto;
	padding: 0 1em;
	background: ivory;
}
nav ul {
	display: inline-flex;	
	margin-top: 0;
}
nav ul li {
	border: 2px outset silver;
	border-radius: 6px;
	padding: 0 .4em;
	margin: 0 .2em;
}
nav ul li:hover {
	transition-property: background;
	transition-duration: 200ms;
	background: aliceblue;
}
nav ul li:active {
	border: 1px groove gray;
}
nav ul li a {
	text-decoration: none;
}
@media (prefers-color-scheme: dark) {
body {
	background: black;
	color: azure;
}
h1 {
	color: cornflowerblue;
	text-shadow: 2px 2px 4px dodgerblue;
}
h2 {
	background: steelblue;
}
h3 {
	background: indianred;
}
section {
	background: darkslategray;
	border-color: lightslategray;
}
nav {
	background: darkslategray;
	border-color: chocolate;
}
nav ul li {
	background: darkslategray;
	border-color: cadetblue;
}
a:link {
	color: lightskyblue;
}
a:visited {
	color: hotpink;
}
a:hover {
	color: lightsalmon;
}
a:active {
	color: lightcoral;
}
}