:root {
    --background-color: #f2f2f2;
    --text-color: #333;
    --header-background: #2e8b57;
    --header-text: white;
    --nav-background: #444;
    --nav-text: white;
    --section-background: white;
    --footer-background: #444;
    --footer-text: white;
}

body {
    font-family: Courier New, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    background-color: var(--background-color);
    color: var(--text-color);
}

header {
    background: url('EFLS-Light-Walk-Done.gif') no-repeat center center;
    background-size: contain; /* Ensures the entire GIF is shown */
    background-color: black; /* Fallback color for any empty spaces */
    height: 300px; /* Adjust the height to fit your GIF */
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white; /* Keeps the text readable */
}

nav ul {
    background: var(--nav-background);
    color: var(--nav-text);
    list-style: none;
    padding: 0;
    text-align: center;
}

nav ul li {
    display: inline;
    margin: 0 10px;
}

nav ul li a {
    color: var(--nav-text);
    text-decoration: none;
    padding: 0.5rem 1rem;
}

iframe {
    border: 2px solid #ccc; /* Optional: Adds a border around the iframe */
    border-radius: 5px; /* Optional: Adds rounded corners */
}

section {
    padding: 1rem;
    margin: 1rem;
    background: var(--section-background);
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

footer {
    text-align: center;
    padding: 1rem;
    background: var(--footer-background);
    color: var(--footer-text);
}

.dark-mode {
    --background-color: #121212;
    --text-color: #e0e0e0;
    --header-background: #1e1e1e;
    --header-text: #e0e0e0;
    --nav-background: #333;
    --nav-text: #e0e0e0;
    --section-background: #1e1e1e;
    --footer-background: #333;
    --footer-text: #e0e0e0;
}

#theme-toggle {
    position: absolute; /* Positions the button relative to the page */
    top: 10px; /* Distance from the top edge */
    right: 10px; /* Distance from the right edge */
    background-color: #444; /* Button background color */
    color: white; /* Button text color */
    border: none; /* Removes default border */
    padding: 0.5rem 1rem; /* Adds padding for better appearance */
    border-radius: 5px; /* Rounds the corners */
    cursor: pointer; /* Changes the cursor to a pointer */
    font-size: 1rem; /* Adjusts text size */
    z-index: 1000; /* Ensures the button is above other elements */
}

#theme-toggle:hover {
    background-color: #555; /* Slightly lighter on hover */
}

.pdf-preview {
    display: flex;
    justify-content: center; /* Horizontally centers the iframe */
    align-items: center; /* Vertically centers (if needed) */
    flex-direction: column; /* Stacks the iframe and other elements vertically */
    margin: 20px 0; /* Adds spacing between previews */
}

.live-preview {
    display: flex;
    justify-content: center; /* Horizontally centers the iframe */
    align-items: center; /* Vertically centers (if needed) */
    flex-direction: column; /* Stacks the iframe and other elements vertically */
    margin: 20px 0; /* Adds spacing between previews */
}

#request-song {
    padding: 20px;
    background-color: #f9f9f9; /* Light background */
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optional: Adds shadow */
}

.request-container {
    display: flex;
    flex-wrap: wrap; /* Ensures responsiveness */
    gap: 20px; /* Space between columns */
}

.request-form,
.playlist {
    flex: 1; /* Each section takes up equal space */
    min-width: 300px; /* Ensures a reasonable minimum width */
}

h2 {
    margin-bottom: 10px;
}

form label {
    display: block;
    margin: 10px 0 5px;
}

form input {
    width: 100%;
    padding: 8px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

form button {
    padding: 10px 20px;
    background-color: #007bff; /* Blue button */
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

form button:hover {
    background-color: #0056b3; /* Darker blue on hover */
}

.playlist ul {
    list-style-type: none; /* Removes default bullets */
    padding: 0;
    margin: 0;
}

.playlist ul li {
    padding: 5px 0;
    border-bottom: 1px solid #ddd; /* Adds a divider between songs */
}

.playlist ul li:last-child {
    border-bottom: none; /* Removes the divider from the last item */
}