/*@font-face {
  font-display: swap;
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  src: local('IBM Plex Sans'), url('/files/ibm-plex-sans-v22-latin-regular.woff2') format('woff2');
}*/

@font-face {
  font-display: swap;
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), url('/files/roboto-v48-latin-regular.woff2') format('woff2');
}

body {
  font-family:
    /*"IBM Plex Sans",*/
    Roboto,
    sans-serif;
}

.svg-34411 {
  height: 16px;
  vertical-align: middle;
}

.external-link::after {
  /* x-content: " ↵"; */
  /* x-content: " ↝"; */
  /* x-content: " ⤶"; */
  /* x-content: " ⇗"; */
  content: " ⇢";
  /* x-font-size: 0.9em; */
}

.my-width {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.pic-max {
  width: 400px;
  height: auto;
}

/* ------ navbar ------ */

#brand-icon {
  height: 32px;
  vertical-align: middle;
}

.my-navbar {
  background-color: var(--my-navbar-bg);
  color: var(--my-navbar-color);
  border-bottom: 1px solid var(--my-navbar-border-color);
}

.my-navbar .nav-link,
.my-navbar .navbar-brand {
  color: var(--my-navbar-color);
}

.my-navbar .nav-link.active,
.my-navbar .nav-link[aria-current="page"] {
  color: var(--my-navbar-active-color);
}

