@import url('https://fonts.googleapis.com/css2?family=Comic+Neue:wght@700&display=swap');


body {
    margin: 0;
    min-height: 100vh;
    font-family: "Comic Neue", cursive;

    text-align: center;

    background:linear-gradient(
        45deg,
        #ff00ff,
        #00ffff,
        #ffff00,
        #ff6600
    );

    background-size: 400% 400%;
    animation:rainbow 10s infinite linear;
}

@keyframes rainbow{
    0%{
        background-position:0% 50%;
    }
    100%{
        background-position:100% 50%;
    }
}

.hero {
    margin-top: 50px;
}

#title{
    font-size: 5rem;
    color: white;
    text-shadow:
        0 0 20px red,
        0 0 40px yellow;

       animation:
        wiggle 1.5s infinite,
        fall 12s infinite;
}


@keyframes wiggle{

    0%{
        transform:rotate(-4deg);
    }

    50%{
        transform:rotate(4deg);
    }

    100%{
        transform:rotate(-4deg);
    }
}

@keyframes fall{

    0%,70%{
        transform:translateY(0);
    }

    90%{
        transform:
        translateY(500px)
        rotate(120deg);
    }

    100%{
        transform:
        translateY(0)
        rotate(0);
    }
}

.form-container{
    margin-top: 100px;
}


input {
    width:350px;
    max-width: 90%;
    padding: 15px;
    border: none;
    border-radius:15px;
    margin: top 20px;
    font-size:18px;
}


button {
    display: block;
    margin: 20px auto;
    padding: 15px 30px;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    font-size: 20px;
    animation: pulse 1s infinite;
}

@keyframes pulse{

    0%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.1);
    }

    100%{
        transform:scale(1);
    }
}


#result {
    margin-top: 40px;
    font-size: 2rem;
    color:white;
    max-width: 700px;
    margin-left:auto;
    margin-right: auto;
}