@import url(https://fonts.googleapis.com/css?family=Tiny5|Bytesized|Syne+Mono|Genos|VT323|Badeen+Display|Erica+One|Quantico|Anta);

html,
body {
    height: 100%;
    width: 100%;
}

/* ------------------------- HEADER ----------------------*/

#header {
    top: 0;
    width: 100%;
    position: fixed;
    height: 13%;
    background-image: 
        linear-gradient(to bottom, deepskyblue, deepskyblue, white, skyblue, skyblue);
}

#header .container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-content: center;
    height: 100%;
}

#toplogo {
    background-image: url(img/lebi.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left;
    max-height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
}

#topdesc {
    max-height: 100%;
    width: 100%;
    padding: 0;
    margin: auto;
    margin-top: 0;
    text-align: right;
    font-family: VT323;
    color: white;
    text-shadow:
        1px 1px 0 dodgerblue,
        0 1px 1px dodgerblue;
}

/* -------------------------- NAVBAR ---------------------- */
nav {
    position: fixed;
    top: 13%;
    width: 100%;
    background-color: lightskyblue;
}

nav ul {
    margin: 0;
    padding: 0;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
}

/*------all nav buttons----*/
nav ul li {
    list-style: none;
    position: relative;
    flex: 1 1 0;
    height: fit-content;
}

/*-----btn links (block, spans whole btn)------*/
nav ul li.navbtn a,
nav ul li.dropbtn a {
    text-decoration: none;
    color: white;
    font-family: syne mono;
    display: block;
    padding: 5px;
    border: 2px outset deepskyblue;
    text-align: center;
    text-shadow:
        0 1px dodgerblue,
        1px 0 dodgerblue,
        -1px 0 dodgerblue,
        0 -1px dodgerblue;
}

/*------btn hover------*/
nav ul li.navbtn a:hover,
nav ul li.dropbtn a:hover {
    color: lawngreen;
}

/*-----btn click--------*/
nav ul li.navbtn a:active {
    background-image: linear-gradient(to bottom, dodgerblue, deepskyblue);
    border: inset dodgerblue 2px;
}

/*------ dropdown menu-----*/
nav ul li ul {
    position: absolute;
    top: -999em;
    display: flex;
    flex-flow: column wrap;
    justify-content: space-around;
    width: 100%;
}
nav ul li:hover ul {
    top: auto;
    z-index: 9999;
}

nav ul li.dropbtn ul li a {
    color: white;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-right: 5px;
    padding-left: 8px;
    font-family: Genos;
    font-size: 110%;
    text-decoration: none;
    text-align: left;
    background-color: lightgreen;
    border: outset lightgreen;
}

nav ul li.dropbtn ul li a:hover {
    color: white;
    background-color: palegreen;
    border-style: outset;
    border-color: palegreen;
}

nav ul li.dropbtn ul li a:active {
    background-image: linear-gradient(to bottom, limegreen, palegreen);
    border-color: limegreen;
    border-style: inset;
}

/* ----------------- SIDE BAR --------------- */
#sidebar {
    position: fixed;
    height: 70%;
    min-width: 15%;
    max-width: 15%;
    top: 20%;
    left: 1%;
    background-color: lightskyblue;
    border: outset deepskyblue 3px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    z-index: -1;
}

#sidebartop {
    display: block;
    height: 30%;
    text-align: center;
    overflow: hidden;
}

#sidebartop img {
    object-fit: contain;
    width: 100%;
    height: 100%;
}

#sidebarcontent {
    display: block;
    height: 70%;
    overflow-y: hidden;
    overflow-x: hidden;
    padding: 5%;
}

#sidebartxt h1 {
    text-align: center;
    font-size: 150%;
    font-family: Erica One;
    color: lawngreen;
    text-shadow:
        -1px -1px #005410,
        1px 1px #005410,
        -1px 1px #005410,
        1px -1px #005410,
        1px -1px #005410,
        4px 4px 4px #ffffff,
        -4px -4px 4px #ffffff,
        -4px 4px 4px #ffffff,
        4px -4px 4px #ffffff;
}

#sidebartxt p {
    text-align: justify;
    font-family: genos; 
    line-height: 1;
    color: white;
    text-shadow:
        1px 1px 0 blue,
        0 1px 1px blue;
    
}

#changelog {
    padding:3%;
    height:60%;
    background-color: white;
    border: solid 1px lawngreen;
    overflow-x: hidden;
    overflow-y:scroll;
}

#changelog h1 {
    color:lightgrey;
    font-family: VT323;
    line-height: 0;
    font-size: smaller;
    margin-bottom: 5%;
}

#changelog p {
    color:slategrey;
    line-height: 1;
    font-family: vt323;
    font-size: small;
    margin-bottom: 5%;
}

/* -------------------- MAIN-------------------- */

#mainbox {
    position: absolute;
    min-height:75%;
    min-width: 80%;
    max-width: 80%;
    top: 20%;
    left: 17%;
    background-color:aliceblue;
    border: outset deepskyblue 3px;
    margin: 0;
    padding-top: 3%;
    padding-left: 5%;
    padding-right:5%;
    padding-bottom:5%;
    overflow-x: hidden;
    overflow-y:auto;
    z-index: -1;
}

#mainbox h1 {
font-family: genos; 
    line-height: 1;
    color: lawngreen;
    text-shadow:
        1px 1px 0 blue,
        0 1px 1px blue;
}

#mainbox h2 {
    font-family: genos;
    line-height: 1;
    color:skyblue;
    font-size: small;
}

#mainbox p {
    font-family: quantico;
    font-weight: 100;
    color:black;
    line-height: 1;
}

#mainbox hr {
    height:1px;
    color:green;
    margin-right:-5%;
    margin-left:-5%;
    margin-top:5px;
}

/* --------------------ABOUT-------------*/
#about .q {
    border-right:solid 1px lightgrey;
    margin:auto;
}

#about .a {
    margin: auto;
}

#about .q p {
    font-family: genos;
    color: deepskyblue;
    text-shadow: 1px 0 white, 0 1px white;
    font-size: 110%;

}

#about .a p {
    font-family: vt323;
    color: grey;
    font-size: 110%;
    letter-spacing: 2%;
    line-height: 1;
}

.textbox {
    text-align: left;
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: small;
}