:root {
    --back: #3A0C20;
    --border1: #4b5645;
    --border2: #c4dbb7;
    --shadow: #787878;
    --text1: #0f0f0f;
    --text2: #f9f9f9;
    --green: #88a179;
    --darkgreen: #768d69;
    --lightgreen: #9eb790;
    --contrast: #bfc397;
    --filebardarker: #bbb8a7;
    --white: #f5f5f5;
    --beige: #cdc2b2;
}


@font-face {
    font-family: 'Pixel';
    src: url(/fonts/PixelOperator.ttf);
}

@font-face {
    font-family: 'Comfortaa';
    src: url(/fonts/Comfortaa.ttf);
}

/* SCROLLBAR */
::-webkit-scrollbar {
    width: 15px
}

::-webkit-scrollbar-corner {
    background: #eee
}

::-webkit-scrollbar-track:vertical {
    background: linear-gradient(90deg, #e5e5e5, #f0f0f0 20%)
}

::-webkit-scrollbar-thumb {
    border: 1.5px solid #888;
    border-radius: 3px;
    box-shadow: inset 0 -1px 1px #fff, inset 0 1px 1px #fff;
    background-color: #eee;
}

::-webkit-scrollbar-thumb:vertical {
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAKCAIAAADpZ+PpAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAADrSURBVChTTc5LboJQGAXguyoCu4ERCzAGlRk7UOwGWIDh0s4M4kxb06RSq/jAB6AxJkJ4lTDrue3AnvyzP+fLId+/yfM8juP7PQmCCOf7B3e+ZD+O40RRVFW12VQUpd3r9U3T2m4OpKoqWZYNwzBZLEqfh0N7NnvfrPcEWlEUWZb9mWF4Ph6D0ylcLbfM5HkeJrhGA2hb15/QXnv+w7RYXsDatjOdvnmrHSnLEizMNE2v11sUXQBCnn98kbquBUGQJAlmq9WB2e3qg4HJdqKkaRql1HGc0WgMcDJ5dd0F24kediZJ8t/ELT69H+8py0CYSIO5AAAAAElFTkSuQmCC") no-repeat 50%, linear-gradient(90deg, #eee 45%, #ddd 0, #bbb)
}

/* BASE CODE */

::selection {
    background: var(--white);
    color: #c2d8a5;
}

html {
    background-color: var(--back);
    background: url('/imgs/style/sandylines.jpg');
    height: 100%;
    background-position: center;
    align-content: start;
    font-family: 'Pixel';
    letter-spacing: 2px;
    overflow: hidden;
}

body {
    display: flex;
    justify-items: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

div {
    display: block;
}

p {
    color: var(--text1);
    font-size: 14px;
}

a:link,
a:visited {
    color: var(--text1);
    font-size: 14px;
    text-decoration: none;
}

a:hover,
a:active {
    color: var(--text1);
    font-size: 14px;
    text-decoration: none;
}

/* MAIN CONTAINER */

.site {
    width: 100%;
    height: auto;
    align-items: center;
}

/* BASICS */

.section {
    display: block;
    padding-bottom: 2px;
    font-size: 14px;
    line-height: 13px;
    background-color: var(--green);
    border: 2px solid var(--green);
    margin-top: 5px;
    border-radius: 8px 8px 2px 2px;
    box-shadow: 0px 1px 2px var(--text1);
}

.head {
    display: flex;
    color: var(--text2);
    text-align: left;
    line-height: 20px;
    padding: 5px;
    font-size: 15px;
    height: 20px;
}

.decobutton {
    height: 20px;
    width: 21px;
    background: linear-gradient(150deg, rgba(255, 255, 255, 1) 0%, rgba(197, 217, 186, 1) 18%, rgba(136, 161, 121, 1) 100%);
    border: 1px solid white;
    border-radius: 5px;
    color: white;
    padding: 0px;
    line-height: 0px;
    margin-left: 5px;
}

.decobutton#x {
    background: linear-gradient(150deg, rgba(255, 255, 255, 1) 0%, rgb(210, 166, 149) 18%, rgba(225, 80, 25, 1) 100%);
}

.navigator {
    margin: 2px;
    margin-left: 2px;
    margin-bottom: 1px;
    padding: 3px;
    padding-top: 5px;
    text-align: left;
    border-bottom: 2px solid var(--filebar-darker);
    border-right: 2px solid var(--filebar-darker);
    font-size: 13px;
    position: relative;
    background: linear-gradient(0deg, rgb(187, 184, 167) 0%, rgb(241, 237, 226) 65%);
    height: 16px;
}

.navtab {
    padding: 2px;
    margin-left: 2px;
    padding-right: 6px;
    height: 14px;
}

.addressbar {
    margin: 2px;
    margin-left: 2px;
    margin-bottom: 1px;
    margin-top: 0.5px;
    padding: 3px;
    padding-top: 5px;
    text-align: left;
    font-size: 13px;
    position: relative;
    border-radius: 0px;
    background: linear-gradient(0deg, rgb(187, 184, 167) 0%, rgb(241, 237, 226) 65%);
    height: 16px;
}

.addressbar span,
.addressbar div {
    display: inline-block;
    vertical-align: middle;
}

.searchbar {
    background-color: #e7e7e7;
    height: 14px;
    width: 213%;
    margin-top: -3px;
    margin-right: -3px;
    padding: 3px;
    text-align: left;
    font-size: 13px;
    border: 1px solid black;
}

.searchbar img {
    height: 13px;
    display: inline;
    vertical-align: middle;
}

.content {
    background-color: #e7e7e7;
    margin-left: 2px;
    border-radius: 0px 0px 3px 3px;
    overflow-y: scroll;
}

/* SITE */

#main {
    width: 830px;
    height: 650px;
    position: absolute;
    left: 380px;
    top: 30px;
}

