/* kleuren */

:root{
    --red: rgb(120, 24, 24);
    --redTitel: rgb(144, 31, 31);
    --redText: rgb(211, 135, 135);
    --footerColor: rgb(45, 20, 20);
}


/* navi */

nav{
    background-color: var(--red);
}

nav ul li{
    background-color:var(--red);
}

.toggle{
    background-color:var(--red);
}


/* body */

h1{
    color: var(--redTitel);
}

h2{
    color: var(--redTitel);
}

body:not(.navi){
	color: var(--redText);
}

footer{
    background-color: var(--footerColor);
}





/* bovenste foto */
#topImg{
    display: flex;
    justify-content: center; /* Horizontal alignment */
    align-items: center;    /* Vertical alignment */
}
#topImg img{
    width: 80%;
    max-width: 1700px;
}
@media (min-width: 1000px){
    #topImg img{
        width: 60%;
    }
}


/* 1 rij voor mobile */
.gridflex{
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-gap: 10px;

    padding: 5px;

    text-align: center;
}

.item{
    padding: 20px;
    padding-bottom: 20px;

    width: 100%;

    align-content: center;

    justify-self: center;
}

.item img{
    max-width: 85%;
}






/* 2 rijen voor breder scherm */
@media (min-width: 769px){
    .gridflex{
        grid-template-columns: repeat(2, 1fr);
    }

    .item{
        padding-bottom: 100px;
        width: 90%;
    }

    .item h2{
        height: 5%;
    }
    
    .item p{
        height: 32%;
    }
    
    .item img{
        max-height: 55%;
        width: auto;
        max-width: 100%;
    }
}


/* 3 rijen voor nog breder scherm */
@media (min-width: 1500px){
    .gridflex{
        grid-template-columns: repeat(3, 3fr);
    }

    .item p{
        height: 20%; 
    }
}