@charset "UTF-8";
/*@use "layers";*/
:root {
  --white: #fff;
  /*--ff-base: 'Inter', sans-serif;
  --ff-heading: 'Inter', sans-serif;*/
  --ff-base: system-ui, sans-serif;
  --ff-heading: system-ui, sans-serif;
  --fs-xl: clamp(2rem, calc(2rem + ((1vw - 0.3rem) * 5)), 4rem);
  --fs-400: 1.25rem;
  --fw-normal: 400;
  --fw-heading: 700;
  --gap: clamp(8px, calc(0.5rem + ((1vw - 4.8px) * 1.25)), 16px);
  --adaptive-gap: clamp(2rem, 8vw, 4rem);
  --wrapper-padding-inline: clamp(8px, calc(0.5rem + ((1vw - 4.8px) * 1.25)), 16px);
  --wrapper-max-width: 80rem;
  --section-padding-block: 1rem;
  --clr-btn-bg: #30497B;
  --clr-btn-text: #fff;
  --clr-btn-hover-bg: #6941ab;
  --clr-btn-hover-text: #fff;
  --btn-border: 1px solid #0d1f43;
  --box-shadow: 0px 0px 50px 0px rgb(0 0 0 / 20%);
  --clr-text-header: #fff;
  --clr-hero-text: #fff;
  --form-padding: 0.5em;
  --btn-margin: .5em;
  --transition: background-color 500ms linear, color 500ms ease-in-out, box-shadow 500ms ease-in-out;
  --clr-highlight: #FCAB28;
  --card-border: 1px solid var(--card-color);
  --caption-background-color: var(--clr-hero-bg);
  --step--2: clamp(0.6944rem, 0.6944rem + 0vw, 0.6944rem);
  --step--1: clamp(0.8331rem, 0.8331rem + 0vw, 0.8331rem);
  --step-0: clamp(1rem, 1rem + 0vw, 1rem);
  --step-1: clamp(1.2rem, 1.2rem + 0vw, 1.2rem);
  --step-2: clamp(1.44rem, 1.44rem + 0vw, 1.44rem);
  --step-3: clamp(1.7281rem, 1.7281rem + 0vw, 1.7281rem);
  --step-4: clamp(2.0738rem, 2.0738rem + 0vw, 2.0738rem);
  --step-5: clamp(2.4881rem, 2.4881rem + 0vw, 2.4881rem);
}

:root,
:root[data-theme=light] {
  color-scheme: light;
  --clr-body-bg: #F5F5F5;
  --clr-text: #1f1f1f;
  --clr-text-secondary: hsl(240, 6%, 20%);
  --clr-heading: hsl(0 0% 15%);
  --clr-card-bg: hsl(0 0% 100%);
  --clr-highlight-bg: hsl(208, 50%, 45%);
  --clr-highlight-text: #000;
  --clr-text-highlight: #000;
  --clr-hero-bg: #0057a3;
  --clr-header-bg: #0057a3;
  --clr-accordion-chevron: #888;
  --clr-accordion-chevron-active: 0057a3;
  --clr-text-error: #a31c29;
  --clr-error-bg: #fff;
  --card-color: #CBCBCB;
  /*--card-border: 1px solid var(--card-color);*/
  --btn-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25);
  --clr-link: #3344dd;
  --clr-icon: #fff;
  --clr-tooltip-bg: hsl(0, 0%, 90%);
  --clr-tooltip-text: #000;
  --shadow-alpha: 15%;
  --toast-background-color: hsl(0, 0%, 90%);
  --toast-text-color: #000;
  --picklist-label-background: #fff;
  --picklist-accent-color: #4263eb;
  --thead-border-color: #000;
  --th-background-color: #f9f9f9;
  --tr-background-color-even: #f9f9f9;
  --tr-background-color-hover: hsl(210, 40%, 96%);
}

@media (prefers-color-scheme: light) {
  :root:has(#system-default:checked),
  :root[data-theme=light] {
    --clr-body-bg: #F5F5F5;
    --clr-text: #1f1f1f;
    --clr-text-secondary: hsl(240, 6%, 20%);
    --clr-heading: hsl(0 0% 15%);
    --clr-card-bg: hsl(0 0% 100%);
    --clr-highlight-bg: hsl(208, 50%, 45%);
    --clr-highlight-text: #000;
    --clr-text-highlight: #000;
    --clr-hero-bg: #0057a3;
    --clr-header-bg: #0057a3;
    --clr-accordion-chevron: #888;
    --clr-accordion-chevron-active: 0057a3;
    --clr-text-error: #a31c29;
    --clr-error-bg: #fff;
    --card-color: #CBCBCB;
    /*--card-border: 1px solid var(--card-color);*/
    --btn-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25);
    --clr-link: #3344dd;
    --clr-icon: #fff;
    --clr-tooltip-bg: hsl(0, 0%, 90%);
    --clr-tooltip-text: #000;
    --shadow-alpha: 15%;
    --toast-background-color: hsl(0, 0%, 90%);
    --toast-text-color: #000;
    --picklist-label-background: #fff;
    --picklist-accent-color: #4263eb;
    --thead-border-color: #000;
    --th-background-color: #f9f9f9;
    --tr-background-color-even: #f9f9f9;
    --tr-background-color-hover: hsl(210, 40%, 96%);
  }
}
:root[data-theme=dark] {
  color-scheme: dark;
  --clr-body-bg: #1e1e1e;
  --clr-text: #e3e3e3;
  --clr-text-secondary: hsl(240, 6%, 90%);
  --clr-heading: hsl(0 0% 100%);
  --clr-card-bg: #303030;
  --clr-highlight-text: #fff;
  --clr-highlight-bg: hsl(208, 50%, 10%);
  --clr-text-highlight: #000;
  /*--clr-hero-bg: linear-gradient(to bottom, hsl(201, 89%, 22%) 15%, hsl(184, 93%, 28%) 70%);*/
  --clr-hero-bg: #111d2f;
  --clr-header-bg: #111d2f;
  --clr-accordion-chevron: #888;
  --clr-accordion-chevron-active: 0057a3;
  --clr-text-error: #fff;
  --clr-error-bg: #9A2E30;
  --card-color: #404040;
  /*--card-border: 1px solid #404040;*/
  --btn-box-shadow: none;
  --clr-link: #98d2ff;
  --clr-icon: #fff;
  --clr-tooltip-bg: hsl(0, 0%, 16%);
  --clr-tooltip-text: #fff;
  --shadow-alpha: 50%;
  --toast-background-color: hsl(0, 0%, 16%);
  --toast-text-color: #fff;
  --picklist-label-background: #343a40;
  --picklist-accent-color: #91a7ff;
  --thead-border-color: #fff;
  --th-background-color: hsl(210, 11%, 10%);
  --tr-background-color-even: hsl(217, 33%, 17%);
  --tr-background-color-odd: hsl(0, 0%, 16%);
  --tr-background-color-hover: hsl(0, 0%, 8%);
}

@media (prefers-color-scheme: dark) {
  :root:has(#system-default:checked),
  :root[data-theme=dark] {
    --clr-body-bg: #1e1e1e;
    --clr-text: #e3e3e3;
    --clr-text-secondary: hsl(240, 6%, 90%);
    --clr-heading: hsl(0 0% 100%);
    --clr-card-bg: #303030;
    --clr-highlight-text: #fff;
    --clr-highlight-bg: hsl(208, 50%, 10%);
    --clr-text-highlight: #000;
    /*--clr-hero-bg: linear-gradient(to bottom, hsl(201, 89%, 22%) 15%, hsl(184, 93%, 28%) 70%);*/
    --clr-hero-bg: #111d2f;
    --clr-header-bg: #111d2f;
    --clr-accordion-chevron: #888;
    --clr-accordion-chevron-active: 0057a3;
    --clr-text-error: #fff;
    --clr-error-bg: #9A2E30;
    --card-color: #404040;
    /*--card-border: 1px solid #404040;*/
    --btn-box-shadow: none;
    --clr-link: #98d2ff;
    --clr-icon: #fff;
    --clr-tooltip-bg: hsl(0, 0%, 16%);
    --clr-tooltip-text: #fff;
    --shadow-alpha: 50%;
    --toast-background-color: hsl(0, 0%, 16%);
    --toast-text-color: #fff;
    --picklist-label-background: #343a40;
    --picklist-accent-color: #91a7ff;
    --thead-border-color: #fff;
    --th-background-color: hsl(210, 11%, 10%);
    --tr-background-color-even: hsl(217, 33%, 17%);
    --tr-background-color-odd: hsl(0, 0%, 16%);
    --tr-background-color-hover: hsl(0, 0%, 8%);
  }
}
.language-dropdown {
  position: absolute;
  top: 100%; /* Position below the button */
  right: 0; /* Align to the right of the header */
  background-color: white;
  border: 1px solid #ccc;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
  list-style: none;
  padding: 0;
  margin: 0;
  display: none; /* Initially hidden */
  color: var(--clr-text);
}

.language-button {
  font-size: 1rem;
  color: var(--clr-text-header);
}

.language-button .flag-icon {
  margin-right: 5px;
}

/*.language-dropdown.show {
    display: block;*/ /* Show when the button is clicked */
/*opacity: 1;
}*/
.language-button {
  border: 0;
  background: transparent;
  display: flex;
  gap: 0;
  align-items: center;
  height: 2rem;
  cursor: pointer;
  text-transform: uppercase;
  padding-inline: 4px;
}

.language-button svg {
  min-width: 2rem;
  min-height: 2rem;
}

.switch-language {
  transition: all 0.3s ease-in-out;
  display: flex;
  gap: 4px;
  align-items: center;
  font-weight: bold;
  text-transform: uppercase;
  padding: 8px;
}

/*a.switch-language {
    color: var(--white);
}

.switch-language:hover,
.switch-language:focus {*/
/*opacity: 0.8;*/
/*transform: scale(0.9);*/
/*filter: brightness(1.2);
}*/
@layer reset {
  *, *::before, *::after {
    box-sizing: border-box;
  }
  html {
    color-scheme: dark light;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeSpeed;
    hanging-punctuation: first last;
    interpolate-size: allow-keywords;
  }
  body {
    min-height: 100vh;
    text-rendering: optimizeSpeed;
    line-height: 1.5;
    margin: 0;
    padding: 0;
  }
  div,
  section,
  article {
    scrollbar-color: var(--scrollbar-color);
  }
  ul[role=list],
  ol[role=list] {
    list-style: none;
  }
  @media (prefers-reduced-motion: no-preference) {
    html:focus-within,
    :has(:target) {
      scroll-behavior: smooth;
      scroll-padding-top: 3rem;
    }
  }
  /*Remove all animations, transitions and smooth scroll for people that prefer not to see them.*/
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
  /*anchors without class attribute with glyphs in letters won't have underlines crossing them*/
  a:not([class]) {
    text-decoration-skip-ink: auto;
  }
  /*inherit fonts for inputs and buttons (they don't inherit font by default)*/
  /*remove built-in form typography styles*/
  input, textarea, button, select {
    font: inherit;
    resize: none;
  }
  img, picture, svg, video, canvas {
    font-style: italic;
    background-repeat: no-repeat;
    background-size: cover;
    max-width: 100%;
    /*display: block;*/
    vertical-align: middle;
    height: auto;
    margin: 0;
  }
  h1, h2, h3, h4, h5, h6 {
    text-wrap: balance;
    overflow-wrap: anywhere; /*avoid text overflows - without this too long words would not break and overflow*/
  }
  p {
    overflow-wrap: anywhere; /*avoid text overflows - without this too long words would not break and overflow*/
  }
  p, li, figcaption {
    max-width: 85ch; /*prevent long lines of text on anything you want to read*/
    /*text-wrap: pretty;*/ /*prevent single word lines*/
  }
  blockquote p {
    padding-inline: 0.5em;
  }
  input[type=checkbox] + label {
    display: inline-block !important;
    padding-inline-start: 1rem;
    width: auto;
  }
  :where(input[type=checkbox], input[type=radio]) {
    inline-size: 1.25rem;
    block-size: 1.25rem;
  }
  p > img,
  picture > img {
    margin-inline: auto;
  }
  p:has(img),
  p:has(picture),
  p:has(video),
  p:has(svg) {
    text-align: center;
  }
  label {
    font-size: var(--step-2);
    margin-block: 0.25rem;
    padding: 0;
  }
  label, textarea, input {
    color: var(--clr-text);
    font-weight: bold;
  }
  textarea, input {
    margin-block: 0.5em;
  }
  textarea {
    min-height: 10em;
    max-width: 80em;
  }
  /*.tab-links {
      list-style: none;
  }*/
  hr {
    width: 95%;
    margin-block: 2rem;
  }
  /*header,
  footer,
  main,
  section,
  article {
      container-type: inline-size;
  }*/
}
/* disable scrolling while dialog is open */
html:has(dialog[open]) {
  overflow: hidden;
  scrollbar-gutter: stable;
}

figure {
  padding: 0;
  margin-block-start: 1rem; /* we want it only on top, on the bottom there will be figcaption */
}

figure p {
  padding: 0;
  margin-block: 0;
}

figure img {
  padding: 0;
  margin-block: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--ff-heading);
  color: var(--clr-heading);
  margin: 0;
  padding: 0;
  line-height: 1.2; /* Tighter line-height for headings */
  margin-block-start: 0.75em; /* A larger margin-top creates a clear "break" from the content above the heading. */
  margin-block-end: 0.25em; /* A heading is semantically linked to the content that immediately follows it (usually a paragraph or list introducing the section). */
}

