:root {
    --upvote: #486581;
    --downvote: #DB1641;
    --bgcolor: #06060c;
    --textcolor: #E0E0E0;
    --texthover: #cccccc;
    --textgray: #556060;
    --backgroundblack: black;
    --infobartextcolor: #909c9c;

    --backgroundblack-art: black;
    --textcolor-art: #E0E0E0;

    --upvoteborder: #486581;
    --upvotebg: #0e2a43;
    --upvotetextcolor: #c0c0fd;
    
    --downvoteborder: #db1641;
    --downvotebg: #900120;
    --downvotetextcolor: #fdc0c0;
    
    --upvoteborder-hover: #6136fb;
    --upvotebg-hover: #4021b0;
    --upvotetextcolor-hover: #c0c0fd;
    
    --downvoteborder-hover: #Fb3661;
    --downvotebg-hover: #a01130;
    --downvotetextcolor-hover: #fdc0c0;

    --boxcolor: #16161c;
    --boxbordercolor: #2a3638;
    --boxbordercolor-emphasize: #3a4648;

    --buttonborder: #487581;
    --buttonbg: #103A43;
    --buttontextcolor: #BCCCDC;
    
    --buttonborder-hover: #588591;
    --buttonbg-hover: #204A53;
    --buttontextcolor-hover: #CFDFEF;

    --colorunknown: #663333;
    --colorunuser: #473D31;
    --coloruser: #9C9C9C;
    --colorpuser: #FFD700;
    --colorcouser: #54DD00;
    --colorjmod: #1ABC9C;
    --colorsmod: #476291;
    --coloradmin: #DD4500;
    --colorhadmin: #CC0000;

    --colorerror: #FF4D4D;
    /*
    --threadlevel1: #ac92eb;
    --threadlevel2: #50c1e9;
    --threadlevel3: #a1d569;
    --threadlevel4: #ffce55;
    --threadlevel5: #ed5564;
    */

    --threadlevel0: gray;
    --threadlevel1: #E51919;
    --threadlevel2: #E58A19;
    --threadlevel3: #E5C919;
    --threadlevel4: #15C129;
    --threadlevel5: #1999E5;

    --threadlevel0-bg: #26262c;
    --threadlevel1-bg: #2E161B;
    --threadlevel2-bg: #2E231B;
    --threadlevel3-bg: #2E2B1B;
    --threadlevel4-bg: #152A1D;
    --threadlevel5-bg: #152A1D;

    --threadlinewidth: 0.2rem;

    --space-s: 0.5rem;
    --space-m: 1rem;
    --space-l: 2rem;

    --urlcolor: #6060D8;
    --urlvisitedcolor: #A020F8;
    --urlhovercolor: #8080F8;

    --defaultfonts: verdana, arial, helvetica, sans-serif;

    --threadlinepadding: 1rem;
    --threadlinemargin: 0.25rem;

    scrollbar-color: var(--boxbordercolor) var(--boxcolor);

}

:root[data-theme="light"] {
    --upvote: #486581;
    --downvote: #DB1641;
    --bgcolor: #dddddd;
    --textcolor: #333333;
    --texthover: #888888;
    --textgray: #556060;
    --backgroundblack: white;
    --infobartextcolor: #404c4c;

    --backgroundblack-art: black;
    --textcolor-art: #E0E0E0;

    --upvoteborder: #4e4a83;
    --upvotebg: #5855b1;
    --upvotetextcolor: #c0c0fd;
    
    --downvoteborder: #804140;
    --downvotebg: #bb5651;
    --downvotetextcolor: #fdc0c0;
    
    --upvoteborder-hover: #4021b0;
    --upvotebg-hover: #5126eb;
    --upvotetextcolor-hover: #c0c0fd;
    
    --downvoteborder-hover: #a01130;
    --downvotebg-hover: #Fb3661;
    --downvotetextcolor-hover: #fdc0c0;

    --boxcolor: #f7f7f7;
    --boxbordercolor: #9a9698;
    --boxbordercolor-emphasize: #8a8688;

    --buttonborder: #353535;
    --buttonbg: #888591;
    --buttontextcolor: #DCDCDC;
    
    --buttonborder-hover: #9a9698;
    --buttonbg-hover: #A5A5A5;
    --buttontextcolor-hover: #FFFFFF;

    --colorunknown: #663333;
    --colorunuser: #808c8c;
    --coloruser: #404c4c;
    --colorpuser: #E2AB22;
    --colorcouser: #048D00;
    --colorjmod: #0A8C8C;
    --colorsmod: #476291;
    --coloradmin: #DD4500;
    --colorhadmin: #800000;

    --colorerror: #BF0D0D;

    --threadlevel0: gray;
    --threadlevel1: #F50909;
    --threadlevel2: #F56A09;
    --threadlevel3: #F5F909;
    --threadlevel4: #05F109;
    --threadlevel5: #0979F5;

    --threadlevel0-bg: #D7D7D7;
    --threadlevel1-bg: #F6DBDB;
    --threadlevel2-bg: #F6E6DB;
    --threadlevel3-bg: #F6F7DB;
    --threadlevel4-bg: #DAF6DB;
    --threadlevel5-bg: #DBE8F6;

}

