.avatar-container {
    text-align: center;
    position: relative;
    width: 512px;
    height: 346px;
    background-color: #f3f3f3;
    display: inline-block;
    border: 2px solid #3498db;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    overflow: hidden;
}

.avatar {
    width: 100%;
    height: 100%;
}

#avatar-image {
    width: 100%;
    height: 100%;
}

.draggable {
    position: absolute;
    text-align: center;
    font-size: 14px;
    color: #fff;
    padding: 10px 20px;
    cursor: move;
    border-radius: 5px;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.2);
}

#table-layout {
    display: table;
    width: 100%;
}

.column {
    display: table-cell;
    vertical-align: top;
    padding: 20px;
}

#left-column {
    width: 70%;
}

#avatar-options {
    margin-top: 20px; /* Add space between the avatar and options */
}

@media (max-width: 768px) {
    .avatar-container {
        width: 100%; /* Make it full width on smaller screens */
        height: auto; /* Adjust height based on content */
    }
    
    .avatar {
        max-width: 100%; /* Ensure the avatar image fits the container */
        height: auto; /* Allow the height to adjust based on the aspect ratio */
    }

    .draggable {
        position: relative; /* Change position to relative */
        font-size: 14px;
        color: #fff;
        padding: 10px 20px;
        cursor: move;
        border-radius: 5px;
        box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.2);
    }
}