html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

body {
	box-sizing: border-box;
	background-image: url(../Files/Background.jpg);
	background-size: cover;
	background-attachment: fixed;
	background-position: bottom;
	backdrop-filter: blur(3px);
	padding-block: 20px;
	height: 100%;
}
.logo {
	box-sizing: border-box;
	position: relative;
	width: 100%;
	text-align: center;
}
.logo img {
	width: 80%;
	max-width: 500px;
}
a {
	text-decoration: none;
}
/* Slideshow container */
.slideshow-container {
	background-image: linear-gradient(to right, rgb(200, 200, 200) 0%, rgb(250, 250, 250) 25%, rgb(201, 201, 201) 50%, rgb(250, 250, 250) 75%, rgb(200, 200, 200) 100%);
	width: 85%;
	position: relative;
	margin: auto;
	border-radius: 10px;
	box-shadow: 0px 0px 10px 10px rgba(0, 0, 0, 0.6);
  }
  .slideshow-container div {
	padding: 7px;
	padding-bottom: 3px;
  }
  .slideshow-container img {
	border-radius: 10px;
  }
  .slideshow-container h1 {
	padding-block-start: 15px;
	margin-block-end: 1px;
  }
  
  /* Hide the images by default */
  .mySlides {
	display: none;
  }
  
  /* Fading animation */
  .fade {
	animation-name: fade;
	animation-duration: 1.5s;
  }
  
  @keyframes fade {
	from {opacity: .4}
	to {opacity: 1}
  }
