/* Reset some basic elements */
body, a, img, p {
    margin: 0 0 0 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    overflow: hidden; /* Prevent scrollbars on the body */
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh; /* Use min-height for better adaptability */
    background-color: #121212; /* Dark gray background */
    padding-top: 20px;
    padding-bottom: 40px;
    background-image: url('alastor_banner_landscape.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Background image for portrait orientation */
@media only screen and (orientation: portrait) {
    body {
        background-image: url('alastor_banner_portrait.png');
    }
}

/* Background image for landscape orientation */
@media only screen and (orientation: landscape) {
    body {
        background-image: url('alastor_banner_landscape.png');
    }
}

/* Styling for the container with scrollbar */
.container {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 96vh;
    overflow: hidden; /* Hide scrollbars by default */
    text-align: center;
    padding-right: 12px; /* Ensure there's space for the scrollbar */
    box-sizing: content-box; /* Ensure padding doesn't affect the container's width */
}

/* For WebKit browsers (e.g., Chrome, Safari) */
.container::-webkit-scrollbar {
    width: 12px; /* Width of the scrollbar */
}

.container::-webkit-scrollbar-track {
    background: #000000; /* Background of the scrollbar track (black) */
    border-radius: 10px; /* Rounded corners for the scrollbar track */
}

.container::-webkit-scrollbar-thumb {
    background: #1db954; /* Color of the scrollbar thumb (Spotify green) */
    border-radius: 10px; /* Rounded corners for the scrollbar thumb */
}

/* For Firefox */
.container {
    scrollbar-width: thin; /* Make scrollbar thin */
    scrollbar-color: #1db954 #000000; /* Scrollbar thumb color and track color */
}

/* Ensure container scrolls properly */
.container.scrollable {
    overflow-y: scroll; /* Show vertical scrollbar when content overflows */
}

.profile-img {
    width: 150px; /* Profile image size */
    height: 150px; /* Profile image size */
    border-radius: 50%; /* Circular profile image */
    object-fit: cover; /* Ensure image covers area without distortion */
    transition: transform 0.3s, box-shadow 0.3s;
}

.profile-img:hover {
    transform: scale(1.1); /* Zoom in on hover */
}

.profile-img.sparkle {
    animation: sparkle 0.5s forwards; /* Apply sparkle animation on click */
}

@keyframes sparkle {
    0% {
        box-shadow: 0 0 5px #ffffff;
    }
    50% {
        box-shadow: 0 0 15px #ffffff;
    }
    100% {
        box-shadow: 0 0 5px #ffffff;
    }
}

.profile-heading {
    color: white; /* Text color for profile heading */
    font-size: 24px; /* Font size for profile heading */
    margin-top: 15px; /* Space between image and heading */
}

.card-container {
    display: flex;
    flex-direction: column;
    gap: 20px; /* Increased gap for better spacing between cards */
    width: 100%; /* Full width of the container */
}

/* Default card styles */
.card {
    display: flex;
    align-items: center; /* Align items vertically center */
    background-color: #1db954; /* Spotify green */
    color: white;
    border: none;
    text-decoration: none;
    transition: background-color 0.3s, transform 0.2s;
    width: 400px; /* Fixed width for desktop */
    height: 80px; /* Thinner height for the card */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Optional: add shadow for better card visibility */
}

/* Responsive card styles for mobile */
@media only screen and (max-width: 768px) {
    .card {
        width: 90vw; /* Responsive width for mobile */
    }
}

.card:hover {
    background-color: #000000; /* Slightly lighter Spotify green */
}

.card:active {
    background-color: #1aa34a; /* Even darker green for active state */
    transform: scale(0.98);
}

.card-img {
    width: 50%; /* Image takes up 50% of the card width */
    height: 100%; /* Full height of the card */
    object-fit: cover; /* Ensure image covers area without distortion */
    margin-right: 0; /* No margin between image and text */
    position: relative;
}

.card-img::after {
    content: "";
    position: absolute;
    width: 50%;
    top: 0;
    right: 0;
    height: 100%;
    background: linear-gradient(to left, transparent, #1db954); /* Fade effect */
}

.card-content {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding-left: 15px;
    padding-top: 0px;
    margin-top: 0px;
    top: 0px;
    flex-wrap: nowrap;
}

.card-heading {
    font-size: 20px; /* Increased font size */
    margin-bottom: 5px;
    margin-top: 0px;
    padding-top: 0px;
}

.card-subtext {
    font-size: 16px; /* Increased font size */
}