*{
    box-sizing: border-box;
}

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


nav{
    grid-area: 1/1/2/6;
    padding-top: 10px;
}



nav ul li{
    float: left;
    padding-left: 5%;
    font-size: 20px;
}

nav a{
    text-decoration: none;
    padding: 5px;
    border: solid black 2px;

    border-radius: 20px;
}

nav a:hover{
    background-color: #ff0000d5;
}

nav a.active{
    background-color: red;
    
}

h1, p ,a{color: white; 
    font-family: Verdana, Geneva, Tahoma, sans-serif;}

header{
    grid-area: 2/1/3/6;
    text-align: center;
    font-size: 50px;
    padding: 10px;
}


main{
    grid-area: 3/1/4/3;
    padding-left: 10px;
    line-height: 20px;
}



/*index*/

#home{
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr ;
    grid-template-rows:  repeat(10, 1fr);
}

#info{
    grid-area: 10/1/11/6;
    background-color: black;
    text-align: center;
    p{
        padding-top: 5px;
    }
}
/*kleuradvies*/


figure{
    grid-area: 3/3/4/6;
    text-align: center;
}

section{
    padding: 10px;
    line-height: 20px;
}



section:nth-child(5){
    grid-area: 4/1/5/6;

    p{
        float: left;
        width: 50%;
    }

    button{
    border: solid 2px black;
    border-radius: 90px;
    padding: 20px;
    float: right;
    padding-right: 20px;

}


}



#taupe{
    
    background-color: #483C32;
}


#pastelblauw{
    
    background-color: #ADD8E6;
    
}

#olijfgroen{
    
    background-color: #808000;

}

#beige{
    
    background-color: #F5F5DC;
    
}


#wit{
    
    background-color: #ffffff;
    
}



#grijs{
    
    background-color: #808080;
    
}

#zwart{
    
    background-color: #000000;
    color: white;

}

#paars{
    
    background-color: #A020F0;
    
}

#oranje{
    
    background-color: #ffa500;
    
}


#roze{
    
    background-color: #ffc0cb;

}




section:nth-child(6){
    grid-area: 5/1/6/3;
    
    p{
        padding-left: 5px;
        padding-top: 10px;
    }

    p:nth-child(5){
        padding-bottom: 20px;
    }

    button{
        border-radius: 20px;
        padding: 10px;
    }
}


footer:nth-child(7){
    grid-area: 15/1/16/6;
    background-color: black;
    text-align: center;
}