section {
	background-image: linear-gradient(to right, rgb(200, 200, 200) 0%, rgb(250, 250, 250) 25%, rgb(201, 201, 201) 50%, rgb(250, 250, 250) 75%, rgb(200, 200, 200) 100%); 
	width: 85%;
	margin-inline: auto; 
	margin-block: 30px;
	padding-block: 10px;
	box-shadow: 0px 0px 10px 10px rgba(0, 0, 0, 0.6);
	background-clip: padding-box;
	border-radius: 10px;
}
h1 {
	font-family: Meera Inimai, sans-serif; 
	font-size: 20px; 
	text-shadow: 3px 3px 3px grey;
	margin-block-start: 10px;
	margin-inline: 20px;
	text-align: center;
	font-weight: bold;
}
.legenda {
	display: flex;
	justify-content: space-around;
	text-align: center;
	margin-block: 20px;
}
.groen {
	background-color: hsl(120, 100%, 50%);
	width: fit-content;
	margin-inline: auto;
	padding-inline: 7px;
	padding-block: 5px;
	font-size: 15px;
	font-family: Meera Inimai, sans-serif;
	color: black;
	border: solid black 2px;
}
.geel {
	background-color: yellow;
	width: fit-content;
	margin-inline: auto;
	padding-inline: 7px;
	padding-block: 5px;
	font-size: 15px;
	font-family: Meera Inimai, sans-serif;
	color: black;
	border: solid black 2px;
}
.rood {
	background-color: red;
	width: fit-content;
	margin-inline: auto;
	padding-inline: 7px;
	padding-block: 5px;
	font-size: 15px;
	font-family: Meera Inimai, sans-serif;
	color: black;
	border: solid black 2px;
}
h2 {
	font-size: 20px; 
	text-shadow: 2px 2px 2px grey;
	font-family: Meera Inimai, sans-serif;
	width: 90%;
	margin-block: 10px;
	margin-inline: auto;
	font-weight: bold;
}
.bijschrift1 {
	text-align: center;
	margin-block-end: 30px;
	margin-block-start: 10px;
	font-size: 15px;
}
.bijschrift2 {
	text-align: center;
	text-decoration: underline;
	padding-block-end: 10px;
	font-size: 15px;
}
table {
	border-collapse: separate;
	background-color: hsl(0, 0%, 97%);
	border-spacing: 10px 0;
	text-align: center;
	width: 90%;
	margin-inline: auto;
	margin-block: 20px;
	padding-bottom: 20px;
	box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.6);
}
table th {
	border-bottom: solid black 2px;
	padding: 10px;
	font-size: 15px;
	font-family: Meera Inimai, sans-serif;
}
table tr {
	padding: 5px;
}
table td {
	background-color: hsl(59, 100%, 90%);
	padding: 10px;
	border-right: solid black 2px;
	border-left: solid black 2px;
	border-bottom: solid black 2px;
	font-size: 13px;
	font-family: Meera Inimai, sans-serif;
}
p {
	font-family: Meera Inimai, sans-serif; 
	font-size: 15px;
	width: 90%;
	margin-inline: auto;
	margin-block: 20px;
}
h3 {
	font-family: Meera Inimai, sans-serif;
	font-size: 15px;
	width: 90%;
	margin-inline: auto;
	margin-block: 10px;
	text-decoration: underline;
}
#magnetogram {
	display: block;
	width: 95%;
	margin-left: auto;
	margin-right: auto;
	box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.6);
}
#schotland {
    display: flex;
	justify-content: center;
	margin-block: 20px;
}
#schotland iframe {
	margin-block: -140px;
	margin-inline: -500px;
	width: 530px;
	height: 480px;
	-moz-transform: scale(0.27, 0.27); 
  -webkit-transform: scale(0.27, 0.27); 
  -o-transform: scale(0.27, 0.27);
  -ms-transform: scale(0.27, 0.27);
  transform: scale(0.45, 0.45);
  box-shadow: 0px 0px 12px 12px rgba(0, 0, 0, 0.6);
}
#stackplot {
	display: flex;
	justify-content: center;
	margin-block: 20px;
}
#stackplot iframe {
	margin-block: -465px;
	margin-inline: -500px;
	width: 875px;
	height: 1335px;
	-moz-transform: scale(0.27, 0.27); 
  -webkit-transform: scale(0.27, 0.27); 
  -o-transform: scale(0.27, 0.27);
  -ms-transform: scale(0.27, 0.27);
  transform: scale(0.27, 0.27);
  box-shadow: 0px 0px 19px 19px rgba(0, 0, 0, 0.6);
}
#magnetografiek {
	display: block;
	width: 90%;
	margin-left: auto;
	margin-right: auto;
	margin-block: 20px;
	box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.6);
}
#constructie {
	display: block;
	width: 90%;
	margin-left: auto;
	margin-right: auto;
	box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.6);
}
.WSAslideshow {
	width: 85%;
	position: relative;
	margin: auto;
	box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.6);
	margin-block: 20px;
}
.WSAtitel {
	font-family: Meera Inimai, sans-serif; 
	font-size: 20px; 
	text-shadow: 3px 3px 3px grey;
	margin-block-start: 10px;
	text-align: center;
}
#zonnewind {
	display: flex;
	justify-content: center;
	margin-block: 20px;
}
#zonnewinddata {
	display: block;
	width: 85%;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 30px;
	box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.6);
}
#NASAbox {
	box-sizing: border-box;
	justify-content: center;
	margin-block: 20px;
	width: 100%;
	display: block;
}
.NASA {
	display: block;
	width: 85%;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 30px;
	box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.6);
}
.NASAcombo {
	display: block;
	width: 85%;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 30px;
	box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.6);
}
#NASAboxcombo {
	box-sizing: border-box;
	justify-content: center;
	margin-block: 20px;
	width: 100%;
	display: block;
}
.HUXT {
	display: block;
	width: 85%;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 30px;
	box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.6);
}
#ELEVO {
	display: block;
	width: 85%;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 30px;
	box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.6);
}
.zonnewindace {
	display: flex;
	justify-content: space-around;
	text-align: center;
	margin-block: 30px;
	margin-inline: auto;
	width: 85%;
}
.zonnewindace div {
	background-color: white;
	width: fit-content;
	padding-inline: 7px;
	padding-block: 5px;
	font-size: 8px;
	font-family: Meera Inimai, sans-serif;
	text-decoration: none;
	color: black;
	box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.6);
}
.zonnewindace div a {
	color: black;
	font-weight: bold;
}
.WSAenlilbox {
	display: flex;
	width: 85%;
	margin-inline: auto;
}
.WSAenlil {
	justify-content: space-between;
	display: block;
	text-align: center;
	margin-inline: auto;
}
.WSAenlil div {
	background-color: white;
	margin-block: 30px;
	margin-inline: auto;
	width: fit-content;
	padding-inline: 7px;
	padding-block: 5px;
	font-size: 8px;
	font-family: Meera Inimai, sans-serif;
	text-decoration: none;
	color: black;
	box-shadow: 0px 0px 3px 3px rgba(0, 0, 0, 0.6);
}
.WSAenlil div a {
	color: black;
	font-weight: bold;
}
#auroraoval {
	display: block;
	width: 85%;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 30px;
	box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.6);
}
#spaceweatherwarnings {
	display: block;
	width: 85%;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 30px;
	box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.6);
}
#button {
    text-align: center;
}

