@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100;200;300;400;500;600;700;800;900&display=swap');

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Outfit', sans-serif;
}


#content {
    display: flex;
    justify-content: center;
    align-items: center;
}

#card {
    height: 400px;
    width: 450px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-inline: 30px;
    margin-top: 40px;
    padding: 20px;
    gap: 1.2rem;

    background: linear-gradient(100deg, #bde0fe, #febdfa 50%, #a2d2ff 90%);
    border-radius: 63% 37% 56% 44% / 37% 47% 53% 63%;
    animation: morph 4s ease-in-out infinite;
}

@keyframes morph {
    0% {
        border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    }

    20% {
        border-radius: 59% 41% 54% 46% / 40% 78% 22% 60%;
    }

    40% {
        border-radius: 59% 41% 34% 66% / 41% 49% 51% 59%;
    }

    60% {
        border-radius: 80% 20% 55% 45% / 44% 59% 41% 56%;
    }

    80% {
        border-radius: 74% 26% 70% 30% / 32% 65% 35% 68%;
    }


    100% {
        border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    }
}


#card-title {
    text-align: center;
}

h2 {
    color: rgb(223, 2, 247);
}

h1 {
    color: rgb(3, 3, 88);
}

#card input {
    width: 60%;
    padding: 7px;
    border-radius: 6px;
    border: rgb(99, 3, 255) 1px solid;
    font-weight: bolder;
    font-family: 'outfit', sans;
}


#card label {
    font-weight: bold;
    color: rgb(3, 3, 88);
    margin-bottom: -16px;
}

#card p {
    font-weight: bold;
    color: #0c9850;
}



#card-button {
    align-self: start;
    padding: 10px;

    font-family: 'Outfit', sans-serif;
    background-color: #f4f405;
    border: none;
    font-weight: bold;
    color: #2bcb78;
    border-radius: 6px;
}

#card-button:hover {
    background-color: rgb(95, 95, 231);
}


#results {
    color: rgb(155, 1, 1);
    font-weight: 600;
}