.navbar-toggler-icon {
  /* here's a color hardcoded in the svg */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%23cccccc' stroke-linecap='round' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}
.navbar-toggler {
  border-color: var(--my-navbar-color);
}

/* ------ breadcrumbs ------ */

.breadcrumb {
  background-color: var(--bs-tertiary-bg);
  opacity: 0.7;
  padding-left: 0.5rem;
  font-size: 75%;
}

.breadcrumb-item+.breadcrumb-item::before {
  content: "›";
}

.breadcrumb-item a {
  color: var(--bs-body-color);
  text-decoration: none;
}

.breadcrumb-item a:hover {
  text-decoration: underline;
}

.sitemap-description {
  font-size: 70%;
}

/* ------ footer ------ */

footer {
  font-size: 75%;
  background-color: var(--my-navbar-bg);
  color: var(--my-navbar-color);
  /*border-top: 1px solid var(--my-navbar-border-color);*/
}

/* ----------------------------------------
   Bootstrap 5.3 Dark Theme Variables
   ---------------------------------------- */

@media (prefers-color-scheme: dark) {
:root {
  /* Core foreground/background */
  --bs-body-color: #dee2e6;
  --bs-body-bg: #212529;

  /* Secondary & tertiary */
  --bs-secondary-color: rgba(222, 226, 230, 0.75);
  --bs-secondary-bg: #343a40;
  --bs-tertiary-color: rgba(222, 226, 230, 0.5);
  --bs-tertiary-bg: #2b3035;

  /* Theme colors */
  --bs-primary: #0d6efd;
  --bs-secondary: #6c757d;
  --bs-success: #198754;
  --bs-info: #0dcaf0;
  --bs-warning: #ffc107;
  --bs-danger: #dc3545;
  --bs-light: #f8f9fa;
  --bs-dark: #212529;

  /* Link */
  --bs-link-color: #66b0ff;
  --bs-link-hover-color: #99ccff;

  /* Borders */
  --bs-border-color: #495057;
  --bs-border-color-translucent: rgba(255,255,255,0.15);

  /* Subtle & emphasis variants */
  --bs-primary-bg-subtle: #031633;
  --bs-secondary-bg-subtle: #161719;
  --bs-success-bg-subtle: #051b11;
  --bs-info-bg-subtle: #032830;
  --bs-warning-bg-subtle: #332701;
  --bs-danger-bg-subtle: #2c0b0e;
  --bs-light-bg-subtle: #343a40;
  --bs-dark-bg-subtle: #1a1d20;

  --bs-primary-border-subtle: #084298;
  --bs-secondary-border-subtle: #41464b;
  --bs-success-border-subtle: #0f5132;
  --bs-info-border-subtle: #087990;
  --bs-warning-border-subtle: #997404;
  --bs-danger-border-subtle: #842029;
  --bs-light-border-subtle: #495057;
  --bs-dark-border-subtle: #343a40;

  --bs-primary-text-emphasis: #6ea8fe;
  --bs-secondary-text-emphasis: #a7acb1;
  --bs-success-text-emphasis: #75b798;
  --bs-info-text-emphasis: #6edff6;
  --bs-warning-text-emphasis: #ffda6a;
  --bs-danger-text-emphasis: #ea868f;
  --bs-light-text-emphasis: #f8f9fa;
  --bs-dark-text-emphasis: #dee2e6;

  /* Form validation */
  --bs-form-valid-color: #75b798;
  --bs-form-valid-border-color: #75b798;
  --bs-form-invalid-color: #ea868f;
  --bs-form-invalid-border-color: #ea868f;

  /* Code & highlights */
  --bs-code-color: #e685b5;
  --bs-highlight-color: #dee2e6;
  --bs-highlight-bg: #664d03;

  /* Navbar */
  --my-navbar-bg: #777777;
  --my-navbar-border-color: #dee2e6;
  --my-navbar-color: #131313;
  --my-navbar-active-color: #c9c9c9;
}
}

/* ----------------------------------------
   Bootstrap 5.3 Light Theme Variables
   ---------------------------------------- */

@media (prefers-color-scheme: light) {
:root {
  /* Core foreground/background */
  --bs-body-color: #212529;
  --bs-body-bg: #fff;

  /* Secondary & tertiary */
  --bs-secondary-color: rgba(33, 37, 41, 0.75);
  --bs-secondary-bg: #e9ecef;
  --bs-tertiary-color: rgba(33, 37, 41, 0.5);
  --bs-tertiary-bg: #f8f9fa;

  /* Theme colors */
  --bs-primary: #0d6efd;
  --bs-secondary: #6c757d;
  --bs-success: #198754;
  --bs-info: #0dcaf0;
  --bs-warning: #ffc107;
  --bs-danger: #dc3545;
  --bs-light: #f8f9fa;
  --bs-dark: #212529;

  /* Link */
  --bs-link-color: #0d6efd;
  --bs-link-hover-color: #0a58ca;

  /* Borders */
  --bs-border-color: #dee2e6;
  --bs-border-color-translucent: rgba(0, 0, 0, 0.175);

  /* Subtle & emphasis variants */
  --bs-primary-bg-subtle: #cfe2ff;
  --bs-secondary-bg-subtle: #e2e3e5;
  --bs-success-bg-subtle: #d1e7dd;
  --bs-info-bg-subtle: #cff4fc;
  --bs-warning-bg-subtle: #fff3cd;
  --bs-danger-bg-subtle: #f8d7da;
  --bs-light-bg-subtle: #fcfcfd;
  --bs-dark-bg-subtle: #ced4da;

  --bs-primary-border-subtle: #9ec5fe;
  --bs-secondary-border-subtle: #c4c8cb;
  --bs-success-border-subtle: #a3cfbb;
  --bs-info-border-subtle: #9eeaf9;
  --bs-warning-border-subtle: #ffe69c;
  --bs-danger-border-subtle: #f1aeb5;
  --bs-light-border-subtle: #e9ecef;
  --bs-dark-border-subtle: #adb5bd;

  --bs-primary-text-emphasis: #052c65;
  --bs-secondary-text-emphasis: #2b2f32;
  --bs-success-text-emphasis: #0f5132;
  --bs-info-text-emphasis: #055160;
  --bs-warning-text-emphasis: #664d03;
  --bs-danger-text-emphasis: #842029;
  --bs-light-text-emphasis: #495057;
  --bs-dark-text-emphasis: #343a40;

  /* Form validation */
  --bs-form-valid-color: #198754;
  --bs-form-valid-border-color: #198754;
  --bs-form-invalid-color: #dc3545;
  --bs-form-invalid-border-color: #dc3545;

  /* Code & highlights */
  --bs-code-color: #d63384;
  --bs-highlight-color: #212529;
  --bs-highlight-bg: #fff3cd;

  /* Navbar */
  --my-navbar-bg: #e9ecef ;
  --my-navbar-border-color: #212529;
  --my-navbar-color: #8c8c8f;
  --my-navbar-active-color: #0f0f10;
}
}

/* ------ define some classes to actually use the variables ------ */

/* Body */
body {
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
}

/* Links */
a {
  color: var(--bs-link-color);
}
a:hover {
  color: var(--bs-link-hover-color);
}

/* Buttons */
.btn-primary { background-color: var(--bs-primary) !important; border-color: var(--bs-primary) !important; color: #fff !important; }
.btn-secondary { background-color: var(--bs-secondary) !important; border-color: var(--bs-secondary) !important; color: #fff !important; }
.btn-success { background-color: var(--bs-success) !important; border-color: var(--bs-success) !important; color: #fff !important; }
.btn-info { background-color: var(--bs-info) !important; border-color: var(--bs-info) !important; color: #fff !important; }
.btn-warning { background-color: var(--bs-warning) !important; border-color: var(--bs-warning) !important; color: #000 !important; }
.btn-danger { background-color: var(--bs-danger) !important; border-color: var(--bs-danger) !important; color: #fff !important; }
.btn-light { background-color: var(--bs-light) !important; border-color: var(--bs-light) !important; color: #000 !important; }
.btn-dark { background-color: var(--bs-dark) !important; border-color: var(--bs-dark) !important; color: #fff !important; }

/* Outline buttons */
.btn-outline-primary { color: var(--bs-primary) !important; border-color: var(--bs-primary) !important; }
.btn-outline-primary:hover { background-color: var(--bs-primary) !important; color: #fff !important; }
.btn-outline-secondary { color: var(--bs-secondary) !important; border-color: var(--bs-secondary) !important; }
.btn-outline-secondary:hover { background-color: var(--bs-secondary) !important; color: #fff !important; }

/* Text utilities */
.text-primary { color: var(--bs-primary) !important; }
.text-secondary { color: var(--bs-secondary) !important; }
.text-success { color: var(--bs-success) !important; }
.text-info { color: var(--bs-info) !important; }
.text-warning { color: var(--bs-warning) !important; }
.text-danger { color: var(--bs-danger) !important; }
.text-light { color: var(--bs-light) !important; }
.text-dark { color: var(--bs-dark) !important; }
.text-body { color: var(--bs-body-color) !important; }
.text-emphasis { color: var(--bs-primary-text-emphasis) !important; }

/* Background utilities */
.bg-primary { background-color: var(--bs-primary) !important; }
.bg-secondary { background-color: var(--bs-secondary) !important; }
.bg-success { background-color: var(--bs-success) !important; }
.bg-info { background-color: var(--bs-info) !important; }
.bg-warning { background-color: var(--bs-warning) !important; }
.bg-danger { background-color: var(--bs-danger) !important; }
.bg-light { background-color: var(--bs-light) !important; }
.bg-dark { background-color: var(--bs-dark) !important; }
.bg-body { background-color: var(--bs-body-bg) !important; }
.bg-body-secondary { background-color: var(--bs-secondary-bg) !important; }
.bg-body-tertiary { background-color: var(--bs-tertiary-bg) !important; }

/* Border utilities */
.border-primary { border-color: var(--bs-primary) !important; }
.border-secondary { border-color: var(--bs-secondary) !important; }
.border-success { border-color: var(--bs-success) !important; }
.border-info { border-color: var(--bs-info) !important; }
.border-warning { border-color: var(--bs-warning) !important; }
.border-danger { border-color: var(--bs-danger) !important; }
.border-light { border-color: var(--bs-light) !important; }
.border-dark { border-color: var(--bs-dark) !important; }
.border-body { border-color: var(--bs-border-color) !important; }