#downloadchart {
    margin-block-start: 25px;
    padding-inline: 7px;
	padding-block: 5px;
    font-size: 8px;
	font-family: Meera Inimai, sans-serif;
    color: white;
    text-shadow: 3px 3px 3px rgb(0, 0, 0);
    background-image: linear-gradient(to bottom, rgb(164, 113, 68) 0%, rgb(224, 174, 130) 50%, rgb(164, 113, 68) 100%);
    box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.6);
    border: none;
}

@media all and (min-width: 400px) {
	#schotland iframe {
	margin-block: -115px;
	-moz-transform: scale(0.56, 0.56); 
  -webkit-transform: scale(0.56, 0.56); 
  -o-transform: scale(0.56, 0.56);
  -ms-transform: scale(0.56, 0.56);
  transform: scale(0.56, 0.56);
  box-shadow: 0px 0px 10px 10px rgba(0, 0, 0, 0.6);
	}

	#stackplot iframe {
	margin-block: -425px;
	-moz-transform: scale(0.34, 0.34); 
  -webkit-transform: scale(0.34, 0.34); 
  -o-transform: scale(0.34, 0.34);
  -ms-transform: scale(0.34, 0.34);
  transform: scale(0.34, 0.34);
  box-shadow: 0px 0px 17px 17px rgba(0, 0, 0, 0.6);
	}
}
@media all and (min-width: 450px) {
	#schotland iframe {
		margin-block: -94px;
		-moz-transform: scale(0.64, 0.64); 
	  -webkit-transform: scale(0.64, 0.64); 
	  -o-transform: scale(0.64, 0.64);
	  -ms-transform: scale(0.64, 0.64);
	  transform: scale(0.64, 0.64);
	  box-shadow: 0px 0px 8px 8px rgba(0, 0, 0, 0.6);
		}
	
		#stackplot iframe {
		margin-block: -400px;
		-moz-transform: scale(0.38, 0.38); 
	  -webkit-transform: scale(0.38, 0.38); 
	  -o-transform: scale(0.38, 0.38);
	  -ms-transform: scale(0.38, 0.38);
	  transform: scale(0.38, 0.38);
	  box-shadow: 0px 0px 13px 13px rgba(0, 0, 0, 0.6);
		}
}
@media all and (min-width: 500px) {

	.zonnewindace div {
		font-size: 10px;
	}
	.WSAenlil div {
		font-size: 10px;
	}
	#downloadchart {
		font-size: 10px;
	}

	#schotland iframe {
		margin-block: -75px;
		-moz-transform: scale(0.71, 0.71); 
	  -webkit-transform: scale(0.71, 0.71); 
	  -o-transform: scale(0.71, 0.71);
	  -ms-transform: scale(0.71, 0.71);
	  transform: scale(0.71, 0.71);
		}
	
		#stackplot iframe {
		margin-block: -365px;
		-moz-transform: scale(0.43, 0.43); 
	  -webkit-transform: scale(0.43, 0.43); 
	  -o-transform: scale(0.43, 0.43);
	  -ms-transform: scale(0.43, 0.43);
	  transform: scale(0.43, 0.43);
		}
}
@media all and (min-width: 550px) {
	#schotland iframe {
		margin-block: -55px;
		-moz-transform: scale(0.79, 0.79); 
	  -webkit-transform: scale(0.79, 0.79); 
	  -o-transform: scale(0.79, 0.79);
	  -ms-transform: scale(0.79, 0.79);
	  transform: scale(0.79, 0.79);
	  box-shadow: 0px 0px 7px 7px rgba(0, 0, 0, 0.6);
		}
	
		#stackplot iframe {
		margin-block: -332px;
		-moz-transform: scale(0.48, 0.48); 
	  -webkit-transform: scale(0.48, 0.48); 
	  -o-transform: scale(0.48, 0.48);
	  -ms-transform: scale(0.48, 0.48);
	  transform: scale(0.48, 0.48);
	  box-shadow: 0px 0px 11px 11px rgba(0, 0, 0, 0.6);
		}
}
@media all and (min-width: 600px) {
	#schotland iframe {
		margin-block: -38px;
		-moz-transform: scale(0.85, 0.85); 
	  -webkit-transform: scale(0.85, 0.85); 
	  -o-transform: scale(0.85, 0.85);
	  -ms-transform: scale(0.85, 0.85);
	  transform: scale(0.85, 0.85);
		}
	
		#stackplot iframe {
		margin-block: -313px;
		-moz-transform: scale(0.51, 0.51); 
	  -webkit-transform: scale(0.51, 0.51); 
	  -o-transform: scale(0.51, 0.51);
	  -ms-transform: scale(0.51, 0.51);
	  transform: scale(0.51, 0.51);
		}
}
@media all and (min-width: 650px) {
	#schotland iframe {
		margin-block: -20px;
		-moz-transform: scale(0.92, 0.92); 
	  -webkit-transform: scale(0.92, 0.92); 
	  -o-transform: scale(0.92, 0.92);
	  -ms-transform: scale(0.92, 0.92);
	  transform: scale(0.92, 0.92);
	  box-shadow: 0px 0px 6px 6px rgba(0, 0, 0, 0.6);
		}
	
		#stackplot iframe {
		margin-block: -280px;
		-moz-transform: scale(0.56, 0.56); 
	  -webkit-transform: scale(0.56, 0.56); 
	  -o-transform: scale(0.56, 0.56);
	  -ms-transform: scale(0.56, 0.56);
	  transform: scale(0.56, 0.56);
	  box-shadow: 0px 0px 9px 9px rgba(0, 0, 0, 0.6);
		}
}
@media all and (min-width: 700px) {
	#schotland iframe {
		margin-block: -5px;
		-moz-transform: scale(0.98, 0.98); 
	  -webkit-transform: scale(0.98, 0.98); 
	  -o-transform: scale(0.98, 0.98);
	  -ms-transform: scale(0.98, 0.98);
	  transform: scale(0.98, 0.98);
		}
	
		#stackplot iframe {
		margin-block: -260px;
		-moz-transform: scale(0.59, 0.59); 
	  -webkit-transform: scale(0.59, 0.59); 
	  -o-transform: scale(0.59, 0.59);
	  -ms-transform: scale(0.59, 0.59);
	  transform: scale(0.59, 0.59);
		}
}

