html {
	height: 100vh;
	scrollbar-width: none;
}

body {
	padding: 0vh;
	margin: 0vh;
	height: 500vh;
	background: #000;
	font-family: 'genos', sans-serif;
}

canvas {

	left: 50%;
	top: 50%;
	max-height: 100vh;
	max-width: 100vw;
	transform: translate(-50%, -50%);
	position: fixed;
	z-index: -1;
}

.flex-container {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items:center;
	z-index: 2;
	color: wheat;
	font-size: 2em;
	background-color: rgba(221, 160, 221, 0.538);
	position: fixed;
	width: 100%;
}

.flex-nav {
	align-items:center;
	padding-left: 2vh;
	padding-right: 2vh;
	border-bottom: black;
	border-bottom-width: 5px;
	color: wheat;
	cursor: pointer;
}
.flex-nav:hover {
	background-color: rgba(86, 27, 86, 0.538);
	
}
#downarrow {
	height: 50px;
	filter: drop-shadow(0px 0px 3px rgb(221 69 221 / 0.5));
	position: fixed;
	bottom: 2vh;
	left: 50%;
	z-index: 2;
}

#downarrow2 {
	height: 50px;
	filter: drop-shadow(0px 0px 3px rgb(221 69 221 / 0.5));
	position: fixed;
	bottom: 1vh;
	left: 50%;
	z-index: 2;
}

/* Responsive layout - makes a one column layout instead of a two-column layout */
@media (max-width: 600px) {
	body{
		height: 100vh;
	}
	canvas {
		display: none;
	}
	#downarrow {
		display: none;
	}
	#downarrow2 {
		display: none;
	}

	.flex-container {
		flex-direction: column;
		position: relative;
		margin-top: 20vh;
	}
}