.helpPopup {
    display: none;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid #ccc;
    background: white;
    padding: 20px;
    z-index: 9999;

    max-width: 80vw;              /* max 80% of viewport width */
    max-height: 80vh;             /* max 80% of viewport height */

    width: 600px;                  /* adjusts to content until hitting max */
    height: auto;                 /* same for height */

    overflow: auto;               /* enables scrollbars if content is too big */

    box-shadow: 0 0 15px rgba(0,0,0,0.2);
    border-radius: 10px; /* Adds rounded corners */
    font-family: monospace; /* Uses a monospaced font */
    font-size: 14px; /* Sets a readable font size */
}