mono   = ui-monospace, Fira Code, Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace
sans   = system-ui, -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif
$serif = Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol

lunarYellow     = #FFD586
warmWhite       = #FFEAD7
warmLight       = #FEF7EF
coldLight       = #F7F3F9
flashWhite      = #FFFFFF
white           = #FAFAFA
maroonWhite     = #AA9483
lightGray       = #DDDDDD
gray            = #888888
darkGray        = #444444
black           = #1C1C1C
pitchBlack      = #000000
orange          = #F96332
yellow          = #FFB500
sunflower       = #F7CE68
peach           = #FFC895
sepia           = #B97F64
mauve           = #3D304C
grayMauve       = #4D3E56
lightGrayMauve  = #352A3C
darkGrayMauve   = #2A252A
darkMauve       = #2E2236
redMauve        = #291727
magenta         = #E14283
red             = #F23343
hotred          = #FF1536
marsRed         = #862833
dullRed         = #C75764
spotifyGreen    = #70B069
weirdGreen      = #46BD62
green           = #54D381
calmBlue        = #6488B9
grayBlue        = #B1B2DD
blue            = #2977FF
facebook        = #3B5998
twitter         = #1DA1F2
linkedin        = #0077B5
github          = #FFFFFF
reddit          = #FF4500
magentish       = #811A4C
darkBlue        = #050129
blackMauve      = #201D22
blackishMauve   = #120D13
bmacOrange      = #FF813F

lightAccent     = red
darkAccent      = yellow

:root
    --bg: coldLight
    --bg-2: warmWhite
    --bg-3: grayBlue
    --bg-4: flashWhite

    --fg: black
    --fg-2: blackMauve
    --fg-3: darkMauve
    --fg-4: mauve
    --fg-5: grayMauve
    --fg-0: alpha(grayMauve, 0.2)

    --accent: red
    --accent-2: dullRed
    --accent-3: marsRed

    --shadow: 0 12px 25px -6px rgba(0,0,0,0.15)

    @media (prefers-color-scheme: dark)
        --bg: blackMauve
        --bg-2: darkGrayMauve
        --bg-3: mauve
        --bg-4: pitchBlack

        --fg: white
        --fg-2: warmLight
        --fg-3: warmWhite
        --fg-4: lightGray
        --fg-5: grayBlue
        --fg-0: alpha(grayBlue, 0.2)

        --accent: yellow
        --accent-2: peach
        --accent-3: lunarYellow

        --shadow: 0 12px 25px 2px rgba(0,0,0,0.45)

body
    font-family: sans
    background-color: var(--bg)
    color var(--fg)

    #logo
        height auto

div.error
    display flex
    flex-direction column
    justify-content center
    align-items center
    width 100%
    height 80vh
    text-align center
    margin auto
    color var(--accent)
    font-family mono
    opacity 0.6

    h1, h4
        margin 0
        padding 0
    h1
        font-size 4rem

    .back-link
        margin-top 2rem
        font-weight bold
        opacity 0.5

fontSizeScalingFactor = 0.7
h1, h1 a
    font-weight 900
    font-size 3rem
    @media (max-width: 640px)
        font-size 3rem * fontSizeScalingFactor

h2, h2 a
    font-weight 800
    font-size 2.5rem
    @media (max-width: 640px)
        font-size 2.5rem * fontSizeScalingFactor

    img
        height 2.5rem
        @media (max-width: 640px)
            height 2.5rem * fontSizeScalingFactor

h3, h3 a
    font-weight 700
    font-size 2rem
    @media (max-width: 640px)
        font-size 2rem * fontSizeScalingFactor

    img
        height 2rem
        @media (max-width: 640px)
            height 2rem * fontSizeScalingFactor

h4, h4 a
    font-weight 600
    font-size 1.8rem
    @media (max-width: 640px)
        font-size 1.8rem * fontSizeScalingFactor

    img
        height 1.8rem
        @media (max-width: 640px)
            height 1.8rem * fontSizeScalingFactor

