@font-face {
  font-family: 'Source Sans';
  src: url('SourceSansVariable-Roman.ttf') format("truetype-variations");
  font-weight: 1 999;
}


html, body {

  margin: 0;
  padding: 0;
  margin-top: 0;
  margin:0 auto;
  
}



canvas {
  display: block;
}


p {
  
  color : #FFF;
  font-size: 5px;
  font-family: 'Source Sans';
  text-align: center;
  font-weight: 999;
  position: absolute;
  margin:0 auto;
  cursor: pointer;
}


q {
  
  color : #FFF;
  font-size: 5px;
  font-family: 'Source Sans';
  text-align: center;
  font-weight: 999;
  margin:0 auto;
  position: absolute;
  cursor: pointer;

}


a { text-decoration: none;
  
  color : #FFF;
  font-size: 25px;
  font-family: 'Source Sans';
  justify-content: center;

}



a:hover {
  background-color: yellow;
  color : #000;
}


.noHover{
  pointer-events: none;
}



#header_content { 
    width:70%; 
    background-color:#00B2EE;
    height:120px; 
    margin:0 auto;
    text-align:center;
    justify-content: center;
  
  }




.boxed {
    /* border: 1px solid green ; */
    /* display: flex;
    justify-content: center; */
    /* position: relative;
    align-self: center;
    top:50% */
    
}



#container {
  position: relative;
  display: flex;
  justify-content: center;
 
}


#container canvas, #overlay {
  position: fixed;
  top: 40% 
}



@media only screen and (hover: none) and (pointer: coarse) {


  a { text-decoration: none;
  
    color : #FFF;
    font-size: 45px;
    font-family: 'Source Sans';
    justify-content: center;
    /* word-break: break-word; */
  
  }



  #container canvas, #overlay {
    position: fixed;
    /* left: 30%; */
    top: 30% ;
    /* left: 30%;
    right: 30%; */
    /* align-self: center; */
  }

  .noHover{
    pointer-events: none;
    visibility: hidden;
    /* background-color: rgb(240, 116, 116); */
    }


    .break1{
      position: relative;
      display: block;
      height: 45px;
      /* justify-content: center; */
      }
      
      .break2{
        position: relative;
        display: block;
        height: 45px;
        /* top: 30px; */
        
      }
      
      .break3{
        position: relative;
        display: block;
        height: 45px;
        /* top: 30px; */
        
        }
      
      .break4{
        position: relative;
        display: block;
        height: 45px;
        /* top: 30px; */
        
       }


}