:root[data-theme="light"] .topbar .mainimage img {
    filter: brightness(0%);
}

:root[data-theme="light"] .info_icon, :root[data-theme="light"] .nav_icon {
    filter: brightness(0%);
}
:root[data-theme="light"] .infobar img:not(.info_icon) {
    filter: saturate(3);
}

:root[data-theme="light"] .profile_attr_title, :root[data-theme="light"] .profile_attr_title * {
    color: white;
}

:root[data-theme="pink"] {
    --upvote: #0055ff;
    --downvote: #ff0014;
    --bgcolor: #ff80ff;
    --textcolor: #333333;
    --texthover: #888888;
    --textgray: #ffff00;
    --backgroundblack: #ff85f3;
    --infobartextcolor: #404c4c;

    --backgroundblack-art: #220022;
    --textcolor-art: #ddffdd;

    --upvoteborder: #ffff00;
    --upvotetextcolor: #000000;
    
    --downvoteborder: #ffff00;
    --downvotetextcolor: #000000;
    
    --upvoteborder-hover: #ffff00;
    --upvotetextcolor-hover: #000000;
    
    --downvoteborder-hover: #ffff00;
    --downvotetextcolor-hover: #000000;

    --boxcolor: #75d1ff;
    --boxbordercolor: #fffd75;
    --boxbordercolor-emphasize: #ffffff;

    --buttonborder: #ffff00;
    --buttontextcolor: #000000;
    
    --buttonborder-hover: #ffff00;
    --buttontextcolor-hover: #000000;

    --colorunknown: #663333;
    --colorunuser: #808c8c;
    --coloruser: #404c4c;
    --colorpuser: #fbff00;
    --colorcouser: #00ff00;
    --colorjmod: #0088ff;
    --colorsmod: #009999;
    --coloradmin: #FF8800;
    --colorhadmin: #ff0000;

    --colorerror: #BF0D0D;

    --threadlevel0: #ff00ff;
    --threadlevel1: #FF0000;
    --threadlevel2: #FFFF00;
    --threadlevel3: #00FF00;
    --threadlevel4: #00FFFF;
    --threadlevel5: #0000FF;

    --threadlevel0-bg: #ff00ff;
    --threadlevel1-bg: #FF0000;
    --threadlevel2-bg: #FFFF00;
    --threadlevel3-bg: #00FF00;
    --threadlevel4-bg: #00FFFF;
    --threadlevel5-bg: #0000FF;

    scrollbar-color: #00ffff #ffff00;

}

:root[data-theme="pink"] a, :root[data-theme="pink"] button, :root[data-theme="pink"] input, :root[data-theme="pink"] span {
    background: linear-gradient(90deg, rgba(255,0,0,1) 0%, rgba(255,154,0,1) 10%, rgba(208,222,33,1) 20%, rgba(79,220,74,1) 30%, rgba(63,218,216,1) 40%, rgba(47,201,226,1) 50%, rgba(28,127,238,1) 60%, rgba(95,21,242,1) 70%, rgba(186,12,248,1) 80%, rgba(251,7,217,1) 90%, rgba(255,0,0,1) 100%);
    animation: rainbow_animation 2s linear infinite;
    background-size: 400% 100%;
}
:root[data-theme="pink"] .post_image_big > img:not(.jszoom), :root[data-theme="pink"] .post_image_small > img:not(.jszoom) {
    animation: shake_animation 1.5s linear infinite;
}
:root[data-theme="pink"] .post_image_big, :root[data-theme="pink"] .post_image_small {
    overflow: hidden;
}
:root[data-theme="pink"] .post_title {
    animation: scale_animation 3s linear infinite;
}
:root[data-theme="pink"] * {
    font-family: "Comic Relief" !important;
}
:root[data-theme="pink"] .infobar img:not(.info_icon) {
    filter: saturate(8);
}
:root[data-theme="pink"] .upvote, :root[data-theme="pink"] .downvote {
    background: none;
}

