$dark: #261f1b
$light: #f0e7e4
$accent: #f2672c

$radius: 2px

$font: 'Zodiak-Variable', sans-serif
$font-mono: 'IBM Plex Mono', monospace

@import "styles/navigation"
@import "styles/footer"
@import "styles/markdown"
@import "styles/table"
@import "styles/art-block"
@import "styles/button-array"
@import "styles/back-button"

*
    font-family: $font
    box-sizing: border-box

    -ms-overflow-style: none // for Internet Explorer, Edge
    scrollbar-width: none // for Firefox

    &::-webkit-scrollbar
        display: none // for Chrome, Safari, and Opera

html
    font-size: 1rem
    background-color: $light
    color: $dark
    transition: background 0.1s ease-in-out

@media (prefers-color-scheme: dark)
    html
        background-color: $dark
        color: $light

body
    margin: 0
    padding: 0
    min-height: 100vh
    display: flex
    flex-direction: column

.scroll
    height: 0.3rem

    position: fixed
    bottom: 0
    left: 0

    background: $accent
    z-index: 4

header
    width: 100%
    height: 20rem

    position: relative

    display: flex
    flex-direction: column
    justify-content: center
    align-items: center

    background-color: $dark
    color: $light

    box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.2)
    overflow: hidden
    z-index: 2

    img
        width: 100%
        height: 100%
        position: absolute
        top: 0
        left: 0
        object-fit: cover

    h1
        margin: 0 0 0.5rem 0
        padding: 0 1rem
        position: relative
        font-size: 4rem
        text-align: center
        background: inherit
        color: inherit
        border-radius: $radius
        z-index: +1

    p
        margin: 0
        padding: 0.3rem 1rem
        position: relative
        text-align: center
        background: inherit
        color: inherit
        border-radius: $radius
        z-index: +1

@media (max-width: 900px)
    header
        height: 13rem

        h1
            font-size: 3rem

main
    margin: 0 auto
    padding: 1rem 1rem 0 1rem
    font-size: 1.1rem
    flex-grow: 1
    width: 100%
    max-width: 900px
    height: 100%

    img
        max-width: 100%
        object-fit: cover
        border-radius: $radius

    h1
        margin: 0 0 0.5rem 0
        position: relative
        font-size: 3rem
        color: $accent
        overflow: hidden
        opacity: 0

        span
            position: absolute
            transition: transform 0.5s cubic-bezier(.18,.89,.32,1.28)

    a
        color: $accent
        text-decoration: none

        &:hover, &:focus-visible
            text-decoration: underline
            outline: 0 solid transparent

.article
    margin: 0 0 0.5rem 0
    display: flex
    justify-content: space-between
    align-items: baseline

    position: relative

    text-decoration: none

    h2
        margin: 0 0.5rem 0.2rem 0
        padding-right: 0.75rem

        font-size: 1.69rem
        white-space: nowrap
        text-overflow: ellipsis

        background: $light
        color: $dark

        overflow: hidden
        transition: color 0.1s ease-in-out
        z-index: +1

    p
        margin: 0
        padding-left: 0.75rem

        font-size: 1rem
        white-space: nowrap

        background: $light
        color: $dark

        transition: color 0.1s ease-in-out
        z-index: +1

    &::after
        content: ""
        width: 100%

        display: block
        position: absolute
        top: 50%
        left: 0

        border-top: 1px $dark dotted

        opacity: 0.5
        transition: background 0.1s ease-in-out

    &:hover
        text-decoration: none

        h2, p
            color: $accent

@media (prefers-color-scheme: dark)
    .article
        h2
            background: $dark
            color: $light

        p
            background: $dark
            color: $light

        &::after
            border-top: 1px $light dotted

@media (max-width: 600px)
    .article
        h2
            font-size: 1.4rem
@media (max-width: 400px)
    .article
        h2
            font-size: 1.1rem