.first-aid {
            display: inline-block;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            text-align: center;
            vertical-align: top;
            margin: 20px;
            font-family: Arial, sans-serif;
            font-weight: bold;
            cursor: pointer;
        }

        .first-aid span {
            display: block;
            margin-top: 40px;
        }

        .cut {
            background-color: #FF4500;
            color: #8B0000;
        }

        .burn {
            background-color: #FFD700;
            color: #FFA500;
        }

        .poison {
            background-color: #ADD8E6;
            color: #1E90FF;
        }

        .something-else {
            background-color: #DC143C;
            color: #8B0000;
        }

        .first-aid-content {
    display: none;
    margin: auto;
    padding: 10px;
    border: 1px solid #ccc;
    width: 80%;  /* Set width to 80% of the screen */
    max-height: 80vh;  /* Set max-height to 80% of the viewport height */
    overflow-y: auto;  /* Add scroll if content overflows */
    text-align: center;
    position: fixed;  /* Fixed position */
    top: 50%;  /* Centered vertically */
    left: 50%;  /* Centered horizontally */
    transform: translate(-50%, -50%);  /* Necessary for centering */
    z-index: 9999;  /* High z-index so it appears above everything else */
        background-color: rgba(255, 255, 255, 0.9);  /* Semi-transparent white background */

}


        .close-first-aid-content {
    background-color: transparent;
    border: 2px solid #000;  /* Adding a border */
    font-size: 20px;
    cursor: pointer;
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;  /* To ensure it stays on top */
}
.first-aid-icon {
  font-size: 5em;
    opacity: 0.5;

}