@keyframes unicornJump {
    0% { bottom: 4rem; }
    50% { bottom: 12rem; }
    100% { bottom: 4rem; }
}

@keyframes rainbowFloat {
    0% { transform: translateY(0) rotate(0deg); }
    100% { transform: translateY(-100vh) rotate(360deg); }
}

@keyframes obstacleMove {
    from { left: 100%; }
    to { left: -100px; }
}

#unicorn {
    background-image: url('http://static.photos/pink/200x200/123');
    transition: all 0.3s ease;
    z-index: 10;
}

.rainbow {
    position: absolute;
    width: 100px;
    height: 100px;
    background-image: url('http://static.photos/gradient/200x200');
    border-radius: 50%;
    animation: rainbowFloat 5s linear forwards;
    background-size: cover;
    z-index: 5;
}

.obstacle {
    position: absolute;
    width: 60px;
    height: 60px;
    background-image: url('http://static.photos/black/200x200');
    border-radius: 10px;
    animation: obstacleMove 3s linear infinite;
    z-index: 8;
}

.jumping {
    animation: unicornJump 0.8s ease;
}

.flying {
    transform: translateY(-50px);
    transition: transform 0.3s ease;
}

.rainbow-collected {
    transform: scale(1.5);
    opacity: 0;
    transition: all 0.5s ease;
}