:root {
                --header-image: url('images/HEADER.webp');
                --mobile-header-image: url('images/HEADER2.png');
                --dark-header-image: url('images/HEADER_DARK.webp');
                --body-bg-image: url('images/BG2.webp');

                --bg-primary: #ffffff;
                --bg-secondary: #fbfbfb;
                --text-primary: #000000;
                --text-secondary: #525252;
                --text-light: #666666;
                --border-color: #e6e6e6;
                --accent: #ee0000;
                --nav-bg: #000000;
                --nav-text: #ffffff;
                --content: #000000;
            }

            ins.adsbygoogle {
                background: transparent !important;
                text-decoration: none !important;
                border: none !important;
                outline: none !important;
            }

            ins.adsbygoogle[data-ad-status="unfilled"] {
                display: none !important;
            }

            html.dark-mode {
                --bg-primary: #1a1a1a;
                --bg-secondary: #242424;
                --text-primary: #ffffff;
                --text-secondary: #e0e0e0;
                --text-light: #b0b0b0;
                --border-color: #111111;
                --accent: #ff3333;
                --nav-bg: #111111;
                --nav-text: #ffffff;
                --content: #ffffff;
            }

            html.dark-mode body {
                background-color: var(--bg-primary);
                color: var(--text-primary);
            }

            htmL.dark-mode #header {
                background-image: var(--dark-header-image);
            }

            html.dark-mode #container {
                background-color: var(--bg-primary);
                border-left-color: var(--border-color);
                border-right-color: var(--border-color);
            }

            html.dark-mode main,
            html.dark-mode aside {
                background-color: var(--bg-primary);
                border-color: var(--border-color);
                color: var(--text-primary);
            }

            html.dark-mode footer {
                background-color: var(--nav-bg);
                color: var(--nav-text);
            }

            html.dark-mode a {
                color: var(--accent);
            }

            html.dark-mode aside a {
                color: var(--text-primary) !important;
            }

            html.dark-mode .box {
                background-color: var(--bg-secondary);
                border-color: var(--border-color);
            }

            html.dark-mode h1, html.dark-mode h2, html.dark-mode h3 {
                color: var(--text-primary);
            }

            html.dark-mode strong {
                color: var(--text-primary);
            }

            html.dark-mode #navbar {
                background-color: var(--nav-bg);
            }

            html.dark-mode .blog-post,
            html.dark-mode .blog-card,
            html.dark-mode .blog-post {
                background-color: var(--bg-secondary);
                border-color: var(--border-color);
                color: var(--text-primary);
            }

            html.dark-mode .show-card {
                background-color: var(--bg-secondary);
                border-color: var(--border-color);
                color: var(--text-primary);
            }

            html.dark-mode .emission-item {
                border-color: var(--border-color);
                color: var(--text-primary);
            }

            html.dark-mode .emissions-list {
                background-color: var(--bg-secondary);
                border-color: var(--border-color);
            }

            html.dark-mode #darkModeToggle {
                color: var(--nav-text);
            }

            html.dark-mode #darkModeToggle:hover {
                color: var(--accent);
            }

            html {
                scroll-behavior: smooth;
                cursor: crosshair;
            }


            .player {
                width: 100%;
                aspect-ratio: 16 / 9.1;
                border: 5px solid black;
                overflow: hidden;
                box-sizing: border-box;
            }

            .player div {
                width: 100%;
                height: 100%;
            }

            .twitch-embed {
                width: 100% !important;
                height: 100% !important;
            }

            .player iframe {
                width: 100%;
                height: 100%;
                border: none;
            }


            @font-face {
                font-family: Azena Premier;
                src: url('fonts/AzenaPremier-Regular.otf');
            }

            @font-face {
                font-family: Azena Premier;
                src: url('fonts/AzenaPremier-Bold.otf');
                font-weight: bold;
            }

            @font-face {
                font-family: Azena Premier;
                src: url('fonts/AzenaPremier-Regular.otf');
                font-style: italic;
            }

            @font-face {
                font-family: Azena Premier;
                src: url('fonts/AzenaPremier-Bold.otf');
                font-style: italic;
                font-weight: bold;
            }

            body {
                font-family: 'Azena Premier', sans-serif;
                margin: 0;
                font-size: 16px;
                background-color: #ffffff;
                color: #525252;
                background-image: var(--body-bg-image);
                background-attachment: fixed !important;
                background-size: 100% auto;
                -webkit-overflow-scrolling: touch;
            }

            * {
                box-sizing: border-box;
            }

            /* below this line is CSS for the layout */

            /* this is a CSS comment
    to uncomment a line of CSS, remove the * and the /
    before and after the text */


            /* the "container" is what wraps your entire website */
            /* if you want something (like the header) to be Wider than
    the other elements, you will need to move that div outside
    of the container */
            #container {
                max-width: 1200px;
                /* this is the width of your layout! */
                /* if you change the above value, scroll to the bottom
      and change the media query according to the comment! */
                margin: 0 auto;
                /* this centers the entire page */
                border-left: 5px solid #000000;
                border-right: 5px solid #000000;
                box-shadow: 0 0 100px #00000041;
            }

            /* the area below is for all links on your page
    EXCEPT for the navigation */
            #container a {
                color: #ee0000;
                font-weight: bold;
                /* if you want to remove the underline
      you can add a line below here that says:
      text-decoration:none; */
            }

            #header {
                width: 100%;
                background-color: #ffffff;
                /* header color here! */
                aspect-ratio: 1200 / 169;
                /* this is only for a background image! */
                /* if you want to put images IN the header, 
      you can add them directly to the <div id="header"></div> element! */
                background-image: var(--header-image);
                background-size: 100%;
                background-repeat: no-repeat;
                background-position: center;
                overflow: hidden;
            }

            /* navigation section!! */
            #navbar {
			    min-height: 32px;
			    background-color: #000000;
			    width: 100%;
			    display: flex;
			    align-items: center;
			    justify-content: center;
			    gap: 20px;
			    padding: 0 20px;
			    box-sizing: border-box;
            }

            #navbar ul {
                display: flex;
			    align-items: center;
			    justify-content: center;
			    padding: 0;
			    margin: 0;
			    list-style-type: none;
			    gap: 48px;
            }

            #darkModeToggle {
                margin-left: auto;
                color: #ffffff;
            }

            #darkModeToggle:hover {
                color: #ee0000;
            }

            /* navigation links*/
            #navbar li a {
                color: #ffffff;
                /* navbar text color */
                font-weight: 800;
                font-size:smaller;
                text-decoration: none;
                /* this removes the underline */
            }

            /* navigation link when a link is hovered over */
            #navbar li a:hover {
                color: #ee0000;
                text-decoration: underline;
            }

            #flex {
                display: flex;
            }

            /* this colors BOTH sidebars
    if you want to style them separately,
    create styles for #leftSidebar and #rightSidebar */
            aside {
                background-color: #ffffff;
                width: 240px;
                padding: 20px;
                padding-top: 0px;
                font-size: smaller;
                /* this makes the sidebar text slightly smaller */
                border-right: 4px solid black;
            }


            /* this is the color of the main content area,
    between the sidebars! */
            main {
                background-color: #ffffff;
                flex: 1;
                padding: 20px;
                padding-top: 0px;
                order: 2;
            }

            /* what's this "order" stuff about??
    allow me to explain!
    if you're using both sidebars, the "order" value
    tells the CSS the order in which to display them.
    left sidebar is 1, content is 2, and right sidebar is 3! */

            #leftSidebar {
                order: 1;
            }

            #rightSidebar {
                order: 3;
            }

            footer {
                background-color: #000000;
                /* background color for footer */
                width: 100%;
                padding: 8px;
                font-size:smaller;
                color: white;
                text-align: center;
                /* this centers the footer text */
            }

            h1,
            h2,
            h3 {
                color: #000000;
            }

            h1 {
                font-size: 32px;
                margin-bottom: 10px;
            }

            strong {
                /* this styles bold text */
                color: #000000;
            }

            /* this is just a cool box, it's the darker colored one */
            .box {
                background-color: #fdfdfd;
                border: 1px solid #d3d3d3;
                padding: 10px;
                padding-top: 0px;
                padding-bottom: 0px;
            }
            

            #topBar {
                width: 100%;
                padding: 6px;
                font-family: Consolas, monospace;
                font-size: smaller;
                background-color: #000000;
                color: #ffffff;
            }

            p {
                line-height: 1.35 !important;
            }

            aside h2 {
                display: flex;
                align-items: center;
                gap: 10px;
                margin-top: 15px;
                margin-bottom: 10px;
                font-size: 18px;
            }

            aside h2:first-child {
                margin-top: 0;
            }

            aside h2 i {
                color: #ee0000;
                font-size: 20px;
                width: 24px;
                text-align: center;
            }

            aside h3 {
                display: flex;
                align-items: center;
                gap: 8px;
                margin-top: 12px;
                margin-bottom: 8px;
                font-size: 14px;
            }

            aside h3 i {
                color: #ee0000;
                font-size: 16px;
                width: 20px;
                text-align: center;
            }

            aside ul {
                list-style: none;
                padding-left: 0 !important;
            }

            aside li {
                display: flex;
                align-items: flex-start;
                gap: 8px;
                margin-bottom: 6px;
                padding: 4px 8px;
            }

            aside li:hover {
                background-color: #eeeeee;
            }

            html.dark-mode aside li:hover {
                background-color: #333333;
            }

            aside li i {
                color: #ee0000;
                font-size: 14px;
                width: 16px;
                text-align: center;
                flex-shrink: 0;
                margin-top: 2px;
            }

            aside li > b {
                font-weight: bold;
                min-width: 40px;
                flex-shrink: 0;
            }

            aside li a {
                display: flex;
                align-items: center;
                gap: 8px;
                color: #ee0000;
                font-weight: bold;
                text-decoration: none;
                width: 100%;
            }

            aside li a:hover {
                text-decoration: underline;
            }

            aside li a i {
                flex-shrink: 0;
            }

            .programme-title {
                display: -webkit-box;
                line-clamp: 2;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
                word-break: break-word;
            }

            .emissions-date {
                margin: 14px 0 6px;
                font-size: 16px;
                color: #222;
            }

            .emissions-list {
                list-style: none;
                margin: 0 0 12px;
                padding: 0;
                border: 1px solid #e0e0e0;
                padding: 8px;
                background: #fff;
            }

            .emission-item {
                display: flex;
                gap: 8px;
                padding: 6px 4px;
                align-items: flex-start;
                border-bottom: 1px solid #f0f0f0;
            }

            .emission-item:last-child {
                border-bottom: none;
            }

            .emission-time {
                min-width: 56px;
                font-weight: bold;
                color: #333;
                flex-shrink: 0;
            }

            .emission-meta {
                flex: 1;
            }

            .emission-meta-right {
                min-width: 60px;
                text-align: right;
                color: #666;
                font-size: 13px;
            }

            .emission-desc { color: #666; font-size: 13px; margin-top: 4px; }

            .emission-title.rediffusion, .programme-title.rediffusion { font-style: italic; }

            .emissions-grid {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
                gap: 12px;
            }

            .show-card {
                display: flex;
                flex-direction: column;
                gap: 10px;
                padding: 10px;
                border: 1px solid #d3d3d3;
                background: #fdfdfd;
                overflow: hidden;
            }

            .show-thumb {
                width: 100%;
                height: auto;
                aspect-ratio: 1;
                object-fit: cover;
            }

            .show-body {
                flex: 1;
                min-width: 0;
                display: flex;
                flex-direction: column;
                gap: 6px;
                padding: 0 4px;
            }

            .show-title { 
                font-weight: 700; 
                font-size: 14px;
                line-height: 1.3;
                word-wrap: break-word;
                overflow-wrap: break-word;
                display: -webkit-box;
                line-clamp: 2;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
            }

            .show-desc {
                font-size: 12px;
                color: var(--text-secondary);
                line-height: 1.35;
                display: -webkit-box;
                line-clamp: 2;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
                word-wrap: break-word;
                overflow-wrap: break-word;
                position: relative;
                cursor: help;
            }

            .show-desc:hover::after {
                content: attr(data-tooltip);
                position: absolute;
                bottom: 100%;
                left: 0;
                right: 0;
                background: #333;
                color: #fff;
                padding: 8px;
                font-size: 12px;
                line-height: 1.4;
                z-index: 1000;
                white-space: pre-wrap;
                word-wrap: break-word;
                margin-bottom: 8px;
                box-shadow: 0 2px 8px rgba(0,0,0,0.2);
            }

            .show-times { 
                list-style: none; 
                padding-left: 0; 
                margin: 4px 0 0 0; 
                color: var(--text-secondary);
                font-size: 11px;
                font-weight: 600;
            }
            .show-times li { 
                margin-bottom: 2px;
                word-wrap: break-word;
                overflow-wrap: break-word;
            }
            
            .show-footer { 
                margin-top: 4px;
                display: flex; 
                gap: 8px; 
                align-items: center;
                font-size: 11px;
                color: #999;
                flex-wrap: wrap;
            }
            
            .show-duration { font-weight: 600; color: #999; }
            .show-trailer { color: #ee0000; text-decoration: none; font-weight: 700; font-size: 11px; }

            .blog-header {
                margin: 16px 0 10px;
            }

            .blog-header p {
                max-width: 70ch;
                margin-bottom: 0;
            }

            .blog-toolbar {
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                gap: 10px;
                margin: 14px 0 20px;
            }

            .blog-rss-link {
                display: inline-flex;
                align-items: center;
                gap: 8px;
                background: #000;
                color: #fff !important;
                padding: 8px 12px;
                text-decoration: none;
                font-weight: 700;
            }

            .blog-rss-link:hover {
                background: #ee0000;
                text-decoration: none;
            }

            .blog-feed-status {
                font-size: 13px;
                color: #666;
            }

            .blog-feed {
                display: flex;
                flex-direction: column;
                gap: 14px;
            }

            .blog-post {
                border: 1px solid #e6e6e6;
                background: #fff;
                padding: 18px;
                border-left: 4px solid #000;
                display: flex;
                flex-direction: column;
                gap: 10px;
            }

            .blog-post h2 {
                margin: 0;
                line-height: 1.2;
                font-size: 22px;
            }

            .blog-post h2 a {
                color: var(--text-primary) !important;
                text-decoration: none;
            }

            .blog-post h2 a:hover {
                color: #ee0000 !important;
            }

            .blog-post-meta {
                display: flex;
                flex-wrap: wrap;
                gap: 10px;
                font-size: 12px;
                color: #666;
                align-items: center;
            }

            .blog-post-badge {
                background: #f0f0f0;
                padding: 3px 8px;
                color: #333;
                font-size: 11px;
                font-weight: bold;
                text-transform: uppercase;
            }

            .blog-post-excerpt {
                margin: 0;
                line-height: 1.55 !important;
            }

            .blog-post-footer {
                display: flex;
                justify-content: flex-start;
                margin-top: 2px;
            }

            .blog-post-link {
                display: inline-flex;
                align-items: center;
                gap: 8px;
                font-weight: 700;
                text-decoration: none;
                color: #ee0000 !important;
            }

            .blog-post-link:hover {
                text-decoration: underline;
            }

            .blog-article {
                max-width: 72ch;
            }

            .blog-article img {
                max-width: 100%;
                height: auto;
                display: block;
                margin: 18px 0;
            }

            /* Italicize rediffusions */
            aside li.rediffusion .programme-title {
                font-style: italic;
            }


            aside li.playing > b {
                color: #ee0000;
            }

            aside li.playing .programme-title {
                color: #ee0000;
            }


            /* Partners section */
            .partenaires-grid {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
                gap: 16px;
                margin: 16px 0;
            }

            .partenaire-card {
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 8px;
                padding: 8px;
                border: 1px solid #e6e6e6;
                background: #fdfdfd;
                text-decoration: none;
            }

            .partenaire-card:hover {
                border-color: #ee0000;
                background: #ffffff;
            }

            .partenaire-logo {
                width: 100%;
                height: 120px;
                display: flex;
                align-items: center;
                justify-content: center;
                overflow: hidden;
            }

            .partenaire-logo img {
                max-width: 90%;
                max-height: 90%;
                object-fit: contain;
            }

            .partenaire-info {
                text-align: center;
                width: 100%;
            }

            .partenaire-info h3 {
                margin: 0 0 6px;
                font-size: 14px;
                color: #000000;
                line-height: 1.3;
            }

            .partenaire-info p {
                margin: 0;
                font-size: 12px;
                color: #666666;
                line-height: 1.4;
            }

            html.dark-mode .partenaire-card {
                border-color: var(--border-color);
                background-color: var(--bg-secondary);
            }

            html.dark-mode .partenaire-card:hover {
                border-color: var(--accent);
                background-color: var(--bg-secondary);
                box-shadow: 0 2px 8px rgba(255, 51, 51, 0.2);
            }

            html.dark-mode .partenaire-info h3 {
                color: var(--text-primary);
            }

            html.dark-mode .partenaire-info p {
                color: var(--text-secondary);
            }

            .twitch-chat-overlay {
                position: fixed;
                bottom: 0;
                right: 20px;
                width: 320px;
                background: #ffffff;
                border: 2px solid #000000;
                border-bottom: none;
                box-shadow: 0 -4px 12px rgba(0,0,0,0.15);
                z-index: 9999;
                transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                transform: translateY(0);
            }

            .twitch-chat-overlay.collapsed {
                transform: translateY(400px);
            }

            .chat-header {
                background: #000000;
                color: #ffffff;
                padding: 0 15px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                cursor: pointer;
                font-weight: bold;
                user-select: none;
                height: 40px;
                box-sizing: border-box;
            }

            .chat-header i.fa-twitch {
                color: #bf94ff;
                margin-right: 6px;
                font-size: 16px;
            }

            .chat-header:hover {
                background: #222222;
            }

            .chat-iframe-container {
                height: 400px;
                width: 100%;
                background: #18181b;
            }

            html.dark-mode .twitch-chat-overlay {
                border-color: #333333;
                background: var(--bg-secondary);
            }

            html.dark-mode .chat-header {
                background: #111111;
            }

            .home-sections {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
                gap: 20px;
                margin: 24px 0;
            }

            .home-section {
                padding: 16px 20px;
                height: 100%;
                display: flex;
                flex-direction: column;
            }

            .home-section p {
                margin-bottom: 4px;
            }

            .home-section h2 {
                display: flex;
                align-items: center;
                gap: 12px;
                margin-top: 0;
                margin-bottom: 4px;
                font-size: 22px;
            }

            .home-section h2 i {
                color: #ee0000;
                font-size: 24px;
            }

            .home-section p:last-child {
                margin-bottom: 0;
            }

            .blog-pagination {
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 20px;
                margin: 30px 0;
                padding: 20px 0;
                border-top: 1px solid var(--border-color, #e6e6e6);
            }

            .blog-pagination-btn {
                background: var(--bg-secondary, #f9f9f9);
                border: 1px solid var(--border-color, #e6e6e6);
                color: var(--text-primary, #000);
                padding: 8px 16px;
                font-size: 14px;
                font-weight: bold;
                cursor: pointer;
                display: inline-flex;
                align-items: center;
                gap: 8px;
                transition: all 0.2s ease;
            }

            .blog-pagination-btn:hover {
                background: var(--accent, #ee0000);
                color: #fff !important;
                border-color: var(--accent, #ee0000);
            }

            .blog-pagination-info {
                font-size: 14px;
                color: var(--text-secondary, #666);
                font-weight: bold;
            }


            /* BELOW THIS POINT IS MEDIA QUERY */

            /* so you wanna change the width of your page? 
    by default, the container width is 900px.
    in order to keep things responsive, take your new height,
    and then subtrack it by 100. use this new number as the 
    "max-width" value below
    */

            @media only screen and (max-width: 800px) {
                .twitch-chat-overlay {
                    width: 100%;
                    right: 0;
                    border-left: none;
                    border-right: none;
                    border-radius: 0;
                }
                .chat-header {
                    border-radius: 0;
                }

                #header {
                    background-image: var(--mobile-header-image) !important;
                    aspect-ratio: 960 / 235;
                }
                body {
                    background-attachment: scroll !important;
                }
                #flex {
                    flex-wrap: wrap;
                }

                aside {
                    width: 100%;
                    border-right: none;
                    border-bottom: 4px solid black;
                }

                /* the order of the items is adjusted here for responsiveness!
      since the sidebars would be too small on a mobile device.
      feel free to play around with the order!
      */
                main {
                    order: 1;
                }

                #leftSidebar {
                    order: 2;
                }

                #rightSidebar {
                    order: 3;
                }

                #navbar {
                    flex-wrap: wrap;
                    padding: 10px;
                    justify-content: center;
                }
                #navbar ul {
                    flex-wrap: wrap;
                    gap: 15px;
                }
                #darkModeToggle {
                    margin-left: 0;
                }
            }