*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;

    
}

html, body {
  overscroll-behavior: none; /* Prevents pull-to-refresh and scroll chaining */
  touch-action: none;        /* Stops touch gestures from scrolling */
  height: 100%;
  margin: 0;
  overflow: hidden;
}

#canvas{
    border: 5px solid black;
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%,-60%);
    max-width: 100%;
    max-height: 100%;
}
#player{
    display: none;
}

.displayNone{
    height: 0;
    width: 0;
    display: none;
}





 #startButton {
      background-color: #6eafe0;
      color: #5563DE;
      border: none;
      padding: 14px 32px;
      border-radius: 50px;
      font-size: 18px;
      font-weight: 600;
        position: relative;

      cursor: pointer;
          transform: translate(-50%,-50%);
   top: 50%;
       /* transform: translate(-50%,-50%); */

    left: 50%;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    }

    /* Hover effect */
    #startButton:hover {
      background-color: #5563DE;
      color: #fff;
      /* transform: translateY(-3px); */
      box-shadow: 0 12px 25px rgba(0, 0, 0, 0.2);
    }

    /* Active (pressed) effect */
    #startButton:active {
      box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
    }