@charset "utf-8";
/* CSS Document */
body { margin: 0;background: rgb(40, 44, 52)!important; height: 100svh; }
		button { position:fixed;z-index: 999; bottom: 10%; left: 50%; transform: translateX(-50%); pointer;}
		canvas { width: 100%!important; height: auto!important; top:0; left: 0; }
		.create #result-wrapper canvas { display: block!important;}
		.create #pixel { display: block!important;}
		.create .Analyze { display: none;}
		.Initialize { display: none;}
		.create .Initialize { display: inline;}
		#result-wrapper {  top:0; left: 0; }
		#pixel {z-index: 999; top:0!important;}
		.create #defaultCanvas0 { display: none;}
		p { top:auto!important; width: 100%; position:static!important; padding: 3vw; font-size: 2vw; color: #5DF427; box-sizing: border-box; display: none;}
		#wrap { width: 100%!important; position: fixed!important; top:0; left: 0;}
		
		.Analyze { width: 80px; height: 80px; appearance:none; background: none; border: 0; border-radius: 50%; border: 6px solid #FFF; box-sizing: border-box; display: block; cursor: pointer; background-color: #fff; text-indent: -9999px;}
.Analyze:before { content: ""; display: block; width: 70px; height: 70px; border: 2px solid #000; position: absolute; top:50%; left: 50%; transform: translate(-50%,-50%); box-sizing: border-box; border-radius: 50%;}
		
		.Initialize { width: 80px; height: 80px; appearance:none; background: none; border: 0; border-radius: 50%; box-sizing: border-box; cursor: pointer; background-color: rgba(255,255,255,.1); text-indent: -9999px; background-image: url("../img/replay.svg"); background-position: center; background-size: 40px; background-repeat: no-repeat;}
		
		.Download {  appearance:none; background: none; border: none; background-color: transparent; color: #5DF427; display: none; cursor: pointer;left: calc( 50%  + 100px ); width: 60px; height: 60px; border-radius: 50%; background-color: rgba(255,255,255,.1); text-indent: -9999px; background-image: url("../img/download.svg"); background-position: center; background-size: 30px; background-repeat: no-repeat;bottom: calc( 10% + 10px );}
		.create .Download { display: block;}
		
		@media (orientation: landscape) {
			#wrap {top:50%; transform: translate(-50%,-50%); left: 50%; height: 100%!important;}
			canvas,#pixel,#result-wrapper { top:50%!important; left: 50%!important; transform: translate(-50%,-50%);}
		}