@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap');



body {

    margin: auto;

    font-family: -apple-system, BlinkMacSystemFont, sans-serif;

    overflow: auto;

    background: linear-gradient(315deg, rgba(101,0,94,1) 3%, rgba(60,132,206,1) 38%, rgba(48,238,226,1) 68%, rgba(255,25,25,1) 98%);

    animation: gradient 15s ease infinite;

    background-size: 400% 400%;

    background-attachment: fixed;

    color: #e7eaec;

}



@keyframes gradient {

    0% {

        background-position: 0% 0%;

    }

    50% {

        background-position: 100% 100%;

    }

    100% {

        background-position: 0% 0%;

    }

}



.wave {

    background: rgba(255, 255, 255, 0.25);

    border-radius: 1000% 1000% 0 0;

    position: fixed;

    width: 200%;

    height: 12em;

    animation: wave 10s -3s linear infinite;

    transform: translate3d(0, 0, 0);

    opacity: 0.8;

    bottom: 0;

    left: 0;

    z-index: -1;

}



.wave:nth-of-type(2) {

    bottom: -1.25em;

    animation: wave 18s linear reverse infinite;

    opacity: 0.8;

}



.wave:nth-of-type(3) {

    bottom: -2.5em;

    animation: wave 20s -1s reverse infinite;

    opacity: 0.9;

}



@keyframes wave {

    2% {

        transform: translateX(1);

    }



    25% {

        transform: translateX(-25%);

    }



    50% {

        transform: translateX(-50%);

    }



    75% {

        transform: translateX(-25%);

    }



    100% {

        transform: translateX(1);

    }

}



h1,

h6 {

    font-family: 'Open Sans';

    font-weight: 300;

    text-align: center;

    position: absolute;

    top: 45%;

    right: 0;

    left: 0;

}



.container {			

    max-width: 600px;

    margin: 250px auto;

    padding: 20px;

    border-radius: 15px;

    background-color: rgba(255, 255, 255, 0.15);  

    backdrop-filter: blur(5px);

    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);

    animation: slide-up 0.5s ease-in-out;

}



@keyframes slide-up {

    0% {

        opacity: 0;

        transform: translateY(20px);

    }

    100% {

        opacity: 1;

        transform: translateY(0);

    }

}



.card {

    margin-top: 20px;

    animation: fade-in 0.5s ease-in-out;

}



@keyframes fade-in {

    0% {

        opacity: 0;

    }

    100% {

        opacity: 1;

    }

}



.card-title {

    font-size: 32px;

    font-weight: bold;

    margin-bottom: 10px;

    text-align: center;

    color: #fff;

    animation: text-fade 1s ease-in-out infinite alternate;

}



@keyframes text-fade {

    0% {

        opacity: 1;

    }

    100% {

        opacity: 0.3;

    }

}



.btn-primary {

    background-color: #2829289e;

    border-color: #4CAF50;

}



.btn-primary:hover {

    background-color: #2829289e;

    border-color: #0062cc;

}



.alert {

    margin-top: 20px;

    padding: 10px;

    border-radius: 5px;

    animation: fade-in 1.5s ease-in-out;

}



.alert-invalid {

    background-color: #bf2000;

    color: #ffffff;

    margin-top: 20px;

    padding: 10px;

    border-radius: 5px;

    animation: fade-in 1.5s ease-in-out;

}



.line {

    border: 0;

    background-color: #6a6a6a;

    height: 2px;

    margin: 8px 0 18px 0;

    cursor: pointer;

}