section
    margin: 0 auto 1rem
    padding: 1rem
    max-width: 75rem
    display: flex
    flex-direction: column
    justify-content: center
    text-align: center

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

    > p
        margin: 0 0 1rem
        font-size: 1rem

    &.center
        height: 100%
        justify-content: center
        align-items: center

    &.fill
        background-color: $secondary
        color: $primary
        border-radius: $radius

div.games
    margin: 1rem
    display: grid
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr))
    gap: 2rem

@media (max-width: 24rem)
    div.games
        margin: 0
        display: flex
        flex-direction: column
        gap: 1rem

div.login
    padding: 0.5rem

    background-color: $primary
    color: $secondary
    border-radius: $radius

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

        background-color: $accent
        color: $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: $secondary
            color: $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: $primary-button
            color: $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: $secondary-button

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

    width: 100%
    height: auto

    display: flex
    flex-direction: column

    font-family: $main-font

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

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

    > img
        margin: 0 0 0.5rem
        width: auto
        height: 10rem
        object-fit: cover
        display: block
        border-radius: calc(#{$radius} - 0.5rem) calc(#{$radius} - 0.5rem) calc(calc(#{$radius} - 0.5rem) / 2) calc(calc(#{$radius} - 0.5rem) / 2)

    > h2
        margin: 0 0 0.5rem
        font-size: 1.5rem
        font-weight: bold

    > p
        height: 100%
        margin: 0 0 1rem
        font-size: 1rem

    > .options
        display: flex
        flex-direction: row
        gap: 0.5rem
        font-family: $monospace-font

        > a
            margin: 0
            padding: 0.5rem 1rem

            height: 2.5rem

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

            font-size: 1rem
            text-decoration: none

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

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

            > i
                font-size: 1.2rem

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

            &:last-child
                border-bottom-right-radius: calc(#{$radius} - 0.5rem)

            &:hover, &:focus-visible
                outline: none
                transform: translateY(-0.1rem)