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


html, body {
  max-width: 100vw;
  max-height: 100%;
  background-color: #F00;
  font-family: 'ApfelGrotezk-Regular';
}


body {
  position: 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: #F00; /* PNF */  
/*  color: #FFFF01; /* Pigeon Plaza */  
/*  color: #86FC06; /* Secret Garden */  
/*    color: #04D9FF; /* Sonic */  
}

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

}

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

/* selected link */
a:active {
  text-decoration: none;
/*  color: #FF3F99; /* lobster */
  color: #F00; /* 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: 30%;
  /* min-height: 120%; */
  position: relative;
  z-index: 10;
  margin-left: 35%;
  /* border: solid 2px blue; */
}

div p{
  font-size: 25%;
}

div a{
  font-size: 120%;
}



.launch{
    margin-bottom: 15vw
}

#myVideo {
  position: fixed;
  right: 0;
  bottom: 0;
  z-index: -10;
  min-width: 100%;
  min-height: 100%;
}

canvas{
  z-index: 100;
  /* height: 100%/; */
}

#back{
  color: #FFFFFF;
  position: fixed;
  /* font-size: 5vw;     */
  bottom: 7%;
  left: 1%;
  right: 1%;  
  text-align: center;
  z-index: 200;
}




/* 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); }
}

/* @media (max-width: 600px){
  canvas{width: 100%;
  height: auto;
}
div p,a{
  font-size: 20vw;
}
}

@media (max-width: 800px){
  canvas{width: 100%;
  height: auto;
  margin-left: 0%;}

  div p,a{
    font-size: 20vw;
  }
} */


@media (max-width: 1200px){
  canvas{width: 60%;
  height: auto;
margin-left: 20%;}
div p,a{
  font-size: 2.5vw;
}
}

@media (max-width: 600px){
  canvas{width: 100%;
  height: 100%;
margin-left: 0%;}
div p,a{
  font-size: 4.3vw;
}
}