:root {
    --achtgrnd_geelgroen: linear-gradient(0deg, rgba(132,231,232,1) 5%, rgba(212,160,47,1) 85%); 
    --achtgrnd_blauw: linear-gradient(90deg, rgba(101,142,194,1) 23%, rgba(210,244,242,0.9283653650528345) 77%); 
    --achtgrnd_groenraster: radial-gradient(circle, rgba(101,194,130,0.498878185565655) 23%, rgba(210,244,242,0.9283653650528345) 77%); 
    --achtergrond_2:radial-gradient(circle, rgba(2,0,36,1) 0%, rgba(93,121,9,1) 21%, rgba(0,212,255,1) 100%);
    font-size: 18px;
}



body {
    background-color: #EBEBEB;
}
.spel {
    width:70%;
    margin: auto;
    background: var(--achtgrnd_geelgroen);
    padding: 1vw;
}
#start {
    float: left;
}
a:link, a:visited {
  background-color: white;
  color: black;
  border: 2px solid green;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

a:hover, a:active {
  background-color: green;
  color: white;
}

.tabel {
    margin: auto;
    width: 100%;
}
table {
   /* margin-left: 150px;*/
   width: 50%;
   margin-left: 10vw;
   
}
table caption {
    font-size: .8rem;
}
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
    padding:1vw;
}
img {
    width:9vw;
    height:9vw;
}
#hoofd, #voet {
   background-color: #3300CC;
   color: #FFFFCC;
    font-family: arial;
    font-size: 15px;
}
input[type="button"]  {
    width: 150px;
    height: 35px;
    margin-left:25px;
    font-weight: bold;
     background-color: #FFCCFF;

}

input[type="button"]:hover{
    border: solid #FF3300;
    background-color: #FFFFCC;
}

#info {
   
   width: 80%;
   font-size: 1rem;
   margin: auto;
}
#lees {
    font-weight: bolder;
    color: #CC3300;
}

#verstopt {
    display: none;
    background-color: darkblue;
    color: ghostwhite;
    padding:.8vw;
    margin: .15vw;
    
}
#verstopt p {
    padding:.5vw;
}

@media only screen and (max-width: 550px) {
 
 :root {
    font-size: 16px;
 }   
.spel {
    width:85%;
}
table {
    width: 65%;
}

}