/* Responsive styles for smaller screens */
@media screen and (max-width: 800px) {
    header {
        /* Stack the header content vertically */
        text-align: center;
    }

    h1 {
        margin-left: 0px;
        margin-bottom: 20px;
    }
    
    nav {
        /* Stack the nav items vertically */
        display: block;
    }

    nav a {
        /* Style each nav link as a block for full-width */
        display: block;
        margin-bottom: 10px; /* Space between nav links */
    }

    .dropdown-btn {
        display: block; /* Show the dropdown button */
    }

    .menu {
        display: none; /* Hide the standard menu */
    }

    .container {
        grid-template-columns: 1fr; /* Full width on small screens */
        grid-gap: 0;
        padding: 3% 3% 3% 3%; /* Smaller padding on small screens */
    }

    .accordion-container {
        max-width: 100%; /* Full width on smaller screens */
        padding: 10px; /* Add padding for smaller screens */
    }

    .centered-box {
        width: 80%; /* The box takes up a larger percentage of the screen */
        padding: 15px; /* Adjust padding for smaller screens */
        font-size: 14px; /* Adjust font size for better readability on smaller screens */
    }

    .settings-container {
        order: -1; /* Move settings to the beginning on small screens */
        width: 100%;
        margin-bottom: 10px;
        width: 98%;
        position: inherit;
    }

    .nav-button {
        width: 100%; /* Full width for nav links and button on smaller screens */
        text-align: center;
    }

    .dropdown-content {
        right: auto; /* Align dropdown under the gear button on small screens */
        left: 0;
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 1;
        border-radius: 5px; /* Rounded corners */
        padding: 10px;
        top: 46%; /* Positioned below the gear button */
        left: 50%;
        transform: translateX(-50%); /* Center below the gear button */
    }
}

/* Responsive styles for larger screens */
@media screen and (min-width: 801px) {
    header {
        /* Flex layout for larger screens */
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    nav {
        /* Inline layout for nav links on larger screens */
        display: flex;
        align-items: center;
    }

    .dropdown-btn, .dropdown-menu {
        display: none; /* Keep dropdown elements hidden on larger screens */
    }

    .container {
        grid-template-columns: minmax(200px, 20%) 1fr; /* Sidebar takes up to 25% */
    }

    /* Adjusting left menu styles */
    .menu {
        background-color: #f0f0f0;
        border: 1px solid #ccc;
        border-radius: 4px;
        padding: 10px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        display: block; /* Display the menu */
        width: 100%; /* Full width of the grid column */
    }

    .accordion-container {
        display: flex;
        flex-wrap: wrap; /* Allow wrapping if there are multiple buttons */
        justify-content: space-between; /* Adjust as per design requirement */
    }

    .accordion {
        flex: 1; /* Allow buttons to grow and take up equal space */
        margin: 5px; /* Add margin for spacing between buttons */
        /* Adjust maximum width if needed to prevent buttons from getting too wide */
        max-width: calc(95%); /* Example: for two buttons in a row */
    }
}

/* Clearing floats */
.clearfix::after {
    content: "";
    clear: both;
    display: table;
}