body{
    font-family: "montserrat", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-size: 12pt;
    color: black;
    font-weight: 500;
    background-color: #f0f2da ;

}

h1, 
h3, 
h4, 
h5, 
h6 {
    font-family: "montserrat", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    text-align: center;
    color: black;
    font-weight: 700;
    text-transform: uppercase;
}


nav{
    padding: 5px;
    margin-bottom: 25px;
}

img {
    display: block;
    width: 160px;
    margin: 0px auto;
}
.form_header{
    width: 700px;
    margin: 0px auto;

}

/**stylen van het formulier**/

/**zorgen dat de font family die ingesteld werd voor de body overgenomen wordt door de verschillende
elementen van het formulier door alle browsers**/
button,
input,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  box-sizing: border-box;
}



form{
    width: 700px;
    padding: 20px;
    margin: 0px auto 100px auto;
}


input, select, textarea{
    padding: 10px 5px;
    border: 1px solid black;
}

/** wanneer de width van de input voor radio en checkbox 100% is krijg je een ongewenste plaatsing**/
input[type="radio"], input[type="checkbox"]{
    width: 10px;
}

fieldset{
    border: 1px solid black;
    color: black;
}

/** pas margin toe op de 2 fieldsets**/
fieldset:nth-child(2){
    margin-top: 20px;
}

fieldset ul {
    display: contents;
}


/** alle fields en labels uitlijnen in kolommen**/
.grid_row{
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 15px;
    justify-items: stretch;
    margin-top: 20px;
}


label {
    color: black;
    grid-column: 1 / 2;
    place-self: center end;
    text-align: right;
    
    
}

input, select, textarea {
    grid-column: 2;
    justify-self: stretch;
}

/** groepeer de radio's**/
.radiolabel {
    margin: 0px;
}

.radio_buttons{
    text-align: left;
}

textarea{
    resize: none; 
}



/** stylen van de knoppen **/

input[type="button"] {
    background-color: black;
    color: white;
  
    
}

input[type="reset"], input[type="button"]{
    width: 100%;
    padding: 10px;
    margin: 0px auto;
    border: 0px;
    text-transform: uppercase;
    font-weight: 700;

}

input[type="reset"]{
    background-color: white;
    color: black;
    border-radius: 0px;
}

/** hover staat van de knoppen**/
input[type="button"]:hover{
    background: white;
    color: black;
    cursor: pointer;
    
}

input[type="reset"]:hover{
    background: gray;
    cursor: pointer;
    color: white;
}