@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;
	line-height: 1.8; /*
	width: 384px;
	margin: 0 auto;
	padding: .5em;
	max-width: fit-content; */
}
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: 2px 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;
}
section {
	border: 6px ridge gainsboro;
	border-radius: 10px;
	margin: 1em auto;
	max-width: max-content;
	padding: 0 1em;
	background: linear-gradient(aliceblue, white);
}
ul {
	padding: 0 0 0 1em;
}
ul li {
	list-style-position: outside;
	margin: 0;
	text-align: justify;
}
ruby {
	line-height: 1em;
}
details p {
	font-size: 1.2em;
	border: 2px outset gainsboro;
	border-radius: 12px;
	max-width: max-content;
	margin: 0 auto;
	padding: .5em;
	background: transparent;
}

@media (prefers-color-scheme: dark) {
body {
	background: black;
	color: gainsboro;
}
section {
	background: linear-gradient(mediumblue, navy, black);
}
details p {
	border: 2px outset mediumblue;
}
}