:root {
    --primary: #e7a85c;
    --primary-hover: #d19640;
    --primary-inverse: #212529;
    --primary-white: #f8f9fa;
}

/* Light theme */
[data-theme="light"] {
    --background: var(--primary-white);
    --text: var(--primary-inverse);
}

/* Dark theme */
[data-theme="dark"] {
    --background: var(--primary-inverse);
    --text: var(--primary-white);
}

body {
    background-color: var(--background);
    color: var(--text);
    font-family: 'Fira Code';
    font-variant-ligatures: normal;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Fira Code';
}

header, footer {
    background-color: var(--primary);
    color: var(--primary-inverse);
    padding: 1rem;
}

.container {
    /* max-width: 800px; */
    margin: 0 auto;
    padding: 1rem;
}

/* Navbar container */
header nav {
    display: flex;
    align-items: stretch;
    /* Make items fill the height */
    gap: 0
}

/* Style the flex item container */
.nav-item {
    flex: 1;
    /* Distribute space equally */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    border-radius: 0;
    transition: background-color 0.2s;
    text-align: center;
}

/* Remove default link styling */
.nav-item a {
    color: var(--primary-inverse);
    text-decoration: none;
    width: 100%;
    padding: 0.25rem;
}

/* Hover effect for the entire flex item */
.nav-item:hover {
    background-color: var(--primary-hover);
}

/* Active state for the flex item */
.nav-item a.active {
    font-weight: 700;
}


/* Style the theme toggle button */
#theme-toggle {
    color: var(--primary-inverse);
    background: none;
    border: none;
    padding: 0.25rem;
    margin: 0;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    text-decoration: none;
    width: 100%;
    text-align: center;
    --pico-box-shadow: none;
}

/* Hover effect for the theme toggle button */
.nav-item:hover #theme-toggle {
    background-color: transparent;
    color: var(--primary-inverse);
}

/* Ensure the button doesn't stand out too much */
#theme-toggle {
    opacity: 0.8;
}

footer {
    display: flex;
    justify-content: space-between;
}

footer a {
    color: var(--primary-inverse);
}

footer a.active {
    font-weight: bold;
}