@charset "utf-8";
/* CSS Document */
body,html { height: 100svh;overflow: hidden!important;}
html { }
		body { margin: 0; background-color: #212121;}
		canvas { width: 100%; height: 100svh; border: none;}
		#play { position:fixed; top:50%; left: 50%; transform: translate(-50%,-50%) scale(0); background-image: url("../img/play.svg"); background-repeat: no-repeat; background-position: center; background-size: contain; width: 100px; height: 100px; cursor: pointer; transition: all .4s ease 0s; }
		.intro #play {  transform: translate(-50%,-50%) scale(1);}
		
		#pause { position:fixed; top:50%; left: 50%; transform: translate(-50%,-50%) scale(1); background-image: url("../img/pause.svg"); background-repeat: no-repeat; background-position: center; background-size: contain; width: 100px; height: 100px; cursor: pointer; transition: all .4s ease 0s; }
		.intro #pause {  transform: translate(-50%,-50%) scale(0);}
		
		#video { width: 100%; height: auto; transition: all .4s ease 0s;}
		.intro #video { width: 100%; height: 100svh; object-fit: cover; object-position: center;}
		#wrap { width: 100%; transition: all .4s ease 0s; line-height: 0; position: relative; }
		#audio { width: 100%; position: fixed; bottom: 0; left: 0; padding: 15px; box-sizing: border-box; transition: all .4s ease 0s;}
		.intro #audio { opacity: 0; transform: translateY(100%); }
		audio { width: 100%;}
.intro #wrap2 { display: none;}

#wrap:after { content: ""; display: block; width: 100%; height: 100%; position: absolute; top:0; left: 0; background-color: #00FF00; opacity: 0;}
#wrap.int:after { opacity: 1;}
		
		@media (orientation: landscape) {
			#wrap { width: 70%; height: 100svh; position: fixed; top:0; left: 0;}
			.intro #wrap { width: 100%;}
			#wrap video { width: 100%; height: 100%; object-fit: cover; object-position: center;}
			#wrap2 {width: 30%; height: 100svh; position: fixed; top:0; right: 0;}
			#audio { position: absolute; }
}