/* [ON BIG SCREEN] */
/* (A) WRAPPER */
#hamnav {
    position: fixed;
    z-index: 2;
    left: 0;
    top: 0;
    width: 100vw;
    height: 8vh;
    min-height: 8vh;
    background-color: rgba(31, 30, 30, 0.24);
}

#hamnav h1 {
    text-decoration: underline;
}

#hamnav a {
    display: none;
}

/* (B) HORIZONTAL MENU ITEMS */
#hamitems {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    padding: 0 10px;
}

#hamitems a {
    flex-grow: 1;
    flex-basis: 0;
    padding: 10px;
    color: white;
    text-decoration: none;
    text-align: center;
    font-size: 1.8rem;
    font-weight: 500;
    letter-spacing: .2rem;
    text-decoration: none;
    color: white;
    display: block;
}

#hamitems a:hover {
    color: #F9F871;
}

/* (C) HIDE HAMBURGER */
#hamnav label, #hamburger {
    display: none;
}

/* [ON SMALL SCREENS] */
@media screen and (max-width: 768px) {
    /* (A) BREAK INTO VERTICAL MENU */
    #hamitems a {
        box-sizing: border-box;
        display: block;
        width: 100%;
        background-color: rgba(30, 30, 30, 0.8);
    }

    #hamitems .logoDesktop
    {
        display: none;
        padding: 0%;
        height: 0px;
    }

    /* (B) SHOW HAMBURGER ICON */
    #hamnav label {
        display: inline-block;
        color: white;
        height: 4vh;
        width: 4vh;
        position: fixed;
        top: 2vh;
        left: 2vh;
    }

    #hamnav .logoMobile {
        display: block;
        position: fixed;
        left: 50%;
        transform: translate(-50%);
        top: 2vh;
        height: 4vh;
    }

    #hamnav h1 {
        font-size: 4vh;
        line-height: 4vh;
    }

    /* (C) TOGGLE SHOW/HIDE MENU */
    #hamitems {
        display: none;
    }

    #hamnav input:checked ~ #hamitems {
        display: block;
        position: fixed;
        top: 8vh;
    }
}