: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: 17px;
}
body {
  background: rgb(245, 235, 223);
}
.kaft {
  display: grid;
  grid-template-areas: 
  'start_ hoofding '
  'omspel omspel '
  'info info';
  grid-template-rows: 8vh 1fr 25vh ;
  grid-template-columns: 10vw 1fr;
  gap: 5px;
  margin: auto;
  width:50%;
  background:var(--achtergrond_2) ;  

}
.start {
  grid-area: start_;    
  
}
.hoofding {
  grid-area: hoofding;
  
}
.omspel {
  grid-area: omspel;
  margin: auto;
 
}
.info {
  grid-area: info;
  margin: auto;
}
.hoofding h3 {
  text-align: center;
  text-transform: uppercase;
  letter-spacing:.6rem ;
  font-size: 1.2rem;
  color: black;
  text-shadow: 2px 2px blue;
}
.start a {
  margin-top: 3vw;
  margin-left: 1vw;
}
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;
}

.tekst {
     font-family: verdana;
    font-size: 10pt;
     background-color: #DEDEDE;
}
.tekst-rood {
  color:red;
}

td .tekst

 {  background-color: #DEDEDE;

}

#omspel {
  margin:auto;
  width: 320px;
  border: solid 0.5px;
 
}

#kleurKiezen{
  width:300px;
  background-color: #D9D9D9;
}
#instellen{
  width:300px;
  background-color: #D9D9D9;
}
.cirkel
 {
   border: solid 1px;
   height: 30px;
   width: 30px;
   border-radius:15px;
}

.instelcirkel
 {
   border: solid 1px;
   height: 30px;
   width: 30px;
   border-radius:15px;
}

.ingesteldcirkel
 {
   border: solid 1px;
   height: 30px;
   width: 30px;
   border-radius:15px;
    background-color:  #FFFFFF;
}

.controlecirkel

 {
    border: solid 1px;
    height: 20px;
    width: 20px;
    border-radius:10px;
    background-color:  #DCDCDC;
}

.compcirkel
 {
  border: solid 1px;
   height: 30px;
   width: 30px;
   border-radius:15px;

}

.kieskleur
 {
  height: 50px;
  width: 50px;
}

#kiesplus
 {
    background-image:  url(beeld/min.png);
    background-repeat:  no-repeat;
    
}

#kiesmin
 {
    background-image:  url(beeld/plus.png);
    background-repeat:  no-repeat;
}
#spel {
  width:300px;
}
#spel tr
 {
     background-color:  #993300;
}

button
 {
    width: 30px;
    height: 30px;
}

details {
  margin: auto;
}

  ul {
        list-style: none;
        width:300px;
        margin-left: -35px;
        /*display: none;*/
   }

   .buttonClass {
    display: block;
    font-size:.6rem;
    font-family:Arial;
    width: 80%;
    padding:2px;
    border-width:1px;
    color:#757d6f;
    border-color:#b2b8ad;
    font-weight:bold;
    text-decoration: none;
    border-top-left-radius:6px;
    border-top-right-radius:6px;
    border-bottom-left-radius:6px;
    border-bottom-right-radius:6px;
    box-shadow:inset 0px 0px 14px -3px #f2fadc;
    text-shadow:inset 0px 1px 0px #ced9bf;
    background:linear-gradient(#dbe6c4, #9ba892);
  }
  
  .buttonClass:hover {
    background: linear-gradient(#9ba892, #dbe6c4);
  }
  @media screen and (max-width : 800px){
   
    
    .kaft {
        width:80%;
    }
    
    

}
@media screen and (max-width : 600px){
   
   :root {
       font-size: 15px;
   }
  
    .kaft {
        width:100%;
    }
    
    
}