/* Base styles for all devices */
body {
    font-family: 'Open Sans', sans-serif;
    font-size: 16px; /* Base font size for body */
    margin: 0;
    padding: 0;
    background-color: #ffffff;
}

header {
    background-color: #f0f0f0;
    padding: 20px 0; /* Adjust vertical padding as needed */
    /* Removed flex alignment properties here to allow media queries to manage the layout */
}

@font-face {
    font-family: 'Canterbury';
    src: url('Canterbury.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

h1 {
    font-family: 'Canterbury', cursive; /* Fallback to a cursive font if Canterbury is not available */
    margin-bottom: 5px;
    margin-left: 20px;
    font-size: 42px;
    color: #333;
}

#logo {
    height: 100px;
    margin: 10px;

}

nav {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap; /* Ensure the nav items wrap on small screens */
    gap: 10px; /* Space between nav items */
}

nav a {
    color: #333;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    margin: 0 5px; /* Space between links */
    background-color: #dbdbdb;
}

.nav-button {
    background-color: #2a2a2a; /* Dark grey background */
    border: none;
    padding: 10px;
    margin: 0 5px;
    border-radius: 5px;
    cursor: pointer;
    display: inline-flex; /* Use flex to center the image */
    align-items: center; /* Align image vertically */
    justify-content: center; /* Center image horizontally */
}

.nav-button img {
    height: 20px; /* Adjust the size of your icon */
    width: auto; /* Maintain aspect ratio */
}

.nav-link {
    color: #333;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    background-color: #dbdbdb;
    transition: background-color 0.3s;
}

.nav-link:hover, .nav-button:hover, .settings-container:hover {
    background-color: #cccccc;
}

.settings-container {
    position: relative;
    display: inline-block;
    color: #333;
    text-decoration: none;
    border-radius: 5px;
    background-color: #dbdbdb;
    transition: background-color 0.3s;
}

#settingsToggle {
    background-color: transparent;
    color: #2a2a2a;
    border: none;
    cursor: pointer;
    font-size: 16px;
}

.dropdown-content {
    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: 120%; /* Positioned below the gear button */
    left: -110%;
    transform: translateX(-50%); /* Center below the gear button */
}

.dropdown-section {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px; /* Spacing between sections */
}

.dropdown-btn2 {
    background-color: #b4b4b4; /* Light shade of grey */
    color: #737373;
    border: none;
    padding: 10px 20px;
    margin: 5px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
    width: 100%; /* Full width */
}

/* Class for active state */
.dropdown-btn2.active {
    background-color: #303030; /* Vivid color for active */
    color: white;
}

.dropdown-btn2:hover {
    background-color: #343434; /* Slightly darker on hover */
}

/* Ensure the last button in a section doesn't have right margin */
.dropdown-section .dropdown-btn2:last-child {
    margin-right: 0;
}

.dropdown-btn {
    background-color: #dbdbdb;
    color: #333;
    padding: 10px;
    margin: 5px 0;
    text-decoration: none;
    border-radius: 5px;
    display: block; /* Full width */
}

nav a:hover, .dropdown-btn:hover {
    background-color: #cccccc;
}