@font-face {
    font-family: 'JetBrains Mono';
    font-weight: 100 800;
    font-display: swap;
    src: url('/static/JetBrainsMono-VariableFont_wght.ttf') format('truetype');
}

* {
    box-sizing: border-box;
}

body {
    --background: #222426;
    --background-secondary: #1D1F20;
    --background-contrast: #3B3D40;

    --color: white;
    --color-secondary: #909499;
    --font: "JetBrains Mono", monospace;

    --accent: #ff6633;
    --container-spaceing: calc(40% - 22rem);

    background-color: var(--background);
    font-family: var(--font);
    color: var(--color);

    margin: 0;

    & > * {
        padding: .5rem max(1.5em, var(--container-spaceing))
    }

    a {
        color: inherit;
        text-decoration: none;
    }

    &.nojs {
        input[name=attachment] {
            display: inline-block;
        }

        input._fake_attachment {
            display: none;
        }

        .nojs-warning {
            display: block;
        }
    }

    input[name=attachment] {
        display: none;
    }

    input._fake_attachment {
        display: inline-block;
    }

    .nojs-warning {
        color: var(--color-secondary);
        text-align: center;
        font-size: .8rem;
        padding: .5rem;
        display: none;
    }
}

header {
    margin-bottom: 1rem;
    font-weight: 400;

    display: flex;
    justify-content: space-between;

    form, input {
        display: inline;
        font-family: inherit;
        border: none;
        color: inherit;
        background: inherit;
        cursor: pointer;
    }

    h1 {
        margin: 0;
        font-size: 1rem;

        span {
            font-size: .9rem;
        }
    }

    span {
        color: var(--color-secondary);
    }

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

main {
    margin: 0 auto;

    line-height: 1.4rem;

    form {
        width: 80%;
        margin: 0 auto;
        padding-bottom: 2rem;

        label {
            color: var(--color-secondary);
        }

        textarea {
            width: 100%;
            height: 6rem;
            display: block;
            padding: .5rem;
            margin-bottom: .25rem;
        }

        input:focus, textarea:focus {
            outline: none;
            border-color: var(--color-secondary);
        }

        input, textarea, input[type=file]::file-selector-button {
            color: inherit;
            font-family: inherit;
            background-color: var(--background-secondary);
            border: 1px solid var(--background-contrast);
        }

        input[type=submit] {
            margin-left: 1rem;
        }

        label:has(> input[type=checkbox]) {
            cursor: pointer;
        }

        label:has(> input[type=checkbox]:checked) {
            color: var(--color);
        }

        input[type=checkbox] {
            display: none;
        }

        input[type=file] {
            cursor: pointer;
        }

        input[type=submit], input[type=file]::file-selector-button {
            color: var(--color-secondary);
            padding: .5rem 1rem;
            border: none;

            &:hover:not(:disabled) {
                cursor: pointer;
                color: var(--color);
            }
        }
    }


    article {
        border-bottom: 1px darkgray dashed;
        padding: .75rem 0;
        gap: .25rem;
        flex-wrap: wrap;
        display: flex;

        p {
            margin: .25rem 0;
        }

        img {
            max-width: 7rem;
            max-height: 7rem;
            cursor: pointer;
            margin: .25rem 1rem 0 0;
            float: left;
        }

        img.clicked {
            max-width: 100%;
            max-height: fit-content;
        }

        .meta {
            font-size: .8rem;
            align-content: end;
        }

        .comment-preview {
            color: var(--color-secondary);
            max-height: 1.4rem;
            overflow: hidden;
        }

        .post-preview {
            max-height: 8rem;
            overflow: hidden;
            -webkit-line-clamp: 3;
            display: -webkit-box;
            -webkit-box-orient: vertical;
        }
    }

    article:last-of-type {
        border: none;
    }

    nav {
        text-align: center;
        margin-top: 5rem;
        font-size: .8rem;
    }

    :target {
        border-left: 5px solid var(--accent) !important;
        padding-left: 1rem;
    }

    blockquote {
        border-left: .7rem solid var(--background-contrast);
        padding: 0.5rem 1rem;
        background: var(--background-secondary);
        margin: 0;
    }

    blockquote p {
        display: inline;
    }

    .user-text {
        word-wrap: anywhere;

        & a {
            text-decoration: underline;
            text-decoration-color: var(--accent);
            text-decoration-thickness: 2px;
            text-underline-offset: .2rem;
        }
    }
}

main.article {
    & > section {
        border-top: 2px solid var(--background-contrast) !important;
        padding-top: 1rem;
    }
}

main.auth {
    form {
        display: block;

        input {
            width: 100%;
            padding: .5rem;
            display: block;
            margin: 1rem auto;
        }
    }
}

.row {
    gap: .25rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;

    & > * {
        display: block;
    }
}

.flex-right {
    flex-grow: 1;
    text-align: right;
}

.flex-break {
    width: 100%;
}