/* Define CSS variables for header and footer heights */
:root {
        /* Colours */
        --BKGR_COLR: black;    /* background */
        --IMAG_COLR: #C5C6D0;
        --TITL_COLR: cyan;    /* title */
        --TEXT_COLR: #C5C6D0;      /* text */
        --ATTN_COLR: cyan;     /* interactive */
        --HIGH_COLR: yellow;     /* highlight */
        --BRDR_COLR: dodgerblue;      /* border */

        /* General */
        --FONT_FAML: monospace;
        --FONT_SIZE: 16px;
        --BRDR_THCK: 1px;      /* border */
        --BRDR_RADS: 3px;

        /* Scrollbar */
        --SCRL_WIDH: 30px;
        --SCRL_HGHT: 12px;

        /* Code */
        --CODE_WIDH: 1280px;
        --CODE_HGHT: 720px;
        --CODE_BKGR_COLR: #1c1b22;
        --CODE_HEDR_BKGR_COLR: #2D2D2D;

        /* Header */
        --HEDR_HGHT: 60px;
        --HEDR_PADD: 10px;

        /* Footer */
        --FOTR_HGHT: 20px;
        --FOTR_PADD: 10px;

        /* Sidebar */
        --SIDB_WIDH: 100px;
        --SIDB_PADD: 10px;

        /* Content */
        --CNTN_PADD: 20px;

        /* Catalogue */
        --CTLG_IMAG_WIDH: 320px;
        --CTLG_IMAG_HGHT: 180px;

        /* Video */
        --VDIO_WIDH: 1280px;
        --VDIO_HGHT: 720px;
        --VDIO_CRTL_HGHT: 50px;
        --VDIO_CRTL_BUTN_WIDH: var(--VDIO_CRTL_HGHT);
        --VDIO_CRTL_PROG_WIDH: calc(var(--VDIO_WIDH) - 2 * var(--VDIO_CRTL_BUTN_WIDH));
        --VDIO_ICON_WIDH: 16px;
        --VDIO_ICON_HGHT: 16px;
        --VDIO_VOLB_HGHT: 100px;
}
a:hover {
        background-color: var(--HIGH_COLR);
        color: var(--BKGR_COLR);
        text-decoration: underline;
}
a:hover h1, h2, h3, h4 {
        color: var(--BKGR_COLR);
}
h1, h2, h3, h4 {color: var(--TITL_COLR);}
a {
        color: var(--TEXT_COLR);
        text-decoration: none;
}
img {
        padding: var(--BRDR_THCK);
        border: var(--BRDR_THCK) solid var(--BRDR_COLR);

        background-color: var(--IMAG_COLR);
        box-shadow: 0px 0px 20px rgba(255, 255, 255, 0.2);
}
button {
        border: var(--BRDR_THCK) solid var(--BRDR_COLR);
        background-color: var(--BKGR_COLR);
        color: var(--ATTN_COLR);
        font-family: var(--FONT_FAML);
        font-size: var(--FONT_SIZE);

        cursor: pointer;
        padding: 10px;
}
.middle-button {
        border-left: 0px;
        border-right: 0px;
}
button:hover {
        background-color: var(--HIGH_COLR);
        color: var(--BKGR_COLR);
        text-decoration: underline;
}
/* custom scrollbar */
::-webkit-scrollbar {
        width: var(--SCRL_WIDH);
        cursor: pointer;
}
::-webkit-scrollbar-thumb{
        background-color: var(--BRDR_COLR);
        border: 1px solid var(--BRDR_COLR);
}
::-webkit-scrollbar-thumb:hover{
        background-color: var(--HIGH_COLR);
}
::-webkit-scrollbar-track {
        background-color: var(--BKGR_COLR);
        border: 1px solid var(--BRDR_COLR);
}
::-webkit-scrollbar-button {
        display:none; /* hide arrows*/
}
body {
        margin: 0;
        font-family: var(--FONT_FAML);
        font-size: var(--FONT_SIZE);
        background-color: var(--BKGR_COLR);
        color: var(--TEXT_COLR);
}

/* Apply the header height using the CSS variable */
header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        display: flex;
        height: var(--HEDR_HGHT); /* Use the header height variable */
        padding: var(--HEDR_PADD);
        border-bottom: var(--BRDR_THCK) solid var(--BRDR_COLR);
        z-index: 100;

        justify-content: space-between;
        align-items: center;
        background-color: var(--BKGR_COLR);
}

/* Apply the footer height using the CSS variable */
footer {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        padding: var(--FOTR_PADD);
        border-top: var(--BRDR_THCK) solid var(--BRDR_COLR);
        height: var(--FOTR_HGHT); /* Use the footer height variable */
        z-index: 99;

        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: var(--BKGR_COLR);
}

