:root {
  color-scheme: dark;
}

html {
  overflow-x: hidden;
}

body {
  min-width: 0;
}

img,
svg,
canvas {
  max-width: 100%;
}

a,
button,
input,
select,
textarea,
[tabindex] {
  -webkit-tap-highlight-color: transparent;
}

:focus-visible {
  outline: 2px solid #38e1ff;
  outline-offset: 3px;
}

[data-cc-node][role="link"]:focus-visible {
  outline: none;
  filter: drop-shadow(0 0 8px rgba(56, 225, 255, 0.75));
}

@media (max-width: 900px) {
  body > header > div {
    padding-inline: 20px !important;
    gap: 14px !important;
  }

  body > header > div > a > span:last-child {
    display: none !important;
  }

  body > header > div > nav {
    gap: 4px !important;
  }

  body > header > div > nav > a[href="architecture.html"] {
    display: none !important;
  }

  nav[data-screen-label="Nav"] > div,
  div[data-screen-label="Nav"] > div {
    padding-inline: 20px !important;
    gap: 12px !important;
  }

  nav[data-screen-label="Nav"] > div > div:last-child > a:not(:first-child):not(:last-child),
  div[data-screen-label="Nav"] nav > a:not(:first-child) {
    display: none !important;
  }
}

@media (max-width: 640px) {
  section[data-screen-label],
  footer[data-screen-label] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  section[data-screen-label] > div,
  footer[data-screen-label] > div {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  section[data-screen-label] > div[style*="grid-template-columns"],
  section[data-screen-label] > div > div[style*="grid-template-columns"],
  section[data-screen-label][style*="grid-template-columns"],
  footer[data-screen-label] > div[style*="grid-template-columns"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  section[data-screen-label] h1,
  header[data-screen-label] h1 {
    font-size: clamp(36px, 11vw, 52px) !important;
    overflow-wrap: anywhere;
  }

  section[data-screen-label] h2,
  header[data-screen-label] h2 {
    font-size: clamp(28px, 9vw, 40px) !important;
    overflow-wrap: anywhere;
  }

  body > header > div > nav > a {
    display: none !important;
  }

  #fam-menu {
    position: fixed !important;
    top: 58px !important;
    right: 12px !important;
    left: 12px !important;
    width: auto !important;
    max-height: calc(100vh - 72px);
    overflow-y: auto;
  }

  nav[data-screen-label="Nav"] > div > div:last-child > a:not(:last-child),
  div[data-screen-label="Nav"] nav {
    display: none !important;
  }

  nav[data-screen-label="Nav"] > div > a > span > span:last-child,
  div[data-screen-label="Nav"] > div > div:first-of-type > span:first-child {
    display: none !important;
  }

  div[data-screen-label="Banner"] > div {
    padding-inline: 16px !important;
    gap: 10px !important;
  }

  [data-screen-label="Demo"] > div > div,
  [data-screen-label="Hero"] > div,
  [data-screen-label="FAQ"] > div,
  [data-screen-label="Footer"] > div {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  [data-screen-label="At a glance"] > div > div {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  [data-screen-label="Technology"] [style*="grid-template-columns"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  [data-screen-label="Doctrine"] div[style*="justify-content:center"] > span,
  [data-screen-label="Doctrine"] div[style*="justify-content: center"] > span {
    display: none !important;
  }

  [data-screen-label="Doctrine"] div[style*="justify-content:center"] > div,
  [data-screen-label="Doctrine"] div[style*="justify-content: center"] > div {
    flex: 1 1 auto !important;
    min-width: 0;
    font-size: clamp(21px, 7vw, 24px) !important;
  }

  [data-screen-label="Architecture"] [style*="grid-template-columns:220px"],
  [data-screen-label="Architecture"] [style*="grid-template-columns: 220px"] {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px;
    padding: 18px !important;
  }

  [data-screen-label="Architecture"] [style*="grid-template-columns:220px"]:first-child,
  [data-screen-label="Architecture"] [style*="grid-template-columns: 220px"]:first-child {
    display: none !important;
  }

  [data-screen-label="Architecture"] [style*="grid-template-columns:220px"] > div,
  [data-screen-label="Architecture"] [style*="grid-template-columns: 220px"] > div {
    padding-right: 0 !important;
  }

  [data-screen-label="Footer"] [style*="justify-content: space-between"] {
    align-items: flex-start !important;
  }
}

@media (max-width: 420px) {
  body > header > div {
    padding-inline: 16px !important;
  }

  body > header > div > a > span:first-child {
    font-size: 15px !important;
  }

  div[data-screen-label="Banner"] span {
    display: none !important;
  }

  [data-screen-label="At a glance"] > div > div {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}