:root {
    --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: 16px;
}
* {
    box-sizing: border-box;

}
.kaft   {
    display: grid;
    grid-template-areas: 
    'hoofding'
    'strepen'
    'teerling'
    'punten'
    'teerlingC'
    'knopen'
    ;   
    gap:1.5vw;
    max-width:50%;
    max-height: max-content;
    margin: auto;
    padding: 15px 15px;
    background: var(--achtergrond_2);
}
.hoofding {
    grid-area: hoofding;
    padding:3%;    
    margin-left: 7%;
    margin-right: 7%;
    width:90%;
   
}
    
.strepen {
    grid-area: strepen;
    padding:3%;   
    margin-left: 7%;
    margin-right: 7%;
    width: 90%;
}

.strepen >p {
    font-size: 1.4rem;
    padding-top: 10px;
    color: darkblue;      
}

#teerling {
    grid-area: teerling;
    margin-left: 7%;
    margin-right: 7%;
    width: 90%;
    background-color:chartreuse ;

    
}
.punten {
    grid-area: punten; 
    margin-left: 7%;
    margin-right: 7%;
    width: 90%;   
}

#teerlingC {
    grid-area: teerlingC;
    margin-left: 7%;
    margin-right: 7%;
    width: 90%;
    background-color: rgb(233, 27, 27);;
}
.knopen {
    grid-area: knopen;
}


/*in de hoofding*/
#start {
    float: left;
    font-size: 1.5rem;
    
}
h3 {
    text-align: center;
    font-size: 2rem;
}
/*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;
  }
/*einde linken*/
#strepenSpeler {
    border-style: solid;
    border-radius: 5px;
    border-color: cornflowerblue;
    background-color: chartreuse;
    padding:10px;
    float: left;
}
#strepenCasino {
    border-style: solid;
    border-radius: 5px;
    border-color: cornflowerblue;
    background-color: rgb(233, 27, 27);
    color: black;
    padding:10px;
    float: right;
}

/*de teerlingen*/
.teerling {
    width: 7.6vw;
    height: 7.6vw;   
    margin-left:2vw ;
    margin-right: 2vw;
     
    
}
img {
    width: 7.6vw;
    height: 7.6vw;
}
/*ac

/*tussen de teerlingen de punten van een gooi*/
.speler {
    padding: 10px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.5rem;
    color:black;
    text-align: left;
    font-weight: bold;
}
#punten  {
    color:chartreuse;
    text-align: left;
    float: left;
}
.casino {
    padding: 10px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.5rem;
    color:saddlebrown;
    font-weight: bold;
    text-align: left;
}

.winnaar {
    color:greenyellow;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    font-size: 1.8rem;
}
#puntenC {
    color: rgb(233, 27, 27);
    text-align: right;
    float: right;
   
}
/*###einde van punten gooi###*/

/*.knop  {
    width:14vw ;
    height: 3.5vw;
    margin: 2vw 2vw;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.5rem;
    
}
button:hover {
    background-color: lemonchiffon;
    color: lightcoral;
}*/
button[type="button"] {
    background-color: #91946A; 
     border: none;
     color: white;
     padding: 16px 32px;
     text-align: center;
     text-decoration: none;
     display: inline-block;
     font-size: 1.7rem;
     margin: 4px 2px;
     transition-duration: 0.4s;
     cursor: pointer;
     width:35%;
     
   }
   button[type="button"]:hover {
       background-color: white;
     color: black;
     border: 2px solid #555555;
   }




@media only screen and (max-width: 610px) {
    /* CSS-regels voor smartphone-weergave */
        :root {
            font-size: 12px;
        }
        .kaft {
            max-width: 98%;
            max-height: max-content;
        }
    }
    
    @media only screen and (min-width: 601px) and (max-width: 1024px) {
    /* CSS-regels voor tablet-weergave */
        :root {
            font-size: 14px;
        }
        .kaft {
            width: 70%;
        }


    }
    
    @media only screen and (min-width: 1025px) and (max-width: 1440px) {
    /* CSS-regels voor laptop-weergave */
    }
    
    @media only screen and (min-width: 1441px) {
    /* CSS-regels voor desktop-weergave */
    }