html,
body {
  margin: 0;
  padding: 0;
}

body {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  /* background: radial-gradient(#efefef, #cccccc); */
  cursor: pointer;
  background-color:black;
  font-family: 'Courier New', monospace;
  font-size:1em;
  line-height: 2;
}

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

/* @mixin flexbox() { 
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

@mixin flex($values) {
  -webkit-box-flex: $values;
  -moz-box-flex:  $values;
  -webkit-flex:  $values;
  -ms-flex:  $values;
  flex:  $values;
}

@mixin order($val) {
  -webkit-box-ordinal-group: $val;  
  -moz-box-ordinal-group: $val;     
  -ms-flex-order: $val;     
  -webkit-order: $val;  
  order: $val;
}

.wrapper {
  @include flexbox();
}

.item {
  @include flex(1 200px);
  @include order(2);
}*/

canvas {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
}

/* #border {
  position:absolute;
  width:650px;
  height:650px;
  border:1px solid white;
  left: 50%;
top: 50%;
transform: translate(-50%, -50%);
} */

#startButton {
  display: flex;

  flex-direction: column;
  position:absolute;
  top:50%;
  left:50%;
  height: 25%;
  width:80%;
  max-height:300px;
  transform:translate(-50%,-50%);
  /* background-color: rgb(255,255,255); */
  z-index:600;
  /* border: 1px solid red;  */
}

#audioOn {
  display: flex;

  flex-direction: column;
  position:absolute;
  top:50%;
  left:50%;
  height: 50%;
  width: 50%;
  max-height:500px;
  transform:translate(-50%,-50%);
  /* background-color: rgb(255,255,255); */
  z-index:600;
}

#tapper{
  position:absolute;
  width:100%;
  height:100%;
  z-index:400;

}
#blocker{
  position:absolute;
  width:100%;
  height:100%;
  z-index:500;  display:block;
}

 #logoHolder{
  /* position:absolute; */
  width:100%;
  /* height:auto; */
  height: 80%;
  /* top:0%;
  left:50%; */
  margin:auto;
} 
.loaderText{
  /* position:absolute; */
width:100%;
height:10%;
 /* transform:translate(-42%,42%);
left:42%;  */
color:rgb(255,255,255);
text-align:center;
margin:auto;

}

.startText{
  /* position:absolute; */
width:100%;
height:40%;
 /* transform:translate(-42%,42%);
left:42%;  */
color:rgb(255,255,255);
text-align:center;
margin:auto;

}
#logoImg{
  position:absolute;
  width:100%;
  max-height:400px;

  height:100%;
  top:0%;
  left:0%;
  object-fit:contain
}
#startImg{
  position:absolute;
  width:100%;
  max-height:100px;

  height:100%;
  top:0%;

  left:0%;
  object-fit:contain
}

#startHolder{
  height:60%;
  width:100%;
margin:auto;
} 

#cover{
  position:absolute;
  top:0px;
  left:0px;
  width:100%;
  height:100%;
  background-color: black;
  z-index:700;  
}

.continueText{
  font-size:0.8em;
  line-height: 1.1;
  max-height: 100px;
}