@font-face {
    font-family: myFirstFont;
    src: url('arcade.otf');
  }


body{
    display: flex;
    flex-direction: column;
    background-image: linear-gradient(to right,#302683 , #e42c86);

}
.spelButton{
    height: 250px;
    width: 250px;
    background-size: cover;
    padding-top: 150px;
}
@media screen and (max-width: 1500px) {
    .spelButton{
        height:200px ;
        width: 200px;
        background-size: cover;
        padding-top: 150px;
    }
  }

h1{
    text-align: center;
    width: 100%;
    font-family: myFirstFont;
    font-weight: 400;
    font-style: normal;
    font-size: 4em;
    color:  #98d6f6;

}
.spelKeuze{
    height: 40px;
    background-image: linear-gradient(to right,#302683 , #e42c86);
    border: 3px solid black;
}
.spelrij{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
    width: 100%;
    margin-bottom: 40px;
}
.spelrijKeuze{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
    width: 100%;
}
.spel{
    /* display: flex; */
    flex-direction:column;

}
#Havo,#VMBO{
    display: none;
}
.spelButton:focus{
    box-shadow: 0 0 15px 15px  #4fb9ab;
}
.spelKeuze:focus{
    box-shadow: 0 0 15px 15px  #4fb9ab;
}
[id^='spel'] {
    background-image: url("werk\ in\ uitvoering.jpg");
}
[id^='Hspel'] {
    background-image: url("werk\ in\ uitvoering.jpg");
}
#spel-0-0, #Hspel-0-0{
    background-image: url("spel1.png");
}
#spel-0-1, #Hspel-0-1{
    background-image: url("spel2.png");
}
#spel-0-2, #Hspel-0-2{
    background-image: url("spel3.png");
}
#Hspel-0-3{
    background-image: url("shoot.png");
}
#Hspel-0-4{
    background-image:url("platformer.png");
}
#spel-0-3{
    background-image: url("spel4.png");
}
#spel-1-0{
    background-image: url("spel5.png");
}
#spel-1-1{
    background-image: url("spel6.png");
}
#spel-1-2{
    background-image: url("spel7.png");
}
#spel-1-3{
    background-image: url("spel8.png");
}
#spel-1-4{
    background-image: url("spel9.png");
}
#spel-2-0{
    background-image: url("spel10.png");
}
#spel-2-1, #Hspel-0-3{
    background-image: url("spel11.png");
}