@font-face {
  font-family: "RTRondelle-Book";
  src: url("/fonts/RTRondelle-Book.woff2");
  font-display: swap;
}

@font-face {
  font-family: "Roobert";
  src: url("/fonts/Roobert-Medium.woff2");
  font-display: swap;
}

:root {
  --font-heading: "Roobert", "Epilogue", "Epilogue-fallback", "sans-serif";
  --font-body: "RTRondelle-Book", "sans-serif";

  --tw-1: #060622ff;
  --tw-2: #17197eff;
  --tw-3: #2a0cd7ff;
  --tw-4: #9e9affff;
  --tw-5: #d1dfffff;
  --tw-6: #36f6ffff;
  --tw-7: #ad5fffff;
  --tw-8: #35ff64ff;
  /* TODO: remove everything after this */
  /* Text styles */
  --text-display-size: clamp(30px, 10vw, 75px);
  --text-display-height: 0.95;
  --text-display: 700 var(--text-display-size)/var(--text-display-height) var(
    --font-heading
  );
  --text-display-spacing: -0.045em;
  --text-heading-size: clamp(20px, 8vw, 50px);
  --text-heading: 700 var(--text-heading-size)/1.1 var(--font-heading);
  --text-heading-spacing: -0.03em;
  --text-title-size: clamp(20px, 6vw, 30px);
  --text-title: 600 var(--text-title-size)/1.2 var(--font-heading);
  --text-title-spacing: -0.03em;
  --text-body-size: clamp(16px, 4vw, 20px);
  --text-body: var(--text-body-size)/1.65 var(--font-body);
  --text-body-bold: 600 var(--text-body-size)/1.6 var(--font-body);
  --text-body-spacing: -0.02em;
  --text-caption: 15px/1.6 var(--font-body);
  --text-caption-bold: 600 15px/1.6 var(--font-body);
  --text-caption-mini: 13px/1.6 var(--font-body);
  --text-caption-mini-bold: 600 13px/1.6 var(--font-body);

  /* Colors */
  /* Tokens */
  --color-red-400: hsl(0deg, 50%, 40%);
  --color-red-500: hsl(0deg, 50%, 50%);
  --color-red-600: hsl(0deg, 70%, 60%);
  --color-white: hsl(200deg, 20%, 100%);
  --color-white-alpha: hsla(200deg, 20%, 100%, 0.9);
  --color-black-970: hsl(200deg, 20%, 97%);
  --color-black-930: hsl(200deg, 20%, 93%);
  --color-black-860: hsl(200deg, 20%, 86%);
  --color-black-650: hsl(200deg, 20%, 65%);
  --color-black-350: hsl(200deg, 20%, 35%);
  --color-black-240: hsl(200deg, 20%, 24%);
  --color-black-180: hsl(200deg, 20%, 18%);
  --color-black-140: hsl(200deg, 20%, 14%);
  --color-black-100: hsl(200deg, 20%, 10%);
  --color-black-100-alpha: hsla(200deg, 20%, 10%, 0.9);
  --color-yellow-800: hsl(50deg, 80%, 80%);
  --color-yellow-750: hsl(50deg, 80%, 75%);
  --color-yellow-200: hsl(50deg, 80%, 20%);
  --color-brown-600: hsl(50deg, 10%, 60%);
  --color-brown-160: hsl(50deg, 10%, 16%);
  --color-brown-200: hsl(50deg, 10%, 20%);

  /* Borders */
  --border-radius-small: 5px;
  --border-radius: 10px;

  /* Animation */
  --animation-duration: 0.2s;

  /* Spaces */
  --margin: max(25px, 5vw);
  --max-width: 1200px;
  --column-gap-0: 10px;
  --column-gap-1: 25px;
  --column-gap-2: 50px;
  --column-gap-3: 100px;
  --row-gap-0: 25px;
  --row-gap-1: clamp(20px, 5vh, 50px);
  --row-gap-2: clamp(40px, 10vh, 100px);
  --row-gap-3: clamp(60px, 15vh, 150px);
  --row-gap-4: clamp(80px, 20vh, 200px);
}

