$sidenotes-width: 20rem
$content-margin: 1rem
$content-width: 40rem
$navbar-width: 20rem

*
    box-sizing: border-box

:root
    --box-bg: #d0faab
    --box-border: black
    // xkcd bluegreen
    --link: #017a79
    // xkcd dark blue green
    --visited-link: #005249
    --block-lightness: 85%
    --overlay-opacity: 0.8

@font-face
    font-family: 'osmarks-primary'
    font-style: normal
    font-weight: 400
    font-display: swap
    src: url(/assets/osmarks-primary.woff2) format('woff2')
    unicode-range: U+0000-00FF,U+FFFD

@font-face
    font-family: 'osmarks-primary'
    font-style: normal
    font-weight: 600
    font-display: swap
    src: url(/assets/osmarks-primary-semibold.woff2) format('woff2')
    unicode-range: U+0000-00FF,U+FFFD

@font-face
    font-family: 'osmarks-primary'
    font-style: italic
    font-weight: 400
    font-display: swap
    src: url(/assets/osmarks-primary-italic.woff2) format('woff2')
    unicode-range: U+0000-00FF,U+FFFD

@font-face
    font-family: 'osmarks-mono'
    font-style: normal
    font-weight: 400
    font-display: swap
    src: url(/assets/osmarks-mono.woff2) format('woff2')
    unicode-range: U+0000-00C0, U+A2-A9, U+AC-AE, U+00D7, U+00F7, U+FEFF, U+FFFD

$headers: "osmarks-mono", "osmarks-primary", "Fira Sans", sans-serif
$monospace: "osmarks-mono", "Fira Code", monospace
$body: "osmarks-primary", "Fira Sans", sans-serif

body
    margin: 0
    font-family: $body
    line-height: 1.5

.footnote-ref
    line-height: 1

pre, code, .deemph
    font-family: $monospace
    line-height: 1.3
    font-size: 0.95em

a
    text-decoration: none
    color: var(--link)
    &:visited
        color: var(--visited-link)

.blog-post a, .sidenotes a
    text-decoration: underline

.blog-post, .sidenotes
    text-wrap: pretty

nav
    display: flex
    align-items: center

    padding: 1rem
    margin-bottom: 0.5em
    background: black
    overflow-x: auto
    font-size: 1.25em

    font-family: $headers

    .logo
        width: 1.5rem
        height: 1.5rem
        image-rendering: crisp-edges
        image-rendering: pixelated

    .logocont
        display: flex
        align-items: center
        font-style: italic
        color: white

    a, img, picture
        margin-right: 0.5em

    a
        margin-left: 0.5em

    .nav-a
        color: #6dedfd

h1, h2, h3, h4, h5, h6
    margin: 0
    font-weight: 600
    font-family: $headers
    text-align: left
    a
        color: inherit !important
        text-decoration: none !important

summary h1, summary h2
    display: inline

// for easier viewing on big screen devices, narrow the width of text
// also make links a bit more distinct
main
    max-width: calc(100% - 2 * $content-margin)
    width: $content-width
    text-align: justify
    margin-left: $content-margin
    margin-right: $content-margin
    &.fullwidth
        width: calc($content-width + $sidenotes-width + -0.5 * $content-margin)
        margin-left: auto
        margin-right: auto
        padding-left: $content-margin
        padding-right: $content-margin

.blog, .experiments, .ring, .microblog
    margin-left: -1rem
    margin-right: -1rem
    margin-bottom: 0
    display: flex
    flex-wrap: wrap
    text-align: left

    > div
        min-width: 20em
        flex: 1 1 20%

.microblog > div
    flex: 1 1 30%

ul
    list-style-type: square
    padding-left: 1em

.isso
    overflow-x: clip

button, select, input, textarea, .textarea
    border-radius: 0 !important
    border: 1px solid gray
    box-shadow: none !important

.achievements
    position: fixed
    bottom: 0
    left: 0
    .achievement
        cursor: pointer

.achievement
    border: 1px solid black
    margin: 0.5em
    padding: 0.5em
    max-width: 40em

    .title
        font-weight: 500
        font-family: $headers
    .conditions
        font-style: italic

.smallinfo
    font-size: 0.8em
    margin-top: 0.5em
    margin-bottom: 0.5em

.imbox
    display: flex
    img, picture
        margin-right: 1em
        height: 8em
        width: 8em
        margin-bottom: auto
        background: black
        aspect-ratio: 1/1
        image-rendering: crisp-edges
        image-rendering: pixelated

.caption
    background: lightgray
    border: 1px solid black
    padding: 1em
    margin-bottom: 0.5em
    margin-top: 0.5em
    box-sizing: border-box
    > a
        display: block
    img, picture
        width: 100%
    p
        margin: 0

blockquote
    padding-left: 0.8rem
    border-left: 0.4rem solid black
    margin-left: 0.2rem

.wider, pre
    > *
        width: calc(100vw - 2 * $content-margin)
        max-width: 80em
        min-width: calc(40rem - 2 * $content-margin)
    position: relative
    z-index: 1

