scriptai.css

body{
    background: black;
}

#output{
    text-shadow: black 2.5px 2.5px 2.5px; 
    width: 99%; 
    height: calc(100% - 100px);
    font-size: 65px; 
    border-style: none; 
    color: white;
    background: rgba(0, 0, 0, 0);
    position: absolute;
    resize: none;
    top: 0;
    outline: none;
}

#input{
    height: 100px; 
    border-style: none; 
    width: 90%; 
    font-size: 75px; 
    border-radius: 15px; 
    color: white; 
    background: rgba(0, 0, 0, 0);
    outline: none;
    position: absolute;
    bottom: 0;
    text-transform: lowercase;
    animation: rainbow 9s ease infinite;
    animation-play-state: paused;
}

#talkbutt{
    height: 100px; 
    border-style: none; 
    width: 10%; 
    font-size: 75px; 
    border-radius: 15px; 
    color: white; 
    background: rgba(0, 0, 0, 0);
    outline: none;
    position: absolute;
    background: rgba(0, 0, 0, 0); 
    animation: rainbow 4s ease infinite;
    animation-play-state: paused;
    background-size: 1800% 1800%;
    bottom: 0;
    right: 0;
} #talkbutt:hover{
    background: linear-gradient(124deg, #ff0101, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3);
    background-size: 1000% 1000%;
    animation-play-state: running;
}

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