@media all and (min-width: 768px) {
	header nav {
		max-width: 691px;
	}
	.slideshow-container {
		max-width: 691px;
	}
	section {
		max-width: 691px;
	}
	hr {
		max-width: 691px;
	}
	.WSAtitel {
		font-size: 25px;
	}
	h1 {
		font-size: 25px;
	}
	.zonnewindace div {
		font-size: 13px;
	}
	.WSAenlil div {
		font-size: 13px;
	}
	#downloadchart {
		font-size: 13px;
	}
	#schotland iframe {
		margin-block: 10px;
		-moz-transform: scale(1.05, 1.05); 
	  -webkit-transform: scale(1.05, 1.05); 
	  -o-transform: scale(1.05, 1.05);
	  -ms-transform: scale(1.05, 1.05);
	  transform: scale(1.05, 1.05);
	  box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.6);
		}
	
		#stackplot iframe {
		margin-block: -230px;
		-moz-transform: scale(0.64, 0.64); 
	  -webkit-transform: scale(0.64, 0.64); 
	  -o-transform: scale(0.64, 0.64);
	  -ms-transform: scale(0.64, 0.64);
	  transform: scale(0.64, 0.64);
	  box-shadow: 0px 0px 8px 8px rgba(0, 0, 0, 0.6);
		}
}

