@font-face {
	font-family: "Atkinson Hyperlegible";
	src:
		/*url("/assets/atkinson_hyperlegible/web/WOFF2/Atkinson-Hyperlegible-Regular-102a.woff2") format("woff2"),*/
		url("/fonts/Atkinson-Hyperlegible-Regular-102.woff") format("woff");
	font-weight: normal;
}
@font-face {
	font-family: "Atkinson Hyperlegible";
	src:
		/*url("/assets/atkinson_hyperlegible/web/WOFF2/Atkinson-Hyperlegible-Bold-102a.woff2") format("woff2"),*/
		url("/fonts/Atkinson-Hyperlegible-Bold-102.woff") format("woff");
	font-weight: bold;
}

:root { background: black; color: white; font-family: "Atkinson Hyperlegible"; height: 100%; }
body  { padding: unset; margin: unset; align-content: center; width: 100%; height: 100%; }

/*.page { max-width: 46rem; box-shadow: 0 0 6rem oklch(1 0 0 / 0.1); height: calc(100% - 1rem); padding: 1rem; padding-bottom: 0; margin: 0 auto; }*/
.page { max-width: 46rem; height: calc(100% - 1rem); padding: 1rem; padding-bottom: 0; margin: 0; }

.page_title   { font-weight: bold; font-size: larger; }
.navbar_entry { font-weight: bold; font-size: medium; }
.navbar       { display: flex; gap: 1rem; height: fit-content; align-self: center }

.navbar_entry.selected { animation: 250ms ease-in reverse forwards picked_move }

@keyframes picked_move {
	0% {
		transform: translateY(0);
	}
	100% {
		transform: translateY(0.2rem);
	}
}

a       { color: oklch(0.6751 0.1586 146.88) }
a:hover { color: oklch(0.5742 0.1    146.88) }