style.css

body{
    background-color: black;
    min-height: 100vh;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    
}
.container{
    background-color: rgb(196, 125, 190);
    color: black;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-family: 'Tangerine', serif;
    font-weight: 30px;
    font-style:italic;
    font-size: 50px;
    font-weight: bold;
    text-shadow: 4px 4px 4px rgb(121, 113, 113);
    padding: 50px 100px;
    border: 5px double whitesmoke;
    animation-name: colorChange;
    animation-duration: 5s;
}
.container:hover{
    animation: typing 1.5s steps(10) infinite;
}
@keyframes colorChange{
    0%   {background-color: rgb(196, 125, 190);}
    25%  {background-color: rgb(214, 214, 114);}
    50%  {background-color: rgb(102, 191, 197);}
    100% {background-color: rgb(241, 133, 9);}
}
@keyframes typing{
    100%{
        left: 100%;
        margin: 0 -35px 0 35px;
    }
    0%   {background-color: rgb(196, 125, 190);}
    25%  {background-color: rgb(214, 214, 114);}
    50%  {background-color: rgb(102, 191, 197);}
    100% {background-color: rgb(241, 133, 9);}
}

/*
#textinput{
    background-color: transparent;
    font-weight: bold;
    font-size: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: whitesmoke;
    height: 2rem;
    width:300px;
    padding: 5px 20px;
    border: 5px double whitesmoke;
    border-radius: 30px;
}
.btn{
    background-color: transparent;
    font-weight: bold;
    font-size: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: whitesmoke;
    border: 5px double whitesmoke;
}
*/