@media (width > 1080px) {
    section {
        animation: section-appear 1.4s ease-out forwards;

        > .title {
            h1{
                animation: up-appear 1.8s ease-out forwards;
            }

            h2 {
                animation: up-appear 1.2s ease-out forwards;
                animation-delay: 0.3s;
                opacity: 0;
            }

            p {
                opacity: 0;
                animation: up-appear 1.4s ease-out forwards;
                animation-delay: 0.95s;
            }
        }

        form {
            animation: form-appear 1.4s ease-out forwards;
            animation-delay: 0.8s;
            opacity: 0;
        }
    }
}

@media (max-width: 768px) {
    section {
        width: 100%;
        height: 100vh;
        padding-top: 4rem;
        padding-bottom: 1rem;
        padding-right: 0;
        border-radius: 0;

        .title {
            > div{
                display: flex;
                flex-direction: column;
                align-items: center;
            }

            h1 {
                width: 100%;
                font-size: 2rem;
            }

            p {
                display: none;
            }
        }

        form {
            width: 89vw;
            top: 10rem !important;
            height: fit-content;
            left: 50% !important;
            transform: translateX(-50%);
        }
    }

    #registerPage {
        section {
            padding-top: 3rem;
        }
    }

    footer {
        font-size: 12px;
        white-space: wrap;
        color: #F5F5F5;
    }
}