* {
    box-sizing: border-box;
  }

  html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
  }
  .main-canvas {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1280px;
    height: 720px;
    margin-top: -360px; /* Half the height */
    margin-left: -640px; /* Half the width */
  }
  .background-canvas {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: -webkit-linear-gradient(#222, #000);
    background: linear-gradient(#222, #000);
    z-index: -1;
  }
  p {
    padding: 0;
  color: transparent;
  font: bolder 200px arial;     
    position: fixed;
    width: 1080px;
    line-height: 190px;
  top: 50%;
  left: 50%;
  margin: -320px 0 0 -400px;
  -webkit-background-clip: text, border;
  background-clip: text, border;
  -webkit-text-stroke: 4px rgba(0, 204, 205, 0.8);
  }
  .lose {
    -webkit-text-stroke: 4px rgba(206, 49, 44, 0.8);
    margin: -200px 0 0 -450px;
  }
  .game_over {
    margin: 30px 0 0 -540px;
  }
  .subtext {
      position: absolute;
      top: 50%;
      left: 50%;
      color: white;
      margin: 65px 0 0 60px;
      font: bolder 40px arial;  
      color: #ce312d;
      opacity: 0.8;
  }
  .start {
    position: absolute;
    top: 50%;
    left: 50%;
    color: transparent;
    margin: 160px 0 0 -300px;
    font: 60px verdana; 
    -webkit-text-stroke: 2px rgba(255, 188, 0, 0.9);
  }
  .enter {
    position: absolute;
    top: 50%;
    left: 50%;
    color: transparent;
    margin: 70px 0 0 -180px;
    font: 60px verdana; 
    -webkit-text-stroke: 2px rgba(206, 49, 44, 0.8);
  }

  #start_screen {
    background-color: #000;
  }