/*@media screen and (max-width: 800px)  {*/
@media screen and (aspect-ratio < 5/6)  {
    .mobile-header{
        visibility: visible;
        height:8vh;
    }
    .desktop-header{
        visibility: hidden;
    }
    ul{
        margin-top: 0;
    }
    .header-logo{
        height:100%;
        box-sizing: border-box;
        /*height:45px;*/
    }
}

/* COMPUTER SCREEN */
/*@media screen and (min-width: 801px)  {*/
@media screen and (aspect-ratio >= 5/6) {
    .mobile-header{
        visibility: hidden;
        /*height: 0.1vh;*/
    }
    .desktop-header{
        visibility: visible;
    }
    ul{
        margin-top: 10px;
    }
    .header-logo{
        height:45px;
    }
}

.mobile-header{
    opacity: 1.0;

    #menu-button{
        position: absolute;
        right: 0;
        height:100%;
        aspect-ratio: 1/1;
        /*height:45px;*/
        /*width:45px;*/
        opacity: 0;
        /*z-index: 10;*/
    }

    ul{
        background: #f1efe8;
        visibility: hidden;
        display:none;
        z-index: 1;
    }

    .hamburger-menu{
        height:100%;

        button{
            display: block;
            box-sizing: border-box;
            height:100%;
            aspect-ratio: 1/1;
            /*height:50px;*/
            float:right;
            border:none;

            img{
                display:block;
                /*height:45px;*/
                height:100%;
            }
        }
    }

    .close-button{
        display: none;
        visibility: hidden;
    }


    #menu-button:checked ~ .open-button{
        visibility: hidden;
        display:none;
    }

    #menu-button:checked ~ ul, #menu-button:checked ~ .close-button{
        visibility: visible;
        display:block;
    }

    li{
        width: 100%;
        text-align: left;
    }
}

.desktop-header{
        opacity: 0.90;
}

header{
    top:0;
    width: 100%;
    color: rgb(30, 30, 30);
    font-weight: bold;
    font-size: 1.0em;

    .header-logo{
        float:left;
        padding:5px;

        img{
            height:100%;
        }
    }

    nav{
        position: fixed;
        background: #f1efe8;
        width: 100%;
        z-index: 100;
    }

    .nav-margin{
        height: 75px;
    }

    .drop-down{
        display: block;
        visibility: hidden;
        opacity: 0;
        position:absolute;
        top:45px;
        left:0;
        width:200px;
        text-align: left;
        transition: visibility 0s, opacity 0.3s linear;
        background: whitesmoke;
    }
    .dropdown-container:hover .drop-down{
        visibility: visible;
        opacity: 1;
    }
    .drop-down:hover{
        display:block;
    }

    ul{
        list-style-type: none;
        text-align: right;
        width: 100%;
        box-sizing: border-box;
        padding: 0 5% 0 0;

        li{
            position:relative;
            display: inline-block;

            a, button{
                display: block;
                padding:10px;
                text-decoration: none;
                color: inherit;
                transition: 0.5s ease;
                background: linear-gradient(to left, rgba(247, 132, 0, 1.0), rgba(247, 132, 0, 0.0) 25%, rgba(247, 132, 0, 0.0) 100%);
                background-size:150% auto;
                font: inherit;
                border: none;
            }
            a:hover, button:hover{
                background-position: 100%;
            }
        }
    }
}