/* CSS Reset/Normalize Section */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body {
    margin: 0;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
}

input, button, textarea, select {
    font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
}

/* End of Reset/Normalize */

:root,
.theme-light {
    /* General variables */
    --bs-content-width: 2000px;
    --bs-default-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    background-color: #f5f2e8;
    color: #433e38;

    /* Transition variables */
    --bs-transition-duration: 0.6s;
    --bs-transition-timing: ease-in-out;
    --bs-hover-transition-duration: 0.6s;
    --bs-focus-transition-duration: 0.6s;

    /* Button variables */
    --bs-btn-padding-x: 20px;
    --bs-btn-padding-y: 11px;
    --bs-btn-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    --bs-btn-font-size: 100%;
    --bs-btn-line-height: 100%;
    --bs-btn-font-weight: normal;
    --bs-btn-border-radius: 4px;
    --bs-btn-border-width: 1px;
    --bs-btn-disabled-opacity: 0.65;
    --bs-btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
    --bs-btn-focus-box-shadow: 0 0 0 0.25rem rgba(0, 0, 0, 0.5);

    /* Color scheme variables */
    --bs-primary-color: #bf8d5d;
    --bs-primary-border: #a04c30;
    --bs-primary-hover-border: #b05334;
    --bs-primary-hover-bg: #b56f58;

    --bs-secondary-color: #a6b1b3;
    --bs-secondary-border: #6a777a;
    --bs-secondary-hover-border: #4f6b6e;
    --bs-secondary-hover-bg: #97a2a4;

    --bs-success-color: #198754;
    --bs-success-border: #0f5132;
    --bs-success-hover-border: #146c43;
    --bs-success-hover-bg: #157a4b;

    --bs-danger-color: #dc3545;
    --bs-danger-border: #a52834;
    --bs-danger-hover-border: #b02a37;
    --bs-danger-hover-bg: #c22d3d;

    --bs-warning-color: #ffc107;
    --bs-warning-border: #cc9a06;
    --bs-warning-hover-border: #e6af07;
    --bs-warning-hover-bg: #e0a800;

    --bs-info-color: #0dcaf0;
    --bs-info-border: #0aa2c0;
    --bs-info-hover-border: #0bb5d7;
    --bs-info-hover-bg: #0bacbe;

    /* Input variables */
    --bs-input-padding-x: 14px;
    --bs-input-padding-y: 11px;
    --bs-input-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    --bs-input-font-size: 100%;
    --bs-input-line-height: 100%;
    --bs-input-font-weight: normal;
    --bs-input-border-radius: 4px;
    --bs-input-disabled-opacity: 0.65;
    --bs-input-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
    --bs-input-focus-box-shadow: 0 0 0 0.25rem rgba(0, 0, 0, 0.5);
    --bs-input-color: #4a3f35;
    --bs-input-bg: #e8e4d8;
    --bs-input-hover-border-color: #37eeff;
    --bs-input-focus-border-color: #37eeff;
    --bs-input-border-color: #31405b;
    --bs-input-border-width: 1px;
    --bs-input-form-empty-bg: #9a80b0;

    /* Navigation variables */
    --bs-nav-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    --bs-nav-font-size: 110%;
    --bs-nav-line-height: 180%;
    --bs-nav-font-weight: lighter;
    --bs-nav-color: #4a3f35;
    --bs-nav-color-hover: #c5826a;
    --bs-nav-color-focus: #c5826a;
}

