@charset "utf-8";
/* CSS Document */
body { margin: 0; height: 100svh; }
        canvas { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; position: fixed; top:0; left: 0; transition: all 1s ease 0s; }
.intro canvas { opacity: 0;}
        #info { position: fixed; top: 10px; left: 10px; color: #000; 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(0,0,0,.8); display: none;flex-direction: column;}
		.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: "Reggae One", system-ui;
  font-weight: 400;
  font-style: normal; color: #000; margin-top:0; font-size: 20vw; padding: 3vw; position: fixed; top:0; left: 0; z-index: 3; line-height: 1;}

figure { width: 40vw; height: auto; position: fixed; bottom: 5vw; right: 5vw; z-index: 2; margin: 0;}
figure img { width: 100%; height: auto;}

#playButton {  position: fixed; top:50%; left: 50%; z-index: 2; margin: 0; transform: translate(-50%,-50%); -webkit-appearance:none;appearance:none; width: 100px; height: 100px; border: none; background: none; background-image: url("../img/play.svg"); background-repeat: no-repeat; background-size: contain; background-position: center;}
.intro #playButton { display: none;}
.pause #playButton {background-image: url("../img/pause.svg");}

.intro body { background-image: url("../img/Spinner-1s-200px.svg"); background-repeat: no-repeat; background-position: center; background-size: 60px;}

@media (orientation: landscape) {
h1 { font-size: 10vw;}	
	#play { width: 5vw; height: 5vw;}
	figure { width: 20vw; bottom: 2.5vw; right: 2.5vw; }
}