#Bar {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
border: 5px solid rgb(26, 86, 199); 
border-radius: 25px;
background-color: rgb(105, 178, 238);
padding: 5px;

}

#Outline { display: flex;
    flex-direction: row;
    justify-content: space-around;
border: 4px solid rgb(79, 171, 228); 
border-radius: 25px;
background-color: lightblue;
padding: 25px;
width: 90px;
height: 20px;
align-items: center;
align-content: center;
align-self: center;
align-content: flex-start;
justify-content: center;
}

a:hover{
    color: rgb(255, 255, 255);
    cursor: pointer;
}

a {
color: dodgerblue;


font-weight: bold;

}



#Jayden { display: flex;
   
background-color: aliceblue;

width: 30%;
height: auto;
border: solid 2px;
border-color: black;
padding-left: 20px;
text-align: center;
padding-right: 20px;
flex-direction: column;
padding-bottom: 15px;
padding-top: 15px;
}




#Stef { display: flex;
   
background-color: aliceblue;

width: 30%;
height: auto;
border: solid 2px;
border-color: black;
padding-left: 20px;
text-align: center;
padding-right: 20px;
flex-direction: column;
padding-bottom: 15px;
padding-top: 15px;
}

#Finn { display: flex;
   
background-color: aliceblue;

width: 30%;
height: auto;
border: solid 2px;
border-color: black;
padding-left: 20px;
text-align: center;
padding-right: 20px;
flex-direction: column;
padding-bottom: 15px;
padding-top: 15px;

}

#Start { display: flex;
    width: 45%;
    background-color: aliceblue;
    
border: solid 2px;
border-color: black;
flex-direction: column;
padding-left: 85px;
padding-right: 85px;
padding-bottom: 30px;
padding-top: 30px;
text-align: center;
}




body {
background-image: url(https://img.freepik.com/free-vector/winter-light-blue-gradient-vector-background_53876-126054.jpg); background-size: cover;

}


#VR { display: flex;
    width: 45%;
    background-color: aliceblue;
    
border: solid 2px;
border-color: black;
flex-direction: column;
padding-left: 85px;
padding-right: 85px;
padding-bottom: 50px;
padding-top: 50px;
text-align: center;


}


#Activiteiten { display: flex;
    width: 45%;
    background-color: aliceblue;
    
border: solid 2px;
border-color: black;
flex-direction: column;
padding-left: 85px;
padding-right: 85px;
padding-bottom: 50px;
padding-top: 50px;
text-align: center;
margin: 25px;
}

#GS { display: flex;
    width: 85%;
    background-color: aliceblue;
    
border: solid 2px;
border-color: black;
flex-direction: column;
padding-left: 85px;
padding-right: 85px;
padding-bottom: 50px;
padding-top: 50px;
text-align: center;
}




#Hardware { display: flex;
    width: 45%;
    background-color: aliceblue;
    
border: solid 2px;
border-color: black;
flex-direction: column;
padding-left: 85px;
padding-right: 85px;
padding-bottom: 50px;
padding-top: 50px;
text-align: center;
margin: 10px;
}

#Software { display: flex;
    width: 45%;
    background-color: aliceblue;
    
border: solid 2px;
border-color: black;
flex-direction: column;
padding-left: 85px;
padding-right: 85px;
padding-bottom: 50px;
padding-top: 50px;
text-align: center;
margin: 10px;
}

#Contact {display: flex;
    width: 85%;
    background-color: aliceblue;
    
border: solid 2px;
border-color: black;
flex-direction: column;
padding-left: 85px;
padding-right: 85px;
padding-bottom: 50px;
padding-top: 50px;
text-align: center;
}

#Oud {

display: flex;
    width: 45%;
    background-color: aliceblue;
    
border: solid 2px;
border-color: black;
flex-direction: column;
padding-left: 85px;
padding-right: 85px;
padding-bottom: 50px;
padding-top: 50px;
text-align: center;
margin: 10px;

}

#Nieuw {display: flex;
    width: 45%;
    background-color: aliceblue;
    
border: solid 2px;
border-color: black;
flex-direction: column;
padding-left: 85px;
padding-right: 85px;
padding-bottom: 50px;
padding-top: 50px;
text-align: center;
margin: 10px;
}

#Risico {display: flex;
    width: 45%;
    background-color: aliceblue;
    
border: solid 2px;
border-color: black;
flex-direction: column;
padding-left: 85px;
padding-right: 85px;
padding-bottom: 50px;
padding-top: 50px;
text-align: center;
}

.container {
  position: relative;
  width: 100%;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #008CBA;
}

.container:hover .overlay {
  opacity: 1;
}

.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

#Fade {display: flex;
    height: 360px;
    width: 640px;
    

justify-content: right;
justify-content: space-around;
margin: 25px;

}