.microblog p
    margin: 0

.sidenotes-container
    display: flex
    flex-wrap: wrap
.sidenotes
    width: $sidenotes-width
    min-width: $sidenotes-width
    padding-left: 1.5rem
    position: relative
    box-sizing: border-box
    p
        margin: 0

.footnotes-list
    margin: 0
.footnotes-sep
    display: none
.footnotes-list
    text-align: justify
@media (max-width: calc(4 * $content-margin + $content-width + $sidenotes-width))
    // minwidth 1-pane layout
    .sidenotes
        min-width: auto
        width: auto
        max-width: $content-width
        padding: 0
        position: static
        margin-left: $content-margin
        margin-right: $content-margin
    .sidenotes-container
        display: block
    table
        display: block
        overflow-x: scroll

    .footnote-item.hl1, .footnote-item.hl2, .footnote-item.hl3
        background: var(--box-bg)
        padding: 0.5em
        box-sizing: border-box
        list-style-type: none
        display: block !important

@media (min-width: calc(4 * $content-margin + $content-width + $sidenotes-width + $navbar-width))
    // fullwidth 3-pane layout
    body
        display: flex
    .nav-container
        flex-grow: 1
    nav
        display: block
        > a, .logocont
            display: block
            margin-right: 0
        width: $navbar-width
        font-size: 1.5em
        text-align: right
        margin-bottom: 0
        box-sizing: border-box
        top: 0
        position: sticky
        margin-left: auto
        overflow-x: auto
    .sidenotes-container
        flex-grow: 1
    main.fullwidth
        margin-left: $content-margin
        margin-right: $content-margin
    .wider
        > *
            width: calc(100vw - 2 * $content-margin - $navbar-width)
            max-width: 80em
            min-width: calc(40rem - 2 * $content-margin - $navbar-width)

$hl-border: 3px
.footnote-item.hl1, .footnote-item.hl2, .footnote-item.hl3
    border-top: solid $hl-border var(--box-border)
    border-bottom: solid $hl-border var(--box-border)
    margin-top: -$hl-border

@media (prefers-color-scheme: dark)
    body
        background: black
        color: white

    nav
        background: #333

    .ring .art
        background: #444

    .achievement
        color: black

    .caption
        background: #333

    :root
        --box-bg: #001009
        --box-border: #004020
        // bright teal
        --link: #01f9c6
        // aqua green
        --visited-link: #12e193
        --block-lightness: 20%
        --overlay-opacity: 0.5

    nav .logocont
        color: white

    blockquote
        border-left: 0.4rem solid white

    button, select, input, textarea, .textarea
        background: #333
        color: white

    .imbox
        img, picture
            background: transparent

.sidenotes img, .footnotes img
    width: 100%
    max-width: 15em
    display: block

.sidenotes img.big
    max-width: 30em

.hoverdefn
    text-decoration-style: dotted
    text-decoration-line: underline

.section-header
    margin-top: 0.5em

table
    border-collapse: collapse
    td, th
        border: 1px solid gray
        padding: 0.4em
    th
        white-space: nowrap

.epigraph
    position: relative
    padding-left: 3rem
    padding-right: 3rem
    padding-top: 1rem
    padding-bottom: 1rem

    > div
        font-style: italic

    .attribution
        text-indent: 2rem
        text-align: right
        font-style: normal

    > div::after
        content: "\201D"
        right: 0rem
        bottom: 0rem

    > div::before
        content: "\201C"
        left: 0rem
        top: 0rem

    > div::before, > div::after
        display: block
        position: absolute
        font-size: 2.5em

// TODO
#comments-wrapper textarea
    width: calc(100% - 0.5em) !important

.next
    text-align: right

.buttons .button
    margin: 0.2em

.search-overlay
    overscroll-behavior: contain
    position: fixed
    overflow: scroll
    top: 0
    left: 0
    bottom: 0
    right: 0
    background: rgba(0, 0, 0, var(--overlay-opacity))
    backdrop-filter: blur(10px)
    padding: 2em
    color: white
    z-index: 1000
    input
        margin: 0.5rem
        font-size: 1.5em
        border: 1px solid green
    a
        color: white
    .search-results
        width: 100%
        max-width: $content-width
        .search-result
            padding: 0.5em
            margin: 0.5em
            .description
                font-style: italic

.box
    margin: -1px
    border: 1px solid black
    border-color: var(--box-border)
    background: #b1d1fc
    background: var(--box-bg)
    padding: 12px
    .title
        font-size: 1.1em
        font-family: $headers
        font-weight: 600

#citebox
    width: 100%

textarea.squiggle
    width: 100%

.emphasis
    margin-top: 16px
    margin-bottom: 16px
    padding: 16px
    p
        margin: 0

@media print
    .isso
        display: none

    .sidenotes
        display: block
        li
            position: static !important

    .cite-this-post
        display: none

    img
        max-width: 60% !important

    nav
        display: none

.large-button
    padding: 0.5em

.squiggle-control
    text-wrap: wrap

.ref
    .excerpt
        font-size: 0.9em
        font-style: italic