@keyframes rainbow_animation {
    0%, 100% {
        background-position: 0 0;
    }
    50% {
        background-position: 100% 0;
    }
}
@keyframes shake_animation {
    0%, 100% {
        transform: rotate(0);
    }
    25% {
        transform: rotate(-5deg);
    }
    75% {
        transform: rotate(5deg);
    }
}
@keyframes scale_animation {
    0%, 100% {
        transform: scaleX(1);
    }
    50% {
        transform: scaleX(0.9);
    }
}
:root[data-theme="pink"] .topbar .mainimage img {
    filter: brightness(0%);
}

:root[data-theme="pink"] .info_icon, :root[data-theme="pink"] .nav_icon {
    filter: brightness(0%);
}

:root[data-theme="purple"] {
    --upvote: #486581;
    --downvote: #DB1641;
    --bgcolor: #1f001f;
    --textcolor: #E0E0E0;
    --texthover: #cccccc;
    --textgray: #602560;
    --backgroundblack: black;
    --infobartextcolor: #c03dc3;

    --backgroundblack-art: black;
    --textcolor-art: #E0E0E0;

    --upvoteborder: #486581;
    --upvotebg: #0e2a43;
    --upvotetextcolor: #c0c0fd;
    
    --downvoteborder: #db1641;
    --downvotebg: #900120;
    --downvotetextcolor: #fdc0c0;
    
    --upvoteborder-hover: #6136fb;
    --upvotebg-hover: #4021b0;
    --upvotetextcolor-hover: #c0c0fd;
    
    --downvoteborder-hover: #Fb3661;
    --downvotebg-hover: #a01130;
    --downvotetextcolor-hover: #fdc0c0;

    --boxcolor: #311835;
    --boxbordercolor: #48004c;
    --boxbordercolor-emphasize: #6f306f;

    --buttonborder: #772664;
    --buttonbg: #28002c;
    --buttontextcolor: #9d3284;
    
    --buttonborder-hover: #54295b;
    --buttonbg-hover: #4a0052;
    --buttontextcolor-hover: #e94ac4;

    --colorunknown: #663333;
    --colorunuser: #473D31;
    --coloruser: #c03dc3;
    --colorpuser: #FFD700;
    --colorcouser: #54DD00;
    --colorjmod: #1ABC9C;
    --colorsmod: #476291;
    --coloradmin: #DD4500;
    --colorhadmin: #CC0000;

    --colorerror: #FF4D4D;

    --threadlevel0: gray;
    --threadlevel1: #E51919;
    --threadlevel2: #E58A19;
    --threadlevel3: #E5C919;
    --threadlevel4: #15C129;
    --threadlevel5: #1999E5;

    --threadlevel0-bg: #26262c;
    --threadlevel1-bg: #2E161B;
    --threadlevel2-bg: #2E231B;
    --threadlevel3-bg: #2E2B1B;
    --threadlevel4-bg: #152A1D;
    --threadlevel5-bg: #152A1D;

}

@font-face {
    font-family: "Courier Prime";
    src: URL("/assets/fonts/CourierPrime-Regular.ttf") format("truetype");
}

@font-face {
    font-family: "Pinyon Script";
    src: URL("/assets/fonts/PinyonScript-Regular.ttf") format("truetype");
}
@font-face {
    font-family: "Comic Relief";
    src: URL("/assets/fonts/ComicRelief-Regular.ttf") format("truetype");
}

.rankcolorunknown {
    color: var(--colorunknown);
}
.rankcolor0 {
    color: var(--colorunuser);
}
.rankcolor1 {
    color: var(--coloruser);
}
.rankcolor2 {
    color: var(--colorpuser);
}
.rankcolor3 {
    color: var(--colorcouser);
}
.rankcolor4 {
    color: var(--colorjmod);
}
.rankcolor5 {
    color: var(--colorsmod);
}
.rankcolor6 {
    color: var(--coloradmin);
}
.rankcolor7 {
    color: var(--colorhadmin);
}

