@font-face {
	font-family: "TeX Gyre Heroes";
	src: url("/assets/texgyreheros-regular.otf") format("opentype");
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "TeX Gyre Heroes";
	src: url("/assets/texgyreheros-italic.otf") format("opentype");
	font-weight: normal;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "TeX Gyre Heroes";
	src: url("/assets/texgyreheros-bold.otf") format("opentype");
	font-weight: bold;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "TeX Gyre Heroes";
	src: url("/assets/texgyreheros-bolditalic.otf") format("opentype");
	font-weight: bold;
	font-style: italic;
	font-display: swap;
}

:root {
	--weak: #555;
	--primary: #26e;
	--primary-light: color-mix(in srgb, var(--primary) 40%, #FFF 100%);
	--seconadry: #62e;
	--secondary-light: color-mix(in srgb, var(--seconadry) 40%, #FFF 100%);
	--tertiarty: #2Ae;
	--tertiarty-light: color-mix(in srgb, var(--tertiarty) 40%, #FFF 100%);
	/*TODO: dark mode */
}
*::selection {
	color: white;
	background-color: var(--primary);
}
body {
	font-family: "TeX Gyre Heroes", sans-serif;
	line-height: 1.5;
}
ul, ol {
	padding-left: 1em;
}
a {
	color: var(--primary);
	&:visited {
		color: var(--seconadry);
	}
	&:active {
		color: var(--tertiarty)
	}
}
a[href^="http"]::after {
	content: "";
	display: inline-block;
	width: 0.8em;
	height: 0.8em;
	margin-left: 0.25em;

	background-size: contain;
	background-image: url("/assets/navigate-external.svg");
	background-repeat: no-repeat;
	background-position: center;
	vertical-align: text-bottom;
}
hr {
	color: var(--weak);
}
img {
	border: medium solid black;
}

.wrapper-h {
	display: flex;
}
.skipnav a {
	background-color: var(--secondary-light);
	border: medium solid black;
	margin: 0.5em;
	padding: 0.1em;
	position: absolute;
	top: -50px;
	left: 0;
	-webkit-transition: top .5s ease-out;
	transition: top .5s ease-out;
	&:focus {
		top: 0;
		-webkit-transition: top .05s ease-in;
		transition: top .05s ease-in;
	}
}
.sidebar, .addressbar, .content {
	border: medium solid black;
	margin: 0.5em;
}

.sidebar {
	background-color: var(--tertiarty-light);
	border-radius: 10px 0 0 10px; /* TODO: make 3rd value (bottom-right corner) round only if content is shorter than the sidebar */
	padding: 0 1em;
	width: 20vw;
	min-width: min-content;
	max-width: max-content;
	text-wrap: nowrap;
	& img {
		width: auto;
		height: auto;
		max-width: 100%;
		max-height: 100%;
	}
	& ul {
		list-style-type: square;
	}
}
.logo {
	margin: 0.5em;
	border: none;
}
.currentPage {
	list-style-type: disclosure-closed;
	& > a {
		background-color: var(--primary);
		border: 2px solid var(--primary);
		color: #FFF;
	}
}

.addressbar {
	background-color: var(--secondary-light);
	border-top-right-radius: 10px;
	padding: 0.5em 0;
	& .seperator {
		margin: 0 0.5em;
		font-weight: bold;
	}
	& a {
		&:visited {
			color: var(--primary);
		}
		&:active {
			color: var(--tertiarty);
		}
	}
}

.content {
	background-color: var(--primary-light);
	border-bottom-right-radius: 10px;
	padding: 0 0.5em;
}

.weak {
	color: var(--weak);
	text-decoration-color:var(--weak)
	&:visited {
		color: var(--weak);
	}
}
.big-column {
	flex-grow: 1;
}