/*p,
h1, h2, h3, h4, h5, h6,
figcaption,
li,*/ /* List items are common text containers */
/*blockquote,*/ /* For block quotes */
/*div.text-content,*/ /* If you have a main content wrapper div */
/*span.text-block*/ /* For inline text blocks that might need these rules */ /*{
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: auto;
}*/
h1,
.h1 {
  font-size: var(--step-5);
}

h2,
.h2 {
  font-size: var(--step-4);
}

h3,
.h3 {
  font-size: var(--step-3);
}

h4,
.h4 {
  font-size: var(--step-2);
}

h5,
.h5 {
  font-size: var(--step-1);
}

h6,
.h6 {
  font-size: var(--step-0);
}

p {
  margin-block-start: 0; /* Reset default paragraph top margin */
  margin-block-end: 1em; /* Standard space between paragraphs. Consider using rem here too for consistency */
  line-height: 1.7; /* Good line-height for readability of body text */
  word-break: break-word;
}

/* Adjust the top margin of a paragraph directly following a heading */
h1 + p,
h2 + p,
h3 + p,
h4 + p,
h5 + p,
h6 + p {
  margin-block-start: 0.5em; /* Reduce space between heading and its direct paragraph */
}

/* Consistent spacing between paragraphs */
p + p {
  margin-block-start: 0.8em; /* A bit less than full paragraph margin for tight body text */
}

ul, ol {
  margin-block: 1em;
}

blockquote {
  border-inline-start: 0.25rem solid var(--clr-highlight);
  font-weight: var(--fw-heading);
  font-size: var(--step-1);
  background: var(--clr-body-bg);
  /* Margins for vertical rhythm */
  margin-block-start: 2em; /* Good space above to separate from previous content */
  margin-block-end: 2em; /* Good space below to separate from next content */
  margin-inline-start: 2em; /* Indent from the left to visually set it apart */
  margin-inline-end: 2em; /* Indent from the right for symmetry */
  /* Padding for internal spacing */
  padding-inline-start: 1.5em; /* Crucial for the visual quote indicator */
  padding-block-start: 0.5em; /* Little padding top/bottom to give content breathing room */
  padding-block-end: 0.5em;
  /* Optional: Small details for enhanced appearance */
  position: relative; /* Needed for pseudo-elements for quote marks */
}

/* Optional: Adding a large, stylistic opening quote mark */
/*blockquote::before {
    content: '“';*/ /* The actual quote character */
/*font-family: var(--ff-heading);*/ /* Can use heading font for style */
/*font-size: 4em;*/ /* Very large, relative to blockquote's font-size */
/*line-height: 1;
color: var(--clr-accent-light, #cce5ff);*/ /* Lighter accent color */
/*position: absolute;
left: -0.25em;*/ /* Adjust to align with the border or slightly outside */
/*top: -0.1em;*/ /* Adjust vertical position */
/*z-index: -1;*/ /* Place it behind the text if it overlaps */
/*opacity: 0.7;*/ /* Make it subtle */
/*}*/
/* Optional: Styling for a citation/footer within the blockquote */
/*blockquote footer {
    font-style: normal;*/ /* Reset italic for the citation */
/*font-size: 0.8em;*/ /* Smaller than the quote text */
/*color: var(--clr-text-tertiary, #777);*/ /* Even lighter color */
/*text-align: right;*/ /* Often aligned right */
/*margin-top: 1em;*/ /* Space between quote and citation */
/*}*/
/* When a blockquote directly follows a heading */
h1 + blockquote,
h2 + blockquote,
h3 + blockquote,
h4 + blockquote,
h5 + blockquote,
h6 + blockquote {
  margin-block-start: 1em; /* Keep it consistent or slightly reduce if the heading's margin-bottom is large */
}

/* When a blockquote directly follows a paragraph, adjust spacing */
p + blockquote {
  margin-top: 1em; /* Slightly reduce space if it feels too much */
}

/*blazor focuses h1 on page update because of <FocusOnNavigate RouteData="@routeData" Selector="h1" />*/
h1:focus {
  outline: none;
}

@media (width < 30rem) {
  h1, h2, h3, h4, h5, h6 {
    text-align: center;
  }
}
figcaption {
  /* Font and text styling */
  font-family: var(--ff-heading); /* Often the same font family as body text */
  font-size: var(--step-1); /* Smaller than body text to indicate it's supplementary */
  line-height: 1.4; /* Slightly tighter line-height for shorter text */
  color: var(--clr-text-secondary, #666); /* Lighter color to make it less prominent than body text */
  text-align: center; /* Common for image captions, adjust as needed */
  font-style: italic; /* Often italicized for captions */
  /* Margins for vertical rhythm */
  /*margin-block-start: 0.25rem;*/ /* Space above to separate from the image/content within the figure */
  /*margin-block-end: 1.0rem;*/ /* Space below to separate the whole figure from subsequent content */
  /* Padding (less common for figcaption itself, but good to know) */
  padding: 0; /* Usually no internal padding needed for figcaption */
}

/* remove margin block start in dialog headers */
dialog header :is(h1, h2, h3, h4, h5, h6) {
  margin-block-start: 0;
}

.wrapper {
  max-width: var(--wrapper-max-width, 80rem);
  margin-inline: auto;
  padding-inline: var(--wrapper-padding-inline, 1rem);
  /*inline-size: min(100% - calc(2 * var(--wrapper-padding-inline)), var(--wrapper-max-width));*/
}

.skip-nav-link {
  position: absolute;
  background: var(--clr-body-bg);
  padding: 0.5rem 1.5rem;
  border-radius: 0 0 0.25rem 0.25rem;
  left: 0.5rem;
  z-index: 999999;
}

@media (prefers-reduced-motion: no-preference) {
  .skip-nav-link {
    transform: translateY(-120%);
    transition: transform 250ms ease-in;
  }
  .skip-nav-link:focus {
    transform: translateY(0);
  }
}
.btn {
  display: inline-block;
  touch-action: manipulation;
  align-items: center;
  text-decoration: none;
  text-transform: uppercase;
  color: #23424A;
  font-weight: bold;
  background-color: var(--clr-btn-bg);
  color: var(--clr-btn-text);
  border-radius: 4px;
  border: var(--btn-border);
  padding: 0.5em 1em;
  margin: var(--btn-margin);
  cursor: pointer;
  box-shadow: var(--btn-box-shadow);
  text-align: center;
  font-size: var(--step-0);
  justify-content: center;
}

/*
.btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.2);
    z-index: -1;
    transition: transform 200ms ease-in;
    transform: scaleX(0);
    transform-origin: left;
    border-radius: 100px;
}

.btn:hover::after {
    transform: scaleX(1);
    transform-origin: right;
}*/
.btn:hover,
.btn:focus {
  text-decoration: none;
  background-color: #6941ab;
  color: #fff;
}

.btn.accept {
  --clr-btn-bg: #198754;
}

.btn.highlight {
  background-color: var(--clr-highlight);
  color: #000;
  white-space: nowrap;
}

.btn.highlight:hover,
.btn.highlight:focus {
  background: var(--clr-btn-hover-bg);
  color: var(--clr-btn-hover-text);
}

.btn.highlight svg {
  fill: #000;
}

.btn.highlight:hover svg,
.btn.highlight:focus svg {
  fill: var(--clr-btn-hover-text);
}

.btn svg {
  fill: var(--clr-icon);
  margin-inline: 0.5em;
  min-width: 1.5em;
  min-height: 1.5em;
}

@media (prefers-reduced-motion: no-preference) {
  .btn {
    transition: 150ms ease-in-out;
    transition-property: background, color;
  }
}
.link-effect {
  position: relative;
}

.link-effect::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 250ms ease-in, color 250ms ease-in;
}

.link-effect:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

.link-effect[aria-current=page]::after {
  background: var(--clr-highlight);
  transform: scaleX(1);
  transform-origin: left;
}

input[type=checkbox].toggle {
  appearance: none;
  display: inline-flex;
  align-items: center;
  position: relative;
  cursor: pointer;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  width: 3em;
}

input[type=checkbox].toggle + label {
  cursor: pointer;
}

input[type=checkbox].toggle::before {
  content: "";
  position: absolute;
  width: 3em;
  height: 1.5em;
  background-color: hsl(0, 80%, 90%);
  border-radius: 1em;
  margin-right: 0.25em;
}

input[type=checkbox].toggle::after {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: 0.2em;
  content: "✕";
  font-size: 0.75em;
  width: 1.8em;
  height: 1.8em;
  background-color: hsl(0, 80%, 60%);
  color: #fff;
  border-radius: 1em;
}

input[type=checkbox].toggle:checked::before {
  background-color: hsl(100, 70%, 90%);
}

input[type=checkbox].toggle:checked::after {
  content: "✓";
  transform: translateX(100%);
  background-color: hsl(100, 70%, 60%);
}

input[type=checkbox].toggle:disabled + label {
  color: #777;
}

input[type=checkbox].toggle:disabled::before {
  background-color: #ccc;
}

input[type=checkbox].toggle:disabled::after {
  background-color: #777;
}

@media (prefers-reduced-motion: no-preference) {
  input[type=checkbox].toggle::before {
    transition: background-color 200ms ease-in-out;
  }
  input[type=checkbox].toggle::after {
    transition: background-color 200ms ease-in-out, transform 200ms ease-in-out;
  }
}
.form {
  inline-size: min(100%, 40rem);
  margin-inline: auto;
}

.form label,
.form textarea,
.form input {
  display: block;
  width: 100%;
  max-width: 60em;
  scrollbar-color: var(--scrollbar-color);
  overflow-wrap: break-word;
}

/*.form input[type=checkbox] {
    display: inline-block;
    width: auto;
}*/
@keyframes fade-in {
  from {
    scale: 0.8;
    opacity: 0;
  }
  to {
    scale: 1;
    opacity: 1;
  }
  /* Ensure you have a 'to' state for clarity */
}
@keyframes fade-out {
  to {
    opacity: 0;
  }
}
@keyframes slide-fade-in {
  from {
    opacity: 0;
    transform: translateY(5vh);
  }
}
/*@forward "_tables";*/
.visually-hidden {
  visibility: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.relative {
  position: relative;
}

.flex {
  display: flex;
  gap: var(--gap, 8px);
  align-items: center;
}

.bold {
  font-weight: bold;
}

.m0 {
  margin: 0;
}

.mt-2 {
  margin-top: 2rem;
}

.m-auto {
  margin: auto;
}

.mi-auto {
  margin-inline: auto;
}

.inline-flex {
  display: inline-flex;
  align-items: center;
}

.inline-block {
  display: inline-block !important;
}

.inline-box {
  display: inline-block;
}

.small {
  font-size: 1rem;
}

.form-section {
  margin-block: 2rem;
}

.text-center {
  text-align: center;
}

.flex__row {
  flex-direction: row;
}

.flex__column {
  flex-direction: column;
}

.flex__center {
  justify-content: center;
}

.flex__end {
  justify-content: end;
}

.flex__wrap {
  flex-wrap: wrap;
}

.f-start {
  align-items: start;
}

.wrap {
  flex-wrap: wrap;
}

.nowrap {
  white-space: nowrap;
}

.hidden {
  display: none !important;
}

.grid {
  display: grid;
  gap: 0;
  /*gap: var(--gap, 1rem);*/
}

.grid__center {
  justify-content: center;
}

.validation-message,
.errors {
  color: var(--clr-text-error);
  background-color: var(--clr-error-bg);
  border: var(--card-border);
  padding: 0.5rem;
  font-weight: bold;
  max-width: 60em;
  margin-block: 0.5rem;
}

.invalid {
  outline: 1px solid var(--clr-error-bg);
}

.resize-animation-stopper * {
  animation: none !important;
  transition: none !important;
}

.fade-in {
  opacity: 0;
  transition: opacity 500ms ease-in;
  overflow: hidden;
}

.fade-in.appear {
  opacity: 1;
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0.5;
  }
}
@keyframes fade-out {
  100% {
    opacity: 0;
  }
  0% {
    opacity: 0.5;
  }
}
.from-right,
.from-left {
  opacity: 0;
}

