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

:root
    --autocol-lightness: 80%
    --autocol-saturation: 100%

@font-face
    font-family: 'Titillium Web'
    font-style: normal
    font-weight: 400
    font-display: swap
    src: url(/assets/titillium-web.woff2) format('woff2')
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD

@font-face
    font-family: 'Titillium Web'
    font-style: normal
    font-weight: 600
    font-display: swap
    src: url(/assets/titillium-web-semibold.woff2) format('woff2')
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD

@font-face
    font-family: 'Share Tech Mono'
    font-style: normal
    font-weight: 400
    font-display: swap
    src: url(/assets/share-tech-mono.woff2) format('woff2')
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD

body
    margin: 0
    font-family: 'Titillium Web', 'Fira Sans', sans-serif
    line-height: 1.3

pre, code, .deemph
    font-family: 'Share Tech Mono', monospace

a
    text-decoration: none

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


nav
    display: flex
    align-items: center

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

    .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
        font-size: 1.25em

    a, img, picture
        margin-right: 0.5em
        
    @for $i from 1 through 6
        a:nth-child(#{$i + 1})
            color: hsl(120 + ($i * 30), 100%, 80%)

h1, h2, h3, h4, h5, h6
    margin: 0
    font-weight: 600
    a
        color: inherit
        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: 100%
    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, .atl, .microblog
    margin-left: -1rem
    margin-right: -1rem
    margin-bottom: 0
    display: flex
    flex-wrap: wrap
    > div
        min-width: 20em
        background: #eee
        padding: 1em
        flex: 1 1 20%

.microblog > div
    flex: 1 1 30%

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

.isso
    padding: 1em
    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
    .conditions
        font-style: italic

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

.ring
    .art
        flex-direction: column
        flex: 1 1 25%
    .sum
        font-size: 0.8rem
        flex: 1 1 0
    .atr
        text-align: right
        font-size: 0.8rem
        color: #555

.imbox
    display: flex
    img, picture
        padding-right: 1em
        height: 8em
        width: 8em

    .title
        font-size: 1.1em
        font-weight: 600

.caption
    width: calc(100% - 3em)
    background: lightgray
    border: 1px solid black
    padding: 1em
    margin: 0.5em
    img, picture
        width: 100%

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

.wider
    width: calc(100vw - 2 * $content-margin)
    max-width: 80em
    min-width: 40em
    > *
        min-width: 40em
    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
    p
        margin: 0

.footnotes-sep
    display: none
.footnotes-list
    text-align: justify
@media (max-width: calc(2 * $content-margin + $content-width + $sidenotes-width))
    .sidenotes
        min-width: auto
        width: auto
        max-width: $content-width
        padding: 0
        margin-left: $content-margin
        margin-right: $content-margin
    .footnotes-sep
        display: block
    .sidenotes-container
        display: block

@media (min-width: calc(2 * $content-margin + $content-width + $sidenotes-width + $navbar-width))
    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

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

    nav
        background: #333

    .ring .art
        background: #444

    .achievement
        color: black

    a
        color: lightblue
        &:visited
            color: #e17701

    .caption
        background: #333

    :root
        --autocol-lightness: 10%
        --autocol-saturation: 50%

    nav .logocont
        color: white

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

.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