body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f2cdcd;
    margin: 0;
}

.container {
    position: relative;
    width: 1000px; /* Adjust the size of the container */
    height: 800px; /* Adjust the height of the container */
    background-color: transparent; /* Optional: Add a background for visibility */
    overflow: hidden; /* Prevent items from going outside the container */
}

/* Coffee Image */
#parfait {
    position: absolute; /* Ensure the coffee image stays fixed within the container */
    top: 123px; /* Position the coffee image vertically */
    left: 50%; /* Center the coffee image horizontally */
    transform: translateX(-50%); /* Center alignment */
    width: 500px; /* Set a fixed width for the coffee image */
    height: auto; /* Preserve the aspect ratio */
    display: block;
}

/* Text Input Over Coffee */
#parfaitTextOverlay {
    position: absolute;
    top: 45%; /* Adjust the vertical position */
    left: 52%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Center horizontally and vertically */
    width: 200px; /* Fixed width for the writing area */
    height: 279px; /* Fixed height for the writing area */
    font-size: 16px; /* Text size */
    line-height: 34px; /* Line spacing */
    font-family: 'Futura', sans-serif;
    text-align: center;
    color: #333; /* Text color */
    resize: none; /* Prevent resizing */
    background: rgba(255, 255, 255, 0.0); /* Fully transparent background */
    padding: 10px;
    clip-path: none; /* No shape applied for now */
    z-index: 2; /* Ensure it stays above the coffee image */
    box-shadow: none; /* Ensure no shadow appears */
    caret-color: #333; /* Ensure cursor is visible */
    outline: none; /* Remove the outline when focused */
}

/* Placeholder Text */
#parfaitTextOverlay[data-placeholder]:empty::before {
    content: attr(data-placeholder); /* Use the placeholder text from the attribute */
    color: #80634c; /* Placeholder text color */
    pointer-events: none; /* Prevent interaction with placeholder text */
    display: block;
    opacity: 50%;
    font-style: italic; /* Optional: Italicize the placeholder */
}