*{
color: black;
box-sizing: border-box;
overflow: hidden;
}
header{
background-image: url('../afbeeldingen/cassette-pop-art-seamless-pattern-free-vector.jpg');
background-size: cover;
min-height: 30vh;
margin: none;
}
nav img{width: 10%;
float: left;}

#hoofdpagina {background-color: #FF2032;
color: black;}
#RoyNav {background-color: #7DFFC2;}
#KeithNav {background-color: #7DB3F5;}
#AndyNav {background-color: #FFFF64;}

nav ul li{
color: black;
text-align: center;
float: left;
padding-left: 12%;
padding-top: 3.5%;
padding-bottom: 1%;
border: 5px;
}

#navlist li
{
display: inline;
list-style-type: none;
}

#navlist a { padding: 3px 10px; }

#active li{
padding: 3px 10px;
background-color: #FFFF64;
}

#navlist a:link, #navlist a:visited
{
text-decoration: none;
}
#navlist a:hover
{
color: #fff;
text-decoration: none;
}
main{background-color: lightcyan;}
header h1{text-align: center;
color: yellow;
font-size: 75px;
width: 30%;
margin-left: 35%;
margin-right: 35%;
}
main h2{text-align: center;
margin-bottom: 0;}
main{display: grid;
grid-template-columns: 33% 33% 33%;
grid-template-rows: 33% 33% 33% 33%;
grid-column: 4;
grid-row: 4;}

main :nth-child(1){grid-column-start: 1;
grid-column-end: 2;}
main :nth-child(2){grid-column-start: 1;
    grid-column-end: 2;
grid-row-start: 2;
grid-row-end: 3;}
main :nth-child(3){grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 3;
grid-row-end: 4;}
main :nth-child(4){grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 2;}
main :nth-child(5){grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: 3;}
main :nth-child(6){grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 3;
grid-row-end: 4;}
main :nth-child(7){grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 2;}
main :nth-child(8){grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 2;
grid-row-end: 3;}
main :nth-child(9){grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 3;
grid-row-end: 4;}

.layout main :nth-child(1){grid-column-start: 2;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 2;}
.layout main :nth-child(2){grid-column-start: 2;
grid-column-end: 4;
grid-row-start: 2;
grid-row-end: 3;}
.layout main :nth-child(3){grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 2;}
.layout main :nth-child(4){grid-column-start: 2;
grid-column-end: 4;
grid-row-start: 3;
grid-row-end: 4;}
.layout main :nth-child(5){grid-column-start: 2;
grid-column-end: 4;
grid-row-start: 4;
grid-row-end: 5;}
.layout main :nth-child(6){grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 3;
grid-row-end: 4;}
main img{width: 50%;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 5%;}

footer{padding: 1%;}
#footer{background-color:#FF2032;}
#Andyfooter{background-color: #FFFF64;}
#Keithfooter{background-color: #7DB3F5;}
#Royfooter{background-color: #7DFFC2;}