#main .navigator {
    width: 820px;
}

#main .content {
    width: 825.5px;
    height: 505px;
    margin-left: 2.3px;
    margin-top: 1px;
    overflow-x: hidden;
}

.ienavigator {
    width: 826px;
    height: 34px;
    margin: 2px;
    margin-top: 1px;
    margin-left: 2px;
    margin-bottom: 0px;
    padding-top: 7px;
    text-align: left;
    border-right: 2px solid var(--filebar-darker);
    font-size: 13px;
    background: linear-gradient(0deg, rgba(215, 212, 194, 1) 0%, rgb(241, 237, 226) 65%);
}

.ienavigator .navtab {
    height: 32px;
    padding-right: 2px;
}

.ienavigator .navtab img,
.ienavigator .navtab span {
    display: inline;
    vertical-align: middle;
}

.navtab img {
    width: 24px;
}

.lowernav {
    margin: 2px;
    margin-left: 2.7px;
    margin-bottom: 1px;
    margin-top: -2px;
    padding: 3px;
    padding-top: 5px;
    text-align: left;
    border-bottom: 2px solid var(--filebar-darker);
    border-right: 2px solid var(--filebar-darker);
    font-size: 13px;
    position: relative;
    background: linear-gradient(0deg, rgb(187, 184, 167) 0%, rgb(241, 237, 226) 65%);
    height: 16px;
    width: 819px;
}

.lowernav img {
    height: 13px;
    width: auto;
}

.lowernav img,
.lowernav span {
    display: inline;
    vertical-align: middle;

}

/* NAVIGATION */

#nav {
    width: 327px;
    height: 250px;
    position: absolute;
    left: 70px;
    top: 250px;
}

#nav .navigator {
    width: 317px;
}

#nav .content {
    width: 323px;
    height: 178px;
    padding-top: 15px;
}

.folder {
    text-align: center;
    border: 1px solid #ffffff00;
    width: 75px;
    float: left;
    font-size: 14px;
    margin-bottom: 15px;
}

.folder img {
    width: 35px;
    height: 35px;
    margin-bottom: 5px;
}

/* PSEUDOSITE */

.gsite {
    background-position: center;
    background-image: url(/imgs/style/beigeplaid.jpg);
    background-size: 250px;
    height: 100%;
    width: 820px;
    overflow-x: hidden;
    align-content: start;
    font-family: 'Comfortaa';
    letter-spacing: 2px;
    overflow: hidden;
    padding: 0px;
}

.gwrap {
    margin: 10px auto;
    width: 90%;
    height: 400px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 5px;
    margin-top: 45px;
}

.ghead {
    width: 98%;
    height: 17%;
    background: url("/imgs/style/corkboard.png");
    overflow: hidden;
    border: ridge 8px #444;
    border-bottom: 0;
    border-radius: 3px 3px 0 0;
}

#gtitle {
    margin-left: 18px;
    margin-top: 25px;
    color: #fdfcfc;
    text-shadow: 2px 2px 0px #333333;
}

.gbottom {
    width: 96.6%;
    height: 83%;
    background: url("/imgs/style/corkboard.png");
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 5px;
    border: ridge 8px #444;
    border-top: 0;
    border-radius: 0 0 3px 3px;
    overflow: hidden;
}

.gcontent {
    width: 90%;
    height: 90%;
    padding: 10px;
    background: url("/imgs/style/gridpaper.png");
    border-radius: 2px;
    overflow-x: hidden;
    overflow-y: scroll;
    display: block;
    position: relative;
    top: -6px;
}

.gcontent img {
    margin-top: 3px;
}

.gcontent p {
    font-size: 11px;
}

.gtitlebar {
    font-size: 18px;
    font-weight: bolder;
    text-decoration: underline;
    text-align: center;
    margin-bottom: 5px;
}

span#green {
    color: #859570;
    font-weight: bolder;
    font-size: 13px;
}

span#green:hover {
    text-decoration: underline;
}