.from-right.appear,
.from-left.appear {
  opacity: 1;
}

@keyframes from-right {
  from {
    transform: translateX(-50vh);
  }
  to {
    transform: translateX(0);
  }
}
@media (prefers-reduced-motion: no-preference) {
  .from-right,
  .from-left {
    transition: opacity 250ms ease-in, transform 400ms ease-in;
  }
  .fade-in.from-right.appear {
    animation: from-left;
    animation-duration: 500ms;
  }
  .fade-in.from-left.appear {
    animation: from-right;
    animation-duration: 500ms;
  }
}
@keyframes from-left {
  from {
    transform: translateX(50vh);
  }
  to {
    transform: translateX(0);
  }
}
.logo {
  height: 40px;
  min-width: 150px;
  margin-inline-end: 20px;
}

.logo .text {
  fill: var(--clr-text-header);
  fill-rule: nonzero;
}

@media (width <= 60rem) {
  .logo {
    margin-inline: 0;
  }
}
/*.flag-icon {
    background-size: contain;
    background-position: 50%;
    background-repeat: no-repeat;
    position: relative;
    display: inline-block;
    aspect-ratio: 1;
    width: 2rem;
    border-radius: 50%;
    border: 1px solid #000
}*/
img.flag-icon {
  display: inline-block;
  width: 2rem;
  border-radius: 50%;
  border: 1px solid #000;
}

/*.flag-icon-cs {
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+DQo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPg0KPHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMTA4MCAxMDgwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHN0eWxlPSJmaWxsLXJ1bGU6ZXZlbm9kZDtjbGlwLXJ1bGU6ZXZlbm9kZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6MjsiPg0KICAgIDxnIHRyYW5zZm9ybT0ibWF0cml4KDEuMiwwLDAsMS44LDIuMjczNzRlLTEzLDApIj4NCiAgICAgICAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjkwMCIgaGVpZ2h0PSI2MDAiIHN0eWxlPSJmaWxsOnJnYigyMTUsMjAsMjYpOyIvPg0KICAgIDwvZz4NCiAgICA8ZyB0cmFuc2Zvcm09Im1hdHJpeCgxLjIsMCwwLDEuOCwyLjI3Mzc0ZS0xMywwKSI+DQogICAgICAgIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSI5MDAiIGhlaWdodD0iMzAwIiBzdHlsZT0iZmlsbDp3aGl0ZTsiLz4NCiAgICA8L2c+DQogICAgPGcgdHJhbnNmb3JtPSJtYXRyaXgoMS4yLDAsMCwxLjgsMi4yNzM3NGUtMTMsMCkiPg0KICAgICAgICA8cGF0aCBkPSJNNDUwLDMwMEwwLDBMMCw2MDBMNDUwLDMwMFoiIHN0eWxlPSJmaWxsOnJnYigxNyw2OSwxMjYpO2ZpbGwtcnVsZTpub256ZXJvOyIvPg0KICAgIDwvZz4NCjwvc3ZnPg==)
}

.flag-icon-en {
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+DQo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPg0KPHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMTA4MCAxMDgwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHN0eWxlPSJmaWxsLXJ1bGU6ZXZlbm9kZDtjbGlwLXJ1bGU6ZXZlbm9kZDsiPg0KICAgIDxnIHRyYW5zZm9ybT0ibWF0cml4KDEuMDgsMCwwLDEuOCwtNC4yNjMyNmUtMTQsMS43MDUzZS0xMykiPg0KICAgICAgICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwMCIgaGVpZ2h0PSI2MDAiIHN0eWxlPSJmaWxsOnJnYigwLDM2LDEyNSk7Ii8+DQogICAgPC9nPg0KICAgIDxnIHRyYW5zZm9ybT0ibWF0cml4KDEuMDgsMCwwLDEuOCwtNC4yNjMyNmUtMTQsMS43MDUzZS0xMykiPg0KICAgICAgICA8cGF0aCBkPSJNMCwwTDEwMDAsNjAwTTEwMDAsMEwwLDYwMCIgc3R5bGU9ImZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTp3aGl0ZTtzdHJva2Utd2lkdGg6MTIwcHg7Ii8+DQogICAgPC9nPg0KICAgIDxnIHRyYW5zZm9ybT0ibWF0cml4KDEuMDgsMCwwLDEuOCwtNC4yNjMyNmUtMTQsMS43MDUzZS0xMykiPg0KICAgICAgICA8cGF0aCBkPSJNNTAwLDBMNTAwLDYwME0wLDMwMEwxMDAwLDMwMCIgc3R5bGU9ImZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTp3aGl0ZTtzdHJva2Utd2lkdGg6MjAwcHg7Ii8+DQogICAgPC9nPg0KICAgIDxnIHRyYW5zZm9ybT0ibWF0cml4KDEuMDgsMCwwLDEuOCwtNC4yNjMyNmUtMTQsMS43MDUzZS0xMykiPg0KICAgICAgICA8cGF0aCBkPSJNNTAwLDBMNTAwLDYwME0wLDMwMEwxMDAwLDMwMCIgc3R5bGU9ImZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpyZ2IoMjA3LDIwLDQzKTtzdHJva2Utd2lkdGg6MTIwcHg7Ii8+DQogICAgPC9nPg0KPC9zdmc+)
}

.flag-icon-sk {
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+DQo8c3ZnIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCA2MDAgNjAwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zOnNlcmlmPSJodHRwOi8vd3d3LnNlcmlmLmNvbS8iIHN0eWxlPSJmaWxsLXJ1bGU6ZXZlbm9kZDtjbGlwLXJ1bGU6ZXZlbm9kZDsiPg0KICAgIDxnIHRyYW5zZm9ybT0ibWF0cml4KDEsMCwwLDEsLTE1MCwwKSI+DQogICAgICAgIDxnIHRyYW5zZm9ybT0ibWF0cml4KDgwMCwwLDAsMTIwMCwxNTAsMCkiPg0KICAgICAgICAgICAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjAuNzUiIGhlaWdodD0iMC41IiBzdHlsZT0iZmlsbDp3aGl0ZTtmaWxsLXJ1bGU6bm9uemVybzsiLz4NCiAgICAgICAgICAgIDxyZWN0IHg9IjAiIHk9IjAuMTY3IiB3aWR0aD0iMC43NSIgaGVpZ2h0PSIwLjMzMyIgc3R5bGU9ImZpbGw6cmdiKDExLDc4LDE2Mik7ZmlsbC1ydWxlOm5vbnplcm87Ii8+DQogICAgICAgICAgICA8cmVjdCB4PSIwIiB5PSIwLjMzMyIgd2lkdGg9IjAuNzUiIGhlaWdodD0iMC4xNjciIHN0eWxlPSJmaWxsOnJnYigyMzgsMjgsMzcpO2ZpbGwtcnVsZTpub256ZXJvOyIvPg0KICAgICAgICA8L2c+DQogICAgICAgIDxnIGlkPSJzIiB0cmFuc2Zvcm09Im1hdHJpeCgxLDAsMCwxLDE4MCwtMC4yNSkiPg0KICAgICAgICAgICAgPHBhdGggZD0iTTM4OS44MzMsMTQ1LjVDMzg5LjgzMywxNDUuNSAzOTQuNSwxOTIuMjUgMzk0LjUsMjg1Ljc1QzM5My44MzMsMzgxLjI1IDMyMi40MTcsNDI5LjU4MyAyNzAsNDU1QzIxNy41ODMsNDI5LjU4MyAxNDYuMTY3LDM4MS4yNSAxNDUuNSwyODUuNzVDMTQ1LjUsMTkyLjI1IDE1MC4xNjcsMTQ1LjUgMTUwLjE2NywxNDUuNUwzODkuODMzLDE0NS41WiIgc3R5bGU9ImZpbGw6cmdiKDIzOCwyOCwzNyk7ZmlsbC1ydWxlOm5vbnplcm87Ii8+DQogICAgICAgIDwvZz4NCiAgICAgICAgPGcgdHJhbnNmb3JtPSJtYXRyaXgoMSwwLDAsMSwxODAsLTAuMjUpIj4NCiAgICAgICAgICAgIDxwYXRoIGQ9Ik0yNTkuNDE3LDQwMEwyNTkuNDE3LDI4My4wODNDMjE5LjgzMywyODMuMDgzIDIwOC41ODMsMjg2LjU4MyAxOTYuNzUsMjkwLjE2N0MxOTcuODYzLDI3OC4yMiAxOTcuODYzLDI2Ni4xOTYgMTk2Ljc1LDI1NC4yNUMyMDguNTgzLDI1Ny44MzMgMjE5LjgzMywyNjEuMzMzIDI1OS40MTcsMjYxLjMzM0wyNTkuNDE3LDIyOC44MzNDMjQ2LjkxNywyMjguODMzIDIyOS42NjcsMjI5LjMzMyAyMDkuODMzLDIzNi4wODNDMjEwLjk1MiwyMjQuMTA5IDIxMC45NTIsMjEyLjA1NyAyMDkuODMzLDIwMC4wODNDMjI5LjY2NywyMDYuNzUgMjQ2LjkxNywyMDcuMjUgMjU5LjQxNywyMDcuMjVDMjU5LjQxNywxOTcuODMzIDI1Ni41LDE3Ny41ODMgMjUyLjgzMywxNjAuODMzQzI2NC4yNTUsMTYxLjg1IDI3NS43NDUsMTYxLjg1IDI4Ny4xNjcsMTYwLjgzM0MyODMuNSwxNzcuNTgzIDI4MC41ODMsMTk3LjgzMyAyODAuNTgzLDIwNy4yNUMyOTMuMDgzLDIwNy4yNSAzMTAuMzMzLDIwNi43NSAzMzAuMTY3LDIwMC4wODNDMzI5LjA0OCwyMTIuMDU3IDMyOS4wNDgsMjI0LjEwOSAzMzAuMTY3LDIzNi4wODNDMzEwLjMzMywyMjkuMzMzIDI5My4wODMsMjI4LjgzMyAyODAuNTgzLDIyOC44MzNMMjgwLjU4MywyNjEuMzMzQzMyMC4xNjcsMjYxLjMzMyAzMzEuNDE3LDI1Ny44MzMgMzQzLjI1LDI1NC4yNUMzNDIuMTM3LDI2Ni4xOTYgMzQyLjEzNywyNzguMjIgMzQzLjI1LDI5MC4xNjdDMzMxLjQxNywyODYuNTgzIDMyMC4xNjcsMjgzLjA4MyAyODAuNTgzLDI4My4wODNMMjgwLjU4Myw0MDBMMjU5LjQxNyw0MDBaIiBzdHlsZT0iZmlsbDp3aGl0ZTtmaWxsLXJ1bGU6bm9uemVybzsiLz4NCiAgICAgICAgPC9nPg0KICAgICAgICA8ZyB0cmFuc2Zvcm09Im1hdHJpeCgxLDAsMCwxLDE4MCwtMC4yNSkiPg0KICAgICAgICAgICAgPGNsaXBQYXRoIGlkPSJfY2xpcDEiPg0KICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0zODkuODMzLDE0NS41QzM4OS44MzMsMTQ1LjUgMzk0LjUsMTkyLjI1IDM5NC41LDI4NS43NUMzOTMuODMzLDM4MS4yNSAzMjIuNDE3LDQyOS41ODMgMjcwLDQ1NUMyMTcuNTgzLDQyOS41ODMgMTQ2LjE2NywzODEuMjUgMTQ1LjUsMjg1Ljc1QzE0NS41LDE5Mi4yNSAxNTAuMTY3LDE0NS41IDE1MC4xNjcsMTQ1LjVMMzg5LjgzMywxNDUuNVoiLz4NCiAgICAgICAgICAgIDwvY2xpcFBhdGg+DQogICAgICAgICAgICA8ZyBjbGlwLXBhdGg9InVybCgjX2NsaXAxKSI+DQogICAgICAgICAgICAgICAgPHBhdGggZD0iTTIwNS4yNSw0OTEuOTE3QzE4Mi4wNzUsNDkxLjkxIDE2My4wMDcsNDU5LjI5NyAxNjMuMDA3LDQxOS42NjdDMTYzLjAwNywzODAuMDMxIDE4Mi4wOCwzNDcuNDE3IDIwNS4yNTcsMzQ3LjQxN0MyMTQuOTMsMzQ3LjQxNyAyMjQuMzE0LDM1My4wOTYgMjMxLjgzMywzNjMuNUMyNDEuMDU3LDM0MS44NTkgMjU1LjEzMywzMjkuMjE0IDI3MCwzMjkuMjE0QzI4NC44NjcsMzI5LjIxNCAyOTguOTQzLDM0MS44NTkgMzA4LjE2NywzNjMuNUMzMTUuNjg2LDM1My4wOTYgMzI1LjA3LDM0Ny40MTcgMzM0Ljc0MywzNDcuNDE3QzM1Ny45MiwzNDcuNDE3IDM3Ni45OTMsMzgwLjAzMSAzNzYuOTkzLDQxOS42NjdDMzc2Ljk5Myw0NTkuMjk3IDM1Ny45MjUsNDkxLjkxIDMzNC43NSw0OTEuOTE3TDIwNS4yNSw0OTEuOTE3WiIgc3R5bGU9ImZpbGw6cmdiKDExLDc4LDE2Mik7ZmlsbC1ydWxlOm5vbnplcm87Ii8+DQogICAgICAgICAgICA8L2c+DQogICAgICAgIDwvZz4NCiAgICAgICAgPGcgaWQ9InMxIiBzZXJpZjppZD0icyIgdHJhbnNmb3JtPSJtYXRyaXgoMSwwLDAsMSwxODAsLTAuMjUpIj4NCiAgICAgICAgICAgIDxwYXRoIGQ9Ik0zODkuODMzLDE0NS41QzM4OS44MzMsMTQ1LjUgMzk0LjUsMTkyLjI1IDM5NC41LDI4NS43NUMzOTMuODMzLDM4MS4yNSAzMjIuNDE3LDQyOS41ODMgMjcwLDQ1NUMyMTcuNTgzLDQyOS41ODMgMTQ2LjE2NywzODEuMjUgMTQ1LjUsMjg1Ljc1QzE0NS41LDE5Mi4yNSAxNTAuMTY3LDE0NS41IDE1MC4xNjcsMTQ1LjVMMzg5LjgzMywxNDUuNVoiIHN0eWxlPSJmaWxsOm5vbmU7ZmlsbC1ydWxlOm5vbnplcm87c3Ryb2tlOndoaXRlO3N0cm9rZS13aWR0aDo5cHg7Ii8+DQogICAgICAgIDwvZz4NCiAgICA8L2c+DQo8L3N2Zz4=)
}
*/
.nav {
  gap: var(--gap);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-primary {
  flex-basis: 100%;
}

.nav-landing {
  margin-block: 16px;
}

.nav-landing .nav__list {
  justify-content: end;
}

.nav__list {
  padding: 0;
  margin: 0;
  font-size: 1rem;
}

.primary-navigation {
  overflow-y: auto;
  display: flex;
  align-items: center;
}

.nav__list--secondary {
  gap: 4px;
}

.nav__list a.btn {
  padding: 0.5em 1em;
}

.nav__list a {
  text-decoration: none;
  color: var(--clr-text-header);
}

.nav__list a > [aria-hidden=true] {
  margin-inline-end: 0.5em;
  font-weight: bold;
}

.nav__link {
  /*text-transform: uppercase;*/
  text-decoration: none;
  color: var(--clr-text-header);
  font-weight: bold;
  padding: 0.5em 1em;
  display: inline-block;
  padding: 1em;
}

/*.nav__link:hover,
.nav__link:focus {
    color: var(--clr-text-highlight);*/
/*background: var(--clr-btn-hover-bg);
    color: var(--clr-btn-hover-text);*/
/*}*/
.nav__link svg {
  fill: var(--clr-text-header);
}

.primary-navigation {
  gap: 0;
}

@media (width < 60rem) {
  .nav__list--secondary {
    justify-content: flex-end;
    flex-basis: 100%;
    gap: 0;
  }
  .nav__list a {
    color: var(--clr-text);
  }
  .nav__link svg {
    fill: var(--clr-text);
  }
  .primary-navigation {
    --gap: 8px;
    position: fixed;
    inset: 0 30% 0 0;
    flex-direction: column;
    padding: min(30vh, 7rem) 2em;
    background: var(--clr-body-bg);
    z-index: 999;
    transform: translateX(-100%);
  }
  .primary-navigation[data-visible=true] {
    transform: translateX(0%);
    box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.3);
  }
}
@media (prefers-reduced-motion: no-preference) {
  .primary-navigation {
    transition: transform 400ms ease-out;
  }
}
.mobile-nav-toggle {
  display: none;
  cursor: pointer;
}

