/* Warning message for both solutions */
.warning-message {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgb(120, 0, 0);
    color: #ffffff;
    padding: 20px;
    border-radius: 5px;
    z-index: 9999;
  }
  
  /**************************************************/
  /* Solution 2: apply this class to any object to make unselectable */
  /* css Solution - would require another function to 
  display warning with event listener on this class*/
  .unselectable {
      user-select: none;
      -moz-user-select: none;
      -webkit-user-select: none;
      -ms-user-select: none;
  }