: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'
    'bank'
    'speler'
    'knoppen';
    gap: 5px;
    width: 55%;
    margin: auto;
    padding: 5% 5%;
    background: var(--achtergrond_2);
}
.hoofding {
    grid-area: hoofding;
    padding-top: 3%;
    padding-bottom: 3%;
}

.bank {
    grid-area: bank;
    padding-top: 2%;
    padding-bottom: 2%;
}

.speler {
    grid-area: speler;
    padding-top: 2%;
    padding-bottom: 2%;
}
.knoppen {
    grid-area: knoppen;
    padding-top: 2%;
    padding-bottom: 2%;
}
/*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;
  }
/*de bank*/
#bankTitel{
    font-family: fantasy; 
    font-size: 30px; 
    font-style: normal; 
    font-variant: normal; 
    font-weight: 700; 
    line-height: 30px;
    letter-spacing: 10px;
    background-color: blue;
    padding: 10px 10px;
    color: red;
}

#bank {
    display: flex;
    flex-direction: row;
    align-items: center;
    height:130px ;
    background-color: darkgreen;
}
#bank >div {
    background-color: darkgreen;
}

 /*de speler*/ 
 #speler {
    display: flex;
    flex-direction: row;
    align-items: center;
    height:130px ;
    background-color: darkgreen;
}
#speler >div {
    background-color: darkgreen;
}
#spelertitel{
    font-family: fantasy; 
    font-size: 30px; 
    font-style: normal; 
    font-variant: normal; 
    font-weight: 700; 
    line-height: 30px;
    letter-spacing: 10px;
    background-color:black;
    padding: 10px 10px;
    color: white;
}
  
  /*de kaarten*/
  img {
    width: 96px;
    height: 120px;
    padding: 2px;
}
/*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:30%;
     
   }
   button[type="button"]:hover {
       background-color: white;
     color: black;
     border: 2px solid #555555;
   }

   #uitslag {
    height:25px ;
    margin-top: 5px;
    margin-bottom: 5px;
    text-align: center;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 20px;
    background-color: black;
    color: red; 
}

#totaalBank {
    float: left;
}
#totaalSpeler {
    float: right;
}

@media only screen and (max-width: 600px) {
    /* CSS-regels voor smartphone-weergave */ 
    .kaft {
        width:95%;
    }
    #bankTitel{
        font-family: Arial, Helvetica, sans-serif;
        font-size: calc(30px/2); 
        line-height: calc(30px/2);
        letter-spacing: 10px;
        padding: 5px 5px;
     }
     #spelertitel{
        font-family: Arial, Helvetica, sans-serif;
        font-size: calc(30px/2); 
        line-height: calc(30px/2);
        letter-spacing: 10px;
        padding: calc(10px/2) calc(10px/2);
        color: white;
    }
    #bank {
        height:calc(130px /2);
     }
     #speler {
        align-items: center;
        height:calc(130px /2); ;        
    }
    img {
        width: calc(96px/2);
        height: calc(120px/2);
        padding: 2px;
    }
    button[type="button"] {
        padding: calc(16px/2) calc(32px/2);
         font-size: calc(16px/1.5);
         margin: 4px 2px;
         width:30%;
    }
    #uitslag {
        font-size: 13px;
    }

}
    
@media only screen and (min-width: 601px) and (max-width: 1024px) {
    /* CSS-regels voor tablet-weergave */
    .kaft {
        width:80%;
    }
    #bankTitel{
        font-family: Arial, Helvetica, sans-serif;
    }
    #spelertitel{
        font-family: Arial, Helvetica, sans-serif;
    }

    }
    
@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 */
    }