.mobile-nav-toggle .line {
  transform-origin: center;
}

.mobile-nav-toggle[data-state=opened] {
  position: fixed;
  top: 1rem;
  left: 0.5rem;
}

.mobile-nav-toggle[data-state=closed] .middle {
  transition: opacity 0ms 200ms ease-in;
}

.mobile-nav-toggle[data-state=closed] .top {
  animation: to-open-top 400ms forwards;
}

.mobile-nav-toggle[data-state=closed] .bottom {
  animation: to-open-bottom 400ms forwards;
}

.mobile-nav-toggle[data-state=opened] .middle {
  transition: opacity 200ms ease-in;
  opacity: 0;
}

.mobile-nav-toggle[data-state=opened] .top {
  animation: to-close-top 400ms forwards;
}

.mobile-nav-toggle[data-state=opened] .bottom {
  animation: to-close-bottom 400ms forwards;
}

.mobile-nav-toggle[data-state=opened] .hamburger {
  fill: var(--clr-text);
}

.hamburger {
  fill: var(--clr-icon);
}

@media (width < 60rem) {
  .mobile-nav-toggle {
    margin: 0;
    padding: 0;
    display: flex;
    position: absolute;
    background-color: transparent;
    top: calc(50% - 1rem);
    left: 0.5rem;
    z-index: 9999;
    border: 0;
  }
}
@keyframes to-close-top {
  0% {
    transform: translate(0, 0) rotate(0);
  }
  50% {
    transform: translate(0, 1rem) rotate(0);
  }
  100% {
    transform: translate(-0.9rem, 0.9rem) rotate(45deg);
  }
}
@keyframes to-close-bottom {
  0% {
    transform: translate(0, 0) rotate(0);
  }
  50% {
    transform: translate(0, -1rem) rotate(0);
  }
  100% {
    transform: translate(-0.9rem, -0.9rem) rotate(-45deg);
  }
}
@keyframes to-open-top {
  100% {
    transform: translate(0, 0) rotate(0);
  }
  50% {
    transform: translate(0, 1rem) rotate(0);
  }
  0% {
    transform: translate(-0.9rem, 0.9rem) rotate(45deg);
  }
}
@keyframes to-open-bottom {
  100% {
    transform: translate(0, 0) rotate(0);
  }
  50% {
    transform: translate(0, -1rem) rotate(0);
  }
  0% {
    transform: translate(-0.9rem, -0.9rem) rotate(-45deg);
  }
}
.theme-switcher-btn {
  border: 0;
  background: transparent;
  display: flex;
  gap: 0;
  align-items: center;
  height: 2rem;
  cursor: pointer;
  padding-inline: 4px;
}

.theme-switcher-btn svg {
  min-width: 2rem;
  min-height: 2rem;
}

/*.color-picker {
    background: var(--clr-card-bg);
    border-radius: 1rem;*/
/*box-shadow: 0 0 0 100vmax rgba(0,0,0,.3);*/
/*}*/
/*
.color-picker label {
    padding: 1rem;
    font-size: 1.1rem;
    flex-basis: 100%;
    display: flex;
}

.color-picker fieldset {
    border: 0;
    display: flex;
    flex-direction: column;
    padding: 0;
    gap: .5rem;
    margin-inline: auto;
}

.color-picker input[type="radio"] {
    appearance: none;
    width: 1.5rem;
    aspect-ratio: 1;
    outline: 3px solid var(--radio-color, currentColor);
    outline-offset: 3px;
    border-radius: 50%;
}

.color-picker input[type="radio"]:checked {
    background-color: var(--radio-color);
}

input[type="radio"]#system-default {
    --radio-color: blue;
}

input[type="radio"]#light {
    --radio-color: grey;
}

input[type="radio"]#dark {
    --radio-color: black;
}*/
.picklist {
  padding: 0;
  border: none;
  display: grid;
  align-items: flex-start;
  gap: 1px;
  max-inline-size: 45ch;
  --_border-radius: 1rem;
}
.picklist > legend {
  height: 0;
  width: 0;
  overflow: clip;
}
.picklist > label {
  --_space: .5rem;
  /*min-width: max-content;*/
  margin: 0;
  display: grid;
  align-items: center;
  gap: var(--_space);
  grid-auto-flow: column;
  grid-template-columns: auto 1fr;
  background: var(--picklist-label-background);
  padding: var(--_space);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  accent-color: var(--picklist-accent-color);
}
.picklist > label:is(:focus-within, :hover) .rich-label--title {
  color: var(--picklist-accent-color);
}
.picklist > label:first-of-type {
  border-start-start-radius: var(--_border-radius);
  border-start-end-radius: var(--_border-radius);
}
.picklist > label:last-of-type {
  border-end-start-radius: var(--_border-radius);
  border-end-end-radius: var(--_border-radius);
}
.picklist > label > input {
  margin-inline: calc(var(--_space) * 1.5);
}
.picklist > label > .rich-label {
  display: grid;
  padding-inline-end: calc(var(--_space) * 2);
}
.picklist > label > .rich-label > .rich-label--title {
  display: inline-flex;
  align-items: center;
  font-weight: var(--fw-heading);
  font-size: var(--step-1);
}
.picklist > label > .rich-label > .rich-label--desc {
  font-weight: var(--fw-normal);
  font-size: var(--step-1);
}

.dropdown {
  display: none;
  position: absolute;
  top: 5px;
  right: 0;
  opacity: 0;
  z-index: 10000;
  background-color: transparent;
  margin-top: 2rem;
  padding: 5px;
  box-shadow: rgba(2, 8, 20, 0.1) 0 2px 8px;
  background-color: var(--clr-body-bg);
  /*color: var(--clr-text);*/
  border: var(--card-border);
  border-radius: 10px;
}

.dropdown a {
  color: var(--clr-text);
}

.dropdown[data-visible=true] {
  display: block;
  opacity: 1;
}

.dropdown-toggle::after {
  display: inline-block;
  margin-left: 0.255em;
  content: "";
  border-top: 0.3em solid;
  border-right: 0.3em solid transparent;
  border-left: 0.3em solid transparent;
  border-bottom: 0;
  color: var(--clr-text-header);
}

.hero {
  background: var(--clr-hero-bg);
  color: var(--clr-hero-text);
  transition: var(--transition);
  margin: 0;
  padding-block: clamp(8px, 0.5rem + (1vw - 4.8px) * 2.5, 24px);
}

