html, body {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	-ms-text-size-adjust:100%;
	-webkit-text-size-adjust:100%
}

.renderCanvas {
	touch-action: none;
	width: 100%;
	height: 100%;
}
.grid-container {
	display: grid;
	grid-template-columns: 20% 20% 20% 20% 20%;
	grid-template-rows: 20% 80%;
	width: 100vw;
	height: 100vh;
}
/* Page content */
.main {
	grid-row: 1/3;
	grid-column: 2/6;
}

/* The sidenav */
.sidenav {
	height: 100%;
	background-color: black;
	color: #03DAC6;
	grid-row: 1/3;
	grid-column: 1/2;
	display: grid;
	grid-template-rows: 15% 70% 15%;
	grid-template-columns: 100%;
}

.navtab {
	background-color: #121212;
	color: #03DAC6;
	grid-row: 1/2;
	grid-column: 1/2;
	/* there is some weird spacign in the buttons, set bg to white to see it */
}
.navtab button {
    background-color: #121212;
	color: #03DAC6;
	border: none;
	cursor: pointer;
	padding-top: 8px;
	padding-bottom: 8px;
	padding-left: 0px;
	padding-right: 0px;
	transition: 0.3s;
	width: 31%;
	
}

.navtab button:hover {
	background-color: #424242;
}

/* Create an active/current tablink class */
.navtab button.active {
	background-color: #323232;
}
.navTabContent {
	display: none;
	
}

.navTabContent.active {
	display: table-row;
}

.closeButton {
    position: absolute;
    background: #121212;
    color: blue;
	font-weight: bold;
    top: 30px;
    right: 80%;
}

.AnimationControlItem {
    background-color: #121212;
	color: #03DAC6;
	border: none;
	cursor: pointer;
	transition: 0.3s;
	width: 31%;
	display: grid-inline;
	float: left;
	text-align: center;	
}
.AnimationControlItem button{
	width: 100%;
    background-color: #121212;
	color: #03DAC6;
}

.AnimationControlPanel {
		grid-row:3/4;
		grid-column: 1/2;
}

@media (orientation: portrait) {
	.sidenav {
		grid-row: 1/2;
		grid-column: 1/6;
		display: grid;
		grid-template-columns: 20% 20% 20% 20% 20%;
		grid-template-rows: 33% 33% 33%;		
	}

	/* Page content */
	.main {
		grid-row: 2/3;
		grid-column: 1/6;
	}
	
	.navtab {
		grid-row: 1/4;
		grid-column: 1/2;
	}
	.navtab button{
		width: 100%;
		height: 33%;
		vertical-align: center;
	}
	.AnimationControlPanel {
		grid-row:1/4;
		grid-column: 5/6;
	}
	.AnimationControlItem {
		width: 100%;
		height: 33%;
	}
	.AnimationControlItem button{
		width: auto;
	}
	.navTabContent {
		grid-row: 1/4;
		grid-column: 2/5;
	}
	
	.closeButton {
		top: 0px;
		right: 20%;
	}
}