@font-face {
  font-family: 'ApfelGrotezk-Regular';
  src: url('ApfelGrotezk-Regular.woff');
    font-weight: normal;
    font-style: normal;  
}


html, body {
  height: 100%;
  /* overflow: hidden; */
  font-family: 'ApfelGrotezk-Regular';
}


body {
  display: relative;
  justify-content: center;
  align-items: center;
  margin: 0;
  z-index: 22;  
  color: white;
  background-color: black;

}

.container {
  position: relative;
}
p {
    line-height: 5vw;
}
 /* unvisited link */
a:link {
  text-decoration: none;
  color: #FF3F99; /* lobster */
/*  color: #FF8C1F; /* PNF */  
/*  color: #FFFF01; /* Pigeon Plaza */  
/*  color: #86FC06; /* Secret Garden */  
/*    color: #04D9FF; /* Sonic */  
}

/* visited link */
a:visited {
  text-decoration: none;
  color: #FF3F99; /* lobster */
/*  color: #FF8C1F; /* PNF */  
/*  color: #FFFF01; /* Pigeon Plaza */  
/*  color: #86FC06; /* Secret Garden */  
/*    color: #04D9FF; /* Sonic */  

}

/* mouse over link */
a:hover {
  text-decoration: none;
  color: #FF3F99; /* lobster */
/*  color: #FF8C1F; /* PNF */  
/*  color: #FFFF01; /* Pigeon Plaza */  
/*  color: #86FC06; /* Secret Garden */  
/*    color: #04D9FF; /* Sonic */  
}

/* selected link */
a:active {
  text-decoration: none;
  color: #FF3F99; /* lobster */
/*  color: #FF8C1F; /* PNF */  
/*  color: #FFFF01; /* Pigeon Plaza */  
/*  color: #86FC06; /* Secret Garden */  
/*    color: #04D9FF; /* Sonic */  
} 


.title {
  color: #FFFFFF;
  position: fixed;
  font-size: 5vw; 
  top: 2%;
  left: 1%;
  right: 1%;  
  text-align: center;

}

.touch {
  display: none;
  color: #FFFFFF;
  position: fixed;
  font-size: 3vw; 
  bottom: 20%;
  left: 2%;
  right: 2%;  
  text-align: center;

}

.name {
  color: #FFFFFF;
  position: fixed;
  font-size: 5vw;    
  bottom: 10%;
  left: 1%;
  right: 1%;  
  text-align: center;

}


canvas {
  /* overflow: hidden; */
  width: 100%;
  height: 100%;

}

.launch{
    margin-bottom: 15vw
}

/* responsive scaling, because pinball tables are tall */
@media (min-height: 0px) {
  .container { transform: scale(1); }
}
@media (min-height: 400px) {
  .container { transform: scale(1); }
}
@media (min-height: 600px) {
  .container { transform: scale(1); }
}
@media (min-height: 800px) {
  .container { transform: scale(1); }
}