/* CSS-reset */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Geen punten bij lijst-items */
ul {
    list-style: none;
}

/* Wrapper */
body {
    font-family: 'Bariol', sans-serif;
    /* Het scherm wordt altijd gevuld (viewheight) */
    height: 100dvh;

    /* Grote Ipads en Tablets */
    @media (min-width: 700px) {
        padding-inline-start: 5em;
    }
}

/* Header met mindmap categorie */
header.website-name {
    display: grid;
    /* Ruimte rondom de inhoud in de header */
    padding: 10px;
    background-color: #172F3B;

    /* Desktop */
    @media (min-width: 700px) {
        background-color: #FFFFFF;
    }
}

/* Website naam in de header */
header h1 {
    grid-column: 2;
    color: #FFFFFF;
    font-size: 1.8rem;

     /* Desktop */
    @media (min-width: 700px) {
        color: #172F3B;
        text-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
        padding: 1rem;
    }
}

/* MAIN */
.mindmap-name {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    padding: 3%;
    gap: .5em;
}

.mindmap-name img {
    fill: white;
}

/* Grid */
.photo-container {
    display: grid;
    grid-template-columns:repeat(auto-fit, minmax(170px, 1fr));
    gap: 30px;
    /* Ruimte rondom de foto's maar binnen de container */
    padding: 10px;

    /* Foto's in de grid laten passen en elke foto vierkant maken */
    img {
        /* Foto's even breed als de grid van photo-container */
        width: 100%;
        display:block; /* moest van sanne */
        aspect-ratio: 1 / 1;
        height: auto;
        border-radius: 10%;
        /* Foto wordt bijgesneden zonder vervorming */
        object-fit: cover;
        box-shadow: rgb(0 0 0 / 0.24) 0px 3px 8px;
        transition: 0.3s ;

        &:hover {
            transform: rotate(2deg) scale(1.1);
            box-shadow: rgba(0 0 0 / 0.35) 0px 5px 15px;    
        }
    }

    @media (min-width: 700px) {
        padding-bottom: 5em;}
}

/* Nav */
.nav-bar {
    position: fixed;
    /* Onderaan de pagina */
    bottom: 0;
    left:0;
    right:0;
    grid-row: 3;
    background-color: #172F3B;
    /* Blijft hierdoor voorop komen */
    z-index: 10;

    /* Grote Ipads en Tablets */
    @media (min-width: 700px) {
        /*  */
        max-width: fit-content;
        left: 0;
        top:0;
        bottom:0;
        right:unset;
    }

    ul {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        padding: 25px;
    
        li a {
            display: grid;
            justify-items: center;
            align-items: center;
        }
    
        /* Grote Ipads en Tablets */
        @media (min-width: 700px) {
            display: flex;
            flex-direction: column;
            gap: 10%;
            height: 100%;
            justify-content: space-evenly;
        }
    }   
}

footer {
    display: none;

    /* Grote Ipads en Tablets
    @media (min-width: 700px) {
        display: block;
        translate: -0.4rem;
        background-color: #172F3B;
        padding: 2em;
    }

    .footer-list {
        display: grid;
        grid-template-columns:repeat(auto-fit, minmax(100px, 1fr));
        justify-items: center;
        gap: 1em;
    }

    .footer-list li:nth-child(n+3) {
        padding-left: 7em;
        padding-right: 2em;
        gap: 2em;
    }

    .footer-list img {
        width: 6em;
        height: 6em;
    } */
}