section
    margin: 3rem auto 0
    max-width: 85rem
    display: flex
    flex-direction: column
    gap: 1rem
    scroll-margin-top: 4rem

    > h2
        margin: 0
        font-size: 2rem
        font-weight: bold

    > p
        margin: 0
        font-size: 1rem

@media (max-width: 600px)
    section
        scroll-margin-top: 7rem
        text-align: center
        justify-content: center

.login
    padding: 0.5rem

    background-color: RGB($primary)
    color: RGB($secondary)
    border-radius: $radius

    > p
        margin: 0 0 0.5rem
        padding: 0.5rem

        background-color: RGB($accent)
        color: RGB($primary)
        border-radius: calc(calc(#{$radius} - 0.5rem) / 2)

        &:first-child
            border-top-left-radius: calc(#{$radius} - 0.5rem)
            border-top-right-radius: calc(#{$radius} - 0.5rem)

    > form
        display: flex
        flex-direction: row

        > input
            padding: 0.5rem 1rem

            width: 100%

            font-size: 1rem
            font-family: $monospace-font

            background-color: RGB($secondary)
            color: RGB($primary)
            border-radius: calc(calc(#{$radius} - 0.5rem) / 2) 0 0 calc(#{$radius} - 0.5rem)
            border: none

            transition: transform 0.1s ease-in-out, border-radius 0.1s ease-in-out

            &:hover, &:focus-visible
                outline: none

        > button
            padding: 0.5rem 1rem

            font-size: 1rem

            background-color: RGB($primary-button)
            color: RGB($primary)
            border-radius: 0 calc(calc(#{$radius} - 0.5rem) / 2) calc(#{$radius} - 0.5rem) 0
            border: none

            transition: transform 0.1s ease-in-out, border-radius 0.1s ease-in-out

            &:hover, &:focus-visible
                outline: none
                background-color: RGB($secondary-button)

.games
    margin-top: 1rem
    display: flex
    flex-direction: row
    flex-wrap: wrap
    gap: 1rem

.game-box
    margin: 0 auto
    padding: 1rem

    width: 16rem
    height: 0

    position: relative

    display: flex
    flex-direction: column

    font-family: $main-font
    font-size: 1rem
    text-decoration: none
    text-align: center

    background-color: RGB($primary)
    color: RGB($secondary)
    border-radius: $radius
    box-shadow: 0 0.2rem 1rem 0 RGB($primary)

    transition: box-shadow 0.1s ease-in-out, transform 0.25s ease-in-out
    overflow: hidden

    .background
        position: absolute
        inset: 0
        width: 100%
        height: 100%
        object-fit: cover
        opacity: 0.3
        filter: blur(0.25rem)
        z-index: +1

    &::after
        content: ''
        position: absolute
        inset: 0
        background-image: linear-gradient(to top, transparent, RGB($primary))
        z-index: +2

    > div
        position: relative

        height: 100%

        display: flex
        flex-direction: column
        gap: 0.5rem

        font-weight: bold

        z-index: +3

        .logo
            margin: 0 auto 1rem
            width: auto
            height: auto
            max-width: 100%
            max-height: 40%
            display: block
            border-radius: calc(#{$radius} / 2)

        > h2
            margin: 0
            font-size: 2rem
            color: RGB($accent)

        > p
            margin: 0

        > span
            height: 100%

        > ul
            margin: 0
            padding: 0
            list-style: none

            display: flex
            flex-direction: row
            flex-wrap: wrap
            gap: 0.5rem

            > li
                margin: 0
                padding: 0.25rem 0.5rem

                font-size: 0.9rem
                font-weight: normal

                background-color: RGBA($accent, 0.5)
                color: RGB($secondary)
                border-radius: $radius
    &:hover
        box-shadow: 0 0.25rem 1.25rem 0 RGB($primary)
        transform: scale(1.03) translateY(-0.25rem)

@media (max-width: 600px)
    .game-box
        margin-bottom: 2rem
        padding: 0.75rem
        width: 14rem
        > div
            .logo
                margin-bottom: 0.5rem
                max-height: 25%

            > h2
                font-size: 1.5rem