.green-circle {
    width: 100px; /* Circle's width */
    height: 100px; /* Circle's height */
    background-color: green; /* Circle's color */
    border-radius: 50%; /* Makes it a circle */
}
.half-circle {
    width: 100px; /* Adjust width */
    height: 50px; /* Half of the width for a semi-circle */
    background-color: green; /* Green color */
    border-top-left-radius: 100px; /* Full radius for top-left */
    border-top-right-radius: 100px; /* Full radius for top-right */
    border-bottom-left-radius: 0; /* No radius for bottom-left */
    border-bottom-right-radius: 0; /* No radius for bottom-right */
}

.triangle {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid yellow;
}
.grey-square {
    width: 100px; /* Adjust size as needed */
    height: 100px; /* Same as width for a square */
    background-color: grey; /* Set the color to grey */
}

.tooltip {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

    .tooltip .tooltiptext {
        visibility: hidden;
        width: 120px;
        background-color: black;
        color: #fff;
        text-align: center;
        border-radius: 5px;
        padding: 5px;
        position: absolute;
        z-index: 1;
        bottom: 125%; /* Position above the div */
        left: 50%;
        transform: translateX(-50%);
        opacity: 0;
        transition: opacity 0.3s;
    }

    .tooltip:hover .tooltiptext {
        visibility: visible;
        opacity: 1;
    }