/* Make items potato-shaped */
.item, .item-container {
    border-radius: 50%; /* Rounded shape for potato */
    background-color: #e0b97b; /* Potato brown */
    padding: 15px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease, transform 0.3s ease;
}

/* Modify icons to appear more like potatoes */
.item img, .item-container img {
    border-radius: 50%;
    background-color: #f1e0a6; /* Light potato color */
    padding: 5px;
}

/* Set background color to a potato-like tone */
body {
    background-color: #f1e0a6; /* Potato color */
}

/* Add potato-like animation when hovering over an item */
.item:hover, .item-container:hover {
    background-color: #b09e7b; /* Slightly darker potato color */
    transform: scale(1.05);
}

// Add a potato-like hover effect for items (just visual, no sound)
document.querySelectorAll('.item, .item-container').forEach(item => {
    item.addEventListener('mouseover', () => {
        item.style.transform = 'scale(1.05)';
        item.style.backgroundColor = '#b09e7b'; /* Slightly darker potato color */
    });

    item.addEventListener('mouseout', () => {
        item.style.transform = 'scale(1)';
        item.style.backgroundColor = '#e0b97b'; /* Potato brown */
    });
});