header {
    position: sticky; /* Sikrer at headeren sidder i toppen af siden konstant */
    top: 0;
    z-index: 1000; /* Sørger for at headeren er forrest mens man scroller ned over siden */
    display: flex;
    flex-direction: row;
    width: 100dvw;
    height: 5vw;
    align-items: center;
    background-color: var(--nipponRed);
}

#main-logo {
    height: 100%;
    padding: 0.75rem 2rem 0.75rem 2rem;
    cursor: pointer;
}

#submenus {
    display: flex;
    flex-direction: row;
    margin: 0px 4rem 0 2rem;
    width: 100%;
    height: 100%;
    justify-content: space-around;
}

.menu-item {
    display: flex;
    position: relative;
    height: 100%;
    
    & h3 {
        align-self: center;
        color: white;
        margin: 0rem 1rem;
        height: fit-content;
        font-weight: lighter;
        cursor: pointer;
        text-align: center;
    }
}

.dropdown {
    display: none; /* Skjuler dropdown menuen inden tilhørende navbar element bliver hover'et */
    position: absolute;
    top: 100%;
    background-color: var(--nipponRed);
    width: 100%;
    min-width: max-content;

    &:last-child { /* Sørger for at dropdown menuen er rundet, kun i bunden */
        border-radius: 0 0 0.5rem 0.5rem;
    }
    
    & p {
        padding: 1rem;
        margin: 0;
        cursor: pointer;
        color: white;

        &:last-child { 
            border-radius: 0 0 0.5rem 0.5rem;
        }
        
        &:hover {
            background-color: #0a1936;
        }
    }
}

.menu-item:hover {
    background-color: var(--nipponBlue);

    & .dropdown {
        display: block; /* Viser dropdown menuen når navbar elementet bliver hover'et */
    }
}

.icons-menu {
    display: flex;
    flex-direction: row;
    right: 0;
    margin: 0px 2rem 0 0.5rem;
    width: 8rem;
    height: 100%;
    justify-items: center;

    & .icons {
        border-radius: 0;
        margin: 0rem 0.25rem;
        width: 25%;
        cursor: pointer;
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        border-radius: 0;
        
        &::after { /* Dette bliver faktisk ikke brugt men ideen var at man med JS kun ændre content til at vise 
                    antal af kasser der blev købt, og så ville tallet under kurven ændret sig efter det
                    PRØV: at sætte noget ind mellem ""-tegnene (helst et tal) */
            content: "";
            position: absolute;
            transform: translate(0, 120%);
            color: #FFF;
            font-size: 1rem;
            font-weight: bold;
            text-align: center;
            min-width: 100%;
        }

        & img {
            border-radius: 0;
        }
    }
    
}