/* Rounded Corners CSS - Flexible Corner Targeting (from your original CSS) */
/* Top Left Corner Rounding */
.rounded-tl-sm { border-top-left-radius: 0.125rem; }
.rounded-tl { border-top-left-radius: 0.25rem; }
.rounded-tl-md { border-top-left-radius: 0.375rem; }
.rounded-tl-lg { border-top-left-radius: 0.5rem; }
.rounded-tl-xl { border-top-left-radius: 0.75rem; }
.rounded-tl-full { border-top-left-radius: 9999px; }

/* Top Right Corner Rounding */
.rounded-tr-sm { border-top-right-radius: 0.125rem; }
.rounded-tr { border-top-right-radius: 0.25rem; }
.rounded-tr-md { border-top-right-radius: 0.375rem; }
.rounded-tr-lg { border-top-right-radius: 0.5rem; }
.rounded-tr-xl { border-top-right-radius: 0.75rem; }
.rounded-tr-full { border-top-right-radius: 9999px; }

/* Bottom Left Corner Rounding */
.rounded-bl-sm { border-bottom-left-radius: 0.125rem; }
.rounded-bl { border-bottom-left-radius: 0.25rem; }
.rounded-bl-md { border-bottom-left-radius: 0.375rem; }
.rounded-bl-lg { border-bottom-left-radius: 0.5rem; }
.rounded-bl-xl { border-bottom-left-radius: 0.75rem; }
.rounded-bl-full { border-bottom-left-radius: 9999px; }

/* Bottom Right Corner Rounding */
.rounded-br-sm { border-bottom-right-radius: 0.125rem; }
.rounded-br { border-bottom-right-radius: 0.25rem; }
.rounded-br-md { border-bottom-right-radius: 0.375rem; }
.rounded-br-lg { border-bottom-right-radius: 0.5rem; }
.rounded-br-xl { border-bottom-right-radius: 0.75rem; }
.rounded-br-full { border-bottom-right-radius: 9999px; }

/* General Body Styling - Adjusted */
body {
    padding-top: 114px; /* Adjust this value to match your banner's height */
    background-color: black;
    color: white;
    font-family: sans-serif;
    /* Removed display: flex, justify-content, align-items, height: 100vh from here */
}

/* Header Styling (from your original CSS) */
header {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1000; /* Higher z-index to ensure it's above other content */
    background-color: black;
    border-bottom: 1px solid #333;
    padding: 1rem 0;
}

/* Profile Image Styling - Adjusted */
#large-image {
    max-width: 300px; /* Adjusted to match HTML width */
    height: auto; /* Ensures aspect ratio is maintained */
    border-radius: 50%; /* Makes the image circular */
    object-fit: cover; /* Ensures the image covers the circular area properly */
    display: block; /* Ensures it behaves like a block element for margins */
    margin-bottom: 1rem; /* Add some space below the image */
    /* Removed margin: 0 auto ... as parent flex handles centering */
}

/* Profile Text Styling - Adjusted (removed explicit text-align: center) */
#position-text-1,
#position-text-2,
#position-text-3 {
    color: white;
    font-size: 1.2rem;
    font-weight: bold;
    /* Removed text-align: center as parent flex container handles centering */
    margin-bottom: 0.25rem; /* Small margin between text lines */
}

#position-text-2, #position-text-3 {
    color: gray;
}

/* Styles for the Spotify section */
#spotify-data-container {
    padding: 3rem;
    background-color: #1a1a1a;
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    width: 300px; /* Fixed width to match profile image */
    margin-top: 50px;
}

#spotify-data-container h2 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: #1DB954; /* Spotify green */
    text-align: center;
}

#spotify-data-container p {
    font-size: 1rem;
    color: #ccc;
    line-height: 1.5;
}


/* Styles for the fetched Spotify content (inside spotify-content) */
#spotify-content .flex {
    align-items: center;
    gap: 1rem; /* Space between image and text */
}

#spotify-content img {
    width: 64px; /* Smaller image size */
    height: 64px;
    border-radius: 0.25rem; /* Slightly less rounded */
}

#spotify-content .text-xl {
    font-size: 1.125rem; /* Smaller track name */
}

#spotify-content .text-lg {
    font-size: 0.9rem; /* Smaller artist name */
}

#spotify-content .text-sm {
    font-size: 0.75rem; /* Smaller status text */
}

/* For larger screens, add some left margin */
@media (min-width: 768px) {
    .content-wrapper {
        padding-left: 120px; /* Instead of fixed positioning */
        padding-right: 2rem;
    }
}

/* For mobile screens, keep normal padding */
@media (max-width: 767px) {
    .content-wrapper {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}