@charset "utf-8";
/* CSS Document */

.intro #slide , .intro #conrols { opacity: 0;}

body,html { height: 100%;}
 body { background-color:rgba(29,26,26,1.00);}
.intro body { background-image: url("../img/Spinner-1s-200px.svg"); background-repeat: no-repeat; background-position: center; background-size: 40px;}
        canvas{ width: 100%;}
        #slide { width: 100%; position: fixed; top:50%; left: 50%; transform: translate(-50%,-50%); transition: opacity 1s ease 0s;}
        
        #play { cursor: pointer; width: 50px; height: 50px; background-image: url("../img/play.svg"); background-repeat: no-repeat; background-size: 30px; margin: 0 auto; background-position: center;}
        .play #play { display: none;}
        
        #close { display: none; cursor: pointer; width: 50px; height: 50px; background-image: url("../img/pause.svg"); background-repeat: no-repeat; background-size: 30px; margin: 0 auto; background-position: center;}
        .play #close { display: block;}
        
        .line body:after { content: ""; display: block; width: 100%; height: 100%; background-color: #00FC09; position: fixed; top:0; left: 0;}
        
        #num { width: 100%; height: 100%; position:fixed; top:0; left: 0; display: flex;justify-content: center;align-items: center;color: #00FC09; font-size: 10vw; font-family:"Times New Roman", Times, "serif"; display: none; }
        .line2 #num { display: flex;}
        
        #conrols { width: 100%; padding: 2vw; box-sizing: border-box; background-color: rgba(0,0,0,.6); position: fixed; left: 0; bottom: 0;transition: opacity 1s ease 0s;}
        
        @media (orientation: landscape){
           #slide { width: 100vh; height:100vh; position: fixed; top:50%; left: 50%; transform: translate(-50%,-50%);} 
            #conrols { padding: 1vw;}
        }