header    { 
    font-size:      3vw; 
    height:         5em;
} 
footer {
    font-size:       1.2vw;
}

.sidebar {
    height:         100%;
    width :         0px;
    position:       fixed;
    z-index:        1;
    top:            auto;
    left:           0;
    
    background-color: #d7d7d7;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top:    0.6em;
    padding-bottom: 0em;
    }

    .sidebar a {
        padding:    min(1.5vh, 1.5vw) 1.5vw;
        text-decoration: none;
        font-size: min(1.4vw,2.0vh);
        color: #AAAAAA;
        display: block;
        transition: 0.3s;
    }

.sidebar a:hover {
    color: #f1f1f1;
    }

.openbtn {
    font-size:      1.8vw;
    cursor:         pointer;
    background-color: rgba(255, 0, 0, 0);
    color:          rgb(170, 168, 168);
    padding:        10px 15px;
    border:         none;
    width:          5%;
    position:       absolute;
    }

.openbtn:hover {
    background-color: rgba(255, 0, 0, 0);
    color: #d8d8d8;
    }

#main {
    transition: margin-left .5s;
    }    

.header { 
    padding:        16px  0px;
    background:     #ffffff;
    color:          #f1f1f1;
    font-size:      1.2vw;
  }

.sticky   { 
    position :      fixed;
    top:            0;
    width:          100%;
}
.sticky + .content {
    padding-top:    102px;
}
.content {
    color:          #818181;
    padding: 16px;
  }