/* Basic Reset and Setup */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        /* Sticky header container */
        .site-header {
            position: sticky;
            top: 0;
            z-index: 100;
            background: #C1C2B2;
            border-bottom: 3px solid black;
            padding: 6px 10px;
            
            display: flex;
            justify-content: space-between; /* left | center | right */
            /* justify-content: center;  Centered middle group that stays centered even if left/right widths differ */
            align-items: center;
        }
        
        /* Each group is a flexbox row */
        .header-group {
            display: flex;
            align-items: center;
            gap: 12px; /* spacing between elements inside each group */
        }
        
        /* Optional button styling */
        .site-header button {
            padding: 5px 15px;
            font-size: 12px;
            background: #AAE5BD;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        
        .site-header select {
            padding: 5px 10px;
            font-size: 12px;
            border-radius: 5px;
            border: 1px solid #555;
            background: #E8E8E0;
            cursor: pointer;
        }
        
        html, body {
            height: 100%; /* Ensures body takes at least the full viewport height */
        }
        
        body {
            display: flex;
            flex-direction: column; /* Stacks header, main, and footer vertically */
            min-height: 100vh; /* Ensures the body is at least the height of the viewport */
        }
        
        .content {
            flex-grow: 1; /* Allows the main content to grow and fill available space */
            padding: 20px;
        }
        
        /* Footer Styling */
        .site-footer {
            display: flex;
            justify-content: space-between; /* left item + centered group */
            align-items: center;
            padding: 5px 10px;
            background-color: #C1C2B2;
            border-top: 3px solid black;
        }
        
        /* Center the buttons inside their own container */
        .footer-buttons {
            display: flex;
            justify-content: center;
            gap: 20px; /* spacing between buttons */
            flex: 1;   /* allows true centering */
        }
        
        .footer-left {
            flex: 0 0 auto; /* stays left, no stretching */
            font-size: 8px;
        }
        
        .footer-buttons button {
            padding: 5px 20px;
            font-size: 10px;
            background-color: #AAE5BD;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }