/* General Styles */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #ffffff; /* White background */
    color: #000000; /* Black foreground */
}

a.link {
    color: #ff4d4d; /* Red accent for links */
    text-decoration: none;
    font-weight: bold;
}

a.link:hover {
    color: #ff9999; /* Light pink hover effect */
    text-decoration: underline;
}

/* Header Styling */
header.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #000000; /* Black background */
    color: #ffffff; /* White text */
    padding: 1.5rem; /* Increased padding for spacing */
    border-bottom: 4px solid #ff4d4d; /* Bold red border for separation */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Add subtle shadow for depth */
}

header .logo {
    display: flex;
    align-items: center;
    gap: 1rem;
}

header .logo img {
    width: 150px; /* Set a consistent width */
    height: 150px; /* Set a consistent height */
    margin: 0; /* Remove any default margins */
    align-self: flex-start; /* Align the image to the top of the text block */
}

header .logo div {
    display: flex;
    flex-direction: column; /* Stack the title and subtitle */
    justify-content: center; /* Center text vertically with the image */
    margin: 0; /* Ensure no extra space around the text block */
}

header .logo div h1 {
    margin: 0;
    font-size: 2rem; /* Keep the title prominent */
}

header .logo div .subtitle {
    margin-top: 0.25rem;
    font-size: 1rem; /* Slightly smaller than the title */
    color: #ff9999; /* Light pink for accent */
    line-height: 1.4; /* Improve readability */
}

header .logo div .subtitle em {
    font-style: italic; /* Highlight the album title */
    color: #ffffff; /* White text for emphasis */
}

header .info {
    text-align: right;
}

/* Layout for Top Ad */
.top-section {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 2rem;
}

.left-content {
    flex: 2;
}

.ad-top {
    flex: 1;
    max-width: 300px;
    text-align: center;
    border: 1px solid #ccc;
    padding: 1rem;
    background-color: #f8f8f8;
    border-radius: 5px;
    display: none;
}

/* Main Content Layout */
.container {
    padding: 2rem;
}

.search, .tracks, .lyrics {
    margin-bottom: 2rem;
}

/* Form Elements */
label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: bold;
}

input, select, button {
    padding: 0.5rem;
    font-size: 1rem;
    margin-right: 0.5rem;
    border: 1px solid #000000; /* Black border */
    border-radius: 5px;
}

input:focus, select:focus {
    outline: 2px solid #ff4d4d; /* Red focus */
}

button {
    background-color: #ff4d4d; /* Red background for buttons */
    color: #ffffff; /* White text */
    border: none;
    cursor: pointer;
    border-radius: 5px;
}

button:hover {
    background-color: #ff9999; /* Light pink hover */
}

/* Lyrics and Stats Layout */
.lyrics-and-stats {
    display: flex;
    gap: 2rem; /* Space between lyrics and stats */
    margin-top: 2rem;
}

.lyrics {
    flex: 3; /* Lyrics take up 3/4 of the space */
    border-radius: 5px;
    min-width: 600px; /* Minimum width for desktop */
}

.lyric-word {
    text-decoration: none; /* Remove underline */
    color: inherit; /* Use the same color as regular text */
    font-weight: normal; /* Ensure text weight remains the same */
}

.lyric-word:hover {
    text-decoration: underline; /* Add underline on hover */
    color: #ff4d4d; /* Red color on hover */
    font-weight: bold; /* Bold text on hover */
}

#lyricsContent {
    background-color: #ffdada; /* Light pink background */
    border: 1px solid #000000; /* Black border */
    padding: 1rem;
    border-radius: 0.5rem;
    white-space: pre-wrap;
    font-size: 1.2rem; /* Increased text size */
    line-height: 1.8; /* Improved line spacing */
    font-family: 'Courier New', Courier, monospace, sans-serif; /* Optional: Use a more elegant font for lyrics */
    color: #333333; /* Slightly darker text for better contrast */
}

/* Stats Section Styling */
.statistics {
    flex: 2;
    display: flex;
    gap: 1.5rem; /* Space between Track Stats and All Tracks Stats */
}

.stats-column {
    flex: 1;
    background-color: #f8f8f8; /* Light gray background */
    color: #000000; /* Black text */
    padding: 1rem;
    border-radius: 5px;
    border: 1px solid #000000;
    min-width: 300px; /* Set a minimum width for the stats sections */
}

.stats-column h3 {
    margin-top: 0;
    font-size: 1.25rem;
    text-align: center;
    border-bottom: 2px solid #000000;
    padding-bottom: 0.5rem;
}

.stats-column p {
    display: flex; /* Align label and value */
    justify-content: space-between; /* Push label and value apart */
    font-size: 1rem;
    margin: 0.5rem 0; /* Add space between stats */
}

.stats-column p span.label {
    font-weight: bold; /* Emphasize label */
    color: #333333; /* Darker text for contrast */
}

.stats-column p span.value {
    color: #ff4d4d; /* Red for stat values */
    font-weight: bold; /* Make values stand out */
}

.stats-column ul {
    list-style-type: disc;
    padding-left: 1.5rem;
    margin: 1rem 0;
}

.stats-column ul li {
    margin-bottom: 0.5rem;
    color: #333333;
    line-height: 1.4; /* Space out list items */
}

/* Responsive Styling */
@media (max-width: 768px) {
    .lyrics-and-stats {
        display: block; /* Stack elements vertically */
    }

    .lyrics, .statistics {
        width: 100%; /* Full width for each section */
        margin-bottom: 1.5rem; /* Space between stacked sections */
    }

    .lyrics {
        min-width: unset; /* Remove minimum width for mobile */
        width: 100%; /* Ensure full width on smaller screens */
    }

    .statistics {
        flex-direction: column; /* Ensure stats sections stack properly */
    }
}

.search-results {
    margin: 2rem 0;
    font-size: 1rem;
    line-height: 1.5;
}

.search-results h2 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: #333;
}

.search-results p {
    margin-bottom: 1rem;
    font-weight: bold;
    color: #000;
}

.search-results ul {
    list-style: none;
    padding: 0;
}

.search-results ul li {
    margin: 0.5rem 0;
}

.search-results ul li a {
    text-decoration: none;
    color: #ff4d4d; /* Red for links */
    font-weight: bold;
}

.search-results ul li a:hover {
    text-decoration: underline;
    color: #ff9999; /* Light pink hover */
}

mark {
    font-weight: bold;
    color: #ff4d4d; /* Red text */
    background-color: transparent; /* No background for clean styling */
    padding: 0.25rem;
    border-style: solid;
    border-radius: 0.5rem;
}

.back-arrow {
    display: inline-block;
    font-size: 1rem;
    color: #ff4d4d; /* Red accent color */
    text-decoration: none;
    margin-bottom: 1rem;
    font-weight: bold;
}

.back-arrow:hover {
    text-decoration: underline;
    color: #ff9999; /* Light pink hover effect */
}

/* Layout for Bottom Ads */
.ads-bottom {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 2rem;
}

.ads-bottom > div {
    flex: 1;
    text-align: center;
    border: 1px solid #ccc;
    padding: 1rem;
    background-color: #f8f8f8;
    border-radius: 5px;
    display: none;
}

.notice-text {
    font-size: 14px;
    color: #333;
    margin: 30px;
    padding: 10px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 5px;
    line-height: 1.5;
}