body{width: 100%;
margin: 0;}
ul#navlist
{
margin: 0 0 0 30px;
padding: 0;
width: 12.5%;
}

#navlist li
{
list-style-type: none;
background-color: white;
color: black;
border: .2em solid black;
font-weight: 600;
text-align: center;
padding: .3em;
margin-bottom: .1em;
}

#navlist li a
{
color: black;
text-decoration: none;
display: block;
}

#navlist li a:hover
{
background-color: orange;
color: #191970;
}
header{margin: 0;}
nav{
margin: 0;}
main{background-color: grey;}

h1{text-align: center;}

#hoofdpagina{background-image: url('../afbeeldingen/typemachine.jpg');
background-size: cover;
min-height: 120vh;
margin:0px;
display:grid;
grid-template-columns: 1fr 3fr 1fr;
grid-template-rows: 50px 1fr 50px;}

#hoofdarticle h2{text-align: center;
font-size: 50px;}

#navcontainer2
{
transform: translate(-30px, -10px); /* Verplaatst het element */ 
overflow: hidden; 
margin: 10px 0 0 30px;
padding: 0;
height: 20px;
}

#navcontainer2 ul
{
margin: 0;
text-align: center;
}

#navcontainer2 ul li
{
display: block;
float: left;
text-align: center;
padding: 0;
margin: 0;
}

#navcontainer2 ul li a
{
background: #fff;
width: 78px;
height: 18px;
border: 1px solid black;
border-right: none;
padding: 0;
margin: 0 0 10px 0;
color: black;
text-decoration: none;
display: block;
text-align: center;
font: normal 10px/18px "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;
}

#navcontainer2 ul li a:hover
{
color: #930;
background: #f5d7b4;
}

#navcontainer2 a:active
{
background: #c60;
color: #fff;
}

#navcontainer2 li #active2 a
{
background: #c60;
border: 1px solid black;
color: #fff;
}

#hoofdarticle {
padding: 20px;
margin-top: 10%;
font-family: Arial, Helvetica, sans-serif;
color:white;
background-color: grey;
margin-left: 20%;
width: 60%;
font-size: 20px;
grid-column-start:2;
grid-column-end:3;
grid-row-start:2;
grid-row-end:3;}

#paginaMain{
padding: 2%;
display: grid;
grid-template-columns: 22.5% 22.5% 22.5% 22.5%;
grid-column-gap: 2%;
grid-template-rows: 22.5% 22.5%;
grid-row-gap: 2%;}

#paginaMain :nth-child(1){
grid-column-start: 1;
grid-column-end: 2;
}

#paginaMain :nth-child(2){
grid-column-start: 2;
grid-column-end: 3;
}
#paginaMain :nth-child(3){
grid-column-start: 3;
grid-column-end: 4;
background-color: black;
color: white;
text-align: center;
height: 82%;
margin-top: 0;
}

#paginaMain p{padding: 5px;}

#paginaMain :nth-child(4){
grid-column-start: 4;
grid-column-end: 5;
}
#paginaMain :nth-child(5){
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 2;
grid-row-end: 3;
}
#paginaMain :nth-child(6){
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: 3;
background-color: black;
color: white;
text-align:justify;
height: 100%;
margin-top: 0;
}
#paginaMain :nth-child(7){
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 2;
grid-row-end: 3;
}
#paginaMain :nth-child(8){
grid-column-start: 4;
grid-column-end: 5;
grid-row-start: 2;
grid-row-end: 3;
background-color: black;
color: white;
font-size: 12pt;
text-align:justify;
height: 100%;
margin-top: 0;}

#paginaMainZwart{
padding: 2%;
display: grid;
grid-template-columns: 22.5% 22.5% 22.5% 22.5%;
grid-column-gap: 2%;
grid-template-rows: 22.5% 22.5%;
grid-row-gap: 2%;}

#paginaMainZwart :nth-child(1){
grid-column-start: 1;
grid-column-end: 2;
}

#paginaMainZwart :nth-child(2){
grid-column-start: 2;
grid-column-end: 3;
}
#paginaMainZwart :nth-child(3){
grid-column-start: 3;
grid-column-end: 4;
background-color: white;
color: black;
text-align: center;
height: 82%;
margin-top: 0;
}

#paginaMainZwart p{padding: 5px;}

#paginaMainZwart :nth-child(4){
grid-column-start: 4;
grid-column-end: 5;
}
#paginaMainZwart :nth-child(5){
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 2;
grid-row-end: 3;
}
#paginaMainZwart :nth-child(6){
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: 3;
background-color: white;
color: black;
text-align:justify;
height: 100%;
margin-top: 0;
}
#paginaMainZwart :nth-child(7){
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 2;
grid-row-end: 3;
}
#paginaMainZwart :nth-child(8){
grid-column-start: 4;
grid-column-end: 5;
grid-row-start: 2;
grid-row-end: 3;
background-color: white;
color: black;
font-size: 12pt;
text-align:justify;
height: 100%;
margin-top: 0;}

#paginasHeaderWit{
background-color: black;
color: white;}
#paginaHeaderZwart{
background-color: white;
color: black;
}

#paginaMainZwart img{width: 100%;}

#paginaMain img{width: 100%;}

