@charset "utf-8";
/* CSS Document */
body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100svh;
            margin: 0;
            background-color: #000; background-image: url("../img/bg.jpg"); background-size: cover; background-position: center;
        }
		button { position:fixed; top:50%; left: 50%; transform: translate(-50%,-50%); z-index: 2; appearance:none; border:none; background: none; background-color: transparent; border-radius: 0;font-family: Arial, sans-serif;}
		#playButton { display: none; width: 20vw; height: 20vw; background-image: url("../img/play.svg"); background-repeat: no-repeat; background-position: center; background-size: 17vw; text-indent: -9999px;}
#playButton.pause {background-image: url("../img/pause.svg");}
		
		#debugInfo { width: 100%; position: fixed; top:50%; left: 0; transform: translateY(-50%); padding:2em; color: #FFF; display: none; opacity: 0;}
		canvas { width: 100%; height: 100%; position: fixed; top:0; left: 0; object-fit: cover; object-position: center;}

#enterButton { position: static; transform: translate(0%,0%); margin: 0 auto; border: 2px solid #FFF; color: #FFF; font-size: 4vw; font-weight: bold; border-radius: .3em; padding: .5em 1em;}
#start { width: 100%; position: fixed; top:50%; left: 0; transform: translateY(-50%); text-align: center; z-index: 2;}
#start h1 { color: #FFF; font-size: 16vw;font-family: "SUSE", sans-serif;}

@media (orientation: landscape) {
	#start h1 { font-size: 8vw;}
	#enterButton {font-size: 2vw;}
}