@media only screen and (max-width: 720px) {
  canvas {
    width: 100%;
  }

  .mainContainer {
    width: 100%;
  }
  .startScreenBg {
    width: 100%;
  }
  #gameInfos {
    width: 100%;
  }
}

@media only screen and (max-height: 550px) {
  h1 {
    display: none;
  }
}

@media only screen and (max-height: 480px) {
  canvas {
    height: 100vh;
    width: 100vw;
    border-radius: unset;
  }
  .mainContainer {
    height: 100vh;
    width: 100vw;
  }

  .startScreenBg {
    height: 100vh;
    width: 100vw;
    border-radius: unset;
  }

  #gameInfos {
    height: 100vh;
    width: 100vw;
    border-radius: unset;
  }

  .gameInfoMenu {
    margin: 16px 0;
  }

  .gametips {
    gap: 4px;
  }

  .menu {
    gap: 2px;
    top: 64px;
  }
}