/* ------------ Adaptive ------- */
@media (max-width: 900px) {
  .modal__content {
    width: 70vw;
  }
}

@media (max-width: 700px) {
  #my-canvas {
    width: calc(100vw - 200px);
    height: calc(100vw - 200px);
  }

  .modal__content {
    width: 90vw;
  }
}

@media (max-width: 600px) {
  header {
    font-size: .8rem;
  }

  .main {
    flex-direction: column;
  }

  .controls {
    flex-direction: row;
  }

}

@media (max-width: 500px) {
  #my-canvas {
    width: calc(100vw - 50px);
    height: calc(100vw - 50px);
  }
}

@media (max-width: 400px) {
  /*#my-canvas {
    width: calc(100vw - 50px);
    height: calc(100vw - 50px);
  }*/

  .controls {
    flex-direction: column-reverse;
    gap: 10px;
  }

  .info,
  .play {
    flex-direction: row;
  }
}

/* ------------- Height -- */
@media (max-height: 600px) {
  #my-canvas {
    height: calc(100vh - 100px);
    width: calc(100vh - 100px);
  }
}

@media (max-height: 400px) {
  .header {
    padding: 0;
  }

  .controls {
    flex-direction: row;
    gap: 30px;
  }

}