@charset "utf-8";
/* CSS Document */
body { background-color: #202126;}
        video { width: 30vw; height: auto; position: fixed; top:3vw; left: 3vw; border-radius: 2vw; border: 1vw solid #38393D; /*box-shadow: 0 0 2vw #000;*/}
        #text { width: calc( 100% - 36vw ); position: fixed; top:0; right:0; color: #FFF; font-size: 3vw; padding: 3vw; box-sizing: border-box; text-align: right;}
        #canvasWrap { position: fixed; top:50%; left: 50%; transform:translate(-50%,-50%); width: 100%; display: inline; display: none;}
        canvas {  width: 100%!important; height: auto!important; position: absolute; top:50%; left: 50%; transform:translate(-50%,-50%); box-sizing: border-box; filter: blur(.15vw);}
        #canvas { position: static;}
        #play { width: 80px; height: 80px; border-radius: 50%; border: 6px solid #FFF; box-sizing: border-box; display: inline-block; cursor: pointer;}
        #canvas1 { /*background-color:#6B4A2B;*/ opacity: 1; }
        #controls { z-index: 1; position: fixed; bottom: 0; left: 50%; transform: translate(-50%,0); /*background-color: #00A040;*/ width: 100%; padding: 30px 0; text-align: center;}
       /* #controls:before { content: ""; display: block; height: 3px; background-color: #FFF; width: 100%; position: absolute; top:-3px; left: 0;}
        #controls:after { content: ""; display: block; height: 12px; background-color: #DE3A38; width: 100%; position: absolute; top:-15px; left: 0;}*/

h1 { width: 100%; text-align: center; color: rgba(255,255,255,.1); position: fixed; top: 50%; left: 0; transform: translateY(-50%); font-family: Arial, Helvetica, "sans-serif"; font-weight: normal;}
        
        #date { font-size: 3vw; position: absolute; bottom: 0; right: 0; padding: 2vw; color: #EBA021;font-family: "Orbitron", sans-serif;}
        
        #download { position:absolute; top:0; right: 0; display: none; width: 60px; height: 60px; background-image: url("../img/download.svg"); background-repeat: no-repeat; background-position: center; background-size: 24px; cursor: pointer;}
        #return { position:absolute; top:0; left: 0; display: none; width: 60px; height: 60px; background-image: url("../img/arrow.svg"); background-repeat: no-repeat; background-position: center; background-size: 24px; cursor: pointer;} 
        
        .create #play,.create video { display: none;}
        .create #download,.create #return,.create #canvasWrap { display: block;}

@media (orientation: landscape) {
            video { width: 15vw;  top:1.5vw; left: 1.5vw; border-radius: 1vw; border: .5vw solid #38393D; /*box-shadow: 0 0 2vw #000;*/}
    #canvasWrap { width: auto; height: 100%;}
        canvas {  width: auto!important; height: 100%!important; filter: blur(.075vw);}
    #date { font-size: 1.5vw; padding: 1vw; }
        }