@media (min-width: 320px) and (max-width: 346px) {
  html {
      font-size: 10px
  }
}

@media (min-width: 347px) and (max-width: 372px) {
  html {
      font-size: 11px
  }
}

@media (min-width: 373px) and (max-width: 398px) {
  html {
      font-size: 12px
  }
}

@media (min-width: 399px) and (max-width: 424px) {
  html {
      font-size: 13px
  }
}

@media (min-width: 425px) and (max-width: 450px) {
  html {
      font-size: 14px
  }
}

@media (min-width: 451px) and (max-width: 476px) {
  html {
      font-size: 15px
  }
}

@media (min-width: 477px) and (max-width: 502px) {
  html {
      font-size: 16px
  }
}

@media (min-width: 503px) and (max-width: 528px) {
  html {
      font-size: 17px
  }
}

@media (min-width: 529px) and (max-width: 554px) {
  html {
      font-size: 18px
  }
}

@media (min-width: 555px) and (max-width: 580px) {
  html {
      font-size: 19px
  }
}

@media (min-width: 581px) and (max-width: 606px) {
  html {
      font-size: 20px
  }
}

@media (min-width: 607px) and (max-width: 622px) {
  html {
      font-size: 21px
  }
}
.Message_ui {
    background-color: #333333;
    color: #fff;
    font-size: 1.5rem;
    padding: 0.4rem 0.4rem;
    border-radius: 0.5rem;
    position: fixed;
    top: 30%;
    left: 50%;
    transform: translate(-50%);
    text-wrap: nowrap;

}