body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    margin: 0;
    padding: 0;
    text-align: center;
    box-sizing: border-box;
    background-image: url('https://images.unsplash.com/photo-1604537466608-109fa4c52402');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
 }

.frosted-glass {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 2rem;
    margin: 2rem;
    position: relative;
    z-index: 1;
}

/* --- Original Header Styles (Confirmed identical to your provided code) --- */
header {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #333;
    color: white;
    padding: 0;
    margin: 0;
    text-align: center;
}

h1 {
    margin: 10px 0 0 0;
}

.nav-container {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 10px 20px;
    box-sizing: border-box;
}
.nav-container a {
    color: white;
    text-decoration: none;
    font-size: 1.2em;
}
/* Centers the logo using Firefox. */
.logo-container {
    max-width: 100%;
    width: 100%; /* To ensure the logo takes up a full width */
    height: auto;
    max-height: 262px; /* Adjust max-height to fit your design needs while maintaining aspect ratio. */
    max-width: 1920px; /* Maintain aspect ratio with max-height */
    object-fit: contain; /* Ensures the logo scales proportionally */
    margin-bottom: 0px;
}

.nfl-logo {
    max-width: 100%;
    width: 100%; /* To ensure the logo takes up a full width */
    height: auto;
    max-height: 262px; /* Adjust max-height to fit your design needs while maintaining aspect ratio. */
    max-width: 1920px; /* Maintain aspect ratio with max-width */
    object-fit: contain; /* Ensures the logo scales proportionally */
    margin-bottom: 0px;
}
/* --- End Original Header Styles --- */


main {
    padding: 20px;
}
ul {
    list-style-position: inside;
    padding-left: 0;
}

li {
    margin-left: 0;
    padding-left: 0;
}

h2 {
    margin: 20px 0 10px;
    font-size: 1.5em;
}

h3 {
    margin: 10px 0;
    font-size: 1.2em;
}

.teams-container {
    display: flex; /* Arrange conference blocks side-by-side */
    gap: 5px; /* Reduced gap between conference blocks */
    justify-content: center; /* Center the conference blocks if they don't fill the width */
    align-items: flex-start; /* Align conference blocks to the top */
    width: 100%;
    height: auto;
    min-height: 70vh; /* Added minimum height to expand vertically */
    flex-wrap: wrap; /* Allow conference blocks to wrap on very small screens if necessary */
}

.conference {
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1; /* Allow conference blocks to share space in the flex container */
    min-width: 0; /* Allow conference blocks to shrink */
    min-height: 60vh; /* Added minimum height to expand conference blocks */
    padding: 10px;
    box-sizing: border-box;
}

.conference-divider {
    width: 2px;
    height: 80vh; /* Full viewport height */
    background-color: #333;
    margin: 0 10px; /* Adjusted margin for vertical divider between horizontal conference blocks */
    transition: height 0.3s ease; /* Smooth transition for height changes */
    flex-shrink: 0; /* Prevent divider from shrinking */
}

/* Hide .conference-divider and adjust inner elements on smaller screens */
@media (max-width: 768px) {
    .conference-divider {
        display: none;
    }
    /* Inner element adjustments for smaller screens */
     .game-container {
         flex-direction: column; /* Stack items in a column on smaller screens */
         flex-wrap: wrap;
         padding: 3px;
     }
     .week-number,
     .weather-info {
         width: auto;
         text-align: center;
         margin-bottom: 5px;
         flex-shrink: 0;
         font-size: 0.7em;
     }
     .game {
         min-width: 100%; /* Allow game box to take full width within its narrow grid column */
         max-width: 100%;
         font-size: 0.7em;
         word-wrap: break-word;
         min-height: 50px;
         flex-basis: auto;
         padding: 3px;
     }
     .bye-week {
         min-width: 100%; /* Allow bye week to take full width */
         min-height: 70px;
         text-align: center;
         font-size: 0.7em;
     }
     .betting-analysis {
         width: 100%; /* Allow betting analysis to take full width */
         margin-left: 0;
         font-size: 0.7em;
         min-width: 100%;
         padding: 3px;
         margin-top: 5px;
     }

    .division-container {
        grid-template-columns: repeat(2, 1fr); /* 2 columns for smaller screens */
        gap: 5px;
    }
}