.theme-dark {
    /* Dark theme body background and text color */
    background-color: #1a1e24;
    color: #e1e1e1;

    /* General variables */
    --bs-content-width: 2000px;
    --bs-default-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

    /* Transition variables - same as light theme for consistency */
    --bs-transition-duration: 0.6s;
    --bs-transition-timing: ease-in-out;
    --bs-hover-transition-duration: 0.6s;
    --bs-focus-transition-duration: 0.6s;

    /* Button variables */
    --bs-btn-padding-x: 20px;
    --bs-btn-padding-y: 11px;
    --bs-btn-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    --bs-btn-font-size: 100%;
    --bs-btn-line-height: 100%;
    --bs-btn-font-weight: normal;
    --bs-btn-border-radius: 4px;
    --bs-btn-border-width: 1px;
    --bs-btn-disabled-opacity: 0.65;

    /* Dark theme shadows */
    --bs-btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 1px 1px rgba(0, 0, 0, 0.15);
    --bs-btn-focus-box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.25);

    /* Color scheme variables for dark theme */
    --bs-primary-color: #4a9edb;
    --bs-primary-border: #3a7eac;
    --bs-primary-hover-border: #6db1e6;
    --bs-primary-hover-bg: #3d89c2;

    --bs-secondary-color: #6b7b8b;
    --bs-secondary-border: #5a6373;
    --bs-secondary-hover-border: #667689;
    --bs-secondary-hover-bg: #36404a;

    --bs-success-color: #0d6e41;
    --bs-success-border: #0a5732;
    --bs-success-hover-border: #0ebb6e;
    --bs-success-hover-bg: #0b5d37;

    --bs-danger-color: #a12636;
    --bs-danger-border: #7c1d29;
    --bs-danger-hover-border: #e34252;
    --bs-danger-hover-bg: #8c1f2d;

    --bs-warning-color: #cc9a06;
    --bs-warning-border: #99740a;
    --bs-warning-hover-border: #ffc107;
    --bs-warning-hover-bg: #b38705;

    --bs-info-color: #0aa8c5;
    --bs-info-border: #0881a9;
    --bs-info-hover-border: #0dcff4;
    --bs-info-hover-bg: #088aa3;

    /* Input variables */
    --bs-input-padding-x: 14px;
    --bs-input-padding-y: 11px;
    --bs-input-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    --bs-input-font-size: 100%;
    --bs-input-line-height: 100%;
    --bs-input-font-weight: normal;
    --bs-input-border-radius: 4px;
    --bs-input-disabled-opacity: 0.65;

    /* Dark theme shadows */
    --bs-input-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 1px 1px rgba(0, 0, 0, 0.15);
    --bs-input-focus-box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.25);

    /* Dark theme colors */
    --bs-input-color: #e1e1e1;
    --bs-input-bg: #333a45;
    --bs-input-hover-border-color: #5ebbff;
    --bs-input-focus-border-color: #5ebbff;
    --bs-input-border-color: #4a7194;
    --bs-input-border-width: 1px;
    --bs-input-form-empty-bg: #4e3f5c;

    /* Navigation variables */
    --bs-nav-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    --bs-nav-font-size: 110%;
    --bs-nav-line-height: 180%;
    --bs-nav-font-weight: lighter;
    --bs-nav-color: #a0b3c7;
    --bs-nav-color-hover: #5ebbff;
    --bs-nav-color-focus: #5ebbff;
}

