body {
    margin: 0;
    padding: 0;
    background: linear-gradient(120deg, blue, rgba(255, 0, 128, 0.747),  rgb(233, 233, 97), rgb(22, 240, 22), cyan);
    background-size: 400% 400%;
    animation: gradientMove 15s ease infinite;
    font-family: Arial, sans-serif;
}

@keyframes gradientMove {
    0% {background-position: 0% 50%;}
    50% {background-position: 100% 50%;}
    100% {background-position: 0% 50%;}
}

.rainbow-clip {
    max-width: 300px;
    margin: 40px auto;
    padding: 20px;
    border-radius: 20px;
    background: linear-gradient(to bottom right, rgba(255, 0, 149, 0.534), #f5f52d , rgb(22, 240, 22));
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

ul#playlist li {
    padding: 10px;
    margin: 5px 0;
    cursor: pointer;
    border-bottom: 1px solid #000;
}

ul#playlist li:hover {
    background-color: #30d145;
    font-weight: bold;
}

.animated-emotion {
    animation: bubbleAnim 10s ease-in-out infinite;
}

@keyframes bubbleAnim {
    0% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.1); opacity: 1; }
    100% { transform: scale(1); opacity: 0.5; }
}

.share-btn {
    background-color: #65d325;
    color: rgb(255, 255, 255)55, 255, 255;
    padding: 10px 20px;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    font-size: 16px;
}

.share-btn:hover {
    background-color: #5ae424bd;
}
.animated-title {
    animation: pulse 2s infinite;
    text-align: center;
}
h1{
    color: red;
}
.logo{
    width: 200px; 
    display: flex;
   
}