@media (max-width: 480px) {
    .division-container {
        grid-template-columns: repeat(1, 1fr); /* 1 column for very small screens */
        gap: 5px;
    }
    /* Further adjustments for very small screens */
    .division h3 {
        font-size: 0.9em;
    }
    .game, .bye-week, .betting-analysis {
         font-size: 0.6em;
         min-height: 40px;
     }
     .week-number, .weather-info {
         font-size: 0.6em;
     }
}


.division-container {
    display: grid; /* Apply grid to the container holding divisions within a conference */
    grid-template-columns: repeat(4, 1fr); /* 4 equal columns for divisions within a conference */
    gap: 5px; /* Reduced gap between divisions */
    width: 100%; /* Ensure divisions take up equal space within their grid cell */
    text-align: center; /* Center-align text inside divisions */
    min-height: 55vh; /* Added minimum height to expand the grid vertically */
    align-items: stretch; /* Ensure grid items stretch vertically to fill the container */
}

.division {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px;
    box-sizing: border-box;
    background-color: #f9f9f9;
    border: 1px solid #ccc;
    border-radius: 8px;
    text-align: center;
    aspect-ratio: 2 / 6;
    font-size: calc(0.7vw + 0.5em); /* Adjust font size to scale with viewport */
    transition: transform 0.2s ease-in-out;
    overflow: hidden; /* Prevent content from overflowing */
    word-break: break-word;
}

/* Division Title */
.division h3 {
    margin: 5px 0; /* Reduced margin */
    font-size: 0.9em; /* Reduced font size */
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2em; /* Adjusted line height */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-word;
}


/* Styling for the game container */
.game-container {
    display: flex;
    align-items: center;
    margin-bottom: 5px; /* Reduced margin */
    padding: 3px; /* Reduced padding */
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #f9f9f9;
    width: 100%; /* Allow to take full width in its container */
    box-sizing: border-box;
    flex-wrap: wrap;
    justify-content: center;
    min-width: 0; /* Allow container to shrink */
}

/* Styling for the week number - Adjusted for flexibility and compactness */
.week-number {
    display: inline-block;
    vertical-align: middle;
    font-weight: bold;
    margin-right: 3px; /* Reduced margin */
    width: auto; /* Allow width to be determined by content */
    text-align: right;
    flex-shrink: 0;
    font-size: 0.7em; /* Reduced font size */
}

/* Styling for the game box - Adjusted for flexibility and compactness */
.game {
    color: white;
    flex: 1; /* Allow to grow and shrink */
    text-align: center;
    min-height: 50px; /* Reduced min-height */
    line-height: 1.1em; /* Adjusted line height */
    min-width: 0; /* Allow shrinking below content size */
    word-break: break-word;
    overflow-wrap: break-word;
    font-size: 0.8em; /* Reduced font size */
    padding: 3px; /* Reduced padding */
}

/* Styling for the weather info box - Adjusted for flexibility and compactness */
.weather-info {
    display: inline-block;
    vertical-align: middle;
    margin-left: 3px; /* Reduced margin */
    padding: 5px; /* Reduced padding */
    border: 1px dashed #007BFF; /* Adjusted border style/color */
    border-radius: 5px; /* Adjusted border radius */
    background-color: #e0f7fa;
    max-width: 80px; /* Reduced max-width */
    width: auto; /* Allow width to adjust */
    text-align: center;
    font-style: italic;
    color: #007BFF;
    flex-shrink: 1; /* Allow shrinking */
    font-size: 0.6em; /* Reduced font size */
}

/* Styling for the betting analysis box - Adjusted for flexibility and compactness */
.betting-analysis {
    margin-left: 3px; /* Reduced margin */
    padding: 5px; /* Reduced padding */
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #f9f9f9;
    width: 100%; /* Allow to take full width in its container */
    text-align: center;
    flex-grow: 1;
    min-width: 0; /* Allow shrinking */
    word-break: break-word;
    overflow-wrap: break-word;
    font-size: 0.7em; /* Reduced font size */
    margin-top: 5px; /* Reduced margin */
}

.game-date {
    font-weight: bold;
    font-size: 0.8em; /* Reduced size */
}