#mainBody{display: grid;
grid-template-columns: 20% 20% 20% 20% 20%;
grid-template-rows: 5% 20% 20% 20% 20%;}
#mainBody #hoofdpagina{
grid-column-start: 1;
grid-column-end: 6;
grid-row-start: 1;
grid-row-end: 6;
}
#mainBody #paginasHeaderWit{
position: absolute;
width: 100%;
overflow: hidden;
grid-column-start: 1;
grid-column-end: 6;
grid-row-start: 1;
grid-row-end: 2;}

#mainBody #navcontainer{
width: 100%;
position: absolute;
transform: translate(-30px, 80px); /* Verplaatst het element */
overflow: hidden;
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 3;
grid-row-end: 4;}

#paginaHeaderZwart{border: 1px solid;}

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

/* Navigatiebalk */
nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: none;
    padding: 10px 20px;
}

.nav-links {
    list-style: none;
    display: flex;
    gap: 20px;
}

.nav-links li {
    display: inline;
}

.nav-links a {
    text-decoration: none;
    color: white;
    font-size: 18px;
    padding: 10px;
}


.menu-btn {
    display: none;
    flex-direction: column;
    cursor: pointer;
}

.bar {
    width: 30px;
    height: 4px;
    background-color: white;
    margin: 5px 0;
}


#menu-toggle {
    display: none;
}


@media screen and (max-width: 768px){
    .menu-btn {
        display: flex;
    }

    .nav-links {
        display: none;
        flex-direction: column;
        width: 100%;
        position: absolute;
        top: 50px;
        left: 0;
        background-color: #333;
    }

    /* Menu openen bij checkbox-klik */
    #menu-toggle:checked ~ .nav-links {
        display: flex;
    }
    #hoofdarticle {
padding: 20px;
margin-top: 10%;
font-family: Arial, Helvetica, sans-serif;
color:white;
background-color: grey;
margin-left: 20%;
width: 60%;
font-size: 20px;
grid-column-start:2;
grid-column-end:3;
grid-row-start:2;
grid-row-end:3;}

#paginaMain{
padding: 0.5%;
display: grid;
grid-template-columns: 45% 45%;
grid-column-gap: 3%;
grid-template-rows: 45% 45% 45% 45%;
grid-row-gap: 3%;}

#paginaMain :nth-child(1){
grid-column-start: 1;
grid-column-end: 2;
}

#paginaMain :nth-child(2){
grid-column-start: 2;
grid-column-end: 3;
}
#paginaMain :nth-child(3){
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 2;
grid-row-end: 3;
background-color: black;
color: white;
text-align: center;
height: 82%;
margin-top: 0;
}
#paginaMain :nth-child(4){
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: 3;
}
#paginaMain :nth-child(5){
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 3;
grid-row-end: 4;
}
#paginaMain :nth-child(6){
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 3;
grid-row-end: 4;
background-color: black;
color: white;
text-align:justify;
height: 100%;
margin-top: 0;
}
#paginaMain :nth-child(7){
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 4;
grid-row-end: 5;
}
#paginaMain :nth-child(8){
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 4;
grid-row-end: 5;
background-color: black;
color: white;
font-size: 12pt;
text-align:justify;
height: 100%;
margin-top: 0;}

#paginaMainZwart{
padding: 0.5%;
display: grid;
grid-template-columns: 45% 45%;
grid-column-gap: 3%;
grid-template-rows: 45% 45% 45% 45%;
grid-row-gap: 3%;}

#paginaMainZwart :nth-child(1){
grid-column-start: 1;
grid-column-end: 2;
}

#paginaMainZwart :nth-child(2){
grid-column-start: 2;
grid-column-end: 3;
}
#paginaMainZwart :nth-child(3){
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 2;
grid-row-end: 3;
background-color: white;
color: black;
text-align: center;
height: 82%;
margin-top: 0;
}
#paginaMainZwart :nth-child(4){
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: 3;
}
#paginaMainZwart :nth-child(5){
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 3;
grid-row-end: 4;
}
#paginaMainZwart :nth-child(6){
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 3;
grid-row-end: 4;
background-color: white;
color: black;
text-align:justify;
height: 100%;
margin-top: 0;
}
#paginaMainZwart :nth-child(7){
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 4;
grid-row-end: 5;
}
#paginaMainZwart :nth-child(8){
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 4;
grid-row-end: 5;
background-color: white;
color: black;
font-size: 12pt;
text-align:justify;
height: 100%;
margin-top: 0;}

#paginasHeaderWit{
background-color: black;
color: white;}
#paginaHeaderZwart{
background-color: white;
color: black;
}

#paginaMainZwart img{width: 100%;}

#paginaMain img{width: 100%;}

#mainBody{display: grid;
grid-template-columns: 20% 20% 20% 20% 20%;
grid-template-rows: 5% 20% 20% 20% 20%;}
#mainBody #hoofdpagina{
grid-column-start: 1;
grid-column-end: 6;
grid-row-start: 1;
grid-row-end: 6;
}
#mainBody #paginasHeaderWit{
position: absolute;
width: 100%;
overflow: hidden;
grid-column-start: 1;
grid-column-end: 6;
grid-row-start: 1;
grid-row-end: 2;}

}