.hero h1 {
  font-size: var(--fs-xl);
  color: var(--clr-hero-text);
  margin: 0;
  padding-block: 0.25em;
}

.hero p {
  margin-bottom: 1.5em;
}

.hero__main {
  display: flex;
  gap: var(--gap, 1rem);
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.hero__img {
  max-width: 75%;
}

@media (width >= 60rem) {
  .hero__main {
    flex-direction: row;
  }
  .hero__text {
    width: 62%;
  }
  .hero__img {
    width: 35%;
    margin: 0;
  }
}
@media (width <= 30rem) {
  .hero .flex {
    justify-content: center;
  }
  .hero__text {
    text-align: center;
  }
}
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(30ch, 1fr));
  gap: var(--gap);
  text-align: center;
}

.cards.with-subgrid > .card {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span var(--subgrid-rows, 10);
  align-items: center;
  align-content: center;
}

.card {
  padding: 8px;
  background-color: var(--clr-card-bg);
  border-radius: 0.5rem;
  border: var(--card-border);
  /*border-block-start: 0.5rem solid;*/
  margin-block: 1rem;
  gap: 0;
}

.card img {
  margin-block: 1rem;
  margin-inline: auto;
}

.card h3 {
  padding: 0;
  margin: 0;
  margin-block-end: 0.5em;
}

.card p {
  align-self: start;
  padding: 0;
}

/*.card h3 {
    padding: 0;
    margin-block-start: 16px;
}*/
/*.card p {
    align-self: start;
    padding: 0;
}*/
/*.card > * {
    margin: 0;
}*/
/*@media all and (max-width: 40em) {
    .card {
        padding: 8px;
    }

    .cards {
        gap: 8px;
    }
}

@media all and (max-width: 30em) {
    .card {
        padding: 4px;
    }

    .cards {
        gap: 4px;
    }
}*/
.card-container {
  container: card/inline-size;
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
}

.card-new {
  text-align: center;
  padding: 0.5rem;
}

.card-new__desc {
  display: none;
}

@container card (min-width: 350px) {
  .card-new {
    display: grid;
    grid-template-columns: 40% 1fr;
    align-items: center;
    gap: 1rem;
    text-align: left;
  }
}
@container card (min-width: 500px) {
  .card-new__desc {
    display: block;
  }
}
.header {
  background-color: var(--clr-header-bg);
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 10000;
}

.header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  opacity: 0;
  box-shadow: 0 8px 16px -4px rgba(0, 0, 0, 0.3);
  transition: opacity 500ms ease-in;
  z-index: -1;
}

.header.sticking::after {
  opacity: 1;
}

.primary-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

@media (width < 60rem) {
  .primary-header {
    padding-left: 48px;
    padding-top: 8px;
    padding-bottom: 8px;
  }
}
.header {
  transition: transform 0.3s ease-in-out;
  view-transition-name: --header;
}

.header.hidden {
  transform: translateY(-100%);
}

::view-transition-group(--header) {
  z-index: 100;
}

.footer {
  background: var(--clr-hero-bg);
  transition: var(--transition);
  color: var(--clr-hero-text);
  /*padding: clamp(1rem, 5vw + 1rem, 3rem);*/
  padding-inline: var(--wrapper-padding-inline, 1rem);
  margin-block-start: auto;
  content-visibility: auto;
  contain-intrinsic-size: 1px 191px;
}

.footer-landing {
  margin-block-start: 50px;
}

.footer__section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  font-size: 1rem;
  color: var(--clr-text-header);
  gap: var(--gap, 1rem);
  padding: 0;
}

.footer ul {
  list-style: none;
}

.footer ul li {
  margin-block: 1em;
}

.footer__info {
  font-size: 1rem;
  padding-block: 0.5em;
}

.footer__nav a {
  font-size: 1rem;
  color: var(--clr-text-header);
}

/*footer > * {
    flex-basis: 25%;
}*/
.moveup {
  display: none;
  opacity: 0;
  border: none;
  position: fixed;
  bottom: 2%;
  left: 50%;
  background-color: gray;
  color: white;
  cursor: pointer;
  text-align: center;
  padding: 0.5rem;
  width: 3rem;
  height: 3rem;
  border-radius: 10px;
}

@media (prefers-reduced-motion: no-preference) {
  .moveup {
    transition-property: display opacity;
    transition-duration: 0.5s;
    transition-behavior: allow-discrete;
    translate: -50% 25vh;
  }
  .moveup.show {
    translate: -50% 0;
  }
  @starting-style {
    .moveup.show {
      opacity: 0;
      translate: -50% 25vh;
    }
  }
}
.moveup svg {
  width: 100%;
  height: 100%;
  display: block;
  margin: 0 auto;
  fill: #fff;
}

/*.moveup svg image {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}*/
/*.moveup[closing] {
    pointer-events: none;
    animation: fade-out 500ms forwards;
}

.moveup[showing] {
    display: block;
    animation: fade-in 500ms forwards;
}*/
.moveup.show {
  display: block;
  opacity: 0.5;
}

.moveup:hover,
.moveup:focus {
  opacity: 1;
}

/*.animated {
    animation: fadeIn 0.5s ease-in-out;
}*/
.scrim {
  display: none;
  position: fixed;
  content: "";
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  opacity: 1;
  z-index: 1000;
}

.cookies {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  margin: 0;
  z-index: 100000;
  width: 100%;
  --btn-margin: 0.25em 0.5em;
  border: var(--card-border);
  background: var(--clr-card-bg);
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
  text-align: center;
}

.cookies p {
  margin-inline: auto;
  font-size: var(--step-0);
}

.cookies img {
  width: 10vw;
}

.cookies h2 {
  font-size: var(--step-2);
  padding-block: 0;
}

.cookies a {
  font-size: var(--step-0);
}

.cookie_buttons {
  margin-inline: auto;
  justify-content: center;
  overflow-x: auto;
  display: flex;
}

.cookies button {
  padding: 5px 10px;
  margin: 5px;
}

.gui-toast {
  --_duration: 3s;
  --_bg-lightness: 90%;
  --_travel-distance: 0;
  font-family: system-ui, sans-serif;
  color: var(--toast-text-color);
  background-color: var(--toast-background-color);
  max-inline-size: min(30ch, 90vw);
  padding-block: 0.5ch;
  padding-inline: 1ch;
  border-radius: 3px;
  font-size: 1rem;
  will-change: transform;
  animation: fade-in 0.3s ease, slide-in 0.3s ease, fade-out 0.3s ease var(--_duration);
}
@media (prefers-reduced-motion: no-preference) {
  .gui-toast {
    --_travel-distance: 5vh;
  }
}

.gui-toast-group {
  position: fixed;
  z-index: 90000;
  inset-block-end: 0;
  inset-inline: 0;
  padding-block-end: 5vh;
  display: grid;
  justify-items: center;
  justify-content: center;
  gap: 1vh;
  /* optimizations */
  pointer-events: none;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
}
@keyframes fade-out {
  to {
    opacity: 0;
  }
}
@keyframes slide-in {
  from {
    transform: translateY(var(--_travel-distance, 10px));
  }
}
/*@custom-media --motionOK (prefers-reduced-motion: no-preference);
@custom-media --dark (prefers-color-scheme: dark);*/
.modal {
  position: fixed;
  overflow: auto;
  z-index: 100000000;
  max-width: min(80%, 70rem);
  padding: 1em;
  box-shadow: var(--shadow-2);
  background: var(--clr-card-bg);
  border: 0;
  border-radius: 0.25rem;
  color: var(--clr-text);
  font-size: var(--step-0);
  border-radius: 0.5rem;
  border: var(--card-border);
  display: none;
  opacity: 0;
}

.modal .btn {
  padding: 0.5em 0.75em;
  max-width: 90%;
}

.modal__close {
  float: right;
  width: 2.5rem;
  height: 2.5rem;
  background-color: transparent;
  color: var(--clr-text);
  font-size: 2rem;
  cursor: pointer;
  border: none;
}

/*.modal[closing] {
    display: block;
    pointer-events: none;
    inset: 0;
    animation: fade-out 500ms forwards;
}*/
.modal::backdrop {
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
}

/*.modal[open] {
    animation: fade-id 500ms forwards;
}

.modal[open]::backdrop {
    animation: fade-id 500ms forwards;
}
*/
/*.modal__close {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 2.5rem;
    height: 2.5rem;
    background-color: transparent;
    color: var(--clr-text);
    font-size: 2rem;
    cursor: pointer;
    border: none;
}
*/
@media (prefers-reduced-motion: no-preference) {
  .modal {
    transition-property: overlay display opacity;
    transition-duration: 0.5s;
    transition-behavior: allow-discrete;
  }
  .modal[open] {
    display: block;
    opacity: 1;
  }
  @starting-style {
    .modal[open] {
      opacity: 0;
    }
  }
  .modal::backdrop {
    transition-property: overlay display opacity;
    transition-duration: 0.5s;
    transition-behavior: allow-discrete;
  }
  .modal[open]::backdrop {
    opacity: 0.75;
  }
  @starting-style {
    .modal[open]::backdrop {
      opacity: 0;
    }
  }
}
.share-dialog__icon {
  width: 40px;
  height: 40px;
  margin: 1rem;
}

.share-dialog__container a {
  text-decoration: none;
}

/* remove the padding so images can take up the entire height */
.full-width-split-screen {
  margin: 0;
  padding-block: 0;
  /*background-color: var(--clr-card-bg);*/
  background-color: var(--clr-hero-bg);
  color: var(--clr-hero-text);
  /*box-shadow: var(--box-shadow);*/
  transition: var(--transition);
}

.full-width-split-screen h2 {
  color: var(--clr-hero-text);
}

/* match the section padding for the text blocks for consistency */
.full-width-split-screen > :not(picture, img) {
  padding-inline: var(--wrapper-padding-inline);
  padding-block: var(--section-padding-block);
}

@media (prefers-reduced-motion: no-preference) {
  /* Initial state (off-screen and invisible) */
  .fullbleed-image.right {
    transform: translateX(100px); /* Adjust as needed */
    opacity: 0;
  }
  .fullbleed-text.left {
    transform: translateX(-100px); /* Adjust as needed */
    opacity: 0;
  }
  .fullbleed-image.left {
    transform: translateX(-100px); /* Adjust as needed */
    opacity: 0;
  }
  .fullbleed-text.right {
    transform: translateX(100px); /* Adjust as needed */
    opacity: 0;
  }
  /* Animation on active/visible state */
  .appear .fullbleed-image.right,
  .appear .fullbleed-text.left,
  .appear .fullbleed-image.left,
  .appear .fullbleed-text.right {
    transform: unset;
    opacity: 1;
    transition: transform 0.8s ease-out, opacity 0.8s ease-out; /* Adjust duration and timing function */
  }
}
@media (width <= 60rem) {
  .full-width-split-screen.reversed {
    display: grid;
    grid-template-areas: "text" "image";
  }
  /*.full-width-split-screen:has(> picture:first-child, > img:first-child) {
      display: grid;
      grid-template-areas: 
          "text"
          "image";
  }*/
  .full-width-split-screen > img,
  .full-width-split-screen > picture > img {
    grid-area: image;
  }
  .full-width-split-screen > :not(img, picture) {
    grid-area: text;
  }
}
@media (width > 60rem) {
  .full-width-split-screen {
    /* outermost columns emulate the spacing from the .wrapper
        while the two inner columns divide the rest of the space
        into two equal parts */
    display: grid;
    grid-template-columns: minmax(var(--wrapper-padding-inline), 1fr) minmax(0, calc(var(--wrapper-max-width) / 2)) minmax(0, calc(var(--wrapper-max-width) / 2)) minmax(var(--wrapper-padding-inline), 1fr);
    /* for positioning the pseudo-elements
        to fill in the rest of the background*/
    position: relative;
  }
  .full-width-split-screen > img,
  .full-width-split-screen > picture > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .full-width-split-screen > img:first-child,
  .full-width-split-screen > picture:first-child {
    grid-column: 1/3;
  }
  .full-width-split-screen > img:last-child,
  .full-width-split-screen > picture:last-child {
    grid-column: 3/-1;
  }
  .full-width-split-screen > :not(img, picture) {
    display: grid;
    align-content: center;
    justify-items: start;
  }
  .full-width-split-screen > :not(img, picture):first-child {
    grid-column: 2/3;
    padding-left: 0;
    padding-right: clamp(1rem, 5vw, 3rem);
  }
  .full-width-split-screen > :not(img, picture):last-child {
    grid-column: 3/4;
    padding-right: 0;
    padding-left: clamp(1rem, 5vw, 3rem);
  }
  .full-width-split-screen > :not(img, picture)::before {
    content: "";
    position: absolute;
    inset: 0;
    background: inherit;
  }
  .full-width-split-screen > :not(img, picture):first-child::before {
    grid-column: 1/2;
  }
  .full-width-split-screen > :not(img, picture):last-child::before {
    grid-column: 4/5;
  }
}
.page-header {
  background: var(--clr-hero-bg);
  color: var(--clr-hero-text);
  transition: var(--transition);
  margin: 0;
  padding: 0;
}

