/* Responsive Design */
@media (max-width: 768px) {
    .main-content {
        flex-direction: column;
        text-align: center;
    }

    .buttons {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .album-title {
        font-size: 1.5rem;
    }

    .artist-name {
        font-size: 1rem;
    }

    .listen-now, .share {
        font-size: 0.9rem;
        padding: 8px 16px;
    }
}
@media (max-width: 830px) {
    .main-content {
        gap: 3rem;
    }
    .main-content .album-image img {
        width: 150px;
    }
}
@media (max-width: 1280px) and (max-height: 800px) {
    .main-content{
        bottom: 18rem;
    }
}
@media (max-width: 1024px) and (max-height: 600px) {
    .main-content{
        bottom: 7rem;
        gap: 6rem;
    }
}
@media (max-width: 412px) and (max-height: 914px) {
    .main-content{
       bottom: 10rem;

    }
    .avatars{
        gap: 20px;
        justify-content: center;
    }
}
@media (max-width: 853px) and (max-height: 1280px) {
    .main-content{
        bottom: 50rem;
        left: 3rem;
    }
}
@media (max-width: 344px) and (max-height: 882px) {
    .main-content{
        bottom: 23rem;
        left: 1rem;
    }
}
@media (max-width: 540px) and (max-height: 720px) {
    .main-content{
        bottom: 12rem;
        left: 4rem;
    }
    .avatars{
        gap: 20px;
        justify-content: center;
    }
}
@media (max-width: 414px) and (max-height: 896px) {
    .main-content{
        bottom: 24rem;
        left: 4rem;
    }
    .avatars{
        gap: 20px;
        justify-content: center;
    }
}   
@media (max-width: 430px) and (max-height: 932px) {
    .main-content{
        bottom: 25rem;
        left: 4rem;
    }
    .avatars{
        gap: 20px;
        justify-content: center;
    }
}   
@media (max-width: 360px) and (max-height: 740px) {
    .main-content{
        bottom: 15rem;
        left: 2rem;
    }
    .avatars{
        gap: 20px;
        justify-content: center;
    }
}