h5, h5 a
    font-weight 500
    font-size 1.5rem
    @media (max-width: 640px)
        font-size 1.5rem * fontSizeScalingFactor

    img
        height 1.5rem
        @media (max-width: 640px)
            height 1.5rem * fontSizeScalingFactor

h6, h6 a
    font-weight 500
    font-size 1.2rem
    @media (max-width: 640px)
        font-size 1.1rem

    img
        height 1.2rem
        @media (max-width: 640px)
            height 1.1rem

nav
    display flex
    justify-content space-between
    align-content center
    padding .5rem
    max-width 1400px
    margin auto

    @media (max-width: 640px)
        padding .3rem

    #logo
        @media (max-width: 639px)
            width 50px
    ul
        display flex
        justify-content center
        align-content center
        list-style none
        margin 0
        padding 0
        flex-wrap wrap
        @media (max-width: 640px)
            max-width 70vw
        li
            margin 0 .2rem
            font-size 1rem
            @media (max-width: 640px)
                margin .3rem .2rem
            a
                padding .2rem .5rem
                transition background-color .15s ease-out
                border-radius .25rem
                color var(--fg-2)
                text-decoration none

                &.selected
                    border 1px solid var(--fg-2)

                &:hover
                    text-decoration none
                    color var(--bg)
                    background-color var(--fg-2)

ul
    font-weight 500

p
    font-size 18px
    line-height 1.62
    @media (max-width: 640px)
        font-size 16px


.article-list
    padding 1rem
    max-width 700px
    margin auto

    h1
        letter-spacing -.05em
        color var(--fg-5)
        margin-bottom 0px
        padding-bottom 0px
        font-size 3rem
        margin-left: 35px

        img
            box-shadow:
                0px 4px 12px rgba(0, 0, 0, 0.16),
                -10px 10px 14px rgba(0, 0, 0, 0.06)
            border-radius 1px
            transform: perspective(10rem) rotateX(-15deg) rotateY(15deg)
            margin-left: -35px

    h6
        font-family mono
        margin-top 0
        font-size 1rem
        font-weight 500
        margin-bottom .5rem
        @media (max-width: 640px)
            font-size .9rem

        +p
            line-height 1.21
            margin-bottom 4rem
            margin-top 0
            font-size .8rem
            font-family mono

    .blog-link
        margin-top 4rem
        display flex
        justify-content center
        align-items center
        span
            margin 0 .3rem
            padding 0
            display inline-flex
            justify-content center
            align-items center
            color var(--fg-2)
            font-weight 900
            letter-spacing -.05rem
            vertical-align text-bottom
            @media (max-width: 640px)
                margin 0 .15rem
            img
                margin-right .2rem
                @media (max-width: 640px)
                    margin-right .1rem
                    width 1rem
                    height 1rem

        a
            font-weight bold
            color var(--accent)
            opacity 0.6
            text-decoration none

            @media (max-width: 640px)
                font-size 1rem

            &:visited
                color var(--accent)
                opacity 0.6
                text-decoration none
            &:hover
                opacity 0.9
                text-decoration none


    ol
        min-height 60vh
        margin-left 0
        padding-left 0

        li
            font-size 1.2rem
            font-weight 900
            color var(--fg)
            margin-bottom 1.5rem
            list-style none

            a
                font-size 1.4rem
                font-weight 800
                font-family $serif
                color var(--fg)
                opacity 0.8
                text-decoration none
                letter-spacing: -.75px;

                &:hover, &:focus
                    opacity 1

            .publish-date
                margin-top .5rem
                font-size .9rem
                font-family sans
                font-weight 400

main
    a
        font-weight 500
        color var(--accent-2)
        text-decoration-thickness 1px
        font-size 1.2rem
        transition color .15s ease-out, text-decoration .15s ease-out, opacity .15s ease-out

        &:visited
            color var(--accent-3)
            transition color .15s ease-out, text-decoration .15s ease-out, opacity .15s ease-out

        &:hover
            color var(--accent)
            text-decoration-thickness 2px
            transition color .15s ease-out, text-decoration .15s ease-out, opacity .15s ease-out

hr
    border-width 0 0 1px
    color var(--accent-2)
    border-image linear-gradient(90deg,rgba(255,213,134,0),var(--accent-2) 50%,rgba(255,213,134,0) 100%)0 0 100%
    border-style solid

.article-container
    padding 1rem
    max-width 700px
    margin auto
    margin-top 2rem

    .article-header
        width 100%
        display flex
        justify-content space-between
        align-items center

        @media (max-width: 640px)
            display none

        span
            opacity 0.5

    .back-link
        color var(--accent)
        opacity 0.5
        font-weight 600
        text-decoration none
        font-size 1rem
        &:hover
            opacity 0.7

        &+article>h1
            color var(--fg-2)
            margin-top .4rem
            letter-spacing -.04em

    blockquote
        max-width 34em
        @media (max-width: 640px)
            max-width 80vw

        margin-left 0
        padding-left 1rem
        border-left .25rem solid mauve
        color var(--fg-5)
        opacity 0.7
        margin-bottom 3rem
        p
            font-size 1rem

    img
        border-radius 16px
        filter: drop-shadow(0 3px 1rem rgba(0,0,0,.2))
        margin 2rem auto
        display block
        max-width 700px
        max-height 500px
        transition: transform .15s ease-out
        @media (max-width: 640px)
            max-width 80vw
            max-height 70vh

        &:hover, &:focus
            transition: transform .15s ease-out
            transform: scale(1.3)


    strong, h1, h2, h3, h4, h5, h6, em
        img
            border-radius 0
            filter: drop-shadow(0 2px 0.2rem rgba(0,0,0,0.15))
            margin 0
            display inline
            object-fit cover
            margin-right 2px
            margin-bottom -2px
            height 1.1rem
            &:hover
                transform none

    video
        border-radius 16px
        box-shadow 0 3px 1rem rgba(0,0,0,.5)
        max-width 100%
        max-height 500px

        @media (max-width: 640px)
            max-width 80vw
            max-height 70vh

    .video-container
        text-align center

        figcaption
            color var(--accent-2)
            font-style italic
    h1
        max-width 55rem !important

    ul
        margin-top .4rem
    li
        margin-bottom .4rem

    > article > h2
        margin-top: 3rem

    h1, h2, h3, h4, h5, h6
        position relative
        color var(--fg-3)

        a
            color var(--fg-3)
            text-decoration-thickness 3px
            font-weight bold

    h1 a.link, h2 a.link, h3 a.link, h4 a.link, h5 a.link, h6 a.link
        position absolute
        opacity .3
        font-size inherit
        text-decoration none

    h1 a.link:hover, h2 a.link:hover, h3 a.link:hover, h4 a.link:hover, h5 a.link:hover, h6 a.link:hover
        opacity 0.8
        text-decoration none

    h1 a.link
        left -2.2rem

    h2 a.link
        left -1.9rem

    h3 a.link
        left -1.5rem

    h4 a.link
        left -1.3rem

    h5 a.link
        left -1.1rem

    h6 a.link
        left -0.95rem

    em, a
        font-size inherit

    a[href$=".jpeg"] + em
        text-align center
        display block

    article hr
        margin-top 4rem
        margin-bottom 4rem

    li img
        border-radius 0
        filter: none
        margin 0
        padding 0
        display inline
        object-fit cover
        margin-right 2px
        height 1.1rem
        vertical-align text-bottom

    strong
        color var(--accent)
        opacity 0.8

    em
        color var(--accent-2)

    pre
        line-height 125%
        background mix(black, darkMauve, 50%)
        padding 1rem
        margin 1rem auto
        border-radius 8px
        padding 0.8rem 1rem

    code
        font-size: smaller
        font-family mono
        border-radius 6px
        padding 2px 6px
        font-style normal !important

        background-color var(--bg-2)
        color var(--fg)
        border 1px solid var(--accent-3)
        overflow-x auto

    pre code
        font-family mono
        font-size .7rem
        background-color transparent
        color warmWhite
        border none
        border-radius 0
        padding 6px 0
        max-height 40vh

    @media (max-width:640px)
        pre code
            font-size .6rem

    .chroma
        padding 0.8rem 1rem
        margin 1rem auto
        border-radius 8px
        overflow-x auto
        max-height 40vh

        pre
            background transparent
            padding revert
            margin revert
            border-radius revert
            overflow-x revert
            color white


    td.linenos .normal
        color inherit
        background-color transparent
        padding-left 5px
        padding-right 5px

    span.linenos
        color inherit
        background-color transparent
        padding-left 5px
        padding-right 5px

    td.linenos .special
        color #000000
        background-color #ffffc0
        padding-left 5px
        padding-right 5px

    span.linenos.special
        color #000000
        background-color #ffffc0
        padding-left 5px
        padding-right 5px

    .chroma .hll
        background-color: #4f424c
    .chroma
        background: #2f1e2e
        color: #e7e9db
    .chroma .c
        color: #776e71  /* Comment */
    .chroma .err
        color: #ef6155  /* Error */
    .chroma .k
        color: #815ba4  /* Keyword */
    .chroma .l
        color: #f99b15  /* Literal */
    .chroma .n
        color: #e7e9db  /* Name */
    .chroma .o
        color: #5bc4bf  /* Operator */
    .chroma .p
        color: #e7e9db  /* Punctuation */
    .chroma .ch
        color: #776e71  /* Comment.Hashbang */
    .chroma .cm
        color: #776e71  /* Comment.Multiline */
    .chroma .cp
        color: #776e71  /* Comment.Preproc */
    .chroma .cpf
        color: #776e71  /* Comment.PreprocFile */
    .chroma .c1
        color: #776e71  /* Comment.Single */
    .chroma .cs
        color: #776e71  /* Comment.Special */
    .chroma .gd
        color: #ef6155  /* Generic.Deleted */
    .chroma .ge
        font-style: italic  /* Generic.Emph */
    .chroma .gh
        color: #e7e9db
        font-weight: bold  /* Generic.Heading */
    .chroma .gi
        color: #48b685  /* Generic.Inserted */
    .chroma .gp
        color: #776e71
        font-weight: bold  /* Generic.Prompt */
    .chroma .gs
        font-weight: bold  /* Generic.Strong */
    .chroma .gu
        color: #5bc4bf
        font-weight: bold  /* Generic.Subheading */
    .chroma .kc
        color: #815ba4  /* Keyword.Constant */
    .chroma .kd
        color: #815ba4  /* Keyword.Declaration */
    .chroma .kn
        color: #5bc4bf  /* Keyword.Namespace */
    .chroma .kp
        color: #815ba4  /* Keyword.Pseudo */
    .chroma .kr
        color: #815ba4  /* Keyword.Reserved */
    .chroma .kt
        color: #fec418  /* Keyword.Type */
    .chroma .ld
        color: #48b685  /* Literal.Date */
    .chroma .m
        color: #f99b15  /* Literal.Number */
    .chroma .s
        color: #48b685  /* Literal.String */
    .chroma .na
        color: #06b6ef  /* Name.Attribute */
    .chroma .nb
        color: #e7e9db  /* Name.Builtin */
    .chroma .nc
        color: #fec418  /* Name.Class */
    .chroma .no
        color: #ef6155  /* Name.Constant */
    .chroma .nd
        color: #5bc4bf  /* Name.Decorator */
    .chroma .ni
        color: #e7e9db  /* Name.Entity */
    .chroma .ne
        color: #ef6155  /* Name.Exception */
    .chroma .nf
        color: #06b6ef  /* Name.Function */
    .chroma .nl
        color: #e7e9db  /* Name.Label */
    .chroma .nn
        color: #fec418  /* Name.Namespace */
    .chroma .nx
        color: #06b6ef  /* Name.Other */
    .chroma .py
        color: #e7e9db  /* Name.Property */
    .chroma .nt
        color: #5bc4bf  /* Name.Tag */
    .chroma .nv
        color: #ef6155  /* Name.Variable */
    .chroma .ow
        color: #5bc4bf  /* Operator.Word */
    .chroma .w
        color: #e7e9db  /* Text.Whitespace */
    .chroma .mb
        color: #f99b15  /* Literal.Number.Bin */
    .chroma .mf
        color: #f99b15  /* Literal.Number.Float */
    .chroma .mh
        color: #f99b15  /* Literal.Number.Hex */
    .chroma .mi
        color: #f99b15  /* Literal.Number.Integer */
    .chroma .mo
        color: #f99b15  /* Literal.Number.Oct */
    .chroma .sa
        color: #48b685  /* Literal.String.Affix */
    .chroma .sb
        color: #48b685  /* Literal.String.Backtick */
    .chroma .sc
        color: #e7e9db  /* Literal.String.Char */
    .chroma .dl
        color: #48b685  /* Literal.String.Delimiter */
    .chroma .sd
        color: #776e71  /* Literal.String.Doc */
    .chroma .s2
        color: #48b685  /* Literal.String.Double */
    .chroma .se
        color: #f99b15  /* Literal.String.Escape */
    .chroma .sh
        color: #48b685  /* Literal.String.Heredoc */
    .chroma .si
        color: #f99b15  /* Literal.String.Interpol */
    .chroma .sx
        color: #48b685  /* Literal.String.Other */
    .chroma .sr
        color: #48b685  /* Literal.String.Regex */
    .chroma .s1
        color: #48b685  /* Literal.String.Single */
    .chroma .ss
        color: #48b685  /* Literal.String.Symbol */
    .chroma .bp
        color: #e7e9db  /* Name.Builtin.Pseudo */
    .chroma .fm
        color: #06b6ef  /* Name.Function.Magic */
    .chroma .vc
        color: #ef6155  /* Name.Variable.Class */
    .chroma .vg
        color: #ef6155  /* Name.Variable.Global */
    .chroma .vi
        color: #ef6155  /* Name.Variable.Instance */
    .chroma .vm
        color: #ef6155  /* Name.Variable.Magic */
    .chroma .il
        color: #f99b15  /* Literal.Number.Integer.Long */

