@media (prefers-color-scheme: light) {
  :root {
    --wl-header-bg: #81c44c;
    --bs-dark: #81c44c;
    --bs-dark-rgb: 129, 196, 76;
    --wl-header-text: #3d3935;
    --wl-navi-color: #228848;
    
    --wl-focus-color: #228848;
    --wl-hover-color: #2a7339;
  }

  .navbar {
    --bs-navbar-color: #3d3935;
    --bs-navbar-brand-color: #3d3935;
    --bs-navbar-brand-hover-color: #228848;
    --bs-navbar-hover-color: #2a7339;
  }


  .nav-pills {
    --bs-nav-pills-link-active-bg: #228848;
  }

}

:root[data-bs-theme="light"] {
  --wl-header-bg: #81c44c !important;
  --bs-dark: #81c44c !important;
  --bs-dark-rgb: 129, 196, 76 !important;
  --wl-header-text: #3d3935 !important;
  --wl-navi-color: #228848 !important;
  
  --wl-focus-color: #228848 !important;
  --wl-hover-color: #2a7339 !important;
}

[data-bs-theme="light"] .navbar {
  --bs-navbar-color: #3d3935 !important;
  --bs-navbar-brand-color: #3d3935 !important;
  --bs-navbar-brand-hover-color: #228848 !important;
  --bs-navbar-hover-color: #2a7339 !important;
}


[data-bs-theme="light"] .nav-pills {
  --bs-nav-pills-link-active-bg: #228848 !important;
}



@media (prefers-color-scheme: dark) {
  :root {
    --wl-header-bg: #3d3935;
    --bs-dark: #3d3935;
    --bs-dark-rgb: 61, 57, 53;
    --wl-header-text: #e2f0d8;
    --wl-navi-color: #81c44c;
    
    --wl-focus-color: #81c448;
    --wl-hover-color: #e2f0d8;
  }

  .navbar {
    --bs-navbar-color: #e2f0d8;
    --bs-navbar-brand-color: #e2f0d8;
    --bs-navbar-brand-hover-color: #81c448;
    --bs-navbar-hover-color: #e2f0d8;
  }


  .nav-pills {
    --bs-nav-pills-link-active-bg: #81c448;
  }

}

:root[data-bs-theme="dark"] {
  --wl-header-bg: #3d3935 !important;
  --bs-dark: #3d3935 !important;
  --bs-dark-rgb: 61, 57, 53 !important;
  --wl-header-text: #e2f0d8 !important;
  --wl-navi-color: #81c44c !important;
  
  --wl-focus-color: #81c448 !important;
  --wl-hover-color: #e2f0d8 !important;
}

[data-bs-theme="dark"] .navbar {
  --bs-navbar-color: #e2f0d8 !important;
  --bs-navbar-brand-color: #e2f0d8 !important;
  --bs-navbar-brand-hover-color: #81c448 !important;
  --bs-navbar-hover-color: #e2f0d8 !important;
}


[data-bs-theme="dark"] .nav-pills {
  --bs-nav-pills-link-active-bg: #81c448 !important;
}




:root {
  --bs-font-sans-serif: 'Atkinson Hyperlegible', 'Trebuchet MS', sans-serif !important;
}
body {
  font-family: 'Atkinson Hyperlegible', 'Trebuchet MS', sans-serif;
}


.navbar-brand {
  font-family: 'Atkinson Hyperlegible', 'Trebuchet MS', sans-serif;
}