.error {
    color: var(--colorerror);
}

.threadbox0.jshover {
    border-color: var(--threadlevel0); 
    background-color: var(--threadlevel0-bg);
}
.threadbox1.jshover {
    border-color: var(--threadlevel1); 
    background-color: var(--threadlevel1-bg);
}
.threadbox2.jshover {
    border-color: var(--threadlevel2); 
    background-color: var(--threadlevel2-bg);
}
.threadbox3.jshover {
    border-color: var(--threadlevel3); 
    background-color: var(--threadlevel3-bg);
}
.threadbox4.jshover {
    border-color: var(--threadlevel4); 
    background-color: var(--threadlevel4-bg);
}
.threadbox5.jshover {
    border-color: var(--threadlevel5); 
    background-color: var(--threadlevel5-bg);
}

[class*="threadline"] {
    padding-left: var(--threadlinepadding); 
    margin-left: var(--threadlinemargin);    
}

.threadline0 {
    border-left: var(--threadlinewidth) solid var(--threadlevel0); 
}
.threadline1 {
    border-left: var(--threadlinewidth) solid var(--threadlevel1); 
}
.threadline2 {
    border-left: var(--threadlinewidth) solid var(--threadlevel2); 
}
.threadline3 {
    border-left: var(--threadlinewidth) solid var(--threadlevel3); 
}
.threadline4 {
    border-left: var(--threadlinewidth) solid var(--threadlevel4); 
}
.threadline5 {
    border-left: var(--threadlinewidth) solid var(--threadlevel5); 
}

*, html {
    overflow-x: hidden;
    max-width: 100%;
    font-size: 100%;
    margin: 0;
    padding: 0;
    transition: color 0.3s, background-color 0.3s, border 0.3s, filter 0.3s;
}

html {
    font-size: 0.875rem;
}

body {
    font-size: 1rem;
    background-color: var(--bgcolor);
    font-family: var(--defaultfonts) !important;
    color: var(--textcolor);
}

@media (prefers-reduced-motion: reduce) {
    *, html {
        transition: 0.01s !important;
    }
}

@media (max-width: 1084px) {
    .fullwidth_toggle, .post_header {
        display: none;
    }
}

@media (max-width: 700px) {
    html {
        font-size: 1rem !important;
    }
    body .main-page {
        max-width: 100%;
        min-width: 100%;
    }
    .window-profile > * {
        width: calc(100% - 1em) !important;
        background-clip: border-box;
        margin-left: 0 !important;
        padding: 0 0.5em;
    }
    .adminform, .modform {
        width: calc(100% - 1em) !important;
        margin-left: 0.5em;
    }
    .sectionmarker, .start_page_link, .page_link, .profile_link {
        margin-left: 0.5em;
    }
    .text-container {
        width: calc(100% - 0.2em) !important;
        background-clip: border-box;
        margin-left: 0 !important;
        padding: 0 0.1em;
    }
    .text-title, .link_big {
        width: calc(100% - 0.2em) !important;
        margin-left: 0 !important;
        padding: 0 0.1em;
    }
    :root[data-menubar="shown"] .topbar .mainimage {
        flex-basis: 100%;
    }
}

@media print {
    header {
        display: none !important;
    }

    *, html {
        color: black !important;
        border: none !important;
    }
}

@media (pointer: coarse), (hover: none) {
    *[title]:hover::after {
        pointer-events: none;
        content: attr(title);
        position: fixed;
        left: 0;
        bottom: 0;
        color: #fff;
        background-color: #000;
        border: 1px solid;
        width: fit-content;
        padding: 3px;
        z-index: 9999;
    }
}

@media (hover: hover) {
    .post_image_big img.jszoom, .post_image_small img.jszoom {
        position: fixed;
        top: 50%;
        left: 50%;
        min-width: 100vw;
        min-height: 100vh;
        max-width: 100vw;
        max-height: 100vh;
        object-fit: contain;
        image-rendering: pixelated;
        background-color: var(--bgcolor);
        background-image: none;
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
    }
    .user-flair:hover .user-flair-hover {
        display: block;
    }
}


