@charset "utf-8";
/* CSS Document */
body { margin: 0; }
        canvas { display: block; position: fixed; }
		#stop { display: none;}
		.stop #stop { display: block;}
		.stop #play { display: none;}

button { -webkit-appearance:none;appearance:none; background: none; border:none; width: 100px; height: 100px; text-indent: -9999px; background-repeat: no-repeat; background-position: center; background-size: 50px; z-index: 1;}
#play { background-image: url("../img/play.svg");}
#stop { background-image: url("../img/pause.svg");}
h1 { margin: 0; position: fixed; top:50%; left: 50%; font-size: 20vw; color: #FFF; transform: translate(-50%,-50%); transition: opacity 1s ease 0s;font-family: "Yuji Boku", serif; z-index: 9; font-weight: 400; }
.stop h1 { opacity: 0;}

#load { width: 100%; height: 100svh; position: fixed; top:0; left: 0; background-color: rgba(0,0,0,.9); z-index: 9; display: none; background-image: url("../img/Spinner-1s-200px.svg"); background-repeat: no-repeat; background-position: center; background-size: 10vw;}
.intro #load { display: block;}
#overlay { width: 100%; height: 100svh; position: fixed; top:0; left: 0; background-color: rgba(0,0,0,0); z-index: 1;}