html, body {


  width: 100%;


  height: 100%;


  margin: 0;


  padding: 0px;


  overflow: hidden;


}





body {


  display: flex;


  justify-content: center;


  align-items: center;


  background-color: #1b0d03;


  color: #FFF;


}





#canvas {


  position: fixed;


  inset: 0;


  width: 100%;


  height: 100%;


  z-index: 0;


  border: none;


  pointer-events: none;


}





.vline


{


    position:fixed;


    top: 0;


    left: 50%;


    height: 50vh;


    width: 2px;


    background-color: #FFF;


    z-index: 0;


    opacity: 0.5;


    visibility: hidden;


}


.gsapWrapper {


  position: relative;


  z-index: 2;


  visibility: hidden;





  #wBody {





    position: relative;


    aspect-ratio: 1/1;





    @media (orientation: landscape) {


      width: 65vh;


    }


    @media (orientation: portrait) {


      height: 65vw;


    }








    #watch {





      position: absolute;


      top: 50%;


      left: 50%;


      transform: translate(-50%, -50%);


      width: 100%;


      height: 100%;


      aspect-ratio: 1/1;


      overflow: visible;





      svg {


        overflow: visible;


        width: 100%;


        height: 100%;


      }





    }





  }





}





/* On a telephone the clock takes the whole window; the password card


   opens over it. The desk keeps the size it has always had. */


@media (max-width: 720px) {


  body #wBody {


    width: auto;


    height: min(92vw, 92vh);


  }


}