/* General Reset */
body, h1, h2, h3, p, ul, li, button {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Basic Styling */
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    font-size: 16px; /* Base font size */
}

h1, h2, h3 {
    margin: 0.5em 0;
}

header {
    background: #333;
    color: #fff;
    padding: 10px;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 10;
}

.menu-button {
    cursor: pointer;
    font-size: 18px;
    display: none; /* Hidden by default for large screens */
}

/* ====================== Small Screens (≤768px) ====================== */
@media (max-width: 768px) {
    body {
        display: block;
        font-size: 14px; /* Slightly smaller base font size for small screens */
    }

    h1 {
		text-align: center;
        font-size: 1.5em; /* 21px */
		color: #555;
		margin-top: 60px;
		padding: 0px;
    }

    h2 {
        font-size: 1.25em; /* 18px */
    }

    h3 {
        font-size: 1.1em; /* 15.4px */
    }

    .menu-button {
        font-size: 1em; /* 14px for menu button text */
    }

    header {
        width: 100%; /* Ensure header spans the full width */
        height: 50px; /* Fixed height for the header */
        background: #333;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: space-between; /* Align content inside the header */
        padding: 0 10px; /* Add horizontal padding inside the header */
        box-sizing: border-box;
    }

    .menu-button {
        display: block; /* Show menu button */
        font-size: 18px;
        cursor: pointer;
    }

    main {
        display: block; /* Stack content vertically */
        margin-top: 15px; /* Push content down to clear the fixed header */
    }

    #side-menu {
        position: relative; /* Push content down when visible */
        width: 100%; /* Full-width menu */
        display: none; /* Hidden by default */
        background: #eee;
        color: #fff;
        padding: 10px;
        z-index: 5;
    }

    #side-menu ul {
        list-style: none;
        margin: 0;
        margin-left: 10px;
		background: #eee;
    }

    #side-menu ul li a {
        font-size: 1em; /* 14px for menu links */
    }

    .column {
        width: 100%; /* Full width for stacked content */
        padding: 10px;
		margin-bottom: 10px;
        border: 1px solid #ccc;
    }

    .menu-open #side-menu {
        display: block; /* Show menu when button is clicked */
    }
}


/* ====================== Medium Screens (769px - 1199px) ====================== */
@media (min-width: 769px) and (max-width: 1199px) {
    body {
        display: block;
        font-size: 15px; /* Moderate font size for medium screens */
    }

    h1 {
		text-align: center;
        font-size: 1.75em; /* 26.25px */
		color: #555;
		margin-top: 60px;
		padding: 0px;
    }

    h2 {
        font-size: 1.5em; /* 22.5px */
    }

    h3 {
        font-size: 1.25em; /* 18.75px */
    }

    .menu-button {
        font-size: 1.1em; /* 16.5px for menu button text */
    }

    header {
        width: 100%; /* Ensure header spans the full width */
        height: 50px; /* Fixed height for the header */
        background: #333;
        color: #fff;
        display: flex; /* Use Flexbox for alignment */
        align-items: center; /* Center items vertically */
        justify-content: space-between; /* Align items horizontally with space between */
        padding: 0 10px; /* Add padding inside the header */
        box-sizing: border-box;
    }

    .menu-button {
        display: block; /* Show menu button */
        font-size: 18px; /* Adjust font size */
        cursor: pointer;
    }

    main {
        display: grid; /* Use grid for three-column layout */
        grid-template-columns: 1fr 1fr 1fr; /* Three equal columns */
        gap: 10px; /* Space between columns */
        margin-top: 15px; /* Push content below the header */
    }

    #side-menu {
        position: relative; /* Push content down when visible */
        width: 100%; /* Full-width menu */
        display: none; /* Hidden by default */
        background: #eee; /* Light gray background for better readability */
        color: #333; /* Dark text for menu links */
        padding: 10px; /* Padding for the menu */
        z-index: 5; /* Ensure menu appears above other elements */
        grid-column: 1 / -1; /* Menu spans all grid columns */
    }

    #side-menu ul {
        list-style: none; /* Remove bullet points */
        margin: 0; /* Remove default margins */
        margin-left: 10px; /* Add left margin for spacing */
    }

    #side-menu ul li a {
        font-size: 1.1em; /* 16.5px for menu links */
    }

    .menu-open #side-menu {
        display: block; /* Show menu when button is clicked */
        margin-bottom: 10px; /* Add spacing between menu and content */
    }

    .column {
        padding: 10px; /* Add padding inside content sections */
        border: 1px solid #ccc; /* Add border for visual distinction */
    }
}


/* ========================= Layout for Very Large Screens (≥1200px) ========================= */
@media (min-width: 1200px) {
    body {
        font-size: 16px; /* Slightly larger base font size for large screens */
    }

	header {
		display: none;
	}
	
    h1 {
		text-align: center;
        font-size: 2em; /* 32px */
		color: #666;
		padding: 0px;
    }

    h2 {
        font-size: 1.75em; /* 28px */
    }

    h3 {
        font-size: 1.5em; /* 24px */
    }

    .menu-button {
        font-size: 1.2em; /* 19.2px for menu button text */
    }

    main {
        display: grid;
        grid-template-columns: 200px 1fr 1fr 1fr; /* Side menu and three content columns */
        gap: 10px; /* Space between columns */
        margin-top: 15px; /* Account for fixed header */
    }

    #side-menu {
        background: #444;
        color: #fff;
        height: calc(100vh - 50px); /* Full height minus header */
        position: sticky;
        top: 50px; /* Align with header */
        z-index: 5;
        grid-column: 1 / 2; /* Assign side menu to first grid column */
        width: 200px; /* Fixed width for side menu */
        /* Remove padding */
    }

    #side-menu ul {
        list-style: none;
        margin: 0;
        margin-left: 10px; /* Apply margin for visual spacing */
    }

    #side-menu ul li a {
        color: white;
        font-size: 1.0em; /* 19.2px for menu links */
		text-decoration: none;
        display: block;
        margin: 10px 0;
    }

    #side-menu ul li a:hover {
        text-decoration: none;
		color: orange;
    }

    .column {
        border: 1px solid #ccc;
        padding: 10px;
        grid-column: auto; /* Align content columns to grid structure */
    }
}



/* Cookie Popup */
.cookie-popup {
    position: fixed;
    bottom: 10px;
    left: 10px;
    background: #222;
    color: #fff;
    padding: 10px 20px;
    border-radius: 5px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    z-index: 100;
}

.cookie-buttons button {
    margin: 5px;
    padding: 5px 10px;
    background: #555;
    color: white;
    border: none;
    border-radius: 3px;
    cursor: pointer;
}

.cookie-buttons button:hover {
    background: #777;
}

.hidden {
    display: none;
}