@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

nav
    display: flex
    align-items: center

    padding: 1em
    margin-bottom: 0.5em
    background: black
    overflow-x: scroll
    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
        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
        text-decoration: none !important
        color: inherit

main, .header
    margin-left: 1em
    margin-right: 1em

// for easier viewing on big screen devices, narrow the width of text
// also make links a bit more distinct
main.blog-post
    max-width: 40em
    text-align: justify
    a
        text-decoration: underline

.blog, .experiments, .atl
    margin: -0.5em
    margin-bottom: 0
    display: flex
    flex-wrap: wrap
    > div
        min-width: 20em
        background: #eee
        margin: 0.5em
        padding: 1em
        flex: 1 1 20%

main
    margin-top: 1em

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
        padding-right: 1em
        height: 8em
        width: 8em

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

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