:root {
    color-scheme: dark light;

    --primary-hue: 20;
    --secondary-hue: 200;
    --saturation: 60%;
    --lightness: 50%;

    --light-gray: 95%;
    --dark-gray: 45%;

    --primary: hsl(var(--primary-hue) var(--saturation) var(--lightness));
    --secondary: hsl(var(--secondary-hue) var(--saturation) var(--lightness));
}

@font-face {
    font-family: "M PLUS 2";
    font-display: swap;
    src: url("/2/eris/s/MPLUS2.ttf"), local("M PLUS 2");
}

@font-face {
    font-family: "M PLUS 1 Code";
    font-display: swap;
    src: url("/2/eris/s/MPLUS1Code.ttf"), local("M PLUS 1 Code");
}

html {
    height: 100%;
    width: 100%;
    font-family: "M PLUS 2", sans-serif;
    line-height: 120%;
    text-rendering: optimizeLegibility;
}

blockquote {
    font-style: italic;
}

/* TODO: Figure out how to float this shit to the right while still allowing wrapping on mobile and having it on the
   same height as everything else */
.snac-search-box {
    font-size: 1rem;
}

h1 {
    font-size: 150%;
    line-height: 110%;
}

h2 {
    font-size: 115%;
}

h3, h4, h5 {
    font-size: 100%;
}

b {
    color: hsl(var(--secondary-hue) var(--saturation) 30%);
}

u {
    text-decoration-color: var(--secondary);
}

button, pre, code, input, textarea {
    font-family: "M PLUS 1 Code", monospace;
    border-radius: 4px;
    color: var(--secondary);
    background-color: hsl(0 0 var(--light-gray));
}

pre {
    overflow-x: scroll;
}

/* TODO: consider max-width */
body {
    background: hsl(var(--primary-hue) 1% 99%);
    height: 100%;
    width: 100%;
    margin: 0;
}

header {
    background: hsl(var(--secondary-hue) 1% 74%);
    margin-bottom: 1rem;
    border-bottom: 1px solid black;

    font-size: 125%;
    line-height: 150%;

    text-overflow: ellipsis;
}

header * {
    margin-top: 0.1rem;
    margin-left: 0.25rem;
    margin-right: 0.25rem;
}

header > .left {
    justify-content: left;
}


header > .right {
    justify-content: right;
}

header > :first-child {
    margin-left: 0.5rem;
}

.snac-embedded-video, img {
    max-width: 100%;
}

body > header img {
    padding: 0.25rem;
    height: 3rem;
    width: auto;
}

footer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    font-height: 80%;
    margin-top: 1rem;
    border-top: 1px solid black;
}

footer > p {
    margin-bottom: 0.5rem;
}

a {
    color: var(--secondary);
    text-decoration: none;
}

a:hover {
    color: var(--primary);
    background-color: hsl(0 0 var(--light-gray));
    border-radius: 4px;
}

/* Support for  fiore */
.snac-content {
    white-space: pre-wrap;
}

.snac-content-attachments > a:hover {
    background-color: transparent;
    border-radius: 0;
}

a:visited {
    color: var(--primary);
}

@media (min-width: 1140px) {
    body > main {
        margin-left: 9rem;
        margin-right: 9rem;
    }
}

@media (min-width: 800px) and (max-width: 1140px) {
    body > main {
        margin-left: 5rem;
        margin-right: 5rem;
    }
}

@media (max-width: 800px) {
    body > main {
        margin-left: 1rem;
        margin-right: 1rem;
    }
}

@media (prefers-color-scheme: dark) {
    body, input, textarea {
        background: hsl(var(--primary-hue) 1% 17%);
        color: hsl(0 0 var(--light-gray));
    }

    header {
        background: hsl(var(--secondary-hue) 1% 12%);
    }

    b {
        color: hsl(var(--secondary-hue) var(--saturation) 75%);
    }
}

.snac-origin {
    font-size: 85%;
}

.snac-score {
    float: right;
    font-size: 85%;
}

.snac-top-user {
    text-align: center;
    padding-bottom: 2em;
}

.snac-top-user-name {
    font-size: 200%;
}

.snac-top-user-id {
    font-size: 150%
}

.snac-announcement {
    border: black 1px solid;
    padding: 0.5em;
}

.snac-avatar {
    float: left;
    /* TODO: Maybe max-height & max-width 2.5em? */
    height: 2.5em;
    padding: 0.25em;
}

.snac-author {
    font-size: 90%;
    text-decoration: none;
}

.snac-author-tag {
    font-size: 80%;
}

.snac-pubdate {
    color: hsl(0 0 var(--dark-gray));
    font-size: 90%;
}

.snac-top-controls {
    padding-bottom: 1.5em;
}

.snac-post {
    border-top: 1px solid #a0a0a0;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}

.snac-children {
    padding-left: 1em;
    border-left: 1px solid #a0a0a0;
}

.snac-thread-cont { border-top: 1px dashed #a0a0a0; }

.snac-textarea {
    width: 100%;
}

.snac-history {
    border: 1px solid #606060;
    border-radius: 3px;
    margin: 2.5em 0;
    padding: 0 2em;
}

.snac-btn-mute {
    float: right;
    margin-left: 0.5em;
}

.snac-btn-unmute {
    float: right;
    margin-left: 0.5em;
}

.snac-btn-follow {
    float: right;
    margin-left: 0.5em;
}

.snac-btn-unfollow {
    float: right;
    margin-left: 0.5em;
}

.snac-btn-hide {
    float: right;
    margin-left: 0.5em;
}

.snac-btn-delete {
    float: right;
    margin-left: 0.5em;
}

.snac-btn-limit {
    float: right;
    margin-left: 0.5em;
}

.snac-btn-unlimit {
    float: right;
    margin-left: 0.5em;
}

.snac-footer {
    margin-top: 2em;
    font-size: 75%;
}

.snac-poll-result {
    margin-left: auto;
    margin-right: auto;
}

.snac-list-of-lists {
    padding-left: 0;
}

.snac-list-of-lists li {
    display: inline;
    border: 1px solid #a0a0a0;
    border-radius: 4px;
    margin-right: 0.5em;
    padding-left: 0.5em;
    padding-right: 0.5em;
}

.snac-no-more-unseen-posts {
    border-top: 1px solid #a0a0a0;
    border-bottom: 1px solid #a0a0a0;
    padding: 0.5em 0;
    margin: 1em 0;
}