a {
    color: var(--textcolor);
}

.sort_link {
    margin: 0 1em;
    margin-top: var(--space-m);
}

.page_link {
    display: inline-block;
    margin: var(--space-m) 1em;
    margin-bottom: var(--space-l);
}

.profile_link {
    display: block;
    margin-top: var(--space-m);    
    margin-bottom: var(--space-m);    
}

.main-page {
    max-width: 1084px;
    min-width: 700px;
    margin-left:auto; 
    margin-right:auto;
}

body.fullwidth .main-page {
    width: 100%;
    max-width: 100%;
    min-width: 100%;
}


body.articlemode .text-container, body.articlemode .link_big {
    width: min(65ch, calc(100% - 8rem));
    hyphens: auto;
    text-align: justify;
    margin-left: 4rem;
}

body.articlemode .text-title {
    margin-left: 4rem;
}

/* Topbar stuff */

.topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    letter-spacing: -0.07em;
    position: sticky;
    background-color: var(--boxcolor);
    border-bottom: 0.2rem solid var(--boxbordercolor);
}

:root[data-menubar="hidden"] .topbar nav > *:not(.donothide) {
    display: none;
}

.topbar nav {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    row-gap: 0.3em;
}

.topbar .mainimage img {
    height: 2rem;
    margin: 0.3rem;
}

.topbar a {
    margin-left: 1.5rem;
    color: var(--textcolor);
    text-decoration: none;
    transition: 0.3s;
}

.topbar a.mainimage {
    margin-left: 0;
}

.topbar .nav_icon {
    cursor: pointer;
    height: 1em;
    margin-left: 0.8rem;
}

.topbar .menutoggle {
    height: 1em;
    width: 1em;
    padding: 0.8em;
    margin-left: auto;
    flex: 0 0 auto;
    align-self: flex-end;
}

.topbar a:hover {
    color:var(--texthover);
}

/* Input stuff */

.adminform, .modform {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0.4em;
}

input[type=submit], input::file-selector-button {
    all: unset;
}

input[type=submit], input::file-selector-button, button, .button {
    cursor: pointer;
    text-decoration: none;
    padding: 0.3em;
    border-width: 0.06em;
    border-color: var(--buttonborder);
    background-color: var(--buttonbg);
    color: var(--buttontextcolor);
    border-style: solid;
    transition: 0.3s;
}

input[type=submit]:hover, input::file-selector-button:hover, button:hover, .button:hover {
    border-color: var(--buttonborder-hover);
    background-color: var(--buttonbg-hover);
    color: var(--buttontextcolor-hover);
}

input[type=text], input[type=password], input[type=email], input[type=color], input[type=url], input[type=number] {
    padding: 0.3em;
    font-size: 1rem;
    border-width: 0.06em;
    border-color: var(--buttonborder-hover);
    background-color: var(--backgroundblack);
    color: var(--textcolor);
    border-style: solid;
}

select {
    color: var(--textgray);
    background-color: var(--bgcolor);
    border-color: var(--textgray);
}

.select {
    margin-top: var(--space-m);
    margin-bottom: var(--space-m);
}

.center {
    display: flex;
    justify-content: center;
}


/* Flair stuff */

.user-flair, .theme-flair, .wide-theme-flair, .profile-theme-flair, .theme-flair-post {
    text-decoration: none;
}

.user-flair {
    display: inline-block;
    vertical-align: sub;
}

.user-flair-hover {
    border: 1px solid var(--textcolor);
    font-style: normal;
    padding: 0.4em;
    color: var(--textcolor);
    position: absolute;
    background-color: var(--backgroundblack);
    max-width: max(20vw, 700px);
    display: none;
}

.theme-flair {
    display: inline-flex;
    border-bottom: 0.15em solid var(--textcolor);
    padding: 0 0.125em;
    color: var(--textcolor);
}

.theme-flair-post {
    display: block;
    border-left: 0.1875em solid var(--textcolor);
    padding-left: 0.125em;
    margin-bottom: 0.2rem;;
    color: var(--infobartextcolor);
    font-style: italic;
}

.wide-theme-flair {
    width: 100%;
    display: block;
    border: 0.15em solid var(--textcolor);
    padding: 0.8em 0.5em;
    font-size: 1.1rem;
    margin: 0.15em 0;
    box-sizing: border-box;
    background-color: var(--backgroundblack);
}