:root[data-theme="light"] {
  color-scheme: light;
  --color-primary: var(--tw-3);
  --color-primary-1: var(--color-red-400);
  --color-foreground: var(--color-black-100);
  --color-foreground-1: var(--color-black-240);
  --color-background: var(--color-white);
  --color-background-a: var(--color-white-alpha);
  --color-background-1: var(--color-black-970);
  --color-background-2: var(--color-black-930);
  --color-background-3: var(--color-black-860);
  --color-logo: var(--tw-1);

  --color-gradient-bg: rgb(205, 218, 251);
  --color-gradient-start: rgba(255, 255, 255, 0);
  --color-gradient-mid: rgba(255, 255, 255, 0);
  --color-gradient-end: rgba(255, 255, 255, 1);

  --color-gradient-a: rgba(205, 218, 251, 1);
  --color-gradient-b: rgba(212, 252, 255, 1);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --color-primary: var(--tw-4);
  --color-primary-1: var(--color-red-400);
  --color-foreground: var(--color-white);
  --color-foreground-1: var(--color-black-650);
  --color-background: var(--color-black-100);
  --color-background-a: var(--color-black-100-alpha);
  --color-background-1: var(--color-black-140);
  --color-background-2: var(--color-black-180);
  --color-background-3: var(--color-black-240);
  --color-logo: #ffffffff;

  --color-gradient-bg: rgb(116, 123, 140);
  --color-gradient-start: rgba(255, 255, 255, 0);
  --color-gradient-mid: rgba(255, 255, 255, 0);
  --color-gradient-end: rgb(135, 135, 135);

  --color-gradient-a: rgb(71, 74, 85);
  --color-gradient-b: rgb(107, 129, 130);
}

.features-section {
  background: rgb(205, 218, 251);
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0) 70%,
      rgba(255, 255, 255, 1) 100%
    ),
    linear-gradient(
    90deg,
    rgba(205, 218, 251, 1) 0%,
    rgba(212, 252, 255, 1) 100%
  );
}

.features-section[data-theme="dark"] {
  background: rgb(205, 218, 251);
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0) 70%,
      rgba(255, 255, 255, 1) 100%
    ),
    linear-gradient(
    90deg,
    rgba(205, 218, 251, 1) 0%,
    rgba(212, 252, 255, 1) 100%
  );
}

.navbar-container {
  background-color: var(--color-background-a);
  position: sticky;
  top: 0;
  padding: 0 var(--margin);
  z-index: 10;
  border-bottom: solid 1px var(--color-background-2);
  backdrop-filter: blur(8px);
}

.navbar {
  max-width: var(--max-width);
  margin: auto;
  display: flex;
  justify-content: space-between;
  height: 70px;
  -moz-column-gap: var(--column-gap-1);
       column-gap: var(--column-gap-1);
}

.navbar-logo {
  display: flex;
  align-self: center;
  align-items: center;
  color: var(--color-foreground);
  -moz-column-gap: 10px;
       column-gap: 10px;
  text-decoration: none;
  font: var(--text-body-bold);
  letter-spacing: var(--text-title-spacing);
}

.navbar-logo svg {
    margin-bottom: 10px;
  }

@media (max-width: 820px) {

.navbar-logo span {
      display: none;
  }
    }

.navbar-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  font: var(--text-caption-bold);
  letter-spacing: var(--text-caption-spacing);
  overflow-x: auto;
  flex: 1 1 auto;
  width: 0;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  will-change: scroll-position;
}

.navbar-menu li {
    display: flex;
  }

:is(.navbar-menu li):first-child {
      margin-left: auto;
    }

.navbar-menu a {
    color: var(--color-foreground);
    text-decoration: none;
    display: flex;
    align-items: center;
    padding: 0 1em;
    white-space: nowrap;
  }

:is(.navbar-menu a):hover {
      background-image: linear-gradient(
        var(--color-foreground),
        var(--color-foreground)
      );
      background-repeat: no-repeat;
      background-size: calc(100% - 2em) 1px;
      background-position: center bottom;
    }

.is-selected:is(.navbar-menu a) {
      color: var(--color-foreground-1);
      background: var(--color-background-1);
    }

.navbar-search {
  --docsearch-searchbox-background: var(--color-background-2);
  --docsearch-text-color: var(--color-foreground-1);
  --docsearch-searchbox-focus-background: var(--color-background-1);
  --docsearch-searchbox-shadow: inset 0 0 0 2px var(--color-foreground-1);
  align-self: center;
  padding: 0;
  margin: 0;
  min-width: 173px;
  min-height: 36px;
}

@media (max-width: 768px) {
  .navbar-search {
    min-width: auto;
    min-height: auto;
  }

  .DocSearch-Container {
    position: fixed
      !important; /* This overrides the docsearch modal `position: absolute`, fixes position issue on chrome (mobile) */
  }
}

