textspeechconverter_css.html

<style>
  * {
    font-family: 'Yusei Magic', sans-serif;
    outline: none;
  }

  body {
    padding: 0 5vw;
    background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
                linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
                linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
    height: 100vh;
    background-attachment: fixed;
    background-size: 400% 400%;
    animation: background-move 90s ease infinite;
  }

  #first_screen {
    height: 100vh;
  }

  #second_screen {
    height: 100vh;
  }

  .grid-container {
    display: grid;
    grid-template-rows: repeat(3, 1fr);
    text-align: center;
    padding: 0 10vw;
  }

  .title {
    width: 100%;
    text-align: center;
    font-size: 48px;
    color: white;
  }

  textarea {
    height: 100px;
    width: 500px;
    border-radius: 10px;
    padding: 10px;
  }

  button {
    cursor: pointer;
    border-radius: 100px;
    background-color: black;
    padding: 10px 23px;
    color: white;
    border: none;
  }

  #preloader1 {
    position: relative;
    right: -47.5%;
    padding: 30px 0 0 0;
  }

  #preloader2 {
    position: relative;
    right: -47.5%;
    padding: 30px 0 0 0;
  }

  span {
    display: block;
    bottom: 0px;
    width: 9px;
    height: 5px;
    background: #9b59b6;
    position: absolute;
    animation: wave 1.5s infinite ease-in-out;
  }

  span:nth-child(2) {
    left: 11px;
    animation-delay: 0.2s;
  }

  span:nth-child(3) {
    left: 22px;
    animation-delay: 0.4s;
  }

  span:nth-child(4) {
    left: 33px;
    animation-delay: 0.6s;
  }

  span:nth-child(5) {
    left: 44px;
    animation-delay: 0.8s;
  }

  @keyframes background-move {
    0% {background-position: 0% 0%;}
    25% {background-position: 0% 100%;}
    50% {background-position: 100% 100%;}
    75% {background-position: 100% 0%;}
    100% {background-position: 0% 0%;}
  }

  @keyframes wave {
      0% {height:5px;transform:translateY(0px);background:#9b59b6;}
      25% {height:40px;transform:translateY(20px);background:#3498db;}
      50% {height:5px;transform:translateY(0px);background:#9b59b6;}
      100% {height:5px;transform:translateY(0px);background:#9b59b6;}
  }
</style>