.animation-container {
    position: relative;
    width: 80%;
    height: 70px; /* Increased height for better spacing */
    background-color: #2f2f2f; /* Changed to grey */
    margin: 20px auto;
    border-radius: 10px;
    border: 1px solid #212121; /* Subtle border color */
    box-shadow: 0 5px 15px rgba(0,0,0,0.15); /* Enhanced shadow for depth */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10%; /* Adjust as needed to create a safe zone for animation */
    box-sizing: border-box; /* Include padding in the element's total width and height */
}

.circle {
    position: absolute;
    width: 30px; /* Increased size */
    height: 30px; /* Increased size */
    border-radius: 50%;
    background-color: #e68b5a; /* Changed to orange */
    box-shadow: 0 2px 6px rgba(0,0,0,0.25); /* Enhanced shadow */
    transition: transform 0.2s ease-in-out; /* Smooth transition */
}

.curve-type {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%) translateY(-100%); /* Centered above the container */
    font-family: 'Arial', sans-serif;
    font-size: 19px; /* Adjusted for better readability */
    color: #e68b5a;
    background-color: #212121;
    padding: 0px 20px;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    z-index: 10;
    margin-top: 22px; /* Increased spacing */
}

@media (max-width: 768px) {
    .curve-type {
        font-size: 12px; /* Smaller text for smaller screens */
    }
    .circle {
        width: 25px; /* Slightly smaller circle on smaller screens */
        height: 25px;
    }
}

.popup {
    display: none;
    position: fixed; /* Changed from absolute to fixed for modal-like positioning */
    left: 50%;
    top: 50%;
    transform: translate(0%, 0%); /* Centers the popup */
    color: #e68b5a;
    padding: 10px; /* Increased padding */
    background-color: #2f2f2f;
    border: 2px solid #2f2f2f;
    border-radius: 0px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    font-size: 20px; /* Larger font size for readability */
    z-index: 1000; /* Ensures popup is above other content */
}

.popup pre {
    max-width: 100%;
    overflow: auto;
    background-color: #2f2f2f;
    border: 1px solid #2f2f2f;
    padding: 10px;
/*    box-shadow: inset 0 0 10px #eee;*/
    border-radius: 4px;
}