@charset "utf-8";

:root {
	--highlight: hsl(60,89%,72%);
}
html {
	scroll-behavior: smooth;
}
body {
	font-family: "Nara 15", serif;
	display: grid;
	grid-template-columns: 100%;
	gap: 5.5555vmin;
	margin: 0 5.5555vw 11.1111vh;
	overflow-x: hidden;
}
h1 {
	font-size: 2.82714594em;
	font-size: 15.5vw;
	white-space: nowrap;
	position: relative;
	margin: -.55em 0 0 -9.4vw;
}
h2 {
	font-size: 2.82714594em;
}
h1, section {
	grid-column-start: 1;
	grid-column-end: -1;
}
section[id] {
	scroll-margin-block-start: 13em;
}
p {
	max-width: 30em;
}
h2 + p {
	margin-top: 0;
	margin-bottom: 3em;
}

a {
	color:mediumblue;
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
	text-decoration-style: double;
}
a:focus {
	outline-offset: .1em;
	outline-style: dashed;
	outline-width: 2px;
}
h1 a {
	color: black;
}
h1 a:hover {
	color: mediumblue;
}

ul {
	display: grid;
	gap: 3em;
	grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
	margin-left: 1em;
}
li {
	flex-basis: 33%;
	margin: 0;
	transition: .3s;
}
li:target {
	background: var(--highlight);
	box-shadow: 0 0 0 1em var(--highlight);
}
h3 {
	margin: 0;
	font-size: 1.666em;
}
footer {
	font-style: italic;
}
footer p {
	margin: 0;
}
footer i {
	font-style: normal;
}
li p:last-child {
	margin-bottom: 0;
}

li h3::before {
	content: '☆ ';
	font-weight: normal;
	position: absolute;
	margin-left: -1em;
	color: hsl(6, 66%,50%);
}
li:nth-of-type(2n) h3::before {
	content: '★ ';
}
li:nth-of-type(3n) h3::before {
	content: '✮ ';
}
li:nth-of-type(5n) h3::before {
	content: '☆ ';
}
li:nth-of-type(7n) h3::before {
	content: '★ ';
}
li:nth-of-type(11n) h3::before {
	content: '✮ ';
}

li:nth-last-of-type(2n) h3::before {
	filter: hue-rotate(120deg);
}
li:nth-last-of-type(3n) h3::before {
	filter: hue-rotate(240deg);
}
li:nth-last-of-type(5n) h3::before {
	filter: hue-rotate(60deg);
}
li:nth-last-of-type(7n) h3::before {
	filter: hue-rotate(300deg);
}
li:nth-last-of-type(11n) h3::before {
	filter: hue-rotate(180deg);
}

section:not(:has(ul)) {
	display: none;
}