/* Removes default browser margins and sets a clean font */
body {
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f9f9f9;
}

/* The main navigation bar container */
.navbar {
    background-color: #4169E1; 
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); 
    display: flex;
    flex-wrap: wrap; /* Allows the menu to wrap below the hamburger on mobile */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
}

/* The list holding the links */
.nav-links {
    list-style-type: none; 
    margin: 0;
    padding: 0;
    display: flex; 
    justify-content: center; 
    width: 100%; /* Takes full width so links can center */
    vertical-align: middle;
}

/* The individual links */
.nav-links a {
    display: block;
    color: #ffffff; 
    text-decoration: none; 
    padding: 16px 24px; 
    font-weight: 500;
    font-size: 16px;
    transition: background-color 0.3s ease, color 0.3s ease; 
}

/* The hover effect */
.nav-links a:hover {
    background-color: #4169E1; 
    color: #3498db; 
}

/* Hide the checkbox and hamburger icon on desktop screens */
.menu-checkbox {
    display: none; 
}
.navbar2 {
    background-color: #FFFFFF;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    display: flex;
    flex-wrap: wrap; /* Allows the menu to wrap below the hamburger on mobile */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
}
.nav2-links {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    width: 100%; /* Takes full width so links can center */
    vertical-align: middle;
}
.nav2-links a {
    display: block;
    color: #000000;
    text-decoration: none;
    padding: 16px 24px;
    font-weight: 500;
    font-size: 16px;
    transition: background-color 0.3s ease, color 0.3s ease;
}
.nav2-links a:hover {
    background-color: #4169E1;
    color: #3498db;
}
.hamburger {
    display: none; 
    color: white;
    font-size: 28px;
    cursor: pointer;
    padding: 14px 24px;
    user-select: none;
}

.banner {
    background-color: #4169E1;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    display: flex;
    flex-wrap: wrap; /* Allows the menu to wrap below the hamburger on mobile */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
    color: #FFFFFF;
}

.main {
    background-color: #FFFFFF;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    display: flex;
    flex-wrap: wrap; /* Allows the menu to wrap below the hamburger on mobile */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
    color: #000000
    text-align: center;
}
.main h1 {
    color: #4169E1;
    text-align: center;
}
.main h2 {
    color: #4169E1;
    text-align: center;
}
.main h3 {
    color: #4169E1;
    text-align: center;
}
.roster {
    width: 100%;
    border-collapse: collapse;
    margin: 0 auto;
    text-alignt: center;
}
.roster th, .roster td {
    padding: 15px;
    text-alight: center;
    border: 0px;
}
roster th {
    font-weight: 600px
}
.roster tbody tr:nth-child(even) {
    background-color: #E1E7F0;
}
.roster tbody tr:hover {
    transition: background-color 0.2s ease;
}
    
.standings {
    width: 100%;
    border-collapse: collapse;
    margin: 0 auto;
    text-align: center;
}
.standings th, .standings td {
    padding: 15px;
    text-alight: center;
    border: 0px;
}
.standings th {
    font-weight: 600px
}
.standimgs tbody tr:nth-child(even) {
    background-color: #E1E7F0;
}
.standings tbody tr:hover {
    transition: background-color 0.2s ease;
}
.schedule {
    width: 100%;
    border-collapse: collapse;
    margin: 0 auto;
    text-align: center;
}
.schedule th, .schedule td {
    padding: 15px;
    text-alight: center;
    border: 0px;
}
.schedule th {
    font-weight: 600px
}
.schedule tbody tr:nth-child(even) {
    background-color: #E1E7F0;
}
.schdule tbody tr:hover {
    transition: background-color 0.2s ease;
}
.us {
    background-color: #0101DF;
    color: #FFFFFF;
}

.stats {
    width: 100%;
    border-collapse: collapse;
    margin: 0 auto;
    text-align: center;
}
.stats th, .stats td {
    padding: 15px;
    text-alight: center;
    border: 0px;
}
.stats th {
    font-weight: 600px
}
.stats tbody tr:nth-child(even) {
    background-color: #E1E7F0;
}
.stats tbody tr:hover {
    transition: background-color 0.2s ease;
}

.legend {
    width: 100%;
    border-collapse: collapse;
    margin: 0 auto;
    text-align: center;
}
.legend th, .legend td {
    padding: 15px;
    text-alight: center;
    border: 0px;
}
.legend th {
    font-weight: 600px
}
.legend tbody tr:nth-child(even) {
    background-color: #E1E7F0;
}
.legend tbody tr:hover {
    transition: background-color 0.2s ease;
}
.keyNav {
    width: 100%;
    max-width: 800px;
    margin: 0 auto 20px auto;
    background-color: #FFFFFF;
    border: 1px solid #000000;
    border-radius: 5px;
}
.keyNav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: space-around;
}
.KeyNav li {
    flex: 1;
    text-align: center;
}
.KeyNav a {
    display: block;
    padding: 15px 20px;
    text-dectoration: none;
    color: #333;
    font-weight: 600;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.keyNav a:hover {
    background-color: #E1E7F0;
    color: white;
    border-radius: 4px;
}
.leaders {
    width: 100%;
    border-collapse: collapse;
    margin: 0 auto;
    text-align: center;
}
.leaders th, .stats td {
    padding: 15px;
    text-alight: center;
    border: 0px;
}
.leaders th {
    font-weight: 600px
}
.leaders tbody tr:nth-child(even) {
    background-color: #E1E7F0;
}
.leaders tbody tr:hover {
    transition: background-color 0.2s ease;
}
/* =========================================
   RESPONSIVE DESIGN (Mobile & Tablets)
   ========================================= */
@media (max-width: 768px) {
    /* Show the hamburger icon */
    .hamburger {
        display: block; 
    }

    /* Hide the horizontal links by default on mobile */
    .nav-links {
        display: none; 
        flex-direction: column; /* Stacks the links vertically */
        width: 100%;
    }

    /* Center text and add separators for the mobile dropdown */
    .nav-links li {
        text-align: center;
        border-top: 1px solid #3b536b; 
    }

    /* Make the links larger for touch targets */
    .nav-links a {
        padding: 15px;
    }

    /* The "Hack": When the hidden checkbox is checked (by tapping the hamburger), display the nav-links */
    .menu-checkbox:checked ~ .nav-links {
        display: flex;
    }
    .table-wrapper {
	width: 100%;
	max-width: 800px;
	overflow-x: auto;
	text-align: center;
    }

}