body {
	background-color: #1D122D;
	border: 1px solid black;
	font-family: sans-serif;
	font-size: 1vw;
	margin: 1% 10%;
}

header {
	background-color: #7C3FCC;
	background-image: linear-gradient(#7C3FCC, #542594 60%);
	color: white;
	border-bottom: 1px solid black;
	padding: 2px 10px;
}

header > h1 {
	font-size: 0.75vw;
	font-weight: normal;
	text-shadow: -1px -1px 1px black;
}

div.logo_image {
	width: 6em;
	height: 4em;
}

main {
	background-color: white;
	display: flex;
	min-height: 100vh;
}

nav {
	background-color: #412F5A;
	border-bottom: 1px solid black;
}

nav > a {
	color: white;
	display: inline-block;
	padding: 5px 8px;
	text-decoration: none;
}

nav > a:hover {
	background-color: #311F4A;
}

aside {
	border-right: 1px grey dashed;
	flex-basis: 20%;
}

article {
	flex-basis: 80%;
	padding: 5px 7px;
}

footer {
	background-color: #412F5A;
	border-top: 1px solid black;
	color: white;
	padding: 5px;
	text-align: center;
}

@media screen and (max-width: 1500px) {
	body {
		font-size: 1.25em;
	}

	header > h1 {
		font-size: 0.75em;
	}
}

@media screen and (max-width: 750px) {
	body {
		border: 0px solid black;
		margin: 0;
	}
	
	aside {
		display: none;
	}
	
	article {
		flex-basis: 100%;
	}
	
	nav {
		overflow-x: scroll;
	}
	
	nav > a {
		padding: 10px;
	}
}