body{
    background-color:rgb(255, 208, 0) ;
}
nav{
    overflow: hidden;
    background-color: rgb(37, 37, 37);
    position: sticky;
    top: 10px;
}


nav ul{
    list-style: none;
    overflow: hidden;
    
}

p{
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}


nav li{
    float: left;
    padding-left: 20%; 
    font-size: 25px;
    font-family: "Ubuntu";
    
}

a:hover{
    color:rgb(255, 208, 0);

}

nav a{
    color: white;
    text-decoration: none;

}

header{
    font-family: "Painter PERSONAL USE ONLY";
    font-size: 60px;
    background-color: rgb(255, 208, 0);
    overflow: hidden;
    text-align: center;
}

header p{
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 18px;
    color: white;
}

h2{
    grid-column-start: 2;
    text-align: center;
    font-size: 40px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    color: white;
}

h3{
    font-family: "Painter PERSONAL USE ONLY";

}

h4{
    font-family: "Painter PERSONAL USE ONLY";
    text-align: center;
}

article{

    background-color: rgb(37,37,37);
    color: white;
    text-align: center;
}

main{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    column-gap: 25px;
    background-color:rgb(255, 208, 0) ;
}

main :nth-child(2){
    grid-column-start: 1;
}

main :nth-child(3){
    grid-column-start: 2;
}

main :nth-child(4){
    grid-column-start: 3;
}

section{
    background-image: url(../afbeeldingen/verfwinkel.jpg);
    background-size: cover;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

section img{
    padding-left: 50px;
    width: 40%;
}

section p{
    color: white;
    padding-top: 25px;
    grid-column-start: 2;
    grid-column-end: 3;
}


li{
    text-align: center;
}

#myImage{
    width: 60%;
    padding-left: 20%;
}

#buttons{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

button{
    border-radius: 25px;
    margin-top: 50px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

button:hover{
    color: white;
}

button:nth-child(2){
    background-color: #66c5cc ;
}

button:nth-child(3){
    background-color: #f6cf71 ;
}

button:nth-child(4){
    background-color: #f89c74 ;
}

button:nth-child(5){
    background-color: #dcb0f2 ;
}

button:nth-child(6){
    background-color: #87c55f ;
}

button:nth-child(7){
    background-color: #9eb9f3 ;
}

button:nth-child(8){
    background-color: #fe88b1;
}

button:nth-child(9){
    background-color: #c9db54;
}

button:nth-child(10){
    background-color: #8be0a4;
}

button:nth-child(11){
    background-color: #b497e7;
}

#Tekstkleur{
    grid-column-start: 3;
    grid-column-end: 9;
    text-align: center;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 18px;
    padding-top: 50px;
    color: white;
}

#berekening{
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

#berekening :nth-child(9){
background-color: rgb(255, 208, 0) ;


}

#berekening :nth-child(16){
    background-color: rgb(255, 208, 0) ;
    
    }