body
    margin: 0
    font-family: 'Fira Sans', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif

a
    text-decoration: none

nav
    display: flex
    align-items: center

    padding: 1em
    margin-bottom: 0.5em
    background: black

    .logo
        width: 1.5em
        height: 1.5em

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

h1, h2, h3, h4, h5, h6
    margin: 0
    font-weight: 400

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.25em
        padding: 0.5em
        flex: 1 1 20%

main
    margin-top: 1em

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

.isso
    padding: 1em

.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