html * {
	box-sizing: border-box;
}
:root {
	--darken: #0003;
	--darken-soft: #0002;
	--lighten: #fff3;
	--lighten-soft: #fff1;
	--tier1-light: #eaf;
	--tier2-light: #e88;
	--tier3-light: #ea6;
	--tier4-light: #ed6;
	--tier5-light: #8e8;
	--tier6-light: #6ee;
	--tier7-light: #6ae;
	--tier8-light: #88f;
	--tier9-light: #c8c;
	--tier1-dark: #718;
	--tier2-dark: #600;
	--tier3-dark: #630;
	--tier4-dark: #760;
	--tier5-dark: #060;
	--tier6-dark: #066;
	--tier7-dark: #036;
	--tier8-dark: #006;
	--tier9-dark: #404;
	--bgcolor-light: #eee;
	--bgcolor-dark: #222;
	--textcolor-dark: #eee;
}
@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap');
@keyframes rock {
	0% {
		transform: rotate(-2deg);
	}
	50% {
		transform: rotate(2deg);
	}
	100% {
		transform: rotate(-2deg);
	}
}
body {
	font-family: "Atkinson Hyperlegible Next",system-ui,sans-serif;
	font-size: 100%;
	line-height: 135%;
	margin: 0;
	background-color: var(--bgcolor-light);
}
header {
	text-align: center;
	background-color: var(--darken);
	margin: 0;
}
main {
	padding: 0.5rem;
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-template-rows: auto;
	gap: 1rem 1rem;
	justify-items: center;
}
h1 {
	font-size: 350%;
	line-height: 125%;
	margin: 0;
	padding: 0.5rem;
}
h2 {
	font-size: 200%;
	line-height: 125%;
	background-color: var(--darken);
	margin: 0;
	padding: 1rem;
}
h3 {
	font-size: 150%;
	line-height: 150%;
	text-align: center;
}
h4 {
	font-size: 125%;
	line-height: 125%;
	text-align: center;
}
section {
	padding: 0;
	grid-column: 1 / -1;
}
section.tier-description, section.item-card {
	background-color: var(--darken-soft);
}
section>* {
	padding: 0.5rem;
	margin: 0;
}
section.tier-description {
	border: solid black 4px;
	margin: 0.5rem;
}
section.item-card {
	border: solid black 2px;
	margin: 0.5rem;
	display: inline-block;
	transition: all 0.15s ease-out;
}
section.item-card:hover {
	transform: scale(102.5%);
	background-color: var(--darken);
}
svg {
	filter: drop-shadow(0px 0px 7px #000);
	display: inline-block;
	animation: rock 10s ease-in-out;
	animation-iteration-count: infinite;
}
section.tier1 h3, section.tier1 h4{
	background-color: var(--tier1-light);
}
section.tier2 h3, section.tier2 h4{
	background-color: var(--tier2-light);
}
section.tier3 h3, section.tier3 h4{
	background-color: var(--tier3-light);
}
section.tier4 h3, section.tier4 h4{
	background-color: var(--tier4-light);
}
section.tier5 h3, section.tier5 h4{
	background-color: var(--tier5-light);
}
section.tier6 h3, section.tier6 h4{
	background-color: var(--tier6-light);
}
section.tier7 h3, section.tier7 h4{
	background-color: var(--tier7-light);
}
section.tier8 h3, section.tier8 h4{
	background-color: var(--tier8-light);
}
section.tier9 h3, section.tier9 h4{
	background-color: var(--tier9-light);
}
footer {
	margin: 0;
	padding: 0.5rem;
	background-color: var(--darken);
	text-align: center;
}
@media (min-width: 700px) {
	section.item-card {
		grid-column: span 6;
	}
}
@media (min-width: 1050px) {
	section.item-card {
		grid-column: span 4;
	}
}
@media (min-width: 1400px) {
	section.item-card {
		grid-column: span 3;
	}
}
@media (min-width: 2100px) {
	section.item-card {
		grid-column: span 2;
	}
}
@media (prefers-color-scheme: dark) {
	body {
		background-color: var(--bgcolor-dark);
		color: var(--textcolor-dark);
	}
	header {
		background-color: var(--lighten);
	}
	h2 {
		background-color: var(--lighten);
	}
	svg {
		filter: drop-shadow(0px 0px 7px #fff);
	}
	section.tier-description, section.item-card {
		background-color: var(--lighten-soft);
	}
	section.item-card:hover {
		background-color: var(--lighten);
	}
	section.tier1 h3, section.tier1 h4{
		background-color: var(--tier1-dark);
	}
	section.tier2 h3, section.tier2 h4{
		background-color: var(--tier2-dark);
	}
	section.tier3 h3, section.tier3 h4{
		background-color: var(--tier3-dark);
	}
	section.tier4 h3, section.tier4 h4{
		background-color: var(--tier4-dark);
	}
	section.tier5 h3, section.tier5 h4{
		background-color: var(--tier5-dark);
	}
	section.tier6 h3, section.tier6 h4{
		background-color: var(--tier6-dark);
	}
	section.tier7 h3, section.tier7 h4{
		background-color: var(--tier7-dark);
	}
	section.tier8 h3, section.tier8 h4{
		background-color: var(--tier8-dark);
	}
	section.tier9 h3, section.tier9 h4{
		background-color: var(--tier9-dark);
	}
	footer {
		background-color: var(--lighten);
	}
}