Color Match

<div class="color-match">
    <div class="color-box"></div>
    <div class="color-box"></div>
    <div class="color-box"></div>
</div>

.color-match {
    display: flex;
    gap: 15px;
}

.color-box {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    animation: colorCycle 6s ease-in-out infinite;
}

.color-box:nth-child(1) {
    animation-delay: 0s;
}

.color-box:nth-child(2) {
    animation-delay: 2s;
}

.color-box:nth-child(3) {
    animation-delay: 4s;
}

.color-box:hover {
    transform: scale(1.1) rotate(5deg);
}

@keyframes colorCycle {
    0%, 100% { background: #ff6b6b; }
    33% { background: #4ecdc4; }
    66% { background: #ffe66d; }
}