@media only screen and (max-width: 1350px) {
  body {
    font-size: 80%;
  }
}

@media only screen and (max-width: 900px) {
  .between {
    left: 75%;
  }
}

@media only screen and (max-width: 740px) {
  h1 {
    font-size: 200%;
  }

  .number {
    font-size: 300%;
    padding: 30px 40px;
  }

  .between {
    left: 70%;
  }

  .again {
    font-size: 100%;
    padding: 15px;
  }

  .input-number {
    width: 200px;
    height: 90px;
    font-size: 250%;
  }
}

@media only screen and (max-width: 610px) {
  .score,
  .highscore,
  .message {
    font-size: 100%;
  }

  .input-number {
    width: 180px;
    height: 90px;
    font-size: 220%;
    margin-left: 7px;
  }

  .check {
    font-size: 100%;
    padding: 15px;
  }

  .between {
    left: 65%;
  }

  .message {
    white-space: nowrap;
    margin-left: 7px;
  }
}

@media only screen and (max-width: 400px) {
  .between {
    left: 50%;
  }

  .score,
  .highscore,
  .message,
  .check {
    font-size: 90%;
  }

  h1 {
    font-size: 175%;
    margin: 0 5px;
  }

  .message {
    white-space: normal;
    margin-left: 9px;
  }

  .input-number {
    width: 160px;
    height: 80px;
    font-size: 200%;
    margin-left: 9px;
  }

  .number {
    font-size: 280%;
    padding: 25px 35px;
  }
}
