/* basic resetting */
html { width: 100%; height: 100% }
html, body { padding: 0; margin: 0; font-family: sans-serif }
body { line-height: 100%;  min-width: 320px }
ul, li, nav, menu { list-style-type: none; padding: 0; margin: 0 }
a { text-decoration: none }
nav, input, select, textarea, a, button, div { outline: 0 }
.template { color: var(--template-text-color); background-color: var(--template-background-color) }
.template a:focus,
.template button:focus { box-shadow: 0 0 0 0.2rem var(--template-focus-color) }

/* header */
.template .header { display: flex; justify-content: space-between; flex-direction: row; flex-wrap: nowrap; align-content: stretch; height: 4rem }
.template .heading { flex-direction: row; align-self: flex-start; font-size: 1.2rem; letter-spacing: 0; margin: 0; padding: 0 0 0 0.5rem; color: inherit; font-weight: normal; line-height: 4rem }
.template .heading a { color: inherit; padding: 0.5rem; border-radius: 0.5rem }

/* header account and administrator dropdown menus */
.template .menus { background-color: inherit; padding: 0.5rem 0.5rem 0 0 }
.template .menu-group { display: inline-block; position: relative; margin: 0; padding: 0; cursor: pointer; font-size: 0.8rem; color: inherit }
.template .menu-icon { height: 2rem; width: 2rem; opacity: 0.75; margin: 0.5rem; filter: var(--template-menu-icon-filter) }
.template .menu-group-label { height: 3rem; line-height: 3rem; padding: 0 0 0 1rem } 
.template .menu-trigger { display: flex; height: 3rem; line-height: 3rem; cursor: pointer; color: inherit; border: none; background-color: transparent; padding: 0; margin: 0; border-radius: 0.5rem }
.template .menus .menu-group:first-of-type { padding-left: 0 }
.template .menu-group-active .dropdown-menu,
.template .menu-group:hover .dropdown-menu,
.template .menu-group:focus .dropdown-menu { display: block }
.template .menu-group-active .menu-icon,
.template .menu-group:hover .menu-icon,
.template .menu-group:focus .menu-icon { filter: var(--template-menu-active-icon-filter) }
.template .menu-group .menu-trigger:focus { color: var(--template-menu-trigger-focus-text-color) }
.template .menu-group .menu-trigger:focus .menu-icon { filter: var(--template-menu-focus-icon-filter) } 
.template .menu-group-active .menu-trigger:focus .menu-icon { filter: var(--template-menu-active-icon-filter) } 
.template .menu-group-active .menu-trigger .menu-icon { filter: var(--template-menu-active-icon-filter) } 
.template .menu-group-active .menu-trigger,
.template .menu-group-active .menu-trigger:focus,
.template .menu-group:hover .menu-trigger { box-shadow: 0 0.25rem 0.25rem var(--template-menu-shadow-color); background-color: var(--template-menu-background-color); color: var(--template-menu-trigger-active-text-color); border-radius: 0.5rem 0.5rem 0 0; height: 4rem; line-height: 4rem } 
.template .menu-group-active .menu-trigger,
.template .menu-group:hover .menu-trigger,
.template .menu-group:focus .menu-trigger { height: 3rem; line-height: 3rem }
.template .dropdown-menu { box-shadow: 0 0.25rem 0.25rem var(--template-menu-shadow-color); padding: 0.5rem 0.5rem 0.5rem 4rem; position: absolute; border-radius: 0.5rem; border-top-right-radius: 0; background-color: var(--template-menu-background-color); text-align: right; z-index: 99999; top: 3rem; right: 0; display: none }
.template .menu-link { border-radius: 0.25rem; white-space: nowrap; line-height: 2rem; padding: 0 1rem; margin-bottom: 0.5rem; white-space: nowrap; font-size: 0.8rem; color: var(--template-menu-link-text-color); display: block; text-decoration: none }
.template .menu-link:hover { background-color: var(--template-menu-link-hover-background-color); color: var(--template-menu-link-hover-text-color); border-radius: 0.5rem }
.template .menu-link.current-page { color: var(--template-menu-current-page-link-text-color); background-color: var(--template-menu-current-page-link-background-color) }
.template .menu-group .menu-link:last-of-type { margin-bottom: 0 }