.teams {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.team {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 8px;
    background-color: #f9f9f9;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    max-width: 180px;
    min-height: 80px; /* Set a minimum height for consistency */
    min-width: 160px; /* Set a minimum width for consistency */;
    text-align: center;
    word-wrap: break-word; /* Ensure long names wrap within the box */
    overflow-wrap: break-word; /* Handle word wrapping for long names */
}

.record {
    font-size: 12px;
    color: #555;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.transition-effect {
    transition: background-color 0.4s ease, transform 0.4s ease;
}

/* Styling for the BYE weeks - Adjusted for flexibility and compactness */
.bye-week {
    color: white;
    background-color: var(--team-color);
    font-weight: bold;
    font-size: 0.8em; /* Reduced font size */
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60px; /* Reduced min-height */
    text-align: center;
    min-width: 0; /* Allow shrinking */
    padding: 5px;
}

.team a {
    text-decoration: none;
    color: white;
}

/* Define CSS variables for team colors */
:root {
    --arizona-cardinals-color: #97233F;
    --atlanta-falcons-color: #A71930;
    --baltimore-ravens-color: #241773;
    --buffalo-bills-color: #00338D;
    --carolina-panthers-color: #0085CA;
    --chicago-bears-color: #0B162A;
    --cincinnati-bengals-color: #FB4F14;
    --cleveland-browns-color: #311D00;
    --dallas-cowboys-color: #041E42;
    --denver-broncos-color: #FB4F14;
    --detroit-lions-color: #0076B6;
    --green-bay-packers-color: #203731;
    --houston-texans-color: #03202F;
    --indianapolis-colts-color: #002C5F;
    --jacksonville-jaguars-color: #006778;
    --kansas-city-chiefs-color: #E31837;
    --las-vegas-raiders-color: #000000;
    --los-angeles-chargers-color: #0080C6;
    --los-angeles-rams-color: #003594;
    --miami-dolphins-color: #008E97;
    --minnesota-vikings-color: #4F2683;
    --new-england-patriots-color: #002244;
    --new-orleans-saints-color: #D3BC8D;
    --new-york-giants-color: #0B2265;
    --new-york-jets-color: #125740;
    --philadelphia-eagles-color: #004C54;
    --pittsburgh-steelers-color: #FFB612;
    --san-francisco-49ers-color: #AA0000;
    --seattle-seahawks-color: #002244;
    --tampa-bay-buccaneers-color: #D50A0A;
    --tennessee-titans-color: #4B92DB;
    --washington-commanders-color: #773141;
}

/* Apply team-specific background color - Confirmed identical to your provided code */
.team-header {
    padding: 10px;
    color: var(--team-color);
}

.team-header.arizona-cardinals { background-color: var(--arizona-cardinals-color); }
.team-header.atlanta-falcons { background-color: var(--atlanta-falcons-color); }
.team-header.baltimore-ravens { background-color: var(--baltimore-ravens-color); }
.team-header.buffalo-bills { background-color: var(--buffalo-bills-color); }
.team-header.carolina-panthers { background-color: var(--carolina-panthers-color); }
.team-header.chicago-bears { background-color: var(--chicago-bears-color); }
.team-header.cincinnati-bengals { background-color: var(--cincinnati-bengals-color); }
.team-header.cleveland-browns { background-color: var(--cleveland-browns-color); }
.team-header.dallas-cowboys { background-color: var(--dallas-cowboys-color); }
.team-header.denver-broncos { background-color: var(--denver-broncos-color); }
.team-header.detroit-lions { background-color: var(--detroit-lions-color); }
.team-header.green-bay-packers { background-color: var(--green-bay-packers-color); }
.team-header.houston-texans { background-color: var(--houston-texans-color); }
.team-header.indianapolis-colts { background-color: var(--indianapolis-colts-color); }
.team-header.jacksonville-jaguars { background-color: var(--jacksonville-jaguars-color); }
.team-header.kansas-city-chiefs { background-color: var(--kansas-city-chiefs-color); }
.team-header.las-vegas-raiders { background-color: var(--las-vegas-raiders-color); }
.team-header.los-angeles-chargers { background-color: var(--los-angeles-chargers-color); }
.team-header.los-angeles-rams { background-color: var(--los-angeles-rams-color); }
.team-header.miami-dolphins { background-color: var(--miami-dolphins-color); }
.team-header.minnesota-vikings { background-color: var(--minnesota-vikings-color); }
.team-header.new-england-patriots { background-color: var(--new-england-patriots-color); }
.team-header.new-orleans-saints { background-color: var(--new-orleans-saints-color); }
.team-header.new-york-giants { background-color: var(--new-york-giants-color); }
.team-header.new-york-jets { background-color: var(--new-york-jets-color); }
.team-header.philadelphia-eagles { background-color: var(--philadelphia-eagles-color); }
.team-header.pittsburgh-steelers { background-color: var(--pittsburgh-steelers-color); }
.team-header.san-francisco-49ers { background-color: var(--san-francisco-49ers-color); }
.team-header.seattle-seahawks { background-color: var(--seattle-seahawks-color); }
.team-header.tampa-bay-buccaneers { background-color: var(--tampa-bay-buccaneers-color); }
.team-header.tennessee-titans { background-color: var(--tennessee-titans-color); }
.team-header.washington-commanders { background-color: var(--washington-commanders-color); }

/* Change text color on hover to the team color - Confirmed identical to your provided code */
.team:hover {
    transform: scale(1.10); /* Slightly enlarge the box on hover */
    background-color: #f0f0f0; /* Keep the background light */
}

.team:hover h3 {
    color: var(--team-color); /* Apply the team color to the team name */
    font-weight: bold;
}

.arizona-cardinals { --team-color: #97233F; }
.atlanta-falcons { --team-color: #A71930; }
.baltimore-ravens { --team-color: #241773; }
.buffalo-bills { --team-color: #00338D; }
.carolina-panthers { --team-color: #0085CA; }
.chicago-bears { --team-color: #0B162A; }
.cincinnati-bengals { --team-color: #FB4F14; }
.cleveland-browns { --team-color: #311D00; }
.dallas-cowboys { --team-color: #041E42; }
.denver-broncos { --team-color: #FB4F14; }
.detroit-lions { --team-color: #0076B6; }
.green-bay-packers { --team-color: #203731; }
.houston-texans { --team-color: #03202F; }
.indianapolis-colts { --team-color: #002C5F; }
.jacksonville-jaguars { --team-color: #006778; }
.kansas-city-chiefs { --team-color: #E31837; }
.las-vegas-raiders { --team-color: #000000; }
.los-angeles-chargers { --team-color: #0080C6; }
.los-angeles-rams { --team-color: #003594; }
.miami-dolphins { --team-color: #008E97; }
.minnesota-vikings { --team-color: #4F2683; }
.new-england-patriots { --team-color: #002244; }
.new-orleans-saints { --team-color: #D3BC8D; }
.new-york-giants { --team-color: #0B2265; }
.new-york-jets { --team-color: #125740; }
.philadelphia-eagles { --team-color: #004C54; }
.pittsburgh-steelers { --team-color: #FFB612; }
.san-francisco-49ers { --team-color: #AA0000; }
.seattle-seahawks { --team-color: #002244; }
.tampa-bay-buccaneers { --team-color: #D50A0A; }
.tennessee-titans { --team-color: #4B92DB; }
.washington-commanders { --team-color: #773141; }

/* Team-specific styles */
.arizona-cardinals { background-color: #97233F; }
.atlanta-falcons { background-color: #A71930; }
.baltimore-ravens { background-color: #241773; }
.buffalo-bills { background-color: #00338D; }
.carolina-panthers { background-color: #0085CA; }
.chicago-bears { background-color: #0B162A; }
.cincinnati-bengals { background-color: #FB4F14; }
.cleveland-browns { background-color: #311D00; }
.dallas-cowboys { background-color: #041E42; }
.denver-broncos { background-color: #FB4F14; }
.detroit-lions { background-color: #0076B6; }
.green-bay-packers { background-color: #203731; }
.houston-texans { background-color: #03202F; }
.indianapolis-colts { background-color: #002C5F; }
.jacksonville-jaguars { background-color: #006778; }
.kansas-city-chiefs { background-color: #E31837; }
.las-vegas-raiders { background-color: #000000; }
.los-angeles-chargers { background-color: #0080C6; }
.los-angeles-rams { background-color: #003594; }
.miami-dolphins { background-color: #008E97; }
.minnesota-vikings { background-color: #4F2683; }
.new-england-patriots { background-color: #002244; }
.new-orleans-saints { background-color: #D3BC8D; }
.new-york-giants { background-color: #0B2265; }
.new-york-jets { background-color: #125740; }
.philadelphia-eagles { background-color: #004C54; }
.pittsburgh-steelers { background-color: #FFB612; }
.san-francisco-49ers { background-color: #AA0000; }
.seattle-seahawks { background-color: #002244; }
.tampa-bay-buccaneers { background-color: #D50A0A; }
.tennessee-titans { background-color: #4B92DB; }
.washington-commanders { background-color: #773141; }
/* --- End Team-specific styles --- */