#orientation-hint {
   display: none;
   position: fixed;
   left: 50%;
   transform: translateX(-50%);
   background-color: rgba(0, 0, 0, 0.9);
   color: white;
   padding: 10px;
   border-radius: 5px;
   font-size: 18px;
   z-index: 110;
}

/* ------------------------------------------------  For all Tablets   ------------------------------------------------ */
@media only screen and (max-device-width: 1024px) and (max-device-height: 1370px) and (orientation: portrait) {
   .panel-wrapper {
      display: none;
   }

   .info-screen {
      display: none;
   }
}

@media only screen and (max-device-height: 1024px) and (max-device-width: 1370px) and (orientation: landscape) {
   #hud {
      height: 500px;
      width: 720px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-direction: column;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
   }

   .info-screen {
      display: none;
   }
}

@media only screen and (max-device-height: 600px) and (min-device-width: 1024px) and (orientation: landscape) {
   #hud {
      width: 80%;
   }

   header,
   footer,
   .info-screen {
      display: none;
   }
}

/* ---------------------------------------------------  Surface Duo  --------------------------------------------------- */
@media only screen and (max-height: 540px) and (max-width: 720px) and (orientation: landscape) {

   header,
   footer,
   .info-screen {
      display: none;
   }
}

/* --------------------------------------------------  Mobile Devices  -------------------------------------------------- */
@media only screen and (max-width: 780px) and (orientation: portrait) {
   canvas {
      width: 100%;
      border: 10px ridge brown;
      border-radius: 20px;
      position: relative;
   }

   .panel-wrapper {
      display: none;
   }

   header,
   footer,
   .info-screen {
      display: none;
   }
}

@media only screen and (max-height: 480px) and (orientation: landscape) {
   canvas {
      height: calc(100dvh - 5px);
      border: 10px ridge brown;
      border-radius: 20px;
   }

   #start-image {
      height: 80%;
   }

   #hud {
      height: 100%;
      width: 80%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-direction: column;
   }

   header,
   footer,
   .info-screen {
      display: none;
   }
}

@media only screen and (max-height: 375px) and (orientation: landscape) {
   .panel {
      width: 90%;
   }
}

@media only screen and (max-height: 360px) and (orientation: landscape) {
   #hud {
      width: 70%;
   }

   .panel {
      width: 90%;
   }
}

@media only screen and (max-height: 344px) and (orientation: landscape) {
   #hud {
      width: 60%;
   }

   .panel {
      width: 100%;
   }
}