/* Rainbow & Black Theme */
.profile-container {
	background: linear-gradient(90deg, red, orange, yellow, green, blue, indigo, violet) !important;
    color: white !important;
}

.profile-header {
    background-color: black !important;
    color: white !important;
    padding: 10px !important;
    border-bottom: 3px solid black !important;
}

.profile-header a {
    color: white !important;
    font-weight: bold !important;
}

.profile-header a:hover {
    color: black !important;
    background-color: white !important;
    padding: 5px !important;
    border-radius: 5px !important;
}

.profile-song {
    background-color: black !important;
    color: white !important;
    border: 2px solid white !important;
}

.follow-button, .unfollow-button {
    background-color: white !important;
    color: black !important;
    border: 1px solid gray !important;
}

.follow-button:hover, .unfollow-button:hover {
    background-color: gray !important;
    color: white !important;
}

.group-channel {
    background: #444 !important;
    color: black !important;
}

.bubbly-button {
/*    background: linear-gradient(90deg, red, orange, yellow, green, blue, indigo, violet) !important; */
	background: linear-gradient(90deg, violet, indigo, blue, green, yellow, orange, red) !important;
    color: white !important;
    border: none !important;
    padding: 12px 24px !important;
    font-size: 1rem !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    border-radius: 30px !important;
    box-shadow: 0px 4px 10px rgba(255, 255, 255, 0.3) !important;
    cursor: pointer !important;
    position: relative !important;
    overflow: hidden !important;
    transition: all 0.3s ease-in-out !important;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5) !important; /* Improves readability */
}

/* Hover Effect */
.bubbly-button:hover {
    transform: scale(1.1) !important; /* Increased pop effect */
    box-shadow: 0px 10px 20px rgba(255, 255, 255, 0.5) !important;
    filter: brightness(1.2) !important;
}

/* Active (Click) Effect */
.bubbly-button:active {
    transform: scale(0.9) !important;
    box-shadow: 0px 2px 8px rgba(255, 255, 255, 0.2) !important;
}

/* Optional: Make the button glow with a rainbow ring */
.bubbly-button::before {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 120% !important;
    height: 120% !important;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 70%) !important;
    border-radius: 50% !important;
    transform: translate(-50%, -50%) scale(0) !important;
    transition: transform 0.5s ease-out, opacity 0.5s ease-out !important;
    opacity: 0 !important;
}

.bubbly-button:hover::before {
    transform: translate(-50%, -50%) scale(1.5) !important;
    opacity: 1 !important;
}