.page-header h1 {
  color: var(--clr-hero-text);
  padding-block: 0.5em;
  margin: 0;
}

.page-header a {
  color: #fff;
}

.breadcrumbs {
  --nav-gap: 2ch;
  display: flex;
  align-items: center;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline proximity;
  gap: var(--nav-gap);
  padding: calc(var(--nav-gap) / 2);
  scroll-padding-inline: calc(var(--nav-gap) / 2);
  margin: 0;
  /* @supports (-webkit-hyphens:none) {
      & {
          scroll-snap-type: none;
      }
  }*/
}
.breadcrumbs > a:first-of-type:not(.crumb) {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--nav-gap) / 4);
}
@media (width <= 480px) {
  .breadcrumbs > a:first-of-type:not(.crumb) > .home-label {
    display: none;
  }
}
.breadcrumbs a {
  text-underline-offset: 0.25em;
  outline-offset: 3px;
  /* fix Safari inaccessible dark color scheme links */
  /* https://bugs.webkit.org/show_bug.cgi?id=226893 */
  /* @media (prefers-color-scheme: dark) {
      @supports (-webkit-hyphens:none) {
          &[href] {
              color: hsl(240 100% 81%);
          }
      }
  }*/
}
.breadcrumbs > .crumb {
  scroll-snap-align: start;
}
.breadcrumbs > .crumb:last-of-type {
  scroll-snap-align: end;
}

.crumb {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--nav-gap) / 4);
  white-space: nowrap;
  position: relative;
}
.crumb > a {
  white-space: nowrap;
}
.crumb > a[aria-current=page] {
  font-weight: bold;
}
.crumb.tree-changed ~ * {
  display: none;
}
.crumb:is(:focus-within, :hover) .crumbicon {
  --icon-shadow-size: 2px;
}
.crumb:is(:focus-within, :hover) .crumbicon svg {
  stroke-width: 2px;
}

.crumb:is(:focus-within, :hover) .crumbicon {
  --icon-shadow-size: 1px;
}

.breadcrumbs > .crumb:not(:last-of-type)::after {
  content: "›";
  margin-inline-start: 1rem;
  font-size: 2rem;
}

/*.crumb-separator {
    color: ButtonText;
}*/
.disguised-select {
  inline-size: 100%;
  block-size: 100%;
  opacity: 0.01;
  font-size: min(100%, 16px);
  /* fix iOS zoom */
}

.crumbicon {
  --size: 3ch;
  display: grid;
  grid: [stack] var(--size)/[stack] var(--size);
  place-items: center;
  border-radius: 50%;
  /*--icon-shadow-size: 0px;
  box-shadow: inset 0 0 0 var(--icon-shadow-size) currentColor;

  @media (prefers-reduced-motion: no-preference) {
      transition: box-shadow .2s ease;
  }*/
}
.crumbicon > * {
  grid-area: stack;
}
.crumbicon > svg {
  max-block-size: 100%;
  margin: calc(var(--nav-gap) / 4);
  fill: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1px;
}

:has(> tool-tip) {
  position: relative;
  /* when those parent elements have focus, hover, etc */
}
:has(> tool-tip):is(:hover, :focus-visible, :active) > tool-tip {
  opacity: 1;
  transition-delay: 200ms;
}

