/*grid defenitie*/

.kaft {
    display: grid;
    grid-template-areas: 
    'hoofding'
    'inhoud'
    'uitslag'    ;
    gap: 7px;
    width: 70%;
    margin: auto;
    padding: 15px 15px;
    background: rgb(2,0,36);
background: radial-gradient(circle, rgba(2,0,36,1) 0%, rgba(93,121,9,1) 21%, rgba(0,212,255,1) 100%);
}

.hoofding {
    grid-area: hoofding;
    padding-top: 10px;
    padding-bottom: 10px;
}

.inhoud {
    grid-area: inhoud;
}

.uitslag {
    grid-area: uitslag;
}

/*komt in hoofding*/
#start {
    float: left;
}
h3 {
    margin-left: 35%;
}
/* opmaak 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;
}

/*invul gegevens toepassing*/
input[type=button], input[type=reset] {
background-color: #4CAF50;
border: none;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
}
input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover {
background-color: #33FFCC;

}


label {
font-family: Arial;
font-size:small;
font-weight: bold;
padding:3px;
margin-top:8px;
margin-bottom:8px;
display: block;
}

fieldset {
 margin:auto;
 border:2px solid green;
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
width: 70%;
background-image: linear-gradient(-90deg,#EEE8AA, #AFEEEE);

}
input[type=text], input[type=number], input[type=range] {
width:100%;
box-sizing: border-box;
padding:4px;
border: 2px solid green;
border-radius: 4px;
margin: 4px;
background: #EDEDED;
text-align:  center;
}
#radio label {
display:  inline;
}

/*uitslag tabel*/
#uitslag {
    margin: auto;
    width:70%;
    margin-top:10px;
    font-family: 'Abhaya Libre';font-size: 16px;
    }
    table {
        border-collapse: collapse;
        width: 100%;
    }
    
    th, td {
        text-align: left;
        padding: 8px;
        border: solid 0.1px
    }
    
    
    tr:hover {
        background-color: #AFEEEE;
    }
    .hoofd {
    background-color: black;
    color: white;
    border: solid 0.1px;
    }
    .eval {
    text-align: center;
    }
    .hoofd td {
     padding:8px;
    }
    tr:nth-child(3) {
    background-color: #f2f2f2;
    }

    /*----------*/
    @media (max-width: 400px) { 
        .kaft {
            width: 95%;
            padding: 5px 5px;
        }
        fieldset {
            max-width: 90%;
        }

        #uitslag {
            max-width: 90% ;
        }

    }