@media only screen and (max-width: 1000px) {
  .text-user {
    max-width: 500px;
  }
  .text-blobby {
    max-width: 500px;
  }
}



@media only screen and (max-width: 850px) {
  .text-user {
    max-width: 400px;
  }
  .text-blobby {
    max-width: 400px;
  }

  .input-form {
    right: 50vw;
    transform: translateX(50%);
  }

  .chat-wrapper {
    pointer-events: auto;
  }

  #span1{
    animation: marquee 400s linear infinite;
  }

  #span2{
    animation: marquee2 400s linear infinite;
  }
}

@media only screen and (max-width: 700px) {
  .text-user {
    max-width: 300px;
    font-size: 16px;
  }
  .text-blobby {
    max-width: 300px;
    font-size: 16px;
  }

  .input-field {
    font-size: 16px;
  }

  .input-button {
    font-size: 16px;
    right: -65px;
  }

  .explain {
    font-size: 16px;
    left: -39px;
  }

  .twitch-video {
    left: -141px;
  }
}

@media only screen and (max-width: 600px) {
  .input-field {
    width: 55vw;
  }
  .input-form {
    /* right: 50vw;
    transform: translateX(50%); */
  }
}


@media only screen and (max-width: 550px) {
  .text-user {
    max-width: 250px;
  }
  .text-blobby {
    max-width: 250px;
  }
}

@media only screen and (max-width: 500px) {
  .input-field {
    /* width: 300px; */
  }
  .input-form {
    /* right: 17vw; */
  }
}

@media only screen and (max-width: 400px) {
  .text-user {
    font-size: 14px;
    max-width: 200px;
  }
  .text-blobby {
    font-size: 14px;
    max-width: 200px;
  }

  .input-field {
    font-size: 14px;
  }

  .input-button {
    font-size: 14px;
    box-shadow: 0px 0px 4px 1px rgb(255 255 255 / 50%);
    right: -57px;
  }

  .explain {
    font-size: 14px;
    box-shadow: 0px 0px 4px 1px rgb(255 255 255 / 50%);
    left: -32px;
  }

  .twitch-video {
    left: -95px;
  }
}