/* kleuren */

:root{
    --purple: rgb(85, 24, 120);
    --purpleTitel: rgb(109, 33, 153);
    --purpleText: rgb(176, 123, 206);
    --footerColor: rgb(36, 18, 46);
}


/* navi */

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

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

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




/* body */

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

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

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

#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%;
    }
}

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

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



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

    padding: 20px;

    text-align: center;
}

@media (max-width: 1300px){
    .gridflex{
        grid-template-columns: repeat(1, 1fr);

        padding: 0;
    }

    .item img{
        width: 80%;
    }

    #topImg img{
        max-width: 95%;
    }
}

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

    width: 80%;

    align-content: center;

    justify-self: center;
}

.line {
    grid-column: 1 / -1;
    background-color: var(--purple);
    height: 3px;
}