* {
	--bg: #050505;
	--dim-bg: #444444;
	--code-bg: #222222;
	--text: #EEEEEE;
	--dim-text: #CDCDCD;
	--link: #00E800;
	--link-active: #22FF22;
	overflow-wrap: break-word;
}

@media (prefers-color-scheme: light) {
	* {
		--bg: #FAFAFA;
		--dim-bg: #D0D0D0;
		--code-bg: #E0E0E0;
		--text: #000000;
		--dim-text: #555555;
		--link: #CC6600;
		--link-active: #FF8000;
	}
}

body {
	--transition: .15s;
	background-color: var(--bg);
	color: var(--text);
	margin: 2em .5em;
	font-family: sans-serif;
}

p {
	text-align: justify;
}

@media screen and (orientation: landscape) {
	body {
		margin: 2em 20%;
	}
}

h1 {
	text-align: center;
	padding: 1em;
}

header {
	position: absolute;
	top: 0;
	left: 0;
	padding: .5rem;
	text-align: center;
	width: 100vw;
	box-sizing: border-box;
}

pre, .example, .src {
	padding: 1em;
	background-color: var(--code-bg);
	overflow-x: auto;        
}

figure > img {
	width: 100%;
}

.profilepicture {
	--width: min(40%, 10rem);
	border: 3px solid gold;
	border-radius: 50%;
	width: var(--width);
	margin: 2rem calc((100% - var(--width)) / 2) 0 calc((100% - var(--width)) / 2);
}

.pixelart {
	image-rendering: pixelated;
}

a {
	color: var(--link);
	transition: color var(--transition);
}
a:hover,a:focus {
  color: var(--link-active);
}
#skiptocontent {
	opacity: 0;
	position: absolute;
	transition: opacity var(--transition);
	top: -5em;
	left: 1em;
	
}
#skiptocontent:focus {
	top: 1em;
	opacity: 1;
}

nav.menu > a {
	display: block;
	background-color: var(--bg);
	transition: background-color var(--transition), color var(--transition);
	border: 0 solid black;
	text-decoration: none;
	padding: .3em;
}
nav.menu > a:first-child {
	border-radius: .5em .5em 0 0;
}
nav.menu > a:last-child {
	border-radius: 0 0 .5em .5em;
}
nav.menu > a:only-child {
	border-radius: .5em;
}
nav.menu > a:hover,nav.menu > a:focus {
	background-color: var(--dim-bg);
}
nav.menu > a > p:not(:first-child) {
	color: var(--dim-text);
}
nav.menu > a:hover > p:not(:first-child) {
	color: var(--text);
}
nav.menu > a > p {
	margin: 0;
	padding: .1em;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}