body{
    background-image: url(Picx/BG.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

h1{
    color: gold;
}

.songx{
    display: grid;
    align-items: center;
    justify-content: space-between;
    text-align: center;

    border-radius: 15px;
    border-style: outset;
    width: 320px;
    background-color: gray;
    padding: 10px;

    transition: transform 0.4s ease;
}

img{
    height: auto;
    width: 200px;
    border-radius: 100px;
    margin-left: 50px;
}

.songx:hover{
    transform: scale(1.05);
}

header{
    text-align: center;
    color: white;
}


audio::-webkit-media-controls-panel {
  background-color: gray;
  border-width: 0;
}

/* Responsive Styles for Mobile and Tablet Devices */
@media (max-width: 768px) {
    .songx {
        /* Centers the card perfectly and makes its width fluid on narrow screens */
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        max-width: 320px; 
    }

    img {
        /* Removes the hardcoded left margin that would push the image off-center on mobile */
        margin-left: 0;
        margin-bottom: 15px;
        
        /* Scales the image down slightly for better visual balance on compact screens */
        width: 150px; 
        display: inline-block;
    }

    audio {
        /* Ensures the native audio element doesn't stretch past the edge of the card */
        width: 100%; 
    }

    /* Softens the scaling zoom effect to prevent blurry text rendering on mobile touch */
    .songx:hover {
        transform: scale(1.02);
    }
}