/* navigation bar and "spillage" when links don't fit */
.template .navigation { color: var(--template-text-color); background-color: var(--template-background-color); display: flex; position: relative; height: 2.6rem }
.template .navigation-links { display: flex; white-space: nowrap; height: 3rem; line-height: 2.4rem; width: 100%; overflow-x: hidden; overflow-y: visible }
.template .navigation-links ul { margin: 0 0 0 1rem }
.template .navigation-link { display: flex; white-space: nowrap; border-radius: 0.5rem; color: inherit; margin: 0.2rem 0.5rem; height: 2rem; line-height: 2rem; padding: 0 0.5rem; font-size: 0.8rem; cursor: pointer }
.template .navigation-link:hover { background-color: var(--template-navigation-link-hover-background-color); color: var(--template-navigation-link-hover-text-color) }
.template .navigation-link:hover:focus { color: var(--template-navigation-link-hover-text-color) }
.template .navigation-link:focus { color: var(--template-navigation-link-focus-text-color) }
.template .navigation-link:focus img { filter: var(--template-navigation-link-focus-icon-filter) }
.template .navigation-link span { height: 2rem; display: block }
.template .navigation-link img { margin: 0.5rem; height: 1rem; width: 1rem; filter: var(--template-navigation-link-icon-filter) }
.template .navigation-link.current-page { color: var(--template-navigation-current-page-link-text-color); background-color: var(--template-navigation-current-page-link-background-color); border-radius: 0.5rem }
.template .navigation-link.current-page img { filter: var(--template-navigation-current-page-link-icon-filter) }
.template .navigation-link:focus img { filter: var(--template-navigation-link-focus-icon-filter) }
.template .navigation-link:hover:focus img,
.template .navigation-link:hover img,
.template .navigation-link.current-page:hover img { filter: var(--template-navigation-link-hover-icon-filter) }

.template .spillage { flex-direction: column; height: 3rem; margin-right: 0.5rem; cursor: pointer; overflow: hidden }
.template .spillage-trigger { cursor: pointer; height: 2rem; margin: 0.2rem 0; color: inherit; border: none; background-color: transparent; padding: 0 0.5rem; border-radius: 0.5rem }
.template .spillage-trigger:focus { background-color: var(--template-spillage-menu-background-color) }
.template .spillage-links { display: none; background-color: var(--template-spillage-menu-background-color); position: absolute; z-index: 99998; top: 2rem; right: 0.5rem; padding: 0.5rem 0.5rem 0.5rem 4rem; text-align: right; border-radius: 0.5rem 0 0.5rem 0.5rem }
.template .spillage-icon { margin: 0.5rem 0; width: 1rem; filter: var(--template-spillage-menu-icon-filter) }
.template .spillage-link { line-height: 2rem; font-size: 0.8rem; display: block; margin-bottom: 0.5rem; padding: 0 0.5rem; color: var(--template-spillage-menu-link-text-color) }
.template .spillage-link:hover,
.template .spillage-link:focus { background-color: var(--template-spillage-menu-link-hover-background-color); border-radius: 0.5rem; color: var(--template-spillage-menu-link-hover-text-color) }
.template .spillage-links .spillage-link:last-of-type { margin-bottom: 0 }
.template .spillage-active .spillage-links,
.template .spillage:hover .spillage-links,
.template .spillage:focus .spillage-links { display: block; box-shadow: 0 0.25rem 0.25rem var(--template-menu-shadow-color); }
.template .spillage-active .spillage-trigger,
.template .spillage:hover .spillage-trigger,
.template .spillage:focus .spillage-trigger { box-shadow: 0 0.25rem 0.25rem var(--template-menu-shadow-color); background-color: var(--template-spillage-menu-background-color); border-radius: 0.5rem 0.5rem 0 0 }
.template .spillage-trigger:focus .spillage-icon { filter: var(--template-spillage-menu-active-icon-filter) }
.template .spillage-active .spillage-icon,
.template .spillage:hover .spillage-icon,
.template .spillage:focus .spillage-icon { filter: var(--template-spillage-menu-active-icon-filter) }
@media (max-width: 960px) {
  .template .heading { padding-left: 0.5rem; font-size: 1rem }
  .template .menus { margin-right: 0; min-height: 2rem; line-height: 2rem }
  .template .menu-group .dropdown-menu:first-of-type { right: 0 }
  .template .menu-group-label { display: none !important }
  .template .menu-group img { position: unset }
  .template .dropdown-menu { right: -0.5rem } 
  .template .navigation { height: 2.5rem }
  .template .navigation-link { height: 2rem; margin-left: 0.5rem; margin-right: 0.5rem }
  .template .navigation-link:first-of-type { padding-left: 0.5rem; margin-right: 0 }
  .template .spillage-links a { font-size: 0.8rem }
  .template .navigation-links span { display: none }
}

