html,
body {
    --color--background-blue: #033e5c;
    --color--whitish: #f8f7e5;

    margin: 0;
    padding: 0;
    background-color: var(--color--background-blue);
}

main {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(12, 1fr);
    height: 100vh;
}


.menuTitle {
    grid-column: 4/10;
    grid-row: 3/8;
    display: flex;
    flex-direction: column;
    align-items: center;
}


#mainMenuNav {
    z-index: 5;
    grid-column: 2/12;
    grid-row: 8 /11;
    display: flex;
    /* grid-template-columns: repeat(4, 1fr); */
    justify-content: space-between;
    /* gap: calc(100vw/16); */


    a {
        color: var(--color--whitish);
        text-decoration: none;
        /* no underline */
        border-radius: var(--button-corner-radius);
        box-shadow: 10px 5px var(--color--whitish);
        border: 0.1rem solid #f8f7e5;
        width: 15vw;
        height: 15vw;

        div {
            display: flex;
            flex-direction: column;
            font-family: "Zalando Sans SemiExpanded";
            font-size: larger;
            font-weight: 700;
            align-items: center;
            height: 100%;
            width: 100%;
            position: relative;

            p {
                z-index: 1;
                position: absolute;
            }

            img {
                object-fit: cover;
                width: 100%;
            }
        }

        svg {
            fill: currentColor;
        }
    }
}