@font-face{
	font-family: "Schmale Runde";
	src:
		url("/wywiwyg/assets/fonts/schmalerunde-Regular.woff2") format("woff2");
}

@font-face{
	font-family: "Antique Serie";
	src:
		url("/wywiwyg/assets/fonts/AntiqueSerie-Regular.woff2") format("woff2");
}

@font-face{
	font-family: "Compagnon Italic";
	src:
		url("/wywiwyg/assets/fonts/Compagnon-Italic.woff2") format("woff2");
}

:root {
	--space-xs: 16px;
	--space-s: 24px;
	--space-m: 48px;
}

*, html {
	scroll-behavior: smooth;
	font-synthesis: none;
}
body {
	margin: 0;
	animation: hue-rotate 120s infinite;
}

.wrapper {
	display: grid;
	justify-content: center;
}

main {
	max-width: 940px;
	font-size: 1.6rem;
	font-family: "Antique Serie";
}

h1 {
	font-family: "Schmale Runde";
	text-align: center;
	margin: 0;
	line-height: 1;
	font-size: clamp(8rem, 25.5vw, 24rem);
	line-height: 1;
}

h2 {
	font-size: 6rem;
	font-family: "Schmale Runde";
	margin: 0;
	margin-top: 4rem;
	line-height: 0.9;
}

h3 {
	font-size: 4rem;
	font-family: "Schmale Runde";
	margin: 0;
	margin-top: 2rem;
	line-height: 1;
}

ul {
	margin: 0;
}

li {
	margin-top: 0.2rem;
}

details {
	background-color: aqua;
}

:nth-child(2n of details) {
	background-color: darksalmon;
}

:nth-child(3n of details) {
	background-color:  dodgerblue;
}

:nth-child(4n of details) {
	background-color: lightcoral;
}

:nth-child(5n of details) {
	background-color: cornflowerblue;
}

p, li {
	background-color: antiquewhite;
}

:nth-child(2n of p, li) {
	background-color: aliceblue;
}

:nth-child(3n of p, li) {
	background-color: floralwhite;
}

:nth-child(4n of p, li) {
	background-color: azure;
}

:nth-child(5n of p, li) {
	background-color: cornsilk;
}

:nth-child(6n of p, li) {
	background-color: seashell;
}

:nth-child(7n of p, li) {
	background-color: snow;
}

:nth-child(8n of p, li) {
	background-color: beige;
}

:nth-child(9n of p, li) {
	background-color: whitesmoke;
}

a {
	color: inherit;
	text-decoration-thickness: 4px;
}

code {
	font-family: "Compagnon Italic";
	border: 1px solid black;
	padding: 2px 8px 4px 8px;
	font-size: 1.4rem;
}

.post {
	h2,
	h3,
	h4,
	h5,
	h6 {
		position: relative;
	}
}

.header-anchor {
	@media screen and (min-width: 700px) {
		position: absolute;
		width: 0.8em;
	}

	text-decoration: none;
	color: coral;
}

.header-anchor__symbol {
	@media screen and (min-width: 700px) and (hover: hover) {
		visibility: hidden;

		h2:hover &,
		h3:hover &,
		h4:hover &,
		h5:hover &,
		h6:hover &,
		.header-anchor:focus & {
			visibility: visible;
		}
	}

	visibility: hidden;
}

img, video {
	width: 100%;
}


.screen-reader-only {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}


.space-s {
	padding-top: var(--space-s);
}

.space-m {
	padding-top: var(--space-m);
}

@keyframes hue-rotate {
	0% {
		filter: hue-rotate(0deg);
	}
	100% {
		filter: hue-rotate(360deg);
	}
}

nav {
	position: sticky;
	top: 24px;
}
.pages, .sessions {
	position: absolute;
	display: flex;
	flex-direction: column;
	gap: 12px;
	font-family: "Antique Serie";
}

.pages {
	left: 24px;
}

.sessions {
	right: 24px;
}