:root {
    --bgr: 59;
    --bgg: 73;
    --bgb: 20;
    --bgc: rgb(var(--bgr), var(--bgg), var(--bgb));
    --bgt: rgba(var(--bgr), var(--bgg), var(--bgb), 0);
    --cbgc: #7F8557;
    --fadet: .5;
    --fadeg: rgba(var(--bgr), var(--bgg), var(--bgb), var(--fadet));
    --linkc: #e8ce8e;
}

@font-face {
    font-family: courierprime;
    src: url(fonts/CourierPrime-Regular.ttf);
}

@font-face {
    font-family: caslon;
    src: url(fonts/CaslonAntique.ttf);
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: caslon;
    src: url(fonts/CaslonAntique-Bold.ttf);
    font-weight: bold;
    font-style:  normal;
}

@font-face {
    font-family: caslon;
    src: url(fonts/CaslonAntique-Italic.ttf);
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: caslon;
    src: url(fonts/CaslonAntique-BoldItalic.ttf);
    font-weight: bold;
    font-style: italic;
}

@font-face {
	font-family: alice;
	src: url(fonts/Alice-Regular.ttf);
}

@font-face {
	font-family: habrohead;
	src: url(fonts/RuntimeRegular-m2Odx.otf);
}

@font-face {
    font-family: fancyfont;
    src: url(fonts/RusillaSerif-2OZpl.otf);
}

h1, h2, h3, h4, h5, h6, .read-more, .posted-date {
    font-family: habrohead;
}

p, blockquote{
	font-family: alice;
}

.header {
    --grad: 15%;
    --gradend: 85%;
    background-image: linear-gradient(to top, var(--bgc) 0%, var(--bgt) var(--grad) var(--gradend), var(--bgc) 100%), linear-gradient(to right, var(--bgc) 0%, var(--bgt) var(--grad) var(--gradend), var(--bgc) 100%), url(../images/IMG_0461.png);

    height: 30vw;

    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

.title, .hptitle{
    text-align: center;
    font-size: 5rem;
}

@media (max-width: 576px) {
    .title {
        font-size: 12vw;
    }
    .header {
        transform: translateZ(-1px) scale(2) translateY(-175px);
        --grad: 15%;
        --gradend: 85%;
        background-image: linear-gradient(to top, var(--bgc) 0%, var(--bgt) var(--grad) var(--gradend), var(--bgc) 100%), linear-gradient(to right, var(--bgc) 0%, var(--bgt) var(--grad) var(--gradend), var(--bgc) 100%), url(../images/IMG_0447.png);

        height: 80vw;

        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        position: static;
        top: 0;
        z-index: 2;
        transform-origin: 51.5% 0 ;
    }
    
    .main {
        perspective: 1px;
        height: 100vh;
        overflow-x: hidden;
        overflow-y: auto;
    }

}

.archive-title {
    text-align: center;
}

.subtitle {
    text-align: justify;
}

body {
    background-color: var(--bgc);
}

.content {
    transform: translateZ(0);
    position: relative;
    background-color: var(--cbgc);
    border-radius: .375rem;
    color: white;
    padding-left: 2em;
    padding-right: 2em;
}

.tornPage {
    background-image: url(../images/IMG_0390.PNG), url(../images/IMG_0393.PNG), url(../images/IMG_0383.PNG);
    background-repeat: no-repeat, no-repeat, repeat-y;
    background-position: top center, bottom center, top center;
    background-size: 100% auto, 100% auto, 100% auto;
    color: black;
}

a.active{
    background-color: #7F8557bb !important;
}

a.nav-link, .input button {
    color: #fff !important;
    transition: text-shadow 0.5s, background-color 0.5s;
}

a.nav-link:hover{
    background-color: #7F855722;
    text-shadow: 0 0 3px #fff;
}

.nav-pills a{
    margin-left: 3px;
}

a {
    color: var(--linkc);
    transition: text-shadow 0.5s;
    text-decoration: none;
}

a:hover {
    text-shadow: 0 0 3px var(--linkc);
}


.insta-card, .s-card, .v-card {
    padding: 0;
    transition: max-height 1s ease;
    overflow: hidden;
    max-height: 450px;
    position: relative;
}


.s-card {
    max-height: 600px;
}

.read-more {
    position: absolute;
    bottom: 0;
    text-align: center;
    width: 100%;
    background-color: transparent !important;
    background-image: linear-gradient(to top, #ffffff, #ffffff, #ffffff44, #ffffff00);
    padding-bottom: 5px;
    padding-top: 40px;
    border: none;
    text-transform: uppercase;
    color: var(--bgc);
    transition: opacity 1s linear;
}

.read-more:hover {
    color: #666666;
}

.posted-date {
    text-align: end;
    font-style: italic;
    color: var(--bgc);
}

.reverse-chron {
    flex-direction: row-reverse;
    flex-wrap: wrap-reverse;
}

div:not(.reverse-chron) > .h-col {
    display: none !important;
}

.sort-by + label{
    border: 1px solid white;
    color: white;
}

.sort-by:checked + label{
    background-color: white !important;
    border: 1px solid white !important;
    color: var(--cbgc) !important;
}

.sort-by + label:hover{
    border: 1px solid white !important;
    color: white !important;
    text-shadow: 0 0 3px white;
}

.sort-by:checked + label:hover{
    background-color: white !important;
    border: 1px solid white !important;
    color: var(--cbgc) !important;
    text-shadow: 0 0 3px var(--cbgc);
}

.mobile-header {
    position: fixed;
    top: 10px;
    right: 30px;
    font-size: 2em;
    color: white;
    text-shadow: 0 0 6px var(--cbgc);
    z-index: 2;
}

#mobile-nav {
    position: fixed;
    /* height: 100%; */
    background-color: var(--cbgc);
    top: 0;
    left: 0;
    z-index: 1;

}

#mobile-nav > ul > li {
    display: block;
    width: 80%;
}