.footer-container {
  background: var(--color-background-1);
}

.footer {
  font: var(--text-caption);
  color: var(--color-foreground-1);
  max-width: var(--max-width);
  margin: auto;
  text-align: center;
  padding: 0 var(--margin);
}

.footer-copyright {
  margin: 0;
  padding: var(--row-gap-0) 0;
}

.footer-copyright a {
    color: currentColor;
  }

.footer-links {
  margin: 0;
  list-style: none;
  padding: 10px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  border-bottom: solid 1px var(--color-background-3);
}

.footer-links svg {
    display: block;
    width: 20px;
    height: 20px;
    fill: currentColor;
  }

.footer-links a {
    text-decoration: none;
    font: var(--text-caption-bold);
    display: flex;
    align-items: center;
    -moz-column-gap: 10px;
         column-gap: 10px;
    padding: 10px;
    border-radius: var(--border-radius-small);
    color: currentColor;
    white-space: nowrap;
  }

:is(.footer-links a):hover {
      color: var(--color-foreground);
      background: var(--color-background-2);
    }

.button {
  background: var(--background, none);
  color: var(--color, currentColor);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 0;
  gap: 0.6em;
  min-height: 2em;
  padding: 0 0.6em;
  font: var(--text-caption-bold);
  border-radius: var(--border-radius-small);
  cursor: pointer;
  transition-property: background-color, color;
  transition-duration: var(--animation-duration);
  box-sizing: border-box;
  vertical-align: middle;
  flex: 0 0 auto;
  text-decoration: none;
}

.button::-moz-focus-inner {
    border: 0;
  }

.button.is-small {
    font: var(--text-caption-mini-bold);
    text-transform: uppercase;
  }

.button.is-big {
    height: 3em;
    padding: 0 1em;
  }

.button.is-codesandbox {
    --color: var(--color-white);
    --color-hover: var(--color-white);
    --background: var(--color-black-100);
    --background-hover: var(--color-black-240);
    border: solid 1px #fff2;
    display: flex;
    padding: 1em 0.6em;
  }

.button.is-codesandbox svg {
      fill: currentColor;
      width: 18px;
      height: 18px;
    }

.button.is-primary {
    --color: var(--color-background-1);
    --color-hover: var(--color-background-1);
    --background: var(--color-primary);
    --background-hover: var(--color-primary-1);
  }

.button.is-secondary {
    --color: var(--color-foreground-1);
    --color-hover: var(--color-foreground-1);
    --color-active: var(--color-background);
    --background: var(--color-background-1);
    --background-hover: var(--color-background-2);
    --background-active: var(--color-primary);
  }

.button.is-secondary.is-active {
      color: var(--color-active);
      background: var(--background-active);
    }

.button input {
    accent-color: var(--accent);
  }

.button:hover {
    color: var(--color-hover, currentColor);
    background: var(--background-hover, none);
  }

.button:disabled {
    cursor: default;
    background: none;
    opacity: 0.1;
  }

.button.has-icon {
    padding: 0;
    width: 40px;
    height: 40px;
  }

.button.has-icon svg {
      width: 30px;
      height: 30px;
      fill: currentColor;
    }

.button.has-icon path {
      fill: currentColor;
    }

.button-theme {
  background: none;
  color: currentColor;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: solid 1px var(--color-background-3);
  padding: 0 0.6em;
  font: var(--text-callout);
  border-radius: var(--border-radius-small);
  cursor: pointer;
  vertical-align: middle;
}

.button-theme:hover {
    background: var(--color-background-2);
  }

[data-theme="light"] .button-theme .is-light,
[data-theme="dark"] .button-theme .is-dark {
  display: block;
}

[data-theme="light"] .button-theme .is-dark,
[data-theme="dark"] .button-theme .is-light {
  display: none;
}

.logoPath {
  fill: var(--color-logo);
}

.workFlowLine {
  stroke: var(--color-logo);
}

.floatingText {
  fill: var(--color-logo);
}

.arrowHead {
  fill: var(--color-logo);
}

.workFlowLineP path {
  stroke: var(--color-logo);
}

[data-theme="dark"] .workFlowLinePL path {
  fill: var(--tw-5);
}

[data-theme="dark"] .workFlowLinePL rect {
  fill: var(--tw-5);
}

[data-theme="light"] .workFlowLinePL path,
[data-theme="light"] .workFlowLinePL rect {
  fill: var(--tw-3);
}

.floatingTextP text {
  fill: var(--color-logo);
}