#notice
  svg(viewbox="0 0 512 512.001", xmlns="http://www.w3.org/2000/svg")
    path(
      d="m187.886719 7.566406h-170.5625c-5.300781 0-9.601563 4.296875-9.601563 9.601563v349.027343c0 5.304688 4.296875 9.601563 9.601563 9.601563h170.5625c5.300781 0 9.601562-4.296875 9.601562-9.601563v-349.027343c0-5.304688-4.300781-9.601563-9.601562-9.601563zm0 0",
      fill="#8ac2ff"
    )
    path(
      d="m136.492188 324.402344v170.5625c0 5.300781 4.296874 9.601562 9.601562 9.601562h349.027344c5.300781 0 9.601562-4.300781 9.601562-9.601562v-170.5625c0-5.300782-4.296875-9.601563-9.601562-9.601563h-349.027344c-5.304688 0-9.601562 4.300781-9.601562 9.601563zm0 0",
      fill="#8ac2ff"
    )
    g(fill="#54a0ff")
      path(
        d="m37.726562 366.195312v-349.027343c0-5.304688 4.296876-9.601563 9.597657-9.601563h-30c-5.304688 0-9.601563 4.296875-9.601563 9.601563v349.027343c0 5.304688 4.296875 9.601563 9.601563 9.601563h30c-5.300781 0-9.597657-4.296875-9.597657-9.601563zm0 0"
      )
      path(
        d="m166.492188 494.964844v-170.5625c0-5.300782 4.296874-9.601563 9.601562-9.601563h-30.003906c-5.300782 0-9.597656 4.296875-9.597656 9.601563v170.5625c0 5.300781 4.296874 9.601562 9.597656 9.601562h30.003906c-5.300781 0-9.601562-4.300781-9.601562-9.601562zm0 0"
      )
      path(
        d="m146.09375 314.800781c-5.304688 0-9.601562 4.300781-9.601562 9.601563v51.394531h51.394531c5.300781 0 9.601562-4.296875 9.601562-9.601563v-51.394531zm0 0"
      )
    path(
      d="m166.492188 324.402344c0-5.300782 4.296874-9.601563 9.601562-9.601563h-30.003906c-5.300782 0-9.597656 4.296875-9.597656 9.601563v51.394531h30zm0 0",
      fill="#338def"
    )
    path(
      d="m463.453125 245.71875h-52.003906c-2.519531 0-3.777344 3.042969-2 4.824219l26.003906 26c1.101563 1.105469 2.890625 1.105469 3.996094 0l26-26c1.78125-1.78125.519531-4.824219-1.996094-4.824219zm0 0",
      fill="#e4eaf8"
    )
    path(
      d="m261.347656 46.351562-26 26c-1.105468 1.105469-1.105468 2.894532 0 4l26 26c1.78125 1.78125 4.824219.519532 4.824219-2v-52c0-2.519531-3.042969-3.777343-4.824219-2zm0 0",
      fill="#e4eaf8"
    )
    path(
      d="m431.683594 250.542969c-1.777344-1.78125-.519532-4.824219 2-4.824219h-22.234375c-2.519531 0-3.777344 3.042969-2 4.824219l26.003906 26c1.101563 1.105469 2.890625 1.105469 3.996094 0l9.117187-9.117188zm0 0",
      fill="#c7d2e5"
    )
    path(
      d="m257.582031 76.351562c-1.105469-1.105468-1.105469-2.894531 0-4l8.589844-8.589843v-15.410157c0-2.519531-3.046875-3.78125-4.824219-2l-26 26c-1.105468 1.105469-1.105468 2.894532 0 4l26 26c1.78125 1.78125 4.824219.519532 4.824219-2v-15.410156zm0 0",
      fill="#c7d2e5"
    )
    path(
      d="m404.410156 255.78125 26.003906 26c4.027344 4.027344 10.574219 4.027344 14.601563 0l26.003906-26c6.488281-6.492188 1.886719-17.628906-7.304687-17.628906h-18.640625c-3.5-92.816406-78.332031-167.679688-171.136719-171.222656v-18.644532c0-9.175781-11.128906-13.800781-17.628906-7.304687l-26 26.003906c-4.027344 4.023437-4.027344 10.578125 0 14.605469l26 25.996094c6.484375 6.488281 17.628906 1.910156 17.628906-7.300782v-18.34375c84.53125 3.527344 152.644531 71.667969 156.125 156.210938h-18.347656c-9.191406 0-13.792969 11.140625-7.304688 17.628906zm-145.476562-166.78125-14.714844-14.714844 14.714844-14.714844zm193.496094 164.152344-14.714844 14.71875-14.714844-14.71875zm0 0"
    )
    path(
      d="m494.898438 307.234375h-290.132813v-98.117187c0-4.144532-3.359375-7.5-7.5-7.5-4.144531 0-7.5 3.355468-7.5 7.5v98.117187h-43.894531c-9.429688 0-17.101563 7.671875-17.101563 17.101563v43.894531h-111.667969c-1.15625 0-2.101562-.941407-2.101562-2.097657v-349.03125c0-1.160156.945312-2.101562 2.101562-2.101562h170.5625c1.15625 0 2.101563.941406 2.101563 2.101562v157.015626c0 4.140624 3.355469 7.5 7.5 7.5s7.5-3.359376 7.5-7.5v-157.015626c0-9.429687-7.671875-17.101562-17.101563-17.101562h-170.5625c-9.429687 0-17.101562 7.671875-17.101562 17.101562v349.03125c0 9.429688 7.671875 17.101563 17.101562 17.101563h111.667969v111.664063c0 9.429687 7.671875 17.101562 17.101563 17.101562h155.195312c4.140625 0 7.5-3.355469 7.5-7.5s-3.359375-7.5-7.5-7.5h-155.195312c-1.160156 0-2.101563-.941406-2.101563-2.101562v-111.667969h43.894531c9.429688 0 17.101563-7.667969 17.101563-17.101563v-43.894531h290.132813c1.15625 0 2.101562.941406 2.101562 2.101563v170.5625c0 1.15625-.941406 2.101562-2.101562 2.101562h-158.832032c-4.144531 0-7.5 3.355469-7.5 7.5s3.355469 7.5 7.5 7.5h158.832032c9.429687 0 17.101562-7.671875 17.101562-17.101562v-170.5625c0-9.429688-7.671875-17.101563-17.101562-17.101563zm-305.132813 58.894531c0 1.160156-.945313 2.101563-2.101563 2.101563h-43.894531v-43.894531c0-1.15625.941407-2.101563 2.101563-2.101563h43.894531zm0 0"
    )

  p Please rotate the device.
#start
  mark Start

footer
  | Icon made by
  a(href="http://www.freepik.com/", target="_blank", title="Freepik") Freepik
  |
  | from
  a(href="https://www.flaticon.com/", target="_blank", title="Flaticon") www.flaticon.com

#notice {
  text-align: center;
}

a {
  color: #000;
}

footer {
  position: absolute;
  bottom: 10px;
  opacity: 0.4;
}

/*
  Template CSS
*/

* {
  box-sizing: border-box;
}

body {
  padding: 0;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  color: #252631;

  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 100vh;
  background-color: #efefef;
}

svg {
  width: 54px;
  margin-bottom: 20px;
}

const landscapeMQ = window.matchMedia("(orientation: landscape)");

const noticeMessage = document.getElementById("notice");
const start = document.getElementById("start");

function handleTabletChange(e) {
  // Check if the media query is true
  if (e.matches) {
    noticeMessage.style.display = "none";
    start.style.display = "block";
  } else {
    noticeMessage.style.display = "block";
    start.style.display = "none";
  }
}

// Register event listener
landscapeMQ.addListener(handleTabletChange);

// Initial check
handleTabletChange(landscapeMQ);