.profile-theme-flair {
    width: 100%;
    display: block;
    border: 0.15em solid var(--textcolor);
    text-align: center;
    box-sizing: border-box;  
}

.themecolorunknown {
    border-color: var(--colorunknown);
}

/* Posts, comments and container stuff */

.generic_box, .readable_box {
    margin-top: var(--space-m);
    color: var(--textcolor);
    padding: 0.1875em;
    border-left: 0.1875em solid var(--boxbordercolor);
    background-color: var(--boxcolor);
    word-wrap: break-word;
}

.post_big {
    border: 0.1875em solid var(--boxbordercolor);
}

.pinned_post {
    border-color: var(--boxbordercolor-emphasize);
    border-style: solid;
    border-width: 0.1875em;
}

.post_image_big {
    display: inline-block;
}

.post_small > *, .comment_small > * {
    text-decoration: none;
}

.post_image_small {
    display: inline-block;
    position: absolute;
    z-index: 999; 
}

.post_image_small img {
    background-color: var(--textgray);
    background-image: url("/assets/pattern.svg");
    background-position: 0 0, 0.7rem 0.7rem;
    background-size: 1.4rem 1.4rem;
    max-width: calc(100% - 0.375em);
    max-height: 50vh;
    width: auto;
    height: auto;
    transition: 0s !important;
}

.post_image_big img {
    max-width: 100%;
    max-height: 50vh;
    min-height: 30vh;
    object-fit: contain;
    transition: 0s !important;
}

.post_header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: flex-end;
}

.post_header > button {
    flex: 1;
    border: none;
    background-color: transparent;
    color: var(--textgray);
    transition: 0.3s;
}
.post_header > button:hover {
    color: var(--texthover);
}

.infobar {
    margin-bottom: var(--space-s);
    color: var(--infobartextcolor);
}

.post_small > .infobar {
    font-style: italic;
}

.post_big > .post_body {
    margin-top: var(--space-s);
}

.upvote {
    color: var(--upvote);
    margin-left: 0.15em;
}
.downvote {
    color: var(--downvote);
    margin-left: 0.15em;
}

.vote_img {
    height: 1em;
    width: 1em;
}

.upvote_button img, .downvote_button img {
    pointer-events: none;
    height: 0.975rem;
    width: 0.975rem;
    padding: 0.025em;
}

.upvote_button {
    border-color: var(--upvoteborder);
    background-color: var(--upvotebg);
    color: var(--upvotetextcolor);
    border-style: solid;
}

.upvote_button:hover {
    border-color: var(--upvoteborder-hover);
    background-color: var(--upvotebg-hover);
    color: var(--upvotetextcolor-hover);
}

.downvote_button {
    border-color: var(--downvoteborder);
    background-color: var(--downvotebg);
    color: var(--downvotetextcolor);
    border-style: solid;
}

.downvote_button:hover {
    border-color: var(--downvoteborder-hover);
    background-color: var(--downvotebg-hover);
    color: var(--downvotetextcolor-hover);
}

.info_icon {
    height: 1em;
    width: 1em;
    top: 0.125em;
    position: relative;
}

.post_title {
    color: var(--textcolor);
    font-size: 1.25rem;
    letter-spacing: -0.075rem;
}

.post_body, .comment_body {
    color: var(--textcolor);
}

.post_body > a, .comment_body > a {
    color: var(--urlcolor);
}
.post_body > a:visited, .comment_body > a:visited {
    color: var(--urlvisitedcolor);
}
.post_body > a:hover, .comment_body > a:hover {
    color: var(--urlhovercolor);
}

.post_comment_info {
    color: var(--infobartextcolor);
    font-style: italic;
}

.focus {
    cursor: pointer;
}

.reportcontainer, .votecontainer, .misccontainer, .editdeletecontainer {
    display: inline-flex;
    gap: var(--space-s);
}

.votecontainer {
    justify-content: left;
    flex-wrap: wrap;
}

.misccontainer {
    margin-left: auto;
    justify-content: right;
    flex-wrap: wrap;
}

.post_formcontainer, .comment_formcontainer, .buttoncontainer, .rightcontainer {
    margin-top: var(--space-s);
    display: flex;
    gap: var(--space-s);
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: flex-end;
}