#mobile-nav-after{
    height: 1em;
    /* background-color: #666666; */
}

#mobile-header-wrap {
    perspective: none;
}

.p-card, .v-card {
    height: 100%;
}

.cardLink {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 2em;
    padding-left: 8px;
    opacity: 20%;
    transition: opacity 1s ease;
    z-index: 5;
}

.cardLink:hover {
    opacity: 80%;
}

.b-quote-index-span {
    font-size: 2em;
    font-style: italic;
}

.source a {
    font-style: italic;
}

blockquote {
    background-color: var(--cbgc);
    background-image:   url(../images/blockquote/sw.PNG), url(../images/blockquote/nw.PNG), url(../images/blockquote/se.PNG), url(../images/blockquote/ne.PNG), 
                        url(../images/blockquote/top.PNG), url(../images/blockquote/bottom.PNG), url(../images/blockquote/left.PNG), url(../images/blockquote/right.PNG), 
                        url(../images/blockquote/sws.PNG), url(../images/blockquote/nws.PNG), url(../images/blockquote/ses.PNG), url(../images/blockquote/nes.PNG), url(../images/blockquote/bg.PNG);

    background-repeat:  no-repeat, no-repeat, no-repeat, no-repeat,
                        repeat-x, repeat-x, repeat-y, repeat-y,
                        no-repeat, no-repeat, no-repeat, no-repeat, repeat;
    
    background-position: bottom left, top left, bottom right, top right,
                         top, bottom, left, right,
                         bottom left, top left, bottom right, top right, top left;

    background-size: 256px, 256px, 256px, 256px, 
                     1024px, 1024px, 29px, 29px,
                     256px, 256px, 256px, 256px, auto;
    outline: 5px solid var(--cbgc);
    outline-offset: -3px;
    color: #000;
    padding: 40px;
}

blockquote p {
    font-family: caslon;
}

.subheading {
    font-size: .8em;
    color: #ddd;
}

.hphighlight{
    background-image: url(../images/highlight.svg);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    padding: 0 10px;
    background-size: cover;
}

.hpgreenglow {
    text-shadow: 0 0 5px #00ff00, 0 0 5px #00ff00, 0 0 3px #79ff79;
}

.hpgreentext{
    color: #003800
}

.hpw25 {
    width: 25%;
}
.hpw50 {
    width: 50%;
}
.hpw75 {
    width: 75%;
}
.hpw60 {
    width: 60%;
}
.hpw40 {
    width: 40%;
}

.hpcw25 {
    margin: auto;
    width: 25%;
}
.hpcw50 {
    margin: auto;
    width: 50%;
}
.hpcw75 {
    margin: auto;
    width: 75%;
}
.hpcw60 {
    margin: auto;
    width: 60%;
}
.hpcw40 {
    margin: auto;
    width: 40%;
}

blockquote:has(> p.hppw25) {
    width: 25%;
}
blockquote:has(> p.hppw50) {
    width: 50%;
}
blockquote:has(> p.hppw75) {
    width: 75%;
}
blockquote:has(> p.hppw60) {
    width: 60%;
}
blockquote:has(> p.hppw40) {
    width: 40%;
}

blockquote:has(> p.hppcw25) {
    margin: auto;
    width: 25%;
}
blockquote:has(> p.hppcw50) {
    margin: auto;
    width: 50%;
}
blockquote:has(> p.hppcw75) {
    margin: auto;
    width: 75%;
}
blockquote:has(> p.hppcw60) {
    margin: auto;
    width: 60%;
}
blockquote:has(> p.hppcw40) {
    margin: auto;
    width: 40%;
}

.hptcenter {
    text-align: center;
}

.hpfancy::first-letter{
    font-size: 500%;
    font-family: fancyfont;
    text-transform: capitalize;
}

.hpspoiler {
    box-shadow: 0 0 6px var(--bgc), inset 0 0 6px var(--cbgc);
    border-radius: .5em;
    background-color: var(--bgc);
    color: var(--bgt);
    padding: 0 5px;
    transition: color .5s linear, box-shadow .5s linear, background-color .5s linear;
}

.hpspoiler:hover {
    box-shadow: 0 0 6px var(--cbgc), inset 0 0 6px var(--cbgc);
    background-color: var(--cbgc);
    color: var(--bgc);
}

.emote{
    padding: .1em .6em;
    background-size: contain;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    position: relative;
    top: -.2em;
    margin: 0 .1em;
}

#imported-content p, .emote, #imported-content li, #imported-content td, #imported-content th{
    font-family: alice;
    word-wrap: break-word;
}

code {
    font-family: courierprime, monospace;
}

#inputcont, .outputcont , .doutputcont{
    width: 100%;
    height: 100%;
    min-height: 2in;
    background-color: rgba(var(--bgr), var(--bgg), var(--bgb), .2);
    border: none;
    border-radius: 5px;
    margin-bottom: 0;
}

.doutputcont {
    background-color: var(--cbgc);
}

#inputcont {
    overflow: hidden;
    font-family: courierprime;
    color: white;
}

#inputcont:focus {
    outline: 1px solid white;
}

.input button {
    border: none;
    border-radius: 5px;
    background-color: rgba(var(--bgr), var(--bgg), var(--bgb), .2);
    font-family: alice;

}

#documentation {
    word-wrap: break-word;
    white-space: pre-wrap;
}
.docdiv{
    width: 0;
    outline: 1px solid #ffffff;
}