@media (prefers-reduced-motion: no-preference) {
  :has(> tool-tip:is([tip-position=left], [tip-position=inline-start])):not(:hover, :active) tool-tip {
    --_x: calc(var(--isRTL) * 3px * -1);
  }
  :has(> tool-tip:is([tip-position=top], [tip-position=block-start], :not([tip-position]))):not(:hover, :active) tool-tip {
    --_y: 3px;
  }
  :has(> tool-tip:is([tip-position=right], [tip-position=inline-end])):not(:hover, :active) tool-tip {
    --_x: calc(var(--isRTL) * -3px * -1);
  }
  :has(> tool-tip:is([tip-position=bottom], [tip-position=block-end])):not(:hover, :active) tool-tip {
    --_y: -3px;
  }
}
tool-tip {
  text-transform: none;
  --_p-inline: 1.5ch;
  --_p-block: .75ch;
  --_triangle-size: 7px;
  /*--_bg: hsl(0 0% 20%);*/
  --_bg: var(--clr-tooltip-bg);
  /*--_shadow-alpha: 50%;*/
  --isRTL: -1;
  --_bottom-tip: conic-gradient(from -30deg at bottom, #0000, #000 1deg 60deg, #0000 61deg) bottom / 100% 50% no-repeat;
  --_top-tip: conic-gradient(from 150deg at top, #0000, #000 1deg 60deg, #0000 61deg) top / 100% 50% no-repeat;
  --_right-tip: conic-gradient(from -120deg at right, #0000, #000 1deg 60deg, #0000 61deg) right / 50% 100% no-repeat;
  --_left-tip: conic-gradient(from 60deg at left, #0000, #000 1deg 60deg, #0000 61deg) left / 50% 100% no-repeat;
  pointer-events: none;
  user-select: none;
  opacity: 0;
  transform: translateX(var(--_x, 0)) translateY(var(--_y, 0));
  transition: opacity 0.2s ease, transform 0.2s ease;
  position: absolute;
  z-index: 10000;
  inline-size: max-content;
  max-inline-size: 25ch;
  text-align: start;
  font-size: 1rem;
  font-weight: normal;
  line-height: initial;
  padding: var(--_p-block) var(--_p-inline);
  margin: 0;
  border-radius: 5px;
  background: var(--_bg);
  color: var(--clr-tooltip-text);
  will-change: filter;
  filter: drop-shadow(0 3px 3px hsl(0, 0%, 0%, var(--shadow-alpha))) drop-shadow(0 12px 12px hsl(0, 0%, 0%, var(--shadow-alpha)));
  /* prepend some prose for screen readers only */
  /* tooltip shape is a pseudo element so we can cast a shadow */
  /* top tooltip styles */
  /* TOP || BLOCK START */
  /* RIGHT || INLINE END */
  /* BOTTOM || BLOCK END */
  /* LEFT || INLINE START */
}
tool-tip:dir(rtl) {
  --isRTL: 1;
}
tool-tip::before {
  /*content: "; Has Tooltip: ";*/
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
}
tool-tip::after {
  content: "";
  background: var(--_bg);
  position: absolute;
  z-index: -1;
  inset: 0;
  mask: var(--_tip);
}
tool-tip:is([tip-position=top], [tip-position=block-start], :not([tip-position]), [tip-position=bottom], [tip-position=block-end]) {
  text-align: center;
}
tool-tip:is([tip-position=top], [tip-position=block-start], :not([tip-position])) {
  inset-inline-start: 50%;
  inset-block-end: calc(100% + var(--_p-block) + var(--_triangle-size));
  --_x: calc(50% * var(--isRTL));
}
tool-tip:is([tip-position=top], [tip-position=block-start], :not([tip-position]))::after {
  --_tip: var(--_bottom-tip);
  inset-block-end: calc(var(--_triangle-size) * -1);
  border-block-end: var(--_triangle-size) solid transparent;
}
tool-tip:is([tip-position=right], [tip-position=inline-end]) {
  inset-inline-start: calc(100% + var(--_p-inline) + var(--_triangle-size));
  inset-block-end: 50%;
  --_y: 50%;
}
tool-tip:is([tip-position=right], [tip-position=inline-end])::after {
  --_tip: var(--_left-tip);
  inset-inline-start: calc(var(--_triangle-size) * -1);
  border-inline-start: var(--_triangle-size) solid transparent;
}
tool-tip:is([tip-position=right], [tip-position=inline-end]):dir(rtl)::after {
  --_tip: var(--_right-tip);
}
tool-tip:is([tip-position=bottom], [tip-position=block-end]) {
  inset-inline-start: 50%;
  inset-block-start: calc(100% + var(--_p-block) + var(--_triangle-size));
  --_x: calc(50% * var(--isRTL));
}
tool-tip:is([tip-position=bottom], [tip-position=block-end])::after {
  --_tip: var(--_top-tip);
  inset-block-start: calc(var(--_triangle-size) * -1);
  border-block-start: var(--_triangle-size) solid transparent;
}
tool-tip:is([tip-position=left], [tip-position=inline-start]) {
  inset-inline-end: calc(100% + var(--_p-inline) + var(--_triangle-size));
  inset-block-end: 50%;
  --_y: 50%;
}
tool-tip:is([tip-position=left], [tip-position=inline-start])::after {
  --_tip: var(--_right-tip);
  inset-inline-end: calc(var(--_triangle-size) * -1);
  border-inline-end: var(--_triangle-size) solid transparent;
}
tool-tip:is([tip-position=left], [tip-position=inline-start]):dir(rtl)::after {
  --_tip: var(--_left-tip);
}

.accordion {
  --_button-size: 3rem;
  --_panel-padding: 0.75rem;
  --_panel-gap: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.accordion * {
  margin: 0;
  padding: 0;
}

.accordion-panel {
  position: relative;
  isolation: isolate;
  min-height: calc(var(--_panel-padding) * 2 + var(--_button-size));
  border-radius: calc((var(--_panel-padding) * 2 + var(--_button-size)) / 2);
  background-color: var(--clr-card-bg);
  padding: var(--_panel-padding);
  padding-right: calc(var(--_panel-padding) * 4);
  border: var(--card-border);
  box-shadow: var(--box-shadow);
  cursor: pointer;
}

@media (prefers-reduced-motion: no-preference) {
  .accordion-content-wrapper {
    transition: grid-template-rows 400ms ease-out;
  }
}
.accordion-content {
  overflow: hidden;
}

.accordion-content-wrapper {
  display: grid;
  grid-template-rows: 0fr;
}

.accordion-panel.active .accordion-content-wrapper {
  grid-template-rows: 1fr;
}

.accordion-title {
  font-size: 1.75rem;
  font-weight: bold;
  color: #fff;
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: center;
}

.accordion-content > p {
  margin-top: 1rem;
  transform: translateY(2rem);
  opacity: 0;
  margin-left: calc(var(--_button-size) + var(--_panel-gap));
}

.accordion-panel.active p {
  transform: translateY(0);
  opacity: 1;
}

.accordion-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
  transition: filter 500ms;
}

.accordion-panel.active .accordion-image {
  filter: brightness(0.5);
}

.accordion-trigger {
  display: flex;
  align-items: center;
  gap: var(--_panel-gap);
  flex-direction: row-reverse;
  background: transparent;
  border: 0;
  padding: 0;
}

.accordion-icon {
  /*fill: var(--_panel-color);
  background-color: var(--_panel-color);*/
  background-color: transparent;
  width: var(--_button-size);
  aspect-ratio: 1/1;
  padding: 0.5rem;
  /*border-radius: 50%;*/
  z-index: 10;
}

/*.accordion-panel:nth-child(1) {
    --_panel-color: hsl(0 0 13%);*/
/*--_panel-color: hsl(201, 52%, 65%)*/
/*}

.accordion-panel:nth-child(2) {
    --_panel-color: hsl(0 0 13%);*/
/* hsl(190, 69%, 46%);*/
/*}

.accordion-panel:nth-child(3) {
    --_panel-color: hsl(0 0 13%);*/
/*hsl(0 0% 30%);*/
/*}

.accordion-panel:nth-child(4) {
    --_panel-color: hsl(0 0 13%);*/
/*hsl(220, 70%, 50%);*/
/*}

.accordion-panel:nth-child(5) {
    --_panel-color: hsl(0 0 13%);
}*/
.accordion-title::after {
  content: "";
  position: absolute;
  left: calc((var(--_panel-gap) + var(--_button-size)) * -1);
  width: calc(100% + var(--_button-size) * 2);
  height: var(--_button-size);
  background: var(--clr-hero-bg);
  z-index: -1;
  border-radius: 100vw;
}

.blog-article-detail {
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
}

/*.blog-article-detail__header {
    display: grid;
    justify-content: center;
}*/
/*.blog-article-detail__header > p {
    margin-inline: auto;
}

.blog-article-detail__header > p {
    border-radius: 8px;
}*/
.blog-article-detail__header h1 {
  margin-block: 0;
}

.blog-article-detail__header img {
  border-radius: 8px;
  width: 320px;
  height: 240px;
  margin-inline: auto;
  display: block;
}

.blog-article-detail__body {
  display: grid;
  justify-content: center;
  /*word-break: break-all;*/
}

/*@media (prefers-reduced-motion: no-preference) {
    .blog-article-detail__body img {
        animation: slide-fade-in both;
        animation-timeline: view();
        animation-range: contain 0% contain 50%;
    }
}*/
.blog-article-detail__body section {
  margin: 0;
  padding: 0;
}

.blog-article__image {
  margin-inline: auto;
  text-align: center;
}

.blog-article h2 {
  margin-block-start: 1rem;
}

.blog-article__image img {
  border-radius: 8px;
  width: 320px;
  height: 240px;
}

.blog-article section {
  margin-block: 0;
  padding-block: 0;
}

@media (width > 60rem) {
  .blog-article {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2rem;
  }
  .blog-article-detail {
    padding-inline: 5rem;
  }
  .hero__main {
    flex-direction: row;
  }
  .hero__text {
    width: 62%;
  }
  .hero__img {
    width: 32%;
    margin: 0;
  }
}
/* Default layout for .article-content-wrapper: single column, stacking */
.article-content-wrapper {
  display: grid;
  grid-template-columns: 1fr; /* Default to a single column (stacked) */
  gap: 30px; /* Default gap for stacking */
  align-items: start;
  container: article-layout/inline-size;
  margin-block: 16px;
}

/*.blog-article-detail__body {*/
/*container-type: inline-size;
    container-name: main-text-column; */ /* Give it a specific name */
/* No flex-grow or min-width: 0 needed here anymore, grid handles it */
/*}*/
@media (width >= 90rem) {
  .article-content-wrapper {
    grid-template-columns: 1fr 30ch; /* Switch to two columns: main content 1fr, sidebar 30ch */
    gap: 40px; /* Adjust gap for side-by-side */
  }
  .blog-article-detail__body {
    grid-column: 1; /* Place this item in the 1st column of the grid */
    grid-row: 1;
  }
  .sidebar {
    grid-column: 2; /* Place sidebar in the second column (right) */
    width: auto; /* Let grid determine width */
    position: sticky; /* Make it sticky */
    top: 80px; /* Stick to this position from the viewport top */
    max-height: calc(100vh - 80px); /* Max height for sticky scroll */
    overflow-y: auto;
    padding: 5px; /* Desktop padding */
    /*background-color: #f8f8f8;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    border: 1px solid #eee;*/
  }
}
/* New wrapper for semantic grouping */
.toc-wrapper {
  margin-bottom: 20px;
}

/* Block: toc */
.toc {
  padding: 15px;
  /*border: 1px solid #ccc;
  background-color: #f9f9f9;
  border-radius: 5px;*/
}

/* Element: toc__heading */
.toc__heading {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 1.2em;
  display: inline-block;
  vertical-align: middle;
}

.toc__toggle {
  background: none;
  color: #fff;
  border: none;
  cursor: pointer;
  padding: 16px;
  width: 100%;
  /* Default state (mobile first): toggle is visible */
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.toc__toggle-icon {
  width: 20px;
  height: 20px;
  display: block;
}

/* Modifier: toc__toggle-icon--minus (shown by default for expanded state) */
.toc__toggle-icon--minus {
  display: block;
}

/* Modifier: toc__toggle-icon--plus (hidden by default for expanded state) */
.toc__toggle-icon--plus {
  display: none;
}

/* Element: toc__list */
.toc__list {
  list-style: none;
  padding-inline: 16px;
  margin: 0;
  position: relative;
}

.toc__list::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 5px; /* Width of the color strip */
  height: 100%;
  background-color: transparent; /* Default state */
  transition: background-color 0.3s ease; /* Smooth transition for the strip's color */
  transform: translateX(-100%); /* Start off-screen to the left */
  opacity: 0; /* Make it invisible by default */
}

.toc__list[hidden] {
  display: none;
}

/* Icon visibility based on toc--expanded class */
.toc:not(.toc--expanded) .toc__toggle-icon--plus {
  display: block; /* Show plus when collapsed */
}

.toc:not(.toc--expanded) .toc__toggle-icon--minus {
  display: none; /* Hide minus when collapsed */
}

.toc.toc--expanded .toc__toggle-icon--plus {
  display: none; /* Hide plus when expanded */
}

.toc.toc--expanded .toc__toggle-icon--minus {
  display: block; /* Show minus when expanded */
}

/* Modifier: toc__list--nested (for sub-lists) */
.toc__list--nested {
  padding-left: 20px;
  margin-top: 5px;
}

/* Element: toc__list-item */
.toc__list-item {
  margin-bottom: 8px;
}

/* Element: toc__link */
.toc__link {
  position: relative;
  display: block;
  padding: 8px 8px 8px 6px; /* Space for the strip */
  text-decoration: none;
  /*color: #333;
  transition: background-color 0.3s ease, color 0.3s ease;*/
  /*overflow: hidden;*/
  /* Define default custom property value (optional, but good practice) */
  /*--dynamic-strip-color: transparent;*/
}

/* --- Indentation for TOC Levels --- */
/* Assuming a minimum left padding of 10px for the outermost level */
.toc__link.level1 {
  padding-left: 10px;
}

/* Each subsequent level increases left padding by 6px */
.toc__link.level2 {
  padding-left: 16px; /* 10px + 6px */
}

.toc__link.level3 {
  padding-left: 22px; /* 16px + 6px */
}

.toc__link.level4 {
  padding-left: 28px; /* 22px + 6px */
}

.toc__link.level5 {
  padding-left: 34px; /* 28px + 6px */
}

.toc__link.level6 {
  padding-left: 40px; /* 34px + 6px */
}

.toc__link:hover,
.toc__link:focus {
  text-decoration: underline;
}

/* Pseudo-element for the color strip */
.toc__link::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 5px; /* Width of the color strip */
  height: 100%;
  background-color: transparent; /* Default state */
  transition: background-color 0.3s ease; /* Smooth transition for the strip's color */
  transform: translateX(-100%); /* Start off-screen to the left */
  opacity: 0; /* Make it invisible by default */
}

/* Style for partially visible sections */
.toc__link.is-partially-visible::before {
  background-color: #f3e5f5; /* Light purple for partial visibility */
  transform: translateX(0); /* Slide in */
  opacity: 1; /* Make it visible */
}

/* Style for actively visible sections (most visible) */
.toc__link.is-visible::before {
  background-color: #00796b; /* A darker teal for active state, stands out more */
  transform: translateX(0); /* Ensure it's in view */
  opacity: 1; /* Make it visible */
}

/* Optional: Subtle background color for the link itself when active/partially active */
.toc__link.is-partially-visible {
  background-color: #fcf8fd; /* Very light subtle background for partially active */
}

.toc__link.is-visible {
  background-color: #e0f7fa; /* Slightly more visible background for active */
  font-weight: bold;
}

/*prefer media over container, because it affects picture sizes attribute*/
@media (width < 90rem) {
  .toc {
    background: var(--clr-hero-bg);
  }
  .toc__toggle h2 {
    color: #fff;
  }
  .toc__link {
    color: #fff;
  }
}
@media (width >= 90rem) {
  .toc__toggle {
    cursor: default;
    pointer-events: none; /* Prevents all mouse events */
  }
  .toc__list {
    display: block !important; /* Always show the list on desktop */
  }
  /*.toc__heading {*/ /* The element acting as a toggle */
  /*cursor: default;
      pointer-events: none;*/ /* Prevents all mouse events */
  /*}*/
  .toc__toggle-icon {
    display: none !important; /* Hides the icons visually */
  }
}
/* these styles ensure the clicked image is on top of the popover and it's backdrop */
::view-transition-group(--light-box),
::view-transition-group(--light-box-backdrop) {
  z-index: 1;
}

::view-transition-group(--light-box-img) {
  z-index: 2;
}

::view-transition-old(--light-box-img) {
  animation: fade-out 0.2s cubic-bezier(0.4, 0, 1, 1) forwards;
}

::view-transition-new(--light-box-img) {
  animation: fade-in 0.2s cubic-bezier(0, 0, 0.2, 1) forwards;
}

@keyframes fade-in {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes fade-out {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.9);
  }
}
@supports not (view-transition-name: initial) {
  /* CSS rules that apply when View Transitions are supported */
  :where(#lightbox) {
    /* cross fading is always fine, scaling not! */
    /* open state */
    /* only scale if it's ok with the user */
  }
  :where(#lightbox), :where(#lightbox)::backdrop {
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete, transform 0.5s, opacity 0.5s;
    opacity: 0;
  }
  :where(#lightbox)[open] {
    opacity: 1;
    transform: scale(1);
  }
  :where(#lightbox)[open]::backdrop {
    opacity: 1;
  }
  @starting-style {
    :where(#lightbox)[open], :where(#lightbox)[open]::backdrop {
      opacity: 0;
    }
  }
  @media (prefers-reduced-motion: no-preference) {
    :where(#lightbox) {
      transform: scale(0.95);
    }
  }
}
:where(#lightbox) {
  view-transition-name: --light-box;
  /* remove browser default styles */
  border: 0;
  padding: 0;
  contain: layout;
  /* neat radial vignette backdrop style */
  /* light-box image sizing */
}
:where(#lightbox)::backdrop {
  view-transition-name: --light-box-backdrop;
}
:where(#lightbox)::backdrop {
  background-image: radial-gradient(rgba(0, 0, 0, 0.2), 25%, rgba(0, 0, 0, 0.9333333333));
}
:where(#lightbox) > img {
  display: flex;
  max-inline-size: 100%;
  block-size: auto;
}

/*.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 10px;
    justify-content: center;
}*/
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, 320px);
  gap: 32px;
  justify-content: center;
  padding-block: 16px;
}

.gallery img {
  width: 320px;
  height: 320px;
  object-fit: cover;
}

dialog.lightbox-gallery {
  /* open state */
}
dialog.lightbox-gallery, dialog.lightbox-gallery::backdrop {
  transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete, transform 0.5s, opacity 0.5s;
  opacity: 0;
}
dialog.lightbox-gallery[open] {
  opacity: 1;
}
dialog.lightbox-gallery[open]::backdrop {
  opacity: 1;
}

dialog.lightbox-gallery[open] {
  /*    display: grid;
  place-items: center;
  grid-template-areas: "close" "image" "prev next";
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 1fr 1fr 1fr;*/
  width: 100%;
  height: 100%;
  border: none;
  padding: 0;
  background: none;
}

dialog.lightbox-gallery::backdrop {
  background-color: rgba(0, 0, 0, 0.8);
}

.lightbox-gallery button {
  border: none;
  z-index: 1;
  background-color: rgba(0, 0, 0, 0.4);
}

/*.lightbox-image {
    max-width: 90%;
    max-height: 80vh;
    display: block;
    grid-area: image;
}*/
/*
.lightbox__image {

}*/
.lightbox-gallery__container img {
  position: absolute;
  overflow: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 80vh;
  display: block;
  width: auto;
  object-fit: contain;
}

.lightbox-gallery__close {
  position: fixed;
  top: 0.5em;
  right: 0.5em;
  width: 2.5rem;
  height: 2.5rem;
  color: #fff;
  font-size: 2rem;
  cursor: pointer;
  background: none;
}

