p {
    font-family: Georgia, Serif;
    margin: 0;
    height: 100vh;
    overflow: auto; 
    position: relative;
    color: var(--text-color);
}
h1 h2 h3 {
  font-family: Courier New, Monospace;
  font-weight: bold;
}

:root {
    --background-color: darkgrey; /* Default dark background */
    --text-color: black;
    --background-image: url('/img/BG.png'); /* Path to your image */
}

@media (prefers-color-scheme: dark) {
    :root {
        --background-color: black;
        --text-color: white;
        --background-image: url('/img/BG2.png');
    }
}
header {
    display: flex;
    justify-content: center;
    padding: 20px;
}
header {
    display: flex;
    justify-content: center;
    padding: 20px;
}
/* Base styles for the navbar */
.navbar {
    overflow: hidden;
    text-align: center;
    background-color: skyblue; /* Default background color */
    display: flex; /* Use flexbox for easier alignment */
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
    justify-content: center; /* Center items */
}

.navbar a {
    display: block; /* Better touch area */
    padding: 14px 16px;
    text-decoration: none;
    color: black; /* Text color for both modes */
    transition: background-color 0.3s ease; /* Smooth background transition */
}

.navbar a:hover {
    background-color: steelblue; /* Hover color for light mode */
}

/* Styles for dark mode */
@media (prefers-color-scheme: dark) {
    .navbar {
        background-color: firebrick; /* Change background for dark mode */  
    }

    .navbar a {
        color: white; /* Ensure text color is visible in dark mode */
    }

    .navbar a:hover {
        background-color: maroon; /* Change hover color for dark mode */
    }
}

/*Tables */
th, td {
            padding: 5px;
            
            text-align: center;
          border: 1px solid steelblue;
          background-color: darkgrey;
        }
        th {
            background-color: skyblue;
        }
        @media (prefers-color-scheme: dark) {
        th, td {
        text-align: left;
        border: 1px solid darkred;
        background-color: black;
    }
    th {
        background-color: firebrick;
}

}

/*Header */
header {
            display: flex;
            justify-content: center;
            padding: 20px;
        }

        /* Responsive adjustments */
        @media (max-width: 768px) {
    .navbar a {
        padding: 10px 12px; /* Reduce padding on smaller screens */
    }
    header img {
        width: 80%; /* Adjust logo size */
        max-width: 200px; /* Limit maximum width */
    }
}

@media (max-width: 400px) {
    .navbar {
        flex-direction: row; /* Stack links vertically */
    }
    .navbar a {
        margin: 0 0 5px 0; /* Remove right margin and add bottom margin */
    }
}

body {
    font-family: Georgia, Serif;
    margin: 0;
    padding: 0;
    text-align: center;
    background-color: var(--background-color);
    color: var(--text-color);
    height: auto; /* Allow content height */
    min-height: 100vh; /* Ensure body takes at least full viewport height */
}

/* Root Variables */
:root {
    --background-color: darkgrey; /* Default dark background */
    --text-color: black;
    --background-image: url('/img/BG.png'); /* Path to your image */
}

/* Dark Mode Styles */
@media (prefers-color-scheme: dark) {
    :root {
        --background-color: black;
        --text-color: white;
        --background-image: url('/img/BG2.png');
    }
}

/* Background Styling */
.background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 200vh; /* Extended height for scrolling effect */
    background-color: var(--background-color);
    background-image: var(--background-image);
    background-size: auto 200%;
    background-repeat: repeat;
    transform: rotate(45deg);
    animation: scroll 10s linear infinite; /* Animation for scrolling */
}

/* Navbar */
.navbar {
    overflow: visible; /* Allow scrolling */
    text-align: center;
    background-color: skyblue; /* Default background color */
    display: flex; 
    flex-wrap: wrap; 
    justify-content: center;
    position: sticky; /* Make navbar sticky to the top */
    top: 0; /* Position it at the top */
    z-index: 1000; /* Ensure it overlaps other content */
}

/* Navbar Links */
.navbar a {
    display: block; 
    padding: 14px 16px;
    text-decoration: none;
    color: black;
    transition: background-color 
}

/* Hover States */
.navbar a:hover {
    background-color: steelblue; /* Hover color for light mode */
}

/* Dark Mode Navbar Styles */
@media (prefers-color-scheme: dark) {
    .navbar {
        background-color: firebrick; /* Change background for dark mode */  
    }

    .navbar a {
        color: white; /* Ensure text color is visible in dark mode */
    }

    .navbar a:hover {
        background-color: maroon; /* Change hover color for dark mode */
    }
}

/* Responsive Adjustments */
@media (max-width: 400px) {
    .navbar a {
        padding: 10px 12px; /* Reduce padding on smaller screens */
    }
}

@media (max-width: 400px) {
    .navbar {
        flex-direction: row; /* Stack links vertically */
    }
    .navbar a {
        margin: 0 0 5px 0; /* Adjust margin */
    }
}