@font-face {
    src: url(Atkinson-Hyperlegible-Regular-102.woff2);
    font-family: Atkinson Hyperlegible;
}
@font-face {
    src: url(Atkinson-Hyperlegible-Italic-102.woff2);
    font-family: Atkinson Hyperlegible;
    font-style: italic;
}
@font-face {
    src: url(Atkinson-Hyperlegible-Bold-102.woff2);
    font-family: Atkinson Hyperlegible;
    font-weight: bold;
}
@font-face {
    src: url(Atkinson-Hyperlegible-BoldItalic-102.woff2);
    font-family: Atkinson Hyperlegible;
    font-style: italic;
    font-weight: bold;
}
* {
    box-sizing: border-box;
    --not-white: #fff9f2;
    --not-black: #191919;
    --longan: #ffd8a8;
    --mango: #ffab5c;
    --line: #bfbab5;
    --shadow: 0px 4px 5px #00000024, 0px 1px 10px #0000001f, 0px 2px 4px #0003;
    --gray1: #827f7c;
    --gray2: #686664;
    --gray3: #4a4847;

    /* monokai terminal theme */
    /* <https://gist.github.com/brayevalerien/cb94ac685ebc186f359deae113b6710c> */
    --monokai-fg: /* Editor Foreground */ #f8f8f2;
    --monokai-bg: /* Editor Background */ #272822;
    --sgr-30: /* Terminal ANSI Black */ #333333;
    --sgr-31: /* Terminal ANSI Red */ #c4265e;
    --sgr-32: /* Terminal ANSI Green */ #86b42b;
    --sgr-33: /* Terminal ANSI Yellow */ #b3b42b;
    --sgr-34: /* Terminal ANSI Blue */ #6a7ec8;
    --sgr-35: /* Terminal ANSI Magenta */ #8c6bc8;
    --sgr-36: /* Terminal ANSI Cyan */ #56adbc;
    --sgr-37: /* Terminal ANSI White */ #e3e3dd;
    --sgr-90: /* Terminal ANSI Bright Black */ #666666;
    --sgr-91: /* Terminal ANSI Bright Red */ #f92672;
    --sgr-92: /* Terminal ANSI Bright Green */ #a6e22e;
    --sgr-93: /* Terminal ANSI Bright Yellow */ #e2e22e;
    --sgr-94: /* Terminal ANSI Bright Blue */ #819aff;
    --sgr-95: /* Terminal ANSI Bright Magenta */ #ae81ff;
    --sgr-96: /* Terminal ANSI Bright Cyan */ #66d9ef;
    --sgr-97: /* Terminal ANSI Bright White */ #f8f8f2;
}
html {
    font-family: Atkinson Hyperlegible, system-ui, sans-serif;
    background: var(--not-white);
    color: var(--not-black);
}
body {
    margin: 1em auto;
    padding: 0 1em;
    max-width: 42em;
}
hr {
    color: var(--line);
    border: none;
    border-top: 1px solid;
}
body > nav {
    text-align: center;
}
body > nav ul {
    list-style: "";
    padding: 0;
}
body > nav li {
    display: inline list-item;
    margin: 1em;
}
ul.tags a {
    display: inline-block;
}
article.thread {
    border: 1px solid var(--line);
    margin: 1em auto;
    background: white;
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: var(--shadow);
}
body > nav :link,
body > nav :visited,
article.thread :link,
article.thread :visited {
    color: currentColor;
}
article.post {
    position: relative;
    contain: inline-size style layout paint;
    overflow: clip;
    overflow-wrap: break-word;
}
article.post:not(:first-child) {
    border-top: 1px solid var(--line);
}
article.thread > header,
article.post > header,
article.post > footer:not(:empty) {
    padding: 1em;
    background: var(--not-white);
}
article.thread > header .meta,
article.post > header .meta {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
}
article.thread > header .handle,
article.post > header .handle {
    color: var(--gray3);
}
article.thread > header .archived,
article.post > header .archived,
article.thread > header .time,
article.post > header .time,
article.thread > header time,
article.post > header time {
    color: var(--gray1);
}
article.thread > header .gap,
article.post > header .gap {
    width: 2em;
    visibility: hidden;
    text-align: center;
}
article.post > header > h1:not(:empty) {
    margin: 0.5rem 0 0;
}
article.post > footer {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
}
body > nav ul.tags,
article.post > footer .tag {
    color: var(--gray2);
}
article.post > .content {
    margin: 1em;
}
@media screen and (max-width: 30em) {
    article.thread {
        margin-left: -1em;
        margin-right: -1em;
    }
}
/* cohost compatibility */
@keyframes spin {
    100% {
        transform: rotate(360deg);
    }
}
@keyframes bounce {
    0%, 100% {
        transform: translateY(-25%);
        animation-timing-function: cubic-bezier(0.8,0,1,1);
    }
}
:root {
    --color-notWhite: 255 249 242;
    --color-notBlack: 25 25 25;
    --color-cherry: 131 37 79;
    --color-strawberry: 229 107 111;
    --color-mango: 255 171 92;
    --color-longan: 255 216 168;
    --color-text: var(--color-notWhite);
    --color-bg-text: var(--color-notBlack);
    --color-foreground-100: 253 206 224;
    --color-foreground-200: 238 173 199;
    --color-foreground-300: 211 116 155;
    --color-foreground-400: 174 68 115;
    --color-foreground-500: 131 37 79;
    --color-foreground-600: 103 26 61;
    --color-foreground-700: 81 17 46;
    --color-foreground-800: 59 9 32;
    --color-foreground: var(--color-cherry);
    --color-secondary-200: 244 187 187;
    --color-secondary-300: 238 153 155;
    --color-secondary-400: 229 107 111;
    --color-secondary-600: 164 42 47;
    --color-secondary-700: 123 27 31;
    --color-secondary: var(--color-strawberry);
    --color-tertiary: var(--color-longan);
    --color-tertiary-200: 255 229 196;
    --color-tertiary-300: 255 216 168;
    --color-tertiary-400: 255 202 122;
    --color-tertiary-500: 183 133 61;
    --color-tertiary-600: 183 133 61;
    --color-tertiary-700: 132 94 38;
    --color-accent: var(--color-mango);
    --color-background: var(--color-notWhite);
    --color-sidebar-bg: var(--color-notWhite);
    --color-sidebar-text: var(--color-notBlack);
    --color-sidebar-accent: var(--color-cherry);
    --color-compose-button: var(--color-foreground);
    --color-compose-button-400: var(--color-foreground-400);
    --color-compose-button-600: var(--color-foreground-600);
}
article.post.cohost > .content img,
article.post.cohost > .content video {
    max-width: 100%;
    height: auto;
}
article.post.cohost > .content img,
article.post.cohost > .content video,
article.post.cohost > .content audio {
    display: block;
}
article.post.cohost > .content :where(img):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    margin-top: 2em;
    margin-bottom: 2em;
}

/* server features */

article.post > footer > .actions:not(:empty) {
    margin-left: 1em;
    align-self: flex-end;
}
.server {
    background: var(--mango);
    padding: 0.5em;
}

/* post composer */

form.compose > textarea.source {
    width: 100%;
    height: 30vh;
}
form.compose > details.expand {
    cursor: pointer;
    user-select: none;
    width: max-content;
}
/* when “show shared posts in full?” is closed, show only the header of shared posts in the preview. */
form.compose > details.expand:not([open]) ~ .preview > article.thread > article.post:not(:last-child) > :not(header) {
    display: none;
}
form.compose > .error:not(:empty) {
    color: var(--monokai-fg);
    background: var(--monokai-bg);
    padding: 1em;
}