@keyframes showui {
    from { top: -400px; }
    to { top: 0px}
}

@keyframes hideui {
    from { top: 0px; }
    to { top: -400px}
}

#canvaslayer {
    z-index:-1; 
    top:0; 
    left:0; 
    position:absolute;
    overflow:hidden;
}

#glcanvas {
    position:fixed;
    border:none;
    overflow:hidden;
}

#textlayer {
    z-index:1; 
    top:0; 
    left:0; 
    position:fixed;
    overflow:hidden;
}

#uilayer {
    z-index:2; 
    top:0px; 
    left:0px;
    height:440px;
    width:vw; 
    margin-top:-22px;
    border:none;
    padding:0px;
    
}


#uidiv {
    background-color:#CCCCCCCC;
    top:-400px;
    left:0px;
    height:400px;
    width:50vw;
    position:fixed;
    z-index:0;    
    transition: top 1s;
    transition-timing-function: ease-in-out;

}

#uidiv:hover {
    top:0px;
    border:none;
    transition: top 1s;
    transition-timing-function: ease-in-out;
}

#uihandle {
    background-color:transparent;
    height:40px;
    top:0px;
    position:absolute;
    

}

#hamburger {
    color:white;
    font-size: 40px;
    margin:10px;
    z-index: 4;
    position:fixed;
}

#hamburger:hover ~ #uidiv {
    top:0px;
    border:none;
    transition: top 1s;
    transition-timing-function: ease-in-out;
    
}

#closehamburger {
    color:white;
    font-size: 40px;
    margin:10px;
    z-index:0;
    position:fixed;
}