@media all and (min-width: 1024px) {
	.slideshow-container {
		width: 70%;
		max-width: none;
	}
	section {
		width: 70%;
		max-width: none;
	}
	#NASAbox {
		box-sizing: border-box;
		justify-content: center;
		margin-block: 20px;
		width: 100%;
		display: flex;
	}
	.NASA {
		width: 45%;
		margin-inline: 20px;	
	}
	hr {
		width: 70%;
		max-width: none;
	}
	h1 {
		font-size: 30px;
	}
	h2 {
		font-size: 25px;
	}
	h3 {
		font-size: 17px;
	}
	.WSAtitel {
		font-size: 30px;
	}
	.rood {
		font-size: 17px;
	}
	.geel {
		font-size: 17px;
	}
	.groen {
		font-size: 17px;
	}
	p {
		font-size: 17px;
	}
	.zonnewindace div {
		font-size: 17px;
	}
	.WSAenlil div {
		font-size: 17px;
	}
	#downloadchart {
		font-size: 17px;
	}
	.bijschrift1 {
		font-size: 17px;
	}
	.bijschrift2 {
		font-size: 17px;
	}
	#schotland iframe {
		margin-block: 40px;
		-moz-transform: scale(1.17, 1.17); 
	  -webkit-transform: scale(1.17, 1.17); 
	  -o-transform: scale(1.17, 1.17);
	  -ms-transform: scale(1.17, 1.17);
	  transform: scale(1.17, 1.17);
	  
		}
	
		#stackplot iframe {
		margin-block: -185px;
		-moz-transform: scale(0.71, 0.71); 
	  -webkit-transform: (0.71, 0.71);
	  -ms-transform: scale(0.71, 0.71);
	  transform: scale(0.71, 0.71);
		}
}
@media all and (min-width: 1100px) {
	#schotland iframe {
		margin-block: 61px;
		-moz-transform: scale(0.98, 0.98); 
	  -webkit-transform: scale(0.98, 0.98); 
	  -o-transform: scale(0.98, 0.98);
	  -ms-transform: scale(0.98, 0.98);
	  transform: scale(1.25, 1.25);
		}
	
		#stackplot iframe {
		margin-block: -157px;
		-moz-transform: scale(0.59, 0.59); 
	  -webkit-transform: scale(0.59, 0.59); 
	  -o-transform: scale(0.59, 0.59);
	  -ms-transform: scale(0.59, 0.59);
	  transform: scale(0.75, 0.75);
		}
}
@media all and (min-width: 1200px) {
	#schotland iframe {
		margin-block: 88px;
		-moz-transform: scale(0.98, 0.98); 
	  -webkit-transform: scale(0.98, 0.98); 
	  -o-transform: scale(0.98, 0.98);
	  -ms-transform: scale(0.98, 0.98);
	  transform: scale(1.35, 1.35);
		}
	
		#stackplot iframe {
		margin-block: -115px;
		-moz-transform: scale(0.59, 0.59); 
	  -webkit-transform: scale(0.59, 0.59); 
	  -o-transform: scale(0.59, 0.59);
	  -ms-transform: scale(0.59, 0.59);
	  transform: scale(0.82, 0.82);
		}
}
@media all and (min-width: 1300px) {
	#schotland iframe {
		margin-block: 110px;
		-moz-transform: scale(0.98, 0.98); 
	  -webkit-transform: scale(0.98, 0.98); 
	  -o-transform: scale(0.98, 0.98);
	  -ms-transform: scale(0.98, 0.98);
	  transform: scale(1.45, 1.45);
		}
	
		#stackplot iframe {
		margin-block: -75px;
		-moz-transform: scale(0.59, 0.59); 
	  -webkit-transform: scale(0.59, 0.59); 
	  -o-transform: scale(0.59, 0.59);
	  -ms-transform: scale(0.59, 0.59);
	  transform: scale(0.88, 0.88);
		}
}
@media all and (min-width: 1400px) {
	.slideshow-container {
		max-width: 980px;
	}
	section {
		max-width: 980px;
	}
	hr {
		max-width: 980px;
	}
	#schotland iframe {
		margin-block: 135px;
		-moz-transform: scale(0.98, 0.98); 
	  -webkit-transform: scale(0.98, 0.98); 
	  -o-transform: scale(0.98, 0.98);
	  -ms-transform: scale(0.98, 0.98);
	  transform: scale(1.55, 1.55);
	  box-shadow: 0px 0px 4px 4px rgba(0, 0, 0, 0.6);
		}
	
		#stackplot iframe {
		margin-block: -35px;
		-moz-transform: scale(0.59, 0.59); 
	  -webkit-transform: scale(0.59, 0.59); 
	  -o-transform: scale(0.59, 0.59);
	  -ms-transform: scale(0.59, 0.59);
	  transform: scale(0.94, 0.94);
	  box-shadow: 0px 0px 7px 7px rgba(0, 0, 0, 0.6);
		}
}