:root {
	--base03: 	#002b36;
	--base02: 	#073642;
	--base01: 	#586e75;
	--base00: 	#657b83;
	--base0: 	#839496;
	--base1: 	#93a1a1;
	--base2: 	#eee8d5;
	--base3: 	#fdf6e3;

	--yellow: 	#b58900;
	--orange:	#cb4b16;
	--red:		#dc322f;
	--magenta:	#d33682;
	--violet:	#6c71c4;
	--blue:		#268bd2;
	--cyan:		#2aa198;
	--green:	#859900;

	--bg0: var(--base3);
	--bg1: var(--base2);

	--content-primary: var(--base00);
	--content-secondary: var(--base1);
	--content-emphasize: var(--base01);
}

.dark {
	--bg0: var(--base03);
	--bg1: var(--base02);

	--content-primary: var(--base0);
	--content-secondary: var(--base01);
	--content-emphasize: var(--base1);
}

html, body {
	margin: 0;
	padding: 0;
	background-color: var(--bg0);
	color: var(--content-primary);
	height: 100%;
}

header {
	display: flex;
	position: fixed;
	width: 100%;
}

header a {
	padding: 0.7em;
	color: inherit;
	flex-grow: 1;
	text-align: center;
	text-decoration: none;
}

header :not(.current) {
	background-color: var(--bg1);
	transition: all 250ms ease-in-out
}

header .current {
	background-color: var(--bg0);
}

header :not(.current):hover {
	background-color: var(--content-secondary);
	color: var(--bg0);
}


main {
	padding-top: 2.4rem;
	display: flex;
	flex-basis: content;
}

main > * {
	border: solid 1pt var(--bg1);
	margin: 1rem 0 1rem 1rem;
	height: fit-content;
	padding: 0.5rem;
	text-align: justify;
}

main > * div {
	margin: 0;
	padding: 0.5rem;
}

main > * h1 {
	text-align: center;
	color: var(--orange);
}

main > * h2 {
	text-align: center;
	color: var(--blue)
}

main > div h3 {
	text-align: center;
}

main > div {
	margin: 1rem;
	width: 100%;
}

main > aside {
	width: 24%;
	min-width: 8rem;
	max-width: 20rem;
	overflow-y: scroll;
	right: 0.4rem;
	height: calc(100vh - 7.4rem);
	position: -webkit-sticky; /* Safari */
	position: sticky;
	top: 3.4rem;
}

main img {
	height: fit-content;
	width: 90%;
	margin: 0 5%;
	overflow: hidden;
}

.termin img {
	max-height: 20rem;
	max-width: 20rem;
	align-self: center;
	margin: 1rem;
}

.termin {
	height: fit-content;
	display: flex;
	justify-content: stretch;
	margin-left: 5%;
	margin-right: 5%;
	justify-self: center;
}

.termin-content {
	max-width: 80%;
	text-align: justify;
	flex-grow: 1;
}

.termin-content h2, .termin-content h3{
	text-align: left;
}

h3 {
	text-align: left;
}


footer {
	border-top: solid 1pt var(--content-secondary);
	padding: 0.5em;
	width: 100%;
	background-color: var(--bg1);
	position:fixed;
	bottom: 0;
}

@media screen and (max-width: 660px){
	.termin {
		flex-direction: column;
	}
	.termin :not(img){
		order: 0;
	}
	.termin img {
		order: 1;
	}
	.termin-content {
		max-width: 100%;
	}

	aside {
		display: none;
	}
}