@charset "utf-8";
/* CSS Document */
video { width: 100%; height: 100%; position: fixed; top:0; left: 0; object-fit: cover; object-position: center;
        transition: all 1s ease 0s;}
        .play video { opacity: 0; }
        #playButton { position: fixed; bottom: 1em; left: 50%; transform: translateX(-50%); cursor: pointer; width: 60px; height: 60px; background-image: url("../img/play.svg"); background-repeat: no-repeat;background-size: 30px; background-position: center; z-index: 1; background-color: rgba(255,255,255,.7); border-radius: 50%;}
        .play #playButton { display: none;}
        
        #stop { position: fixed; top:0; left: 0%; cursor: pointer; width: 60px; height: 60px; background-image: url("../img/stop.svg"); background-repeat: no-repeat;background-size: 30px; background-position: center; display: none; z-index: 1;}
        .play #stop { display: block;} 
        
        #wrap { width: 60vw; height: 60vw; position: fixed; top:50%; left: 50%; transform: translate(-50%,-50%);}
        #canvas { object-fit: cover; object-position: center; width: 100%; height: 100%;}
        
       #focus { width:40vw; height:40vw; position:fixed; top:50%; left:50%; margin:-20vw 0 0 -20vw; background-image:url(../img/focus.svg); background-repeat:no-repeat; background-size:contain; background-position:center; opacity:1; }
  .play #focus { opacity:0; }
        
        #progress { width: 100%; height: 5px; background-color: #eee; position: fixed; bottom: 0; left: 0;}
        #progressBar { width: 0%; height: 100%; background-color: #FA263E; }

h1 { color: #FFF; position: fixed; top:0; left: 0; font-size: 8vw; margin: 0;font-family: 'Kanit', sans-serif;padding: 3vw; font-weight: 500;}

#load { width: 100%; height: 100svh; position: fixed; top:0; left: 0; background-image: url("../img/Spinner-1s-200px.svg"); background-repeat: no-repeat; background-position: center; background-size: 50px; opacity: 0;}
.load #load { opacity: 1;}
        
         @media (orientation: landscape) {
          
     #focus { width:20vw; height:20vw; margin:-10vw 0 0 -10vw;  }
             #wrap { width: 30vw; height: 30vw;}
        }