nav.ref-links
    size = 30px
    mobileFactor = 0.6
    textFactor = 0.55

    display flex
    justify-content space-around
    align-items center
    padding 2rem
    transform: scale(0.9)

    @media (max-width: 640px)
        padding 2rem .5rem
        transform: scale(1)

    ul
        flex-wrap nowrap
        max-width 100vw

    a
        overflow-wrap normal
        word-break keep-all
        width max-content
        display flex
        justify-content center
        align-items center
        font-family sans
        font-weight 500
        border 2px solid currentColor
        border-radius 10px
        font-size size * textFactor
        padding .5rem 1rem
        opacity 0.7
        @media (max-width: 640px)
            border-radius 6px
            padding .2rem .5rem
            font-size size * mobileFactor * textFactor

        small
            font-family mono

        span
            height min-content
            display flex
            flex-direction column
            div
                line-height 1
            small
                font-size size * textFactor * 0.7
                @media (max-width: 640px)
                    font-size size * mobileFactor * textFactor * 0.7

        svg
            margin-right .5rem
            width size
            height size

            @media (max-width: 640px)
                width size * mobileFactor
                height size * mobileFactor


    .ref-twitter-link
        a
            color twitter
            &:hover, &:focus
                background-color twitter
                color white
                border 2px solid black

    .ref-lowtech-link
        a
            color orange
            &:hover, &:focus
                background-color orange
                color black
                border 2px solid black

    .ref-github-link
        a
            color var(--fg)
            &:hover, &:focus
                background-color var(--fg)
                color var(--bg)
                border 2px solid black

.round2
    border-radius 2px !important

table
    font-size: 1rem
    line-height: 1.5rem

    box-shadow: 0 0 transparent, 0 0 transparent,var(--shadow)

    color: var(--fg)
    background-color: var(--bg-4)
    overflow-x: auto
    margin-bottom: 2.5rem

    text-indent: 0
    border-collapse: collapse
    border-spacing: 0
    border none
    border-radius: .75rem

    tbody tr:nth-child(odd)
        background-color var(--bg)

    th
        color var(--fg-4)
        font-family mono

    th, td
        padding .2rem .4rem
        &:not(:first-of-type)
            border-left 1px solid var(--fg-0)
figure
    @media (max-width: 640px)
        margin: auto