* {
    margin: 0;
    list-style: none;
}

.nav-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100vw;
    background-color: #172F3B;  

    a {
        border-radius: 50px;
        display: flex;
        place-items: center;
        flex-direction: column;
        text-decoration: none;

        .nav-label {
            color: var(--white);
        }

        &:hover {
            color: var(--white);
            text-decoration: underline;
            }

        &:focus-visible {
            outline: 3px solid var(--secondary-action);
            outline-offset: .3em;
        }
    }
}

.mindmap-name {
    background-color: var(--primary-color);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: 1fr;
    place-items: center;
    padding: 1.5em;

    h1 {
        grid-column: 2;
        grid-row: 1;
        font-size: var(--first-line);
        color: var(--white);
    }

    a {
        grid-column: 1;
        justify-self: start;

        &:hover svg, &:hover svg > * {
            fill: var(--secondary-action);
            stroke: var(--secondary-action);
        }
    }
}

.group-name {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: 1fr;
    gap: .5em;
    padding: 1em;

    h2 {
        grid-row: 1;
        grid-column: 2;
    }

    svg, svg > * {
        fill: var(--grey-text-color);
        grid-column: 1;
    }
}

.photo-container {
    display: grid;
    grid-template-columns:repeat(auto-fit, minmax(170px, 1fr));
    padding-bottom: 2em;
    padding: 0;
    padding-bottom: 5em;
        
    img {
        /* Foto's even breed als de grid van photo-container */
        width: 100%;
        display: block; /* moest van sanne */
        aspect-ratio: 1 / 1;
        object-fit: cover;
        box-shadow: rgb(0 0 0 / 0.24) 0px 3px 8px;
        transition: 0.3s ;

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

.footer {
    /* Doordat de applicatie mobile-first is, is de footer niet gelijk te zien */
    display: none;
   
    @media (min-width: 750px) {
        display: flex;
        padding: 5em;
        background-color: #172F3B;
    }    
        
    .footer-list{

        @media (min-width: 750px) {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
            place-items: center;
            width: 100vw;
        }       
    }
}