* {
	box-sizing: border-box;
}

.mobileOnly {
	display: none;
	visibility: hidden;
}

#container {
	max-width: 900px;
	margin: auto;
}

#main {
	display: flex;
}

#left {
	margin-right: 0.125vw;
	order: 1;
}

#right {
	margin-left: 0.125vw;
	order: 2;
}

#navbar ul {
	list-style-type: none;
	padding: 0;
	text-align: center;
}

#navbar li {
	display: inline;
	padding: 0;
}

#footer {
	display: inline;
	padding: 0;
	text-align: center;
}

.column {
	flex: 50%;
	padding: 10px;
}

.box {
	padding: 1em;
	background-color: white;
	box-shadow: 2px 2px 4px #000;
	margin-top: 0.25vw;
	margin-bottom: 0.25vw;
}

.scroll {
	overflow: auto;
}

@media only screen and (max-width: 800px /*-100 of container max-width*/) {
	.mobileOnly {
		display: block;
		visibility: visible;
	}

	#main {
		display: grid;
	}

	#left {
		margin-right: 0;
		order: 2;
	}

	#right {
		margin-left: 0;
		order: 1;
		margin-bottom: 1vh;
	}
}