header
{
    width: 100%;
    height: 35px;
    position: fixed;
    background-color: var(--main-bg);
    text-align: right;
    z-index: 5;
}

header:after
{
    content: '';
    bottom: -20px;
    left:  0;
    width: 100%;
    height: 40px;
    display: block;
    position: absolute;
    background: inherit;
    mask: url('../images/header.svg') repeat-x bottom;
    z-index: -1;
}

header .logo
{
    background-image: url('../images/LBM - Icon.svg');
    width: 60px;
    height: 60px;
    position: absolute;
}

header nav
{
    font-size: 2rem;
    font-family: 'HeadlineTwoCondensed';
    letter-spacing: 0.02em;
    gap: 1.5rem;
    padding: 0.8rem 0;
}

.open-menu, .close-menu
{
    display: none;
    font-size: 30px;
    background: none;
    color: var(--yellow-2);
    cursor: pointer;
}

#overlay
{
    background: var(--trans-dark);
    position: fixed;
    inset: 0;
    z-index: 9;
    display: none;
}

@media screen and (max-width: 700px)
{
    .open-menu, .close-menu
    {
        display: inline-block;
        padding: 0.8rem 0;
    }

    header nav
    {
        position: fixed;
        top: 0;
        right: -100%;
        height: 100vh;
        width: min(20rem, 100%);
        z-index: 10;
        background-color: var(--main-bg);
        flex-direction: column;
        font-size: 2.5rem;
        text-align: center;
        padding: 3rem;
        gap: 2.5rem;
        transition: all ease 0.25s;
        transition-delay: 0.2s;
    }

    header nav a:hover
    {
        border-bottom: 1px solid var(--white);
    }

    #menu.show
    {
        right: 0;
        transition-delay: 0s !important;
    }

    #menu.show ~ #overlay
    {
        display: block;
    }
}