:root {
	--line-height: 1.2;
	--font-size: clamp(1.5rem, 0.786rem + 1.905vw, 2.5rem);
	--icon-size: calc(var(--font-size)*var(--line-height));
	--spacing: 1rem;
	--no-spacing: 0;
	--underline-height: 2px;
}
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: monospace, monospace;
	color: white;
	scroll-behavior: smooth;
}
.underline::after {
	content: "";
	display: block;
	width: 100%;
	height: var(--underline-height);
	background-color: white;
}
.underline-hover::after {
	scale: 0;
	transition: scale 300ms ease-in-out;
}
.underline-hover:hover::after {
	scale: 1;
}
.icon-menu {left: 0;}
.icon-menu-close {left: -100%;}
.icon-home {left: -200%;}
.icon-compsci {left: -300%;}
.icon-camera {left: -400%;}
.icon-mushroom {left: -500%;}
.icon-github {left: -600%;}
.icon-linkedin {left: -700%;}
picture.icon {
	display: block;
	width: var(--icon-size);
	height: var(--icon-size);
	overflow: hidden;
}
picture.icon > img {
	display: inherit;
	position: relative;
	width: 800%;
	height: 100%;

	/* For img alt attribute. */
	text-transform: uppercase;
	font-size: var(--font-size);
	line-height: var(--line-height);
}
.clearfix::after {
	content: "";
	display: block;
	height: 0;
	clear: both;
}
a {
	text-decoration: none;
}
input {
	display: none;
	height: 0;
}
iframe.footer-frame {
	display: block;
	border: none;
	width: 100%;
	z-index: -1;
	/* Total size of all elements. */
	height: calc(var(--spacing)*3 + var(--icon-size) + var(--font-size)*var(--line-height)/2);
}