/* 
Color settings use two tiers, you can override the variables 
at either tier to make broad or granular changes.

palette -> defines the color scheme, you can override only these 
variables to re-color everything

classes -> applies the palette to the classes, you can override
these variables to changes that only affect that element.

*/
:root {
  --template-svg-blue: invert(64%) sepia(99%) saturate(6679%) hue-rotate(208deg) brightness(100%) contrast(99%);
  --template-svg-white: invert(100%) sepia(97%) saturate(13%) hue-rotate(237deg) brightness(104%) contrast(104%);
  --template-svg-black: invert(0%) sepia(90%) saturate(0%) hue-rotate(264deg) brightness(102%) contrast(101%);
  --template-svg-light: invert(72%) sepia(8%) saturate(445%) hue-rotate(168deg) brightness(99%) contrast(90%);
  --template-body: #DDD;
  --template-blue: #0d6efd;
  --template-blue-dark: #0950b9;
  --template-blue-light: #5f9ffe;
  --template-gray: #6c757d;
  --template-light: #f8f9fa;
  --template-dark: #212529;
  --template-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

@media (prefers-color-scheme: dark) {
  :root { 
    --template-blue-light: #3f3f79;
    --template-body: #11111B;
    --template-blue: #a9b6c2;
    --template-blue-dark: #f8f9fa;
    --template-gray: #6c757d;
    --template-dark: #f8f9fa;
    --template-light: #11111B;
  }
}

:root {
  --template-background-color: var(--template-body);
  --template-text-color: var(--template-dark);
  --template-focus-color: var(--template-blue-light);
  --template-menu-icon-filter: var(--template-svg-black);
  --template-menu-focus-icon-filter: var(--template-svg-blue);
  --template-menu-active-icon-filter: var(--template-svg-white);
  --template-menu-background-color: var(--template-blue);
  --template-menu-link-text-color: var(--template-light);
  --template-menu-link-hover-text-color: var(--template-light);
  --template-menu-trigger-focus-text-color: var(--template-blue);
  --template-menu-trigger-active-text-color: var(--template-light);
  --template-menu-link-hover-background-color: var(--template-blue-dark);
  --template-menu-shadow-color: var(--template-gray);
  --template-navigation-link-icon-filter: var(--template-svg-black);
  --template-navigation-link-hover-icon-filter: var(--template-svg-white);
  --template-navigation-link-focus-icon-filter: var(--template-svg-blue);
  --template-navigation-link-focus-text-color: var(--template-blue);
  --template-navigation-link-hover-text-color: var(--template-light);
  --template-navigation-link-hover-background-color: var(--template-blue);
  --template-navigation-current-page-link-text-color: var(--template-light);
  --template-navigation-current-page-link-background-color: var(--template-blue);
  --template-navigation-current-page-link-icon-filter: var(--template-svg-white);
  --template-spillage-menu-icon-filter: var(--template-svg-black);
  --template-spillage-menu-active-icon-filter: var(--template-svg-white);
  --template-spillage-menu-background-color: var(--template-blue);
  --template-spillage-menu-link-text-color: var(--template-light);
  --template-spillage-menu-link-hover-text-color: var(--template-light);
  --template-spillage-menu-link-hover-background-color: var(--template-blue-dark);
}

@media (prefers-color-scheme: dark) {
  :root { 
    --template-focus-color: var(--template-blue-light);
    --template-menu-shadow-color: var(--template-body);
    --template-menu-icon-filter: var(--template-svg-white);
    --template-menu-focus-icon-filter: var(--template-svg-white);
    --template-menu-active-icon-filter: var(--template-svg-black);
    --template-navigation-link-icon-filter: var(--template-svg-white);
    --template-navigation-link-focus-icon-filter: var(--template-svg-light);
    --template-navigation-link-hover-icon-filter: var(--template-svg-black);
    --template-navigation-current-page-link-icon-filter: var(--template-svg-black);
    --template-spillage-menu-icon-filter: var(--template-svg-white);
    --template-spillage-menu-active-icon-filter: var(--template-svg-black);
  }
}