header{
    grid-template-columns: auto auto;
    align-items: center;
    position: fixed;
    top:0px;
    left:0px;
    right:0px;
    z-index: 10;
    box-shadow: 2px 0px 4px #707070;
    font-size: 18px;
}
    
header > a{
    display: block;
    width: 150px;

}

header > div{
    justify-self: end;
}

header aside{
    justify-self: end;
    font-weight: bold;
}

header nav a{
    padding: 0px 5px;
}

header nav a:after{
    display:block;
    content: '';
    border-bottom: solid 2px #c20000;  
    transform: scaleX(0);  
    transition: transform 250ms ease-in-out;
}


header nav a:hover:after{
    transform: scaleX(1);
}


/* javascript */


.js-shrink-logo{
    width:100px;
}


/* Handheld Devices */
@media screen and (max-width:1100px){
    header nav{
        background-color: #c20000;
        color:white;
        width:90%;
        height:100%;
        position: fixed;
        left: -90%;
        top: 0px;
        overflow-y: scroll;
        transition-delay: 0.1s;
        display: grid;
        grid-template-columns: 1fr;
        row-gap: 5px;
        font-size: 1.5em;
        font-weight: bold;
        align-items: center;
    }

    header nav::-webkit-scrollbar{
        display: none;
    }

    header nav > a{
        padding: 10px 10%;
    }

    header nav > button{
        justify-self: right;
        font-size: 1.5em;
    }

    .js-menu-hide{
        display: none;
    }

    #header-menu.js-menu-animate{
        left:0;
    }
}

/* Desktop */
@media screen and (min-width:1101px){
    header > a{
        width: 250px;
    }

    header > div{
        height: 100%
    }

    header aside{
        align-self: end;
    }

    header nav{
        align-self: center;
        padding-bottom: 5px;
    }

    #header-menu.js-menu-animate{
        transition: unset;
    }

    .js-shrink-logo{
        width:175px;
    }   
}