@charset "utf-8";
/* CSS Document - intro1.css */
html {
    font-size:16px;
}

#wrapper {
	margin-left: auto;
	margin-right: auto;
	width: 90%;
	min-height: 100vh;
    height:auto;
	background-color: #FFFAA0;
    color:blue;
	font-size: 1rem;
	font-family: Verdana, Geneva, sans-serif;
	border: thin solid blue;
			
}

header {
    margin:0; /* Om tegen vorige blok eraan te plakken  */
	font-family: "Arial Black", Gadget, sans-serif;
	height: 15vh; /*view height = 10 % of 1200px */
	width: 100%;
    line-height: 15vh;
    text-align: center;
	font-size: 2rem;  
	color: yellow;
	background-color: blue;
	font-weight: bold;
	
}
.hava  {
    margin:0; /* Om tegen vorige blok eraan te plakken  */
	font-family: "Arial Black", Gadget, sans-serif;
	height: 15vh; /*view height = 10 % of 1200px */
	width: 100%;
    display:grid;
    place-items: center;
    text-align: center;
    word-wrap: break-word;
	font-size: 2rem;  
	color: yellow;
	background-color: blue;
	font-weight: bold;  
}
/* Navigatie */

#menubalk
{
	margin:0; /* Om tegen vorige blok eraan te plakken  */
	padding:0; /* Om tegen vorige blok eraan te plakken */
	top:0;
	font-family: "Arial Black", Gadget, sans-serif;
	display:grid;
    place-items: center;
    text-align: center;
    word-wrap: break-word;
	background-color: #FFFF00;
	z-index:1;
    width:100%;
    position:sticky;
 }
nav
{
	z-index:2;    /* Hoogste index komt bovenaan -> menusysteem komt bovenop de menubalk */
}
nav ul
{
	list-style-type: none;
	text-align:center;
}
nav li 
{
	display: inline;
	overflow:hidden;
}

nav a {
	text-decoration:none;
	background-color:blue;
	color: yellow;
	padding:0.313rem 0.131rem; /* ex 10px */
	margin:0 0.313rem 0.313rem 0;
	overflow:hidden;
}

a:hover {
    font-size: 0.875rem;
    color: red;
}

ol li {
  list-style-position:inside;
  padding: 1.25rem;
  margin-left:0.625rem;
  font-size: 1rem;
  overflow:hidden;
}

.grid-matrix {
display:grid;
height: 100%;
width:100%;
grid-template-rows: repeat(25%,4);
}
.rijX {
text-align: justify;
text-justify: inter-word;  
word-wrap: break-word; 
align-self: center;
overflow: hidden;
border-radius: 0.938rem 0.938rem 0.938rem 0.938rem;
padding:1.25rem;
margin-left: 0.313rem;
margin-right:0.313rem;
background-color:#FFCC66;
    }

.rijY {
text-align: justify;
text-justify: inter-word;  
word-wrap: break-word; 
align-self: center;
overflow: hidden;
border-radius: 0.938rem 0.938rem 0.938rem 0.938rem;
padding:1.25rem;
margin-left: 0.313rem;
margin-right:0.313rem;
background-color: #FFFF00;
    }


#first
{
padding: 1.25rem;
font-size:1.125rem;
background-color:#ffff4d;
color: blue;
font-family:Verdana, Geneva, sans-serif;
text-align: justify;
text-justify: inter-word; 	
}

#firstwall
{
padding: 1.25rem;
font-size:1.125rem;
background-color:#ffff4d;
background-image: url(../IMG/briques.jpg);
background-repeat: repeat;        
color: yellow;
font-family:Verdana, Geneva, sans-serif;
text-align: justify;
text-justify: inter-word; 	
}

#two 
{
padding: 1.25rem;
font-size:1.125rem;
color: blue;
font-family:Verdana, Geneva, sans-serif;
text-align: justify;
text-justify: inter-word;   
}

#three
{
padding: 1.25rem;
font-size:1.125rem;
background-color:#ffff4d;
color: blue;
font-family:Verdana, Geneva, sans-serif;
text-align: justify;
text-justify: inter-word;   
}

.tekst {
color: black;
font-size: 1rem;
font-weight: bold;
text-align: justify;
text-justify: inter-word;  
word-wrap: break-word; 
padding-left: 0.625rem;
padding-right: 0.625rem;    
align-self: center;
overflow: hidden;

}  
.citaat {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size:1.3rem;
	text-align:justify;
	text-justify: inter-word; 	
	color:white;	
	background-color: red;
	border-radius: 0.938rem 0.938rem 0.938rem 0.938rem;
	padding:1.25rem;
	margin-left: 0.313rem;
	margin-right:0.313rem;
 }
.blauw {
 font-family: Georgia, "Times New Roman", Times, serif;
	font-size:1.3rem;
	text-align:justify;
	text-justify: inter-word; 	
	color:white;	
	background-color: blue;
	border-radius: 0.938rem 0.938rem 0.938rem 0.938rem;
	padding:1.25rem;
	margin-left: 0.313rem;
	margin-right:0.313rem;   
}
.links {
    float:left;
}

.beeld /* Centreren van een beeld */
{
	margin: 0.625rem;
	padding: 0.625rem;
    border-style: solid;
    border-width: thin;
	vertical-align: text-top;
	max-width: 40%;
	height:auto;
	float:left;
	transition: all 2s;
}

.beeld:hover{
transform:scale(1.5);

}

.important
{
animation-name: stress;
animation-timing-function: linear;
animation-duration: 5s;
animation-iteration-count: infinite;
	
}

@keyframes stress {
        0% {
		transform:rotate(0deg);
		}
		25% {
		transform:rotate(-2deg);
    	}   
		50% {
		transform:rotate(0deg);
		}
		75% {
		transform:rotate(2deg);
		}
		100% {
		transform:rotate(0deg);	
        }
}   

.even{
margin-left: 0.625rem;
margin-right: 0.625rem;   
background-color: #FFFF00;
color: blue;
text-align: justify;
text-justify: inter-word;  
word-wrap: break-word; 
}
.oneven {
margin-left: 0.625rem;
margin-right: 0.625rem;
background-color:#FFCC66;
color: blue;
text-align: justify;
text-justify: inter-word;  
word-wrap: break-word; 
}

h1 {
font-size:1.8rem;
text-align:center;    
color:red;
}
h2{

font-size:1.8rem;
text-align: left;
color:white; 
    
}
span {
    background: yellow;
}
   
p {
    margin-left:0.625rem;
    margin-right:0.625rem;
    text-align:justify;
}
h3 {
    margin-left:0.625rem;
    margin-right:0.625rem;
    font-size:1rem;
    text-align:justify;    
    color:white;
}

.onderwerp {
font-size: 1.5rem;
text-align: center;
color: red;
}

.progressie {

display:table;
margin-left:auto;
margin-right: auto;    

}

footer 
{
	position: relative;
    bottom:0;
    font-family: "Arial Black", Gadget, sans-serif;
	width: 100%;
	height: 10vh;
    line-height: 10vh;
	text-align:center;
    font-size: 1.5rem;  
	color: yellow;
	background-color: blue;
	font-weight: bold; 
}