

@media screen {
	
/* Map */
	body {
		height: 100%;
		width: 100%;
		background-color: rgba(255,255,255,1);
		margin: auto;
		font-family: "Comfortaa", sans-serif;
	}
	
	header {
		width: 100%;
		height: 10vw;
		background-color: rgba(255,255,255,1);
		background-image: url('https://www.vonauw.com/data/img/logos/jack_stark.webp');
		background-position: top center;
		background-size: auto 10vw;
		background-repeat: no-repeat;
		display: block;
	}
	
	nav {
		width: 20%;
		height: auto;
		background-color: rgba(255,255,255,1);
		float: left;
		display: inline;
		text-align: left;
	}
	
	main {
		width: 79%;
		height: 100%;
		background-color: rgba(255,255,255,1);
		float: left;
		display: inline;
		text-align: left;
		border-left: dotted 1px rgba(0,0,0,0.2);
	}
	
	footer {
		width: 100%;
		height: auto%;
		background-color: rgba(0,0,0,1);
		position: fixed;
		bottom: 0px;
		left: 0px;
		text-align: center;
		box-shadow: 0px -2px 5px 0px rgba(0,0,0,0.8);
	}
	
/* Fonts */	
	footer {
		color: rgba(255,255,255,1);
		padding-top: 0.2%;
		padding-bottom: 0.4%;
		font-size: 1vw;
	}

	nav ul {
		list-style: none;
		padding-left: 10%;
		font-size: 1.6vw;
	}
	
	nav li {
		padding-bottom: 10%;
	}
	
	
	h1 {
		font-size: 4vw;
		color: rgba(225,30,75,1);
		padding-left: 2.5%;
	}
	
	h2 {
		color: rgba(225,80,120,1);
		font-size: 3vw;
		padding-left: 2.5%;
	}
	
	h3 {
		color: rgba(0,0,0,1);
		font-size: 2.5vw;
		padding-left: 2.5%;
	}
	
	h4 {
		font-size: 2vw;
		padding-left: 2.5%;
	}
	
	p {
		font-size: 1.4vw;
		color: rgba(100,100,100,1);
		padding-left: 2.5%;
	}
	
	a {
		color: rgba(30,130,230,1);
		text-decoration: none;
	}
	
	a:hover {
		color: rgba(225,80,120,1);
	}
	
	a:visited {
		color: rgba(30,130,230,1);
		text-decoration: none;		
	}
	
	.selected {
		color: rgba(225,30,75,1);
		text-decoration: underline;
	}
	
}


@media (max-width: 768px) {
	
/* Map */
	body {
		height: 100%;
		width: 100%;
		background-color: rgba(255,255,255,1);
		margin: auto;
		font-family: "Comfortaa", sans-serif;
	}
	
	header {
		width: 100%;
		height: 20vw;
		background-color: rgba(255,255,255,1);
		background-image: url('https://www.vonauw.com/data/img/logos/jack_stark.webp');
		background-position: top center;
		background-size: auto 20vw;
		background-repeat: no-repeat;
		display: block;
	}
	
	nav {
		width: 20%;
		height: auto;
		background-color: rgba(255,255,255,1);
		float: left;
		display: inline;
		text-align: left;
	}
	
	main {
		width: 79%;
		height: 100%;
		background-color: rgba(255,255,255,1);
		float: left;
		display: inline;
		text-align: left;
		border-left: dotted 1px rgba(0,0,0,0.2);
	}
	
	footer {
		width: 100%;
		height: auto%;
		background-color: rgba(0,0,0,1);
		position: fixed;
		bottom: 0px;
		left: 0px;
		text-align: center;
		box-shadow: 0px -2px 5px 0px rgba(0,0,0,0.8);
	}
	
/* Fonts */	
	footer {
		color: rgba(255,255,255,1);
		padding-top: 0.2%;
		padding-bottom: 0.4%;
		font-size: 2vw;
	}

	nav ul {
		list-style: none;
		padding-left: 10%;
		font-size: 3.2vw;
	}
	
	nav li {
		padding-bottom: 10%;
	}
	
	
	h1 {
		font-size: 8vw;
		color: rgba(225,30,75,1);
		padding-left: 2.5%;
	}
	
	h2 {
		color: rgba(225,80,120,1);
		font-size: 6vw;
		padding-left: 2.5%;
	}
	
	h3 {
		color: rgba(0,0,0,1);
		font-size: 5vw;
		padding-left: 2.5%;
	}
	
	h4 {
		font-size: 4vw;
		padding-left: 2.5%;
	}
	
	p {
		font-size: 2.8vw;
		color: rgba(100,100,100,1);
		padding-left: 2.5%;
	}
	
	a {
		color: rgba(30,130,230,1);
		text-decoration: none;
	}
	
	a:hover {
		color: rgba(225,80,120,1);
	}
	
	a:visited {
		color: rgba(30,130,230,1);
		text-decoration: none;		
	}
	
	.selected {
		color: rgba(225,30,75,1);
		text-decoration: underline;
	}
	
}