body {
	overflow: hidden;
	padding: 0px;
	margin: 0px;
}

.grid-container {
	display: grid;
	grid-template-columns: 1fr 2fr;
	grid-template-rows: 1fr 1fr 10fr 10fr;
	gap: 10px;
	width: 100vw;
	height: 100vh;
	margin: 0px;
	padding: 0px;
}

.grid-container > div, h1 {
	text-align: center;
}

/* Header */

#pagename {
	grid-column: 1;
	grid-row: 1;
	text-align: center;
}

#pagedescription {
	grid-column: 2;
	grid-row: 1;
	padding-left: 10%;
	padding-right: 10%;
}


/* Plots */

.main-plot-container{
	grid-column: 2;
	grid-row: 3 / span 2;
	border: 1px solid black;
	margin-right: 4px;
	margin-bottom: 4px;
}


.velocity{
	grid-column: 1;
	grid-row: 3;
	border: 1px solid black;
	margin-left: 4px;
}


.acceleration{
	grid-column: 1;
	grid-row: 4;
	border: 1px solid black;
	margin-left: 4px;
	margin-bottom: 4px;
}


/*buttons and more*/

.buttonArea {
	display: flex;
	justify-content: flex-end;
	grid-column: 1 / span 2;
	grid-row: 2;
}

.toggle-buttons {
	display: flex;
	justify-content: space-evenly;
	width: 70%;
}

.toggle-buttons input[type="radio"] {
	visibility: hidden;
}

.toggle-buttons label {
	border: 1px solid black;
	padding: 0.5em;
	width: 20%;
}

.toggle-buttons input:checked + label {
	background: #0da2f7;
}

input:hover + label,
input:focus + label {
	background: #EEE;
}

.buttonArea .clear-canvas{
	margin-left: 2em;
	margin-right: 2em;
}