.main {
    display: flex;
    justify-content: center;
    align-items: center;

    background: linear-gradient(-60deg, #00478c, #0072CE);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
    /*background: url(../Login-Background.png);*/
    /*background-position: center center;*/
    /*background-repeat: no-repeat;*/
    margin: 0;
    width: 100%;
    min-height: 87%;

    .container {
        background: white;
        border-radius: 45px;
        box-shadow: 1px 1px 5px 0px #fff;
        min-height: 60%;
        margin: 2rem;
        padding: 1.5rem;
        width: 70%;



        .card-wrapper {
            display: grid;
            column-gap: 1rem;
            row-gap: 1rem;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            margin-top: 1rem;
            text-align: center;

            .card {
                border: 1px solid #ccc;
                border-radius: 45px;
                box-shadow: 1px 1px 5px 0px #ccc;
                padding: 2rem;
            }

            @media (max-width: 1250px) {
                grid-template-columns: repeat(1, minmax(0, 1fr));
            }

            dialog {
                text-align: left;

                ol {
                    padding: 1rem;
                }

                li {
                    margin-bottom: 0.5rem;
                }
            }
        }
    }
}
@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}