@charset "utf-8";
/* CSS Document */
body { margin: 0; }
        canvas { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; position: fixed; top:0; left: 0; }
        #info { position: fixed; top: 10px; left: 10px; color: white; font-family: monospace; z-index: 3; }
		#audios { position: fixed; bottom: 0; left: 0; opacity: 0;}
		#play { -webkit-appearance:none;appearance:none; background: none; background-color: transparent; border:none; width: 10vw; height: 10vw; background-image: url("../img/play.svg"); background-repeat:no-repeat; background-size: contain; background-position: center; cursor: pointer;}
		#start { width: 100%;height: 100svh; position: fixed; top:0; left: 0; display: flex;justify-content: center;align-items: center; z-index: 2; background-color:rgba(178,0,2,0.84); display: none;flex-direction: column; transition: all 1s ease 0s;}
.play #start {background-color: rgba(0,0,0,0);}
		.intro #start { display: flex;}
		#close { width: 60px; height: 60px; position: fixed; top:0; right: 0; cursor: pointer; background-image: url("../img/close.svg"); background-position: center; background-repeat: no-repeat; z-index: 2;}
		.intro #close { display: none;}

h1 { font-family: "Bona Nova SC", serif; font-weight: 400; color: #FFF; margin-top:0; font-size: 10vw; text-align: center;}
h1 span { display: block; font-size: 50%; font-weight: normal;}

@media (orientation: landscape) {
h1 { font-size: 5vw;}	
	#play { width: 5vw; height: 5vw;}
}

button {
            padding: 10px 20px;
            font-size: 16px;
            margin: 10px; position: fixed; bottom: 40px; left: 50%; transform: translateX(-50%) translateY(100%); z-index: 2;
	width: 80px; height: 80px; appearance:none; background: none; background-color: transparent; border: none; text-indent: -9999px; background-position: center; background-repeat: no-repeat; background-size: 70px; transition: all .4s ease 0s; opacity: 0;
        }
button:disabled { display: none;}
.complete button {transform: translateX(-50%) translateY(0%); opacity: 1; }

#playButton { background-image: url("../img/play.svg");}
#stopButton { background-image: url("../img/pause.svg");}