/*-------------------FONTS-------------------*/
@font-face {font-family: 'ComicSans'; src: url('/fonts/ComicSans.ttf');}
@font-face {font-family: 'Cryptid'; src: url('/fonts/Cryptid.ttf');}
@font-face {font-family: 'Bestagon'; src: url('/fonts/Bestagon.otf');}
@font-face {font-family: 'AllSquareNow'; src: url('/fonts/AllSquareNow.otf');}
@font-face {font-family: 'ChargeVector'; src: url('/fonts/ChargeVectorBlack.otf');}
@font-face {font-family: 'CodersCrux'; src: url('/fonts/CodersCrux.otf');}
@font-face {font-family: 'Dyslexic'; src: url('/fonts/OpenDyslexic.otf');}

/*-------------------VARIABLES-------------------*/
:root {
    /*BG*/
    --bg: url('/img/bg_strab.gif');
    --bgcontent: url('/img/bg_stargrad.png');
    --bgcontentgray: url('/img/bg_stargray.png');
    /*Colors*/
    --c-default: #d5e29a;
    --c-seafoam: #afccc7;
    --c-blue: #6ec1ee;
    --c-green: #8aee6e;
    --c-yellow: #eecc6e;
    --c-red: #e785ab;
    --c-purple: #bba0f0;
    --c-orange: #f6b685;
    --c-dark: #341817;
    --c-shadow: #0d2d16;
    --c-darkblue: #278fce;
    --c-darkgreen: #50b21c;
    --c-darkyellow: #b2781c;
    --c-darkred: #b21c5d;
    --c-darkpurple: #673fbe;
    --c-darkorange: #cd732e;
    --c-dropshadow: rgba(0,0,0,0.5)
}

/*-------------------STYLE SHIT-------------------*/
/*==Page Defaults==*/
html, body, main {
    margin: 0;
    padding: 0;
    height: 100%;
}
p {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}
html {
    background-image: var(--bg);
    background-attachment:fixed;
    color: var(--c-default);
    background-color: #0a4c66;
    font-family: ComicSans;
}
body {
    display: flex;
    align-items: top;
    text-align: center;
    justify-content: center;
    width: 100%;
}

/*==Base Defaults==*/
header {
    text-align: center; 
    color: gold; 
    background: black; 
    font-family: AllSquareNow; 
    font-size: 12px;
}
.home {
    display: flex;
    flex-direction: row;
    flex-grow: 1;
    background-image: var(--bgcontent);
    background-blend-mode: screen; 
    background-repeat: repeat-x;
    background-size: auto 100%;
    width: 100%;
    padding: 0;
    align-items: stretch;
}
main {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100%;
    overflow: hidden;
    padding: 5px;
}
.container {
    width: 60%;
    max-width: 60%;
}
.nav {
    display: block;
    padding: 5px;
    background: #164C24;
    text-align: center;
    font-family: Bestagon;
    line-height: 100%;
}
.nav-mobile {
    display: none;
    flex-direction: row;
    background: #164C24;
    align-items: center;
    padding: 5px;
}
a{  
    color: var(--c-default);
}
a:hover {
  color: var(--c-purple);
}