/* Media Query for Dark Mode Preference */
@media (prefers-color-scheme: dark) {
    :root {
        /* Apply dark theme variables when system preference is dark */
        --bs-content-width: 2000px;
        --bs-default-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

        /* Transition variables */
        --bs-transition-duration: 0.6s;
        --bs-transition-timing: ease-in-out;
        --bs-hover-transition-duration: 0.6s;
        --bs-focus-transition-duration: 0.6s;

        /* Button variables */
        --bs-btn-padding-x: 20px;
        --bs-btn-padding-y: 11px;
        --bs-btn-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        --bs-btn-font-size: 100%;
        --bs-btn-line-height: 100%;
        --bs-btn-font-weight: normal;
        --bs-btn-border-radius: 4px;
        --bs-btn-border-width: 1px;
        --bs-btn-disabled-opacity: 0.65;

        /* Dark theme shadows */
        --bs-btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 1px 1px rgba(0, 0, 0, 0.15);
        --bs-btn-focus-box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.25);

        /* Color scheme variables for dark theme */
        --bs-primary-color: #4a9edb;
        --bs-primary-border: #3a7eac;
        --bs-primary-hover-border: #6db1e6;
        --bs-primary-hover-bg: #3d89c2;

        --bs-secondary-color: #404a54;
        --bs-secondary-border: #5a6373;
        --bs-secondary-hover-border: #667689;
        --bs-secondary-hover-bg: #36404a;

        --bs-success-color: #0d6e41;
        --bs-success-border: #0a5732;
        --bs-success-hover-border: #0ebb6e;
        --bs-success-hover-bg: #0b5d37;

        --bs-danger-color: #a12636;
        --bs-danger-border: #7c1d29;
        --bs-danger-hover-border: #e34252;
        --bs-danger-hover-bg: #8c1f2d;

        --bs-warning-color: #cc9a06;
        --bs-warning-border: #99740a;
        --bs-warning-hover-border: #ffc107;
        --bs-warning-hover-bg: #b38705;

        --bs-info-color: #0aa8c5;
        --bs-info-border: #0881a9;
        --bs-info-hover-border: #0dcff4;
        --bs-info-hover-bg: #088aa3;

        /* Input variables */
        --bs-input-padding-x: 14px;
        --bs-input-padding-y: 11px;
        --bs-input-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        --bs-input-font-size: 100%;
        --bs-input-line-height: 100%;
        --bs-input-font-weight: normal;
        --bs-input-border-radius: 4px;
        --bs-input-disabled-opacity: 0.65;

        /* Dark theme shadows */
        --bs-input-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 1px 1px rgba(0, 0, 0, 0.15);
        --bs-input-focus-box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.25);

        /* Dark theme colors */
        --bs-input-color: #e1e1e1;
        --bs-input-bg: #333a45;
        --bs-input-hover-border-color: #5ebbff;
        --bs-input-focus-border-color: #5ebbff;
        --bs-input-border-color: #4a7194;
        --bs-input-border-width: 1px;
        --bs-input-form-empty-bg: #4e3f5c;

        /* Navigation variables */
        --bs-nav-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        --bs-nav-font-size: 110%;
        --bs-nav-line-height: 180%;
        --bs-nav-font-weight: lighter;
        --bs-nav-color: #a0b3c7;
        --bs-nav-color-hover: #5ebbff;
        --bs-nav-color-focus: #5ebbff;
    }

    body {
        background-color: #1a1e24;
        color: #e1e1e1;
    }
}

/* Fallback for browsers that don't support CSS variables */
@supports not (--css: variables) {
    body {
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    }
}

body {
    font-family: var(--bs-default-font-family);
}

main > .container {
    display: block;
    width: 100%;
    margin: auto;
    max-width: var(--bs-content-width);
}

/* Button variants using the color scheme variables */
.btn-primary {
    --bs-btn-color: #333333;
    --bs-btn-bg: var(--bs-primary-color);
    --bs-btn-border-color: var(--bs-primary-border);
    --bs-btn-hover-border-color: var(--bs-primary-hover-border);
    --bs-btn-hover-bg: var(--bs-primary-hover-bg);
}

.theme-dark .btn-primary {
    --bs-btn-color: #e1e1e1;
}

.btn-secondary {
    --bs-btn-color: #3a3a3a;
    --bs-btn-bg: var(--bs-secondary-color);
    --bs-btn-border-color: var(--bs-secondary-border);
    --bs-btn-hover-border-color: var(--bs-secondary-hover-border);
    --bs-btn-hover-bg: var(--bs-secondary-hover-bg);
}

.theme-dark .btn-secondary {
    --bs-btn-color: #e8e9ea;
}

.btn-success {
    --bs-btn-color: #FFFFFF;
    --bs-btn-bg: var(--bs-success-color);
    --bs-btn-border-color: var(--bs-success-border);
    --bs-btn-hover-border-color: var(--bs-success-hover-border);
    --bs-btn-hover-bg: var(--bs-success-hover-bg);
}

.btn-danger {
    --bs-btn-color: #FFFFFF;
    --bs-btn-bg: var(--bs-danger-color);
    --bs-btn-border-color: var(--bs-danger-border);
    --bs-btn-hover-border-color: var(--bs-danger-hover-border);
    --bs-btn-hover-bg: var(--bs-danger-hover-bg);
}