/* Ensure the main content is not covered by the fixed header and footer */
.content {
        margin-top: calc(var(--HEDR_HGHT) + 2 * var(--HEDR_PADD));
        margin-bottom: calc(var(--FOTR_HGHT) + 2 * var(--FOTR_PADD));
        margin-left: calc(var(--SIDB_WIDH) + 2 * var(--SIDB_PADD) + var(--BRDR_THCK));
        padding: var(--CNTN_PADD);
}
.sidebar {
        position: fixed;
        top: calc(var(--HEDR_HGHT) + 2 * var(--HEDR_PADD) + var(--BRDR_THCK));
        left: 0;

        height: 100vh; /* stretch to the bottom */
        width: var(--SIDB_WIDH);
        padding: var(--SIDB_PADD);
        z-index: 98;

        display: flex;
        flex-direction: column;
        align-items: center;
        border-right: var(--BRDR_THCK) solid var(--BRDR_COLR);
        background-color: var(--BKGR_COLR);
}
.category {
        margin: 0px;
        padding: 10px;
        font-weight: bold;
        display: block;
        border-bottom: var(--BRDR_THCK) solid var(--BRDR_COLR);
}
.item-list {
        display: flex;
}
.item {
        display: flex; 
        flex-direction: column; 
        align-items: center; 
        padding: 10px;
}
.item-img {
        width: var(--CTLG_IMAG_WIDH);
        height: var(--CTLG_IMAG_HGHT);
}
.code-container{
        position: relative; /* scope sticky behaviour */
        width: var(--CODE_WIDH);
        height: var(--CODE_HGHT);
        background: #1e1e1e;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        overflow: auto;
}
.code-header{
        position: sticky;
        top: 0;
        padding: 5px;
        border: var(--BRDR_THCK) solid var(--BRDR_COLR);
        margin-right: 1px;

        display:flex;
        justify-content: space-around;
        align-items: center;
        overflow:auto;
        background-color: var(--CODE_HEDR_BKGR_COLR);
}
.code-header span{
        font-weight:bold;
        color: #ccc;
}
/* Basic container for the video */
#media-player {
        position: relative;
        background-color: var(--BKGR_COLR);
        width: var(--VDIO_WIDH); 
        height: calc(var(--VDIO_HGHT) + var(--VDIO_CRTL_HGHT));
}
/* Video styling */
#media-video {
        width: var(--VDIO_WIDH); 
        height: var(--VDIO_HGHT);
}

/* Media controls container */
#media-controls {
        display: flex;
        align-items: flex-end;
        justify-content: center;
        position: absolute; /* Positioned on top of the video */
        bottom: 0px; /* Place controls at the bottom */
        width: var(--VDIO_WIDH);
        height: var(--VDIO_CRTL_HGHT);
        z-index: 10; /* Keep controls on top */
}

/* Buttons */
#media-controls button {
        background-color: var(--BKGR_COLR);
        color: var(--TITL_COLR);
        height: var(--VDIO_CRTL_HGHT);
        width: var(--VDIO_CRTL_BUTN_WIDH);
        display: flex; 
        justify-content: center; 
        align-items: center; 
}
#media-controls button:hover {
        background-color: var(--HIGH_COLR);
}
#media-controls svg {
        color: var(--TITL_COLR);
        fill: currentColor;
        width: var(--VDIO_ICON_WIDH);
        height: var(--VDIO_ICON_HGHT);
}
#volume-controls {
        display: flex;
        flex-direction: column-reverse;
        justify-content: flex-start;
        align-items:stretch;
        width: var(--VDIO_CRTL_BUTN_WIDH);
        height: calc(var(--VDIO_CRTL_HGHT) + var(--VDIO_VOLB_HGHT));
}
#volume-bar-container {
        display: none; /* hide initially */
        position: relative;
        height: calc(var(--VDIO_VOLB_HGHT) - 2 * var(--BRDR_THCK));
        background-color: var(--BKGR_COLR); 
        border: var(--BRDR_THCK) solid var(--BRDR_COLR);
        cursor: pointer;
}
#volume-controls:hover #volume-bar-container {
        display:block; /* becomes visible */
}
#volume-bar {
        position: absolute;
        bottom: 0;
        width: var(--VDIO_CRTL_BUTN_WIDH);
        height: calc(var(--VDIO_VOLB_HGHT) - 2 * var(--BRDR_THCK));
        background-color: var(--BRDR_COLR); 
}
#volume-bar-container:hover #volume-bar{
        background-color: var(--HIGH_COLR);
}

/* Progress bar styling */
#progress-bar-container {
        width: var(--VDIO_CRTL_PROG_WIDH); 
        height: calc(var(--VDIO_CRTL_HGHT) - 2 * var(--BRDR_THCK));
        background-color: var(--BKGR_COLR); /* Background of the progress bar */
        border: var(--BRDR_THCK) solid var(--BRDR_COLR);
        position: relative;
        cursor: pointer;
}
#progress-bar {
        position: absolute;
        bottom: 0px;
        height: calc(var(--VDIO_CRTL_HGHT) - 2 * var(--BRDR_THCK));
        width: 0px; 
        background-color: var(--BRDR_COLR); 
}
#progress-bar-container:hover #progress-bar {
        background-color: var(--HIGH_COLR); /* Color of the progress bar */
}