@font-face {
    font-family: iA Writer Mono;
    font-style: normal;
    font-display: swap;
    font-weight: 400;
    src: url(https://cdn.jsdelivr.net/fontsource/fonts/ia-writer-mono@latest/latin-400-normal.woff2) format("woff2"),url(https://cdn.jsdelivr.net/fontsource/fonts/ia-writer-mono@latest/latin-400-normal.woff) format("woff")
}

@font-face {
    font-family: iA Writer Mono;
    font-style: normal;
    font-display: swap;
    font-weight: 700;
    src: url(https://cdn.jsdelivr.net/fontsource/fonts/ia-writer-mono@latest/latin-700-normal.woff2) format("woff2"),url(https://cdn.jsdelivr.net/fontsource/fonts/ia-writer-mono@latest/latin-700-normal.woff) format("woff")
}

@font-face {
    font-family: iA Writer Mono;
    font-style: italic;
    font-display: swap;
    font-weight: 400;
    src: url(https://cdn.jsdelivr.net/fontsource/fonts/ia-writer-mono@latest/latin-400-italic.woff2) format("woff2"),url(https://cdn.jsdelivr.net/fontsource/fonts/ia-writer-mono@latest/latin-400-italic.woff) format("woff")
}

@font-face {
    font-family: iA Writer Mono;
    font-style: italic;
    font-display: swap;
    font-weight: 700;
    src: url(https://cdn.jsdelivr.net/fontsource/fonts/ia-writer-mono@latest/latin-700-italic.woff2) format("woff2"),url(https://cdn.jsdelivr.net/fontsource/fonts/ia-writer-mono@latest/latin-700-italic.woff) format("woff")
}

:root {
    --white: #faf5f6;
    --transwhite: rgba(250, 245, 246, .7);
    --moretranswhite: rgba(239, 239, 239, .1);
    --black: #121212;
    --transblack: rgba(37, 37, 37, .7);
    --moretransblack: rgba(37, 37, 37, .1);
    --gray: #6b6b6b;
    --highlight: #e5ffc3;
    --red: #e4002b;
    --green: #24d05a;
    --pink: #eb4888;
    --blue: #10a2f5;
    --yellow: #e9bc3f
}

::selection {
    background-color: var(--highlight);
    color: var(--black)
}

html,body {
    margin: auto;
    padding: 20px;
    max-width: 70ch;
    background-color: var(--white);
    word-wrap: break-word;
    overflow-wrap: break-word;
    color: var(--black);
    scroll-behavior: smooth
}

html,body,button,code,input {
    font-family: iA Writer Mono,monospace
}

h1,strong,b {
    color: var(--black)
}

body.dark-mode,body.dark-mode button,body.dark-mode h1,body.dark-mode .go-home,button.dark-mode,button.dark-mode button {
    background: var(--black);
    color: var(--white)
}

body.dark-mode nav,body.dark-mode .back-to-top {
    background: var(--transblack)
}

body:has(dialog[open]) {
    overflow: hidden
}

.tag-title {
    font-weight: 400;
    color: var(--black)
}

@media (prefers-color-scheme: dark) {
    ::selection {
        background-color:#0f0f0f;
        color: var(--white)
    }

    :root {
        --gray: #a4a4a4
    }

    html,body,body button,body h1,body strong,body b,body em,body blockquote,body input,body .go-home {
        background: var(--black);
        color: var(--white)
    }

    body nav {
        background: var(--transblack)
    }

    body blockquote,body code,body pre {
        background-color: var(--moretranswhite)
    }

    body a {
        color: var(--white)
    }

    body .tag {
        color: var(--gray)
    }

    body .tags.center .tag,.tag-title {
        color: var(--white)
    }

    body .back-to-top {
        background: var(--transblack)
    }

    body dialog {
        background: var(--black)
    }

    body dialog button {
        background: var(--moretranswhite)
    }
}

h2,h3,h4,h5,h6 {
    color: var(--gray);
    line-height: 1.1
}

header {
    position: relative
}

a {
    color: var(--black);
    text-decoration-thickness: .3ex;
    text-underline-offset: .3ex
}

nav {
    position: sticky;
    top: 0;
    text-align: center;
    background: var(--transwhite);
    -webkit-backdrop-filter: blur(1px);
    backdrop-filter: blur(1px)
}

nav a {
    margin: 1.5rem 0
}

nav a:not(:last-child) {
    padding: 0 .75rem 0 0
}

@media (max-width: 650px) {
    nav {
        padding:1.5rem 0 0
    }

    nav a {
        margin: 0 0 1.5rem
    }
}

hr {
    border-top: 1px solid var(--gray);
    width: 75%;
    margin: 1rem auto
}

ul.posts-list,ul.tags-list,ul.year-list {
    padding: unset;
    list-style-type: none
}

ul.year-list {
    max-width: 50ch;
    margin: 0 auto
}

.post {
    margin: 0 0 30px
}

.post .title {
    font-size: 1.3em
}

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

.tags.center {
    max-width: 50ch;
    margin: 0 auto;
    color: var(--black)
}

.tag {
    display: inline-block;
    margin: auto 10px;
    color: var(--black);
    font-size: .8rem
}

.tag:hover {
    cursor: pointer;
    font-weight: 700
}

.tag.posty {
    margin-left: 0;
    margin-right: 10px
}

main,content {
    line-height: 1.6
}

table {
    width: 100%
}

img {
    max-width: 100%;
    height: auto
}

code {
    padding: 2px 5px;
    background-color: var(--moretransblack);
    font-weight: 700
}

pre {
    padding: 1rem;
    background-color: var(--moretransblack);
    overflow: auto
}

pre>code {
    all: unset
}

blockquote {
    background: var(--moretransblack);
    border-left: .5ex solid var(--gray);
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    color: var(--black);
    padding: 20px;
    margin: 0;
    font-style: italic
}

blockquote p {
    margin: 0
}

h1 {
    font-weight: 400;
    scroll-margin-top: 3em
}

h2 {
    font-weight: 400
}

h3 {
    text-align: center
}

input[type=text],input[type=email] {
    background: var(--white);
    color: var(--black);
    padding: 0 .3em;
    border: none;
    border-bottom: .2em solid var(--gray);
    font-size: 1rem;
    height: 1.4em;
    max-width: 173px
}

input:focus {
    outline: transparent
}

dialog {
    max-width: 100ch;
    border-radius: 10px;
    background: var(--white)
}

dialog::backdrop {
    backdrop-filter: blur(2px)
}

dialog img {
    width: clamp(100%,auto,95ch);
    max-height: 80vh
}

dialog button {
    display: block;
    margin: 10px auto;
    padding: 5px;
    background: var(--moretransblack);
    border: none;
    cursor: pointer
}

dialog[open] {
    animation: dialog-fade-in .3s ease-in-out
}

@keyframes dialog-fade-in {
    0% {
        opacity: 0;
        transform: scale(.8)
    }

    to {
        opacity: 1;
        transform: scale(1)
    }
}

.center {
    text-align: center
}

.header-section {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap
}

.header-frame {
    max-width: 350px
}

article :not(.article-title) {
    line-height: 1.8
}

.article-title {
    font-size: 2em;
    margin: .25em 0
}

.blog-post {
    font-size: clamp(1rem,.96rem + .22vw,1.125rem)
}

.blog-post>*+* {
    margin-block-start:1em}

.blog-post img {
    cursor: zoom-in
}

time {
    font-style: italic;
    color: var(--gray)
}

ul li time {
    white-space: nowrap
}

.newsletter-blurb span {
    text-shadow: 1px 1px 0 var(--pink)
}

.newsletter-blurb span.green {
    text-shadow: 1px 1px 0 var(--green)
}

.newsletter-blurb span.blue {
    text-shadow: 1px 1px 0 var(--blue)
}

.newsletter-blurb span.yellow {
    text-shadow: 1px 1px 0 var(--yellow)
}

.newsletter-blurb .issue-links {
    text-align: center
}

.back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: var(--transwhite);
    padding: .5em;
    border-radius: .5em;
    -webkit-backdrop-filter: blur(1px);
    backdrop-filter: blur(1px);
    transition: all 1s ease-in-out
}