.btn-warning {
    --bs-btn-color: #212529;
    --bs-btn-bg: var(--bs-warning-color);
    --bs-btn-border-color: var(--bs-warning-border);
    --bs-btn-hover-border-color: var(--bs-warning-hover-border);
    --bs-btn-hover-bg: var(--bs-warning-hover-bg);
}

.btn-info {
    --bs-btn-color: #212529;
    --bs-btn-bg: var(--bs-info-color);
    --bs-btn-border-color: var(--bs-info-border);
    --bs-btn-hover-border-color: var(--bs-info-hover-border);
    --bs-btn-hover-bg: var(--bs-info-hover-bg);
}

.btn {
    display: inline-block;
    padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
    font-family: var(--bs-btn-font-family);
    font-size: var(--bs-btn-font-size);
    font-weight: var(--bs-btn-font-weight);
    line-height: var(--bs-btn-line-height);
    color: var(--bs-btn-color);
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
    border-radius: var(--bs-btn-border-radius);
    background-color: var(--bs-btn-bg);
    transition: color var(--bs-transition-duration) var(--bs-transition-timing),
    background-color var(--bs-transition-duration) var(--bs-transition-timing),
    border-color var(--bs-hover-transition-duration) var(--bs-transition-timing),
    box-shadow var(--bs-transition-duration) var(--bs-transition-timing);
}

.btn:hover {
    border: var(--bs-btn-border-width) solid var(--bs-btn-hover-border-color);
    background-color: var(--bs-btn-hover-bg, var(--bs-btn-bg));
}

/* Focus state for buttons */
.btn:focus,
.btn:focus-visible {
    outline: 0;
    box-shadow: var(--bs-btn-focus-box-shadow);
    border-color: var(--bs-btn-hover-border-color);
}

button, [type="button"], [type="reset"], [type="submit"] {
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;
}

input,
select,
textarea{
    display: inline-block;
    width: 100%;
    box-sizing: border-box;
    padding: var(--bs-input-padding-y) var(--bs-input-padding-x);
    font-family: var(--bs-input-font-family);
    font-size: var(--bs-input-font-size);
    font-weight: var(--bs-input-font-weight);
    line-height: var(--bs-input-line-height);
    color: var(--bs-input-color);
    text-align: left;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: var(--bs-input-border-width) solid var(--bs-input-border-color);
    border-radius: var(--bs-input-border-radius);
    background-color: var(--bs-input-bg);
    transition: color var(--bs-transition-duration) var(--bs-transition-timing),
    background-color var(--bs-transition-duration) var(--bs-transition-timing),
    border-color var(--bs-hover-transition-duration) var(--bs-transition-timing),
    box-shadow var(--bs-transition-duration) var(--bs-transition-timing);
}

input:hover,
select:hover,
textarea:hover {
    border-color: var(--bs-input-hover-border-color);
}

/* Focus state for form elements */
input:focus,
select:focus,
textarea:focus {
    outline: 0;
    border-color: var(--bs-input-focus-border-color);
    box-shadow: var(--bs-input-focus-box-shadow);
}

/*=== NAV ===*/
.nav-bar {
    display: inline-block;
    background: transparent;
}

.nav-bar a, .nav-bar .nav-parent {
    font-family: var(--bs-input-font-family);
    font-size: var(--bs-input-font-size);
    font-weight: var(--bs-nav-font-weight);
    line-height: var(--bs-nav-line-height);
    color: var(--bs-nav-color);
    text-decoration: none;
    transition: all var(--bs-hover-transition-duration) var(--bs-transition-timing);
    -webkit-transition: all var(--bs-hover-transition-duration) var(--bs-transition-timing);
    -moz-transition: all var(--bs-hover-transition-duration) var(--bs-transition-timing);
}

.nav-bar a:hover, .nav-bar .nav-parent:hover {
    color: var(--bs-nav-color-hover);
}

/* Focus state for navigation */
.nav-bar a:focus,
.nav-bar .nav-parent:focus,
.nav-bar a:focus-visible,
.nav-bar .nav-parent:focus-visible {
    color: var(--bs-nav-color-focus);
    outline: 2px solid var(--bs-nav-color-focus);
    outline-offset: 2px;
}