body {
    background-color: #0c0e0f;
    color: #f3f1f0;
    font-family: "GNUTypewriterStandard", "Arial", sans-serif;
}

.wrap {
    width: 80%;
    margin: auto;
}


#header {
    position: relative; 
    height: 20vh;
    border: 2px solid #008000;
}

#main {
    display: inline-block;
    border: 2px solid #00FFFF;
}

#content {
    width: 75%;
    float: left;
    border: 2px solid #0000FF;
}

#logo {
    position: absolute;
    bottom: 0; 
    width: 35%;
    border: 2px solid #FFA500;
}

#navtop  {
    position: absolute;
    width: auto;
    bottom: 0px;
    right: 0px;
    border: 2px solid #505050;
}

hr {
    background-color: #505050;
    border: none;
    height: 2px;
    margin: 0;
}

footer {
    border: 2px solid #808000;
}

footer p {
    text-align: center;
}


/*----------------------------------------------------------*/
/*--- navigation bar ---------------------------------------*/
/*----------------------------------------------------------*/

#img_background {
    width: 100%;
}




li {
    list-style-type: none;
    margin: 0;
    padding: 0;
}


a {
    color: #f3f1f0;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}


#navtop li {
    display: inline;
    font-size: 1.8vw;
    margin-left: 2vw;
}

#navside li {
    font-size: 1.5vw;
    margin-top: 3vh;
}