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

$radius: 2px

$font: 'DM Serif Display', 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"

*
    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

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

.back
    padding: 0
    width: 3rem
    height: 3rem

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

    position: fixed
    right: 1.3rem
    bottom: 1.3rem

    border: 0 solid transparent
    border-radius: 50%
    background: $dark
    box-shadow: 0 0 0.35rem rgba(0, 0, 0, 0.4)

    cursor: pointer
    z-index: 10

    svg
        display: block
        width: 1.4rem
        height: 1.4rem
        color: $light

    &:hover
        text-decoration: none

.scroll
    width: 0
    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)
    z-index: 2
    overflow: hidden

    img
        width: 100%
        height: 100%
        position: absolute
        inset: 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
        font-size: 2.5rem
        color: $accent

    a
        color: $accent
        text-decoration: none
        &:hover
            text-decoration: underline

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

    position: relative

    text-decoration: none
    background: $light
    color: $dark

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

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

        background: inherit
        color: inherit

        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: inherit
        color: inherit

        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
        color: $accent
        text-decoration: none

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