.reportcontainer[hidden] {
    display: none;
}

/* Format tags stuff */

small {
    font-size: 0.7em;
}

code {
    display: inline-block;
    padding: 0.3em;
    font-style: normal;
    font-family: "Courier Prime", Consolas, "courier new", monospace;
    background-color: var(--backgroundblack);
    color: var(--textcolor);
    white-space: pre;
    margin: 1em 0;
    overflow-x: auto;
}

pre {
    overflow-x: auto;
}

em {
    font-size: 1.5em;
    font-style: normal;
    font-family: "Pinyon Script", cursive;
}

c-spoiler {
    display: inline-block;
    vertical-align: bottom;
    background-color: var(--textcolor);
    color: var(--textcolor);
}

c-spoiler:hover {
    background-color: var(--backgroundblack);
}

c-art, c-iart {
    display: inline-block;
    font-family: monospace;
    white-space: pre;
    background-color: var(--backgroundblack-art);
    color: var(--textcolor-art);
    font-size: 0.7em;
    max-width: 100%;
    margin: 1em 0;
    overflow-x: auto;
}
c-iart {
    background-color: var(--textcolor-art);
    color: var(--backgroundblack-art);
}
c-center {
    display: block;
    text-align: center;
}
c-rb {
    background: linear-gradient(90deg, red,yellow,green,blue);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    font-weight: bold;
}
.post_big h2, .comment_body h2, .status_box h2 {
    font-size: 1.15rem;
}

.post_big h3, .comment_body h3, .status_box h3 {
    font-size: 1.05rem;
}

/* other stuff */

.window-center {
    position: fixed;
    text-align: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    background-color: var(--bgcolor);
    border: var(--boxbordercolor) 0.35rem solid;
    padding: 2em 1em;
}

.window-profile {
    background-color: var(--bgcolor);
    margin-top: var(--space-s);
}

.window-profile:nth-of-type(even) {
    background-color: var(--backgroundblack);
}

.window-center-profile {
    position: fixed;
    text-align: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    background-color: var(--bgcolor);
    border: var(--boxbordercolor) 0.35rem solid;
}

.profile_attr_title {
    background-color: var(--boxbordercolor);
    color: var(--textcolor);
}

.goldenglow {
    box-shadow: 0px 0px 5rem 1rem rgba(127,107,0,1)
}

.status_box {
    word-wrap: break-word;
}

hr {
    margin-bottom: var(--space-s);
    border-color: var(--boxbordercolor);
    border-style: solid;
}

summary {
    color: var(--infobartextcolor);
}

*[title] {
    text-decoration: underline dotted;
}
.datetime_diff {
    text-decoration: none;
}

.menuanchor {
    display: block;
    color: var(--textcolor);
    margin-bottom: var(--space-s);
}

.link {
    color: var(--textcolor);
}

.link:visited {
    color: var(--textgray);
}

.downer {
    position: absolute;
    display: block;
    bottom: 0;
    left: 0;
    right: 0;
}

.sectionmarker {
    margin-top: var(--space-s);
    margin-right: 0.4em;
}

.button.sectionmarker {
    display: inline-block;
    margin-top: var(--space-s);
}

.notselectable {
    user-select: none;
}

/* create (or edit)/comment; and profile status */

.advanced_formatting_container {
    display: flex;
    flex-wrap: wrap;
    justify-content: right;
    gap: var(--space-s);
    margin-bottom: var(--space-s);
}

.formatting_buttons {
    display: none;
}

#form_comment {
	width: 100%;
}

#form_post_body, #form_comment_body {
    resize: vertical;
}

#profile_status, #form_comment_body {
	margin-top: 1rem;
	margin-bottom: 1rem;
	width: 100%;
	border: none;
	outline: none;
	background-color: var(--boxcolor);
	color: var(--textcolor);
	font: var(--defaultfonts);
}

/* create (or edit)/post */

#form_post_title, #form_post_body, #form_post_link {
	padding: 0;
	display: block;
	border: none;
	margin-left: 0.2rem;
	outline: none;
	background-color: transparent;
	width: calc(100% - 0.2rem);
	color: var(--textcolor);
	font: var(--defaultfonts);
}

#form_post_title {
	font-size: 1.25rem;
	font-weight: bold;
	margin-bottom: var(--space-s);
}