/*==Content Defaults==*/
.content {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.contentrow {
    display: flex;
    flex-direction: row;
    width: 100%;
}
.item{
    display: flex;
    flex-direction: row;
    justify-items: space-around;
    align-items: center;
    margin: 5px;
    padding: 5px;
    border-radius: 5px;
    box-shadow: 5px 5px var(--c-shadow);
}
.textbox {
    display: flex;
    text-align: left;
    padding: 10px;
    flex-direction: column;
    border-radius: 5px;
    line-height: 1.5;
}
.textbox h2, .textbox h3, .textbox hr {
    font-family: 'Cryptid';
    margin-top: .2em;
    margin-bottom: .2em;
    text-align: center;
}
.textbox a, .scroll-hori a{  
    color: var(--c-dark);
}
mark {
    background-color: var(--c-darkorange);
    color: white;
    padding: .25em;
    font-family: CodersCrux;
    position: relative; 
    top: -5px; 
}

.divider {
    margin-left: auto;
    margin-right: auto;
    image-rendering: pixelated; 
    width: 50%;
}

/*==Unique==*/
.character {
    display: flex;
    flex-direction: column;
    margin: 10px; 
    text-align: center; 
    background: white; 
    box-shadow: 5px 5px 5px black; 
    color: black;
    line-height: 1;
}
.character h3 {
    font-family: 'Cryptid';
    line-height: 0;
}

.gb {
    margin: 0;
    display: flex;
    height: auto;
    width: auto;
    padding: 0;
    border-radius: 5px;
}
.gb-inside {
    border:none;
    scrollbar-color: var(--c-darkyellow) transparent;
}

.center {
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: center;
  height: 100%;
  flex-direction: column;
}
.centercontent {
    position: relative;
    top: 0%;
    left: 0%;
}
.centerimg {
    position: absolute;
    top: 0px;
    left: 0px;
    filter: drop-shadow(2px 2px 5px var(--c-dropshadow));
}

.blogitem{
    display: flex;
    flex-direction: row;
    justify-items: space-around;
    align-items: center;
    text-align: left;
    margin: 10px;
    padding: 10px;
    border-radius: 5px;
    background-color: #281f1e;
    color: #d8b591;
    font-family: dyslexic;
    font-size: 10pt;
    word-spacing: -3px;
    text-indent: 1em;
}
.blogitem em{  
    color: var(--c-blue);
}
.blogitem strong{  
    color: var(--c-red);
}
.blogitem img{  
    width:100%;
}
.blogitem table{
    background-color: rgba(246, 182, 133, 0.2);
    table-layout:fixed;
    width:100%
}
.blogitem td{
    word-wrap:break-word
}
.blognewest {
    display: flex;
    text-align: center;
    padding: 10px;
    flex-direction: column;
    border-radius: 5px;
    line-height: 1.5;
    background: #281f1e;
    width: 100%;
}
.blognewest h2, .blognewest h3, .blognewest hr {
    font-family: 'Cryptid';
}
.blognewest a{  
    color: var(--c-orange);
}

.gallery{
    display: flex;
    flex-direction: column;
    text-align: left;
    width: 100%;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 25px;
    margin-top: 1em;
}
.gallery img{
    max-height: 300px;
}
.gallery h1, .gallery p{
    text-indent: 20px;
}

/*-------------------SHIT I COPY/PASTED-------------------*/
/* News Ticker */
.hmove { display: flex;}
.hitem { width: 100%; flex-shrink: 0;}
.hwrap { overflow: hidden;}
@keyframes tickerh {0% { transform: translatex(100%);} 100% { transform: translatex(-400%);}} /* first item = 0, fourth item = -300% */
.hmove { animation: tickerh linear 20s infinite;}
.hmove:hover { animation-play-state: paused;}

div.scroll-container {
    overflow: scroll;
    white-space: nowrap;
    padding: 10px;
    border-radius: 5px;
}
.scroll-hori {
  overflow-x: hidden;
  overflow-y: scroll;
  padding: 10px;
  border-radius: 5px;
  text-align: center;
  height: 250px;
  background: rgba(255, 255, 255, 0.2);
  scrollbar-color: var(--c-darkyellow) transparent;
}
.scroll-hori h3{
  font-family: AllSquareNow;
  line-height: 1.5;
  font-size: 12px;
}
div.scroll-container img {
  filter: drop-shadow(3px 3px 4px var(--c-dropshadow));
  padding: 10px;
}

#statuscafe {
    padding: .5em;
    color: midnightblue;
    background-color: #fffdc0;
    border: 2px solid midnightblue;
    border-radius: 10px;
    position: relative;
    font-family: CodersCrux;
    text-align: left;
    font-size: 25px;
    word-spacing: -3px;
}
#statuscafe-username {
    display: none;
}

/*-------------------SMALL SCREENS-------------------*/
@media only screen and (max-width: 1500px) {
    .content,.item {
        display: flex;
        flex-direction: column;
    } 
    .contentrow {
        display: flex;
        flex-direction: column;
    } 
    .sidebar {
        width: 100%;
        margin: 0px;
}
    main {
        display: flex;
        flex-direction: column;
        height: auto;
        padding: 0;
        border-radius: 5px;
        margin: 0px;
        width: 100%;
  }
    .container {
        width: 100%;
        max-width: 100%;
    }
    .scroll-hori {
        height: 100%;
        overflow-y: visible;
    }
    .blogitem{
    flex-direction: column;
    }
    .gallery{
    text-align: center;
    }
    .gallery h1, .gallery p{
    text-indent: 0px;
}
}


/*-------------------MOBILE-------------------*/
@media only screen and (max-width: 810px) {
    .nav {
        display: none;
    }
    .nav-mobile {
        display: block;
    }
    .header {
        position: sticky;
        top: 0;
        font-size: 8px;
    }
    .container {
        width: 100%;
    }
    .centercontent {
    max-width: 100%;
    }
    .blognewest {
    width: fit-content;
}
}