:root {
    --achtergrond_2:radial-gradient(circle, rgba(2,0,36,1) 0%, rgba(93,121,9,1) 21%, rgba(0,212,255,1) 100%);
}

* {
    box-sizing: border-box;

}
/*grid definities*/
.kaft {
    display: grid;
    grid-template-areas: 
    'hoofding'
    'stuurknopen'
    'knoppen';
    gap: 5px;
    width: 70%;
    margin: auto;
    padding: 15px 15px;
    background: var(--achtergrond_2);
}
.hoofding {
    grid-area: hoofding;
    padding-top: 10px;
    padding-bottom: 10px;
}
.stuurknoppen{
    grid-area: stuurknoppen;
    padding-top: 10px;
    padding-bottom: 10px;
}
/*in deze toepassing specifiek voor de stuurknoppen*/
.zichtbaar {
    visibility: visible;
}
.onzichtbaar {
    visibility: hidden;
}
.knoppen {
    grid-area: knoppen;
    padding-top: 10px;
    padding-bottom: 10px;

}

/*in de hoofding*/
#start {
    float: left;
    
}
h3 {
    text-align: center;
    letter-spacing: 5px;
    text-transform: uppercase;
    font-size: larger;
}
/*de linken*/
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;
  }

 /*Stuurknoppen*/
 button[type="button"] {
    background-color: #91946A; 
     border: none;
     color: white;
     padding: 16px 32px;
     text-align: center;
     text-decoration: none;
     display: inline-block;
     font-size: 16px;
     margin: 4px 2px;
     transition-duration: 0.4s;
     cursor: pointer;
     width:150px;
     
   }
   button[type="button"]:hover {
       background-color: white;
     color: black;
     border: 2px solid #555555;
   }
      /*einde stuurknopen*/
    /*de knoppen*/
  .knoppen button {
    background-color: gray; 
     border: none;
     color: white;
     padding: 4% 4%;
     text-align: center;
     text-decoration: none;
     display: inline-block;
     font-size: 90%;
     margin: 4px 2px;
     transition-duration: 0.4s;
     cursor: pointer;
     width:10%;
     height: 10%
     
   }
   .knoppen button:hover {
    background-color: white;
     color: black;
     border: 2px solid #555555;
   }
   .knoppen button:disabled{
       background-color: darkolivegreen;
   }  

   div.knoppen section {
    margin-left:10%;
   }

#uitleg {
    background-color: steelblue;
    padding: 1%;
    margin-top: 3%;
    
}

#uitleg p {
    padding: 3px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 13pt;
    color:gold;

}
#aanslagen {
    padding: 3px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 13pt;
    color:black
}
#oplossing {
    width: 80%;
    padding: 3px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 13pt;
}
.start {
    background-color: brown;
    color:brown;
    width: 30px;
    height: 30px;
    padding: 3px;
    border: 1px solid black;
    font-family: "Lucida Console", Courier, monospace;
    font-size: 1.5em;
    display: inline-block;
    margin-bottom: 4px;
}

.geraden {
    background-color: yellow;
    color: black;
    width: 30px;
    height: 30px;
    padding: 3px;
    border: 1px solid black; 
    font-family: "Lucida Console", Courier, monospace;
    font-size: 1.5em;
    display: inline-block;
    margin-bottom: 4px;
}

.spatie {
    /*background-color: antiquewhite;
    color: white;*/
    background-color: steelblue;
    color: steelblue;
    width: 30px;
    height: 30px;
    padding: 3px;
    border: 1px solid steelblue; 
    display: inline-block;
    /*margin-bottom: 4px;*/
}

@media  (max-width:420px) {
    .kaft {
        width: 100%;
    }
    
       /*de knoppen*/
  .knoppen button {
    background-color: gray; 
     border: none;
     color: white;
     padding: 3% 3%;
     text-align: center;
     text-decoration: none;
     display: inline-block;
     font-size: 90%;
     margin: 4px 2px;
     transition-duration: 0.4s;
     cursor: pointer;
     width:9%;
     height: 9%;     
   }

   #uitleg p {
    padding: 2px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 10pt;
    color:gold;

}
#aanslagen {
    padding: 2px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 10pt;
    color:black
}
#oplossing {
    width: 90%;
    padding: 3px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 10pt;
}
}