html, body{
    height: 100%;
}
body {
    background: rgb(2,0,36);
    background: linear-gradient(0deg, rgba(40,72,135,1) 15%, rgba(159,191,255,1) 100%);
    background-repeat: no-repeat;
    background-size: cover;
}

.card {
    background: rgba(255,255,255,0.82) 0% 0% no-repeat padding-box;
    border: 1px solid #707070;
    border-radius: 55px;
}

.text-color{
    color: #2B4B8B;
}

.text-sign-in{
    color: #5C7CBB;
    font-size: 2rem;
    font-family: "Segoe UI";
    font-weight: 700;
}

.button{
    width: 8rem;
    background: transparent linear-gradient(270deg, #71D3FF 0%, #4D7BB7 100%) 0% 0% no-repeat padding-box;
    border: 1px solid #707070;
    border-radius: 30px;
    opacity: 1;
    color: #FFFFFF;
}

.messages {
    background: rgba(184, 208, 255, 1) 0% 0% no-repeat padding-box;
    border: 1px solid rgba(88, 120, 184, 1);
    border-radius: 8px;
}

@media (max-height: 800px) { 
    .pt-4{
        padding-top: 0 !important;
    }

    .py-4{
        padding-bottom: 0 !important;
    }
}

@media (max-width: 1366px) and (max-height: 800px) { 
    .pt-4{
        padding-top: 0 !important;
    }

    .py-4{
        padding-bottom: 0 !important;
    }

    .text-sign-in{
        color: #5C7CBB;
        font-size: 1.5rem;
        font-weight: 700;
    }

    body{
        background-size: 100% 1100px;
    }
}


@media (max-width: 375px){
    .pt-4{
        padding-top: 0 !important;
    }

    .py-4{
        padding-bottom: 0 !important;
    }

    .messages{
        font-size: 0.6rem;
    }

    .text-sign-in{
        color: #5C7CBB;
        font-size: 1.5rem;
        font-family: "Segoe UI";
        font-weight: 700;
    }
}