@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: 10rem;
		background-color: rgba(255,255,255,1);
		background-image: url('https://www.jack-stark.ch/data/img/logos/jack_stark.webp');
		background-position: 2rem 2rem;
		background-size: 25rem auto;
		background-repeat: no-repeat;
		display: block;
	}
	
	header img {
		height: 10rem;
		width: auto;
		padding-left: 0.1rem;
	}
	
	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);
	}

	video {
		margin: auto;
		border: solid 0.3rem rgba(163, 179, 255, 1);
		border-radius: 2rem 2rem 2rem 2rem;
	}	

/* Fonts */	
	footer {
		color: rgba(255,0,85,1);
		padding-top: 0.2%;
		padding-bottom: 0.4%;
		font-size: 1rem;
	}

	details {
		padding-bottom: 1rem;	
	}

	summary {
		font-size: 1.5rem;
		color: rgba(97, 95, 255, 1);
		padding-left: 1.5rem;
	}

	nav ul {
		list-style: none;
		padding-left: 3rem;
		font-size: 1.3rem;
	}
	
	nav li {
		padding-bottom: 10%;
	}
	
	
	h1 {
		font-size: 4.5rem;
		color: rgba(236, 37, 63, 1);
		padding-left: 2.5%;
	}
	
	h2 {
		color: rgba(255, 32, 86, 1);
		font-size: 3.5rem;
		padding-left: 2.5%;
		text-decoration: underline;
	}
	
	h3 {
		color: rgba(255, 99, 126,1);
		font-size: 2.1rem;
		padding-left: 2.5%;
	}
	
	h4 {
		color: rgba(255, 99, 126,1);
		font-size: 2rem;
		padding-left: 2.5%;
	}
	
	
	p {
		font-size: 1.3rem;
		color: rgba(115, 115, 115,1);
		padding-left: 2.5%;
		padding-bottom: 2rem;
	}
	
	p:last-child {
		padding-bottom: 2.5%;	
	}
	
	mark {
		font-size: 1.6rem;
		color: rgba(255, 32, 86, 1);
		font-weight: bold;
		background-color: rgba(115,115,115,0);
		border: solid 0.1rem rgba(255, 32, 86, 1);
		border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
		padding-left: 0.2rem;
		padding-right: 0.2rem;
		padding-top: 0.2rem;
		padding-bottom: 0.2rem;
	}
	
	main ul {
		font-size: 1.4rem;
		color: rgba(115, 115, 115,1);
		padding-left: 5%;
	}
	
	a, a:visited {
		color: rgba(163, 179, 255, 1);
		text-decoration: none;
	}
	
	a:hover {
		color: rgba(97, 95, 255, 1);
		text-shadow : 0rem 0rem 1.5rem rgba(224, 231, 255, 1);
	}

	input, button {
		font-size: 1.4rem;
		text-align: left;
		color: rgba(100,100,100,1);
		background-color: rgba(0,0,0,0);
		border: none;
		padding-bottom: 1.4rem;
	}
}







@media (max-width: 768px) {
	
/* Map */
	body {
		height: 100%;
		width: 100%;
	}
	
	header {
		width: 100%;
		height: 10rem;
		background-image: url('https://www.jack-stark.ch/data/img/logos/jack_stark.webp');
		background-position: 1.5rem 1.5rem;
		background-size: 20rem auto;
		background-repeat: no-repeat;
	}
	
	header img {
		height: 10rem;
		width: auto;
	}
	
	nav {
		width: 100%;
		height: auto;
		display: block;
	}
	
	main {
		width: auto;
		height: 100%;
	}
	
	footer {
		width: 100%;
		height: auto;
	}

	video {
		width: 50%;
		height: auto;	
	}

/* Fonts */	
	details {
		padding-bottom: 1.5rem;	
	}

	summary {
		font-size: 1.2rem;
		color: rgba(97, 95, 255, 1);
	}

	nav ul {
		list-style: none;
		font-size: 1.1rem;
		padding-top: 0.5rem;
	}
	
	h1 {
		font-size: 3.5rem;
		color: rgba(236, 37, 63, 1);
	}
	
	h2 {
		color: rgba(255, 32, 86, 1);
		font-size: 2.5rem;
		text-decoration: underline;
	}
	
	h3 {
		color: rgba(255, 99, 126,1);
		font-size: 1.7rem;
	}
	
	h4 {
		color: rgba(255, 99, 126,1);
		font-size: 1.9rem;
	}
	
	
	p {
		font-size: 1rem;
		line-height: 1.8rem;
		color: rgba(115, 115, 115,1);
	}
	
	p:last-child, ul:last-child, ol:last-child {
		margin-bottom: 2rem;	
	}
	
	mark {
		font-size: 1rem;
		color: rgba(255, 32, 86, 1);
		font-weight: bold;
		background-color: rgba(115,115,115,0);
		border: solid 0.1rem rgba(255, 32, 86, 1);
		border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
		padding-left: 0.2rem;
		padding-right: 0.2rem;
		padding-top: 0.2rem;
		padding-bottom: 0.2rem;
	}
	
	main ul, main ol {
		font-size: 1rem;
		line-height: 1.8rem;
		color: rgba(115, 115, 115,1);
		padding-left: 2.5rem;
	}
	
	a, a:visited {
		color: rgba(163, 179, 255, 1);
		text-decoration: none;
	}
	
	a:hover {
		color: rgba(97, 95, 255, 1);
		text-shadow : 0rem 0rem 1.5rem rgba(224, 231, 255, 1);
	}

	input, button {
		font-size: 1rem;
		text-align: left;
		color: rgba(100,100,100,1);
		background-color: rgba(0,0,0,0);
		border: none;
		padding-bottom: 1.4rem;
	}
	
	footer {
		color: rgba(255,0,85,1);
		padding-top: 0.2%;
		padding-bottom: 0.4%;
		font-size: 0.5rem;
	}
}








@media (prefers-color-scheme: dark) {
	body, main, nav, header {
		background-color: rgba(0,0,0,1);	
	}
	
	h3, p, ul ol, address {
	}
	
	footer {
		background-color: rgba(200,200,200,1);	
	}
	
}