/* ----------------------------------------
   Fonts
---------------------------------------- */
@font-face {                  
    font-family: 'F5.6';
    src: url(https://humantooth.neocities.org/fonts/F5.6-Regular.woff) format('woff');
    font-weight: normal;
    font-style: normal;
} 

@font-face {                  
    font-family: 'Barecast';
    src: url(https://humantooth.neocities.org/fonts/Barecast-Regular.woff2) format('woff2');
    font-weight: normal;
    font-style: normal;
} 

@font-face {                  
    font-family: 'Kino40';
    src: url(https://vulpecula.neocities.org/css/kino40.woff) format('woff');
    font-weight: normal;
    font-style: normal;
} 

@font-face {                  
    font-family: 'Splendid66';
    src: url(https://vulpecula.neocities.org/css/splendid66.woff) format('woff');
    font-weight: normal;
    font-style: normal;
}

/* ----------------------------------------
   Body
---------------------------------------- */
body {
    margin: 0;
    font-family: Barecast, monospace;
    font-size: 12px;
    line-height: 1.2;
    background: #fcfae2;
    color: black;
}

/* ----------------------------------------
   Images / Overlays Fix
---------------------------------------- */
#pylon,
.header,
.navi {
    pointer-events: none; /* allows hover to reach content */
}

img, p, h1, h2, h3, h4 {
    position: relative;
    z-index: 2; /* ensures content is above backgrounds */
}

/* ----------------------------------------
   Headings
---------------------------------------- */
h1 {
    margin:0; padding:0;
    font-family: Barecast, monospace;
    font-size:15px;
    color:#7d9267;
}

h2 {
    padding:0;
    font-family: Barecast, monospace;
    font-size:15px;
    color:#7d9267;
    position:relative;
    z-index:2;
    margin-top:-1em;
    background:#fcfae2;
    -webkit-filter: drop-shadow(1px 1px 0 #ede6ce) drop-shadow(-1px -1px 0 #ede6ce);
    filter: drop-shadow(1px 1px 0 #ede6ce) drop-shadow(-1px -1px 0 #ede6ce);
}

h3 {
    margin:0; padding:0;
    font-family:Barecast, monospace;
    font-size:14px;
    color:#7d9267;
    position:relative;
    z-index:2;
    margin-top:-0.9em;
    margin-left:0.1em;
    background:#fcfae2;
    -webkit-filter: drop-shadow(1px 1px 0 #ede6ce) drop-shadow(-1px -1px 0 #ede6ce);
    filter: drop-shadow(1px 1px 0 #ede6ce) drop-shadow(-1px -1px 0 #ede6ce);
}

h4 {
    margin:0.2em; padding:0.3em;
    font-family:"Splendid66";
    font-size:20px;
    color:#fcfae2;
    position:relative;
    z-index:2;
    background:#7d9267;
}

/* ----------------------------------------
   Links
---------------------------------------- */
body a {
    color:#616d54;
    text-decoration:none;
}

body a:hover {
    color:#7d9267;
    text-decoration:underline #3c4d3f;
}

/* ----------------------------------------
   Layout Elements
---------------------------------------- */
.wrapper { max-width:800px; margin:6% auto 0 auto; }
.sidebar { width:150px; float:right; position:relative; }
.main-wrapper { margin-right:170px; position:relative; }

.flex-container { display:flex; flex-wrap:nowrap; }
.flex-container > div { width:100%; margin:0.2em; text-align:center; }

.navi { position:absolute; top:-36px; left:-90px; z-index:2; }
.nav { width:280px; position:relative; font-family:Barecast, monospace; padding:0.5em 1em; margin-bottom:35px; top:-10px; background-color:transparent; }
.nav a { color:#000; font-size:14px; text-decoration:none; }
.nav a:hover { color:#7d9267; text-decoration:underline #3c4d3f; }

/* ----------------------------------------
   Other Content Styling
---------------------------------------- */
.box, .box-status, .chatbox { background:#fffff0; border:1px dotted #000; padding:0.5em 1em; }
.box-status { max-height:60px; overflow-y:scroll; }
.textarea { white-space:pre-wrap; }

/* ----------------------------------------
   Pylon Background
---------------------------------------- */
#pylon {
    background: url(/images/pylon3.png) center / cover;
    margin-top:-790px;
    margin-left:-320px;
    z-index:-5;
    position:absolute;
    image-rendering:pixelated;
    filter: sepia(70%) hue-rotate(0deg) saturate(2) brightness(0.95) opacity(0.15);
    min-height:100vh;
    pointer-events:none; /* important for tooltips */
}

/* ----------------------------------------
   Scrollbar
---------------------------------------- */
::-webkit-scrollbar { width:5px; height:0px; background:#e6e5e3; }
::-webkit-scrollbar-thumb { background-color:#bebdb4; border-radius:10px; border:0px solid #faf9f1; }