style.css

html, body {
	margin: 0;
	padding: 0;
	overflow : hidden;
	background-color : #121212;
	font-size: clamp(12px, 10.6px + 0.3846vw, 18px);
}

canvas {
	display: block;
}
a {
	text-decoration: none;
}	

#bg {
	height : 100vh;
	display: flex;
	background-color : #121212;
	justify-content: center;
	align-items: center;
	z-index: -1;
}

#bgsketch {
	z-index: 1;
	position:fixed;
	transition: opacity 1s ease-in;
	visibility: hidden; 
	opacity: 0;
}	

#sketch {
	z-index: 2;
	box-shadow: 0em 0em 1em 0.2em #060606;
}	

#bgsketch.show{
	visibility: visible; 
	opacity: 1;
}	

.sidenav {
	position : fixed;
	z-index: 10;
}

.sidenav button {
	font-size : 1rem;
	display : block;
	cursor: pointer;
	margin : 0.3em 0.3em 0.3em 0em;
	border: 0;
	color: #2AA198;
	background-color: #212121;
	font-family: 'Inconsolata', monospace;
	box-shadow: 0.1em 0.2em 0.2em black;
	transition: all 0.1s linear;

}

.sidenav button:hover {
	transform: scale(1.05);
	transition: all 0.1s linear;
}	

.header {
	margin-bottom : 5vh;
	align-items: center;
}	
.mainheader button {
	font-size: 2.5rem;	
	color: #268BD2;
	margin-bottom: 0px;
	box-shadow: 0.1em 0.1em 0.2em black;
}	
.subheader {
	display: flex;
	align-items: center;
}	

.subheader button {
	color: #268BD2;
}
.subheader a {
	/*padding: calc(1px + 0.134rem) 3px;*/
	padding: 0.2em 0.3em;
	background-color: #212121;
	box-shadow: 0.1em 0.2em 0.2em black;
	margin : 0.3em 0.3em 0.3em 0em;
	transition: all 0.1s linear;
}	
.subheader a:hover {
	transform: scale(1.25);
	transition: all 0.1s linear;
}	
.subheader img {
	/*padding: 2px;*/
	display: block;
	height: 1em;
	vertical-align: baseline;
}	
button.blue {
	color: #268BD2;
}	

#dropdown {
	position: relative;
	overflow-y: auto;
}

.li {
	font-size: 0.8rem;
	color: #93A1A1;
} 

.open {
	transition : transform 0.5s ease-in-out;
}	
.closed {
	transform : translateX(-50vw);
	transition : transform 0.5s ease-in-out;
}	

::-webkit-scrollbar {
	display: none;
}