/*.lightbox-gallery-close {
    grid-area: close;
    justify-self: end;
    align-self: start;
    font-size: 24px;
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    margin: 10px;
}
*/
.lightbox-gallery__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: gray;
  color: white;
  font-size: 2rem;
  cursor: pointer;
  text-align: center;
}

.lightbox-gallery__prev {
  left: 0;
}

.lightbox-gallery__next {
  right: 0;
}

.gallery-images img {
  cursor: zoom-in;
  border-radius: 8px;
}

.full-embed {
  view-transition-name: full-embed;
}

/* Class to make an element transparent and ready to fade out/in */
.lightbox-gallery__container picture.fade-out {
  opacity: 0;
}

/* Class to make an element visible (useful when toggling from fade-out) */
.lightbox-gallery__container picture.fade-in {
  opacity: 1;
}

/*
 * Optional: Loading state
 * If you add a 'loading' class to your <img> itself, you can style it.
 * This will apply *before* the image fully loads.
 */
.lightbox-gallery__container img.loading {
  /* Example: Hide the image until loaded to prevent broken image icons */
  /* opacity: 0; */
  /* Or show a spinner / placeholder background */
  background-color: #f0f0f0; /* Light gray placeholder */
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2240%22%20stroke%3D%22%23ccc%22%20stroke-width%3D%228%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M50%2010%20a40%2040%200%200%201%200%2080%20a40%2040%200%200%201%200%20-80%22%20stroke%3D%22%23666%22%20stroke-width%3D%228%22%20fill%3D%22none%22%3E%3CanimateTransform%20attributeName%3D%22transform%22%20attributeType%3D%22XML%22%20type%3D%22rotate%22%20from%3D%220%2050%2050%22%20to%3D%22360%2050%2050%22%20dur%3D%221s%22%20repeatCount%3D%22indefinite%22%2F%3E%3C%2Fpath%3E%3C%2Fsvg%3E"); /* Simple SVG spinner */
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 50px 50px; /* Size of the spinner */
  min-height: 50px; /* Ensure space for spinner even if image is small */
}

.scroll-watcher {
  height: 10px;
  position: fixed;
  bottom: 0;
  z-index: 1000;
  background-color: var(--clr-highlight);
  width: 100%;
  scale: 0 1;
  transform-origin: left;
  display: none;
}

@keyframes scroll-watcher {
  to {
    scale: 1 1;
  }
}
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .scroll-watcher {
      display: block;
      animation: scroll-watcher linear;
      animation-timeline: scroll();
    }
  }
}
.alert {
  text-align: center;
}

.chat-button {
  position: fixed;
  bottom: 2%;
  right: 2%;
  background-color: var(--clr-highlight);
  color: white;
  cursor: pointer;
  padding: 0.5rem;
  width: 4rem;
  height: 4rem;
  opacity: 0.75;
  border: 0;
  border-radius: 10px;
  z-index: 1;
}

.chat-button:hover {
  opacity: 1;
  background-color: var(--clr-btn-hover-bg);
}

.chat-button img {
  width: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  .chat-button {
    transition-property: background opacity;
    transition-duration: 0.5s;
  }
}
.chat-window {
  background-color: var(--clr-hero-bg);
  border: 1px solid var(--card-color);
  border-radius: 10px 10px 0 0;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  position: fixed;
  bottom: 0;
  right: 2%;
  padding: 15px;
  z-index: 10001; /* Higher than the button */
  height: 50vh;
  display: none;
  max-height: 75%; /* Maximum 80% of viewport height */
  min-height: 50ch; /* Minimum height (adjust as needed) */
  max-width: 90%;
  min-width: 40ch;
  /*overflow-y: auto;*/ /* Make it scrollable if content overflows */
  font-size: 1rem;
  width: 60ch;
  overflow-y: auto;
  overflow-x: hidden; /*why is this needed??*/
}

.chat-window .form-section {
  margin-block: 0.5rem;
}

/*.chat-window .btn {
    margin: 0;
}*/
/*.chat-window button {
    margin-inline: auto;
}*/
.chat-window__header-buttons {
  display: flex;
}

.chat-window input {
  width: 100%;
}

.chat-window__loading {
  display: grid;
  justify-items: center;
  align-items: center;
  width: 100%;
  height: 100%;
  color: var(--clr-text-header);
}

.chat-window__retry-init {
  display: grid;
  justify-items: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

/*.chat-window__retry-init.show {
    display: grid;
}*/
.chat-window__load-previous {
  display: block;
  margin-inline: auto;
}

.chat-window__content {
  display: grid;
  height: 100%;
  grid-template-rows: auto 1fr auto;
}

/*.chat-window__settings {
    display: block;
}*/
.chat-window__header {
  display: grid;
  grid-template-columns: 1fr auto;
}

.chat-window__header-title {
  display: flex;
  align-items: center;
  color: var(--clr-text-header);
}

.chat-window__interactions {
  display: grid;
  grid-template-columns: 1fr auto;
}

.chat-window__close-button {
  float: right;
}

.chat-window.open {
  display: block;
}

@media (prefers-reduced-motion: no-preference) {
  .chat-window {
    transition-property: display opacity;
    transition-duration: 0.5s;
    transition-behavior: allow-discrete;
    transition-timing-function: ease-in-out;
    translate: 0 100%;
  }
  .chat-window.open {
    translate: 0 0;
  }
  @starting-style {
    .chat-window.open {
      opacity: 0;
      translate: 0 100%;
    }
  }
}
@media (prefers-reduced-motion: no-preference) and (width < 60rem) {
  .chat-window {
    translate: 50% 100%;
  }
  .chat-window.open {
    translate: 50% 0;
  }
  @starting-style {
    .chat-window.open {
      opacity: 0;
      translate: 50% 100%;
    }
  }
}
.chat-window__messages {
  overflow-y: scroll;
  overscroll-behavior: contain;
}

.chat-window__messages-list .message-item:not(:last-child) {
  margin-bottom: 5px;
}

.chat-window__messages-list .message-item {
  background: var(--clr-btn-bg);
  border: 1px solid var(--card-color);
  padding: 5px;
  text-align: right;
}

.chat-window__messages-list .message-item.yours {
  background: var(--clr-card-bg);
  text-align: left;
}

.chat-window textarea {
  width: 100%;
  padding: 8px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 3px;
}

/*.chat-window button {
    background-color: #007bff;
    color: white;
    padding: 8px 15px;
    border: none;
    border-radius: 3px;
    cursor: pointer;
}*/
.chat-window button:hover {
  background-color: #0056b3;
}

.close-button {
  position: absolute;
  top: 5px;
  right: 5px;
  cursor: pointer;
  font-size: 14px;
}

.chat-window.show { /* Class to show the window */
  display: block;
}

@media (width < 60rem) {
  .chat-window {
    right: 50%;
    width: 90%;
  }
  /*.chat-window__button {
      width: 90%;
  }*/
  .chat-window__interactions {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(2, 1fr);
  }
}
.flashing {
  animation: flash 1s linear infinite; /* Adjust duration and timing function */
}

@keyframes flash {
  0% {
    opacity: 1;
  }
  /* Start at full opacity */
  50% {
    opacity: 0.5;
  }
  /* Flash to 50% opacity */
  100% {
    opacity: 1;
  }
  /* Return to full opacity */
}
@keyframes heading--leaveview {
  to {
    opacity: 0;
    translate: 0 20px;
  }
}
h1 {
  /* If the user does not have a reduced motion preference and the browser supports it.*/
}
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    h1 {
      /* fade out while moving down animation */
      animation: heading--leaveview linear both;
      /* when the page/root is scrolled */
      animation-timeline: scroll(root);
      /* from 0-10vh scroll amount, run the animation */
      animation-range: 0 10vh;
    }
  }
}

.diagonal {
  --_skew-angle: 2deg;
  --_background: var(--clr-highlight-bg);
  position: relative;
  isolation: isolate;
  padding-block: 50px;
}

.diagonal.reversed {
  --_skew-angle: -2deg;
}

.diagonal::after {
  content: "";
  background: var(--_background);
  position: absolute;
  z-index: -1;
  inset: 0;
  transform: skewY(var(--_skew-angle));
}

.diagonal :is(h2, label, p) {
  color: var(--clr-highlight-text);
}

.details {
  background: var(--clr-card-bg);
  color: var(--clr-text);
  border: var(--card-border);
  /*padding: 0.0rem 1rem;*/
  border-radius: 0.5rem;
  /*overflow: hidden;*/
  margin-block: 1rem;
}

.details * {
  margin: 0;
}

.details > :is(div, p) {
  padding-block: 1rem;
}

.details::details-content {
  display: block;
  margin-inline: 2rem;
  block-size: 0;
  overflow: hidden;
  font-size: var(--step-1);
}

.details[open]::details-content {
  block-size: auto;
  /*block-size: calc-size(auto);*/
}

summary {
  margin-inline-start: 1rem;
  padding-inline: 2rem;
  padding-block: 1rem;
  position: relative;
  font-weight: 700;
  font-size: var(--step-2);
  cursor: pointer;
  list-style-position: outside;
}

summary::marker {
  content: "»";
  content: none;
}

summary::before {
  content: "»";
  position: absolute;
  inset-inline-start: 0.5rem;
  inset-block-start: 0.8rem;
  color: var(--clr-highlight);
}

.details[open] summary::before {
  rotate: 90deg;
  inset-inline-start: 0.75rem;
  inset-block-start: 0.85rem;
}

@media (prefers-reduced-motion: no-preference) {
  .details::details-content {
    transition-property: block-size, content-visibility;
    transition-duration: 0.5s;
    transition-behavior: allow-discrete; /*change discrete properties like content-visiblity or display after animation*/
  }
  summary::before {
    transition: rotate 0.2s;
  }
}
.education img {
  width: 200px;
}

.how-it-works {
  content-visibility: auto;
  contain-intrinsic-size: 1px 865px;
}

.why-web {
  content-visibility: auto;
  contain-intrinsic-size: 1px 1155px;
}

.blog-news {
  content-visibility: auto;
  contain-intrinsic-size: 1px 925px;
}

.example-designs {
  content-visibility: auto;
  contain-intrinsic-size: 1px 458px;
}

.my-abilities {
  content-visibility: auto;
  contain-intrinsic-size: 1px 1505px;
}

.ioffer {
  content-visibility: auto;
  contain-intrinsic-size: 1px 3009px;
}

html {
  scroll-padding-top: 7rem;
  height: 100%;
}

body {
  overflow-x: hidden;
  font-family: var(--ff-base);
  font-size: var(--fs-400);
  color: var(--clr-text);
  background-color: var(--clr-body-bg);
  line-height: 1.5;
  overflow-x: hidden;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

section {
  padding-block: var(--section-padding-block);
  margin-block: 1rem;
}

@media all and (max-width: 40em) {
  section {
    padding-block: 0;
  }
}
p {
  padding-block: 0.5em;
  margin: 0;
}

hr {
  width: 100%;
  margin: 1rem 0;
}

a {
  color: var(--clr-link);
}

a:hover, a:focus {
  text-decoration: none;
}

textarea, input {
  background: var(--clr-card-bg);
  border: var(--card-border);
  padding: var(--form-padding);
}

.preload * {
  transition: none !important;
}

label svg {
  fill: var(--clr-icon);
  margin-inline: 0.5em;
  min-width: 1.5em;
  min-height: 1.5em;
}

label svg {
  fill: var(--clr-text);
}

@media (width < 30rem) {
  .btn {
    width: 90%;
  }
  .inline-box {
    width: 100%;
    text-align: center;
  }
}
@media (width < 60rem) {
  .visible-md {
    display: block;
  }
  .flex-md-column {
    flex-direction: column;
  }
  .contact-button {
    display: none;
  }
}
@media (width >= 60rem) {
  .visible-md {
    display: none;
  }
}
/* dont show unordered list bullets by default */
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* show normal unordered list bullets only in articles (blog) */
article ul {
  list-style: disc;
  margin-block: 1em;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  padding-inline-start: 40px;
}

@media (prefers-reduced-motion: no-preference) {
  .body {
    transition: var(--transition);
  }
  .header {
    transition: var(--transition);
  }
}
.education p {
  align-self: center;
  text-align: center;
  text-wrap: balance;
}

.education svg {
  margin-inline: var(--gap);
}