*
    margin: 0
    padding: 0
    box-sizing: border-box
    scroll-behavior: smooth
    font-family: manrope, sans-serif
    overscroll-behavior: none
a
    cursor: pointer

@mixin mobile
    @media screen and (max-width: 900px)
        @content

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

@mixin flex-column
    @include flex
    flex-direction: column

h1
    @include flex
    word-wrap: break-word
    white-space: normal
    text-align: center

#pageContainer::-webkit-scrollbar
    width: 0
    height: 0

#pageContainer
    height: 100dvh
    width: 100dvw
    max-width: 100%
    overflow-y: auto
    scroll-snap-type: y mandatory
    white-space: nowrap
    scrollbar-width: none /* Firefox */
    -ms-overflow-style: none  /* Internet Explorer 10+ */

    abbr
        cursor: pointer

    section
        @include flex
        height: 100dvh
        width: 100dvw
        max-width: 100%
        scroll-snap-align: start

    section.hide
        display: none


    section#input
        background: lightcoral

        article
            @include flex-column
            height: 25%

            h1
                flex-basis: 75%
                color: white
                font-size: 5em

            form
                @include flex
                flex-basis: 25%
                width: 100%

                input
                    flex-basis: 75%
                    height: 100%
                    font-size: 2em
                    padding-left: 1em
                    color: #666

                button
                    flex-basis: 25%
                    font-size: 2em
                    height: 100%
                    color: white
                    background: grey

                .loading
                    display: none


            @include mobile
                gap: 2em
                height: 100%

                h1
                    font-size: 4em

                form
                    flex-direction: column
                    flex-basis: 60%
                    width: 90%
                    justify-content: flex-start

                    input, button
                        flex-basis: 25%
                        width: 100%
                        font-size: 1em



            form.htmx-request
                input, button
                    display: none

                .loading
                    display: block

    section#results
        background: lightblue
        min-height: 100dvh
        height: auto

        h1
            color: white
            font-size: 5em


        article
            @include flex-column
            gap: 1em

            table
                border: solid 2px black
                background: white
                border-collapse: collapse
                min-width: 50%
                max-width: 90%

                tr th:first-child,
                tr td:first-child
                    width: 10%
                    min-width: 10%
                    max-width: 10%
                    word-break: break-all


                th
                    background-color: gray
                    color: white

                td, th
                    padding: 0.3em

                tr.flown
                    th
                        border-right: 1px solid gray

                    th, td
                        background-color: lightgreen
                        color: black

                tr.not-flown
                    th
                        border-right: 1px solid gray
                    th, td
                        background-color: lightcoral
                        color: black
            @include mobile
                min-height: 100%
                h1
                    width: 90%
                    flex-basis: 25%
                    font-size: 2em

                table
                    width: 100dvw

                    tr th:first-child,
                    tr td:first-child
                        width: 10dvw
                        min-width: 10dvw
                        max-width: 10dvw
                        word-break: break-all

                    tr th:nth-child(2),
                    tr td:nth-child(2)
                        width: 90dvw
                        min-width: 90dvw
                        max-width: 90dvw
                        white-space: normal
                        word-break: break-all