/* Filling the viewport and keeping the background black */
    html, body {
      margin: 0;
      height: 100%;
      background: black;
      overflow: hidden;
    }

    /* Two frames filling the screen */
    .view {
      position: fixed;
      inset: 0;
      width: 100vw;
      height: 100vh;
      border: 0;
      display: block;
      background: black;           
      transition: opacity .25s ease;
    }

    /* Landscape and hide portrait mode */
    #desktop-view { opacity: 1; pointer-events: auto; }
    #mobile-view  { opacity: 0; pointer-events: none; }

    /* Show portrait and hide landscape */
    @media (orientation: portrait) {
      #desktop-view { opacity: 0; pointer-events: none; }
      #mobile-view  { opacity: 1; pointer-events: auto; }
    }