@charset "utf-8";
/* CSS Document */
body,html { height: 100%; margin: 0;}
		#sketch-holder { width: 100%; height: 100%; position: fixed; top:0; left: 0; }
		canvas { object-fit: cover; width: 100%!important; height: 100%!important; object-position: center;}
		button { position: fixed!important; bottom: 10%!important; left: 50%!important; transform: translateX(-50%); appearance:none; text-indent: -9999px; background: none; background-color: rgba(0,0,0,.6); width: 16vw!important; height: 16vw!important; border-radius: 50%!important; border:none;
background-image: url("../img/play.svg"); background-repeat: no-repeat; background-size: 8vw; background-position: center;}
button.pause { background-image: url("../img/pause.svg");}
h1 { margin: 0; position: fixed; top:50%; left: 50%; transform: translate(-50%,-50%); font-size: 10vw; width: 100%; text-align: center; transition: all 1s ease 0s;font-family: "Faculty Glyphic", sans-serif;
  font-weight: 400;
  font-style: normal;}
.play h1 { opacity: 0;}

@media (orientation: landscape) {
  h1 {font-size: 5vw;}
	button { width: 8vw!important; height: 8vw!important; background-size: 4vw;}
}