:root {
    --bg-color: #fff0f6; /* Soft pink */
    --accent-color: #ff85c0;
    --card-color: #ffffff;
    --text-color: #4b4b4b;
}

body {
    background-color: var(--bg-color);
    font-family: 'Comic Sans MS', 'Chalkboard SE', sans-serif; /* Friendly fonts */
    display: flex;
    justify-content: center;
    padding: 50px;
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 20px;
    max-width: 800px;
}

.sound-btn {
    background: var(--card-color);
    border: 3px solid var(--accent-color);
    border-radius: 20px;
    padding: 20px;
    cursor: pointer;
    transition: transform 0.1s, box-shadow 0.1s;
    box-shadow: 0 6px 0 var(--accent-color);
    text-align: center;
}

/* The "Bouncy" Anime click effect */
.sound-btn:active {
    transform: translateY(4px);
    box-shadow: 0 2px 0 var(--accent-color);
}

.sound-btn:hover {
    background-color: #fff9fb;
}