@font-face {
  font-family: Poppins;
  font-weight: normal;
  src: url(/assets/fonts/Poppins-Regular.ttf);
}
@font-face {
  font-family: Poppins;
  font-weight: bold;
  src: url(/assets/fonts/Poppins-Bold.ttf);
}
@font-face {
  font-family: "Source Sans";
  font-weight: normal;
  src: url(/assets/fonts/SourceSans3-Regular.ttf);
}
@font-face {
  font-family: "Source Sans";
  font-weight: bold;
  src: url(/assets/fonts/SourceSans3-Bold.ttf);
}
html,
body {
  max-width: 100vw;
  overflow-x: hidden;
}

body {
  color: #0c322c;
  background: #ecfff8;
  font-family: "Source Sans";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@media screen and (prefers-color-scheme: dark) {
  body {
    color: #ccedea;
    background: #0c322c;
  }
}

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

.highlightBar {
  padding: 0.3rem 0;
  background: #C7E1DD;
  color: #4D7D86;
  font-size: 0.9rem;
}
@media screen and (prefers-color-scheme: dark) {
  .highlightBar {
    color: #7DC1AE;
    background: #0B2E28;
  }
}

.topNav {
  position: fixed;
  width: 100%;
  z-index: 10000;
  background: #ecfff8;
  border-bottom: solid 1px rgb(190.84, 238.96, 221.2315789474);
}
@media screen and (prefers-color-scheme: dark) {
  .topNav {
    background: #0c322c;
    border-bottom: solid 1px rgb(14.9612903226, 62.3387096774, 54.8580645161);
  }
}
.topNav .textLink {
  color: #4D7D86;
}
@media screen and (prefers-color-scheme: dark) {
  .topNav .textLink {
    color: #7DC1AE;
  }
}
.topNav .textLinkSeparator {
  display: none;
  width: 1px;
  background: #c2e5ec;
  height: 100%;
}
@media screen and (prefers-color-scheme: dark) {
  .topNav .textLinkSeparator {
    background: rgb(16.935483871, 70.564516129, 62.0967741935);
  }
}
@media screen and (min-width: 700px) {
  .topNav .textLinkSeparator {
    display: block;
  }
}
.topNav .topNavInner {
  padding: 0.3rem 0rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.topNav .topNavInner > * {
  display: flex;
  align-items: center;
  flex-direction: row;
  gap: 1.75rem;
}
.topNav .topNavInner .home {
  filter: invert(14%) sepia(14%) saturate(5295%) hue-rotate(137deg) brightness(97%) contrast(88%);
}
@media screen and (prefers-color-scheme: dark) {
  .topNav .topNavInner .home {
    filter: invert(86%) sepia(28%) saturate(185%) hue-rotate(124deg) brightness(85%) contrast(92%);
  }
}
.topNav .textLink {
  font-weight: 700;
  display: none;
}
@media screen and (min-width: 700px) {
  .topNav .textLink {
    display: flex;
  }
}

.imageLinks {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
}
.imageLinks > * {
  display: flex;
  align-items: center;
}
.imageLinks .menuToggle,
.imageLinks .logo {
  filter: invert(14%) sepia(14%) saturate(5295%) hue-rotate(137deg) brightness(97%) contrast(88%);
}
@media screen and (prefers-color-scheme: dark) {
  .imageLinks .menuToggle,
  .imageLinks .logo {
    filter: invert(86%) sepia(28%) saturate(185%) hue-rotate(124deg) brightness(85%) contrast(92%);
  }
}

.languageSwitchButton {
  background: transparent;
  border: none;
  outline: none;
  filter: invert(14%) sepia(14%) saturate(5295%) hue-rotate(137deg) brightness(97%) contrast(88%);
  cursor: pointer;
}
@media screen and (prefers-color-scheme: dark) {
  .languageSwitchButton {
    filter: invert(86%) sepia(28%) saturate(185%) hue-rotate(124deg) brightness(85%) contrast(92%);
  }
}

.languageSwitcherDialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #ecfff8;
  color: #0c322c;
  border: solid 3px rgba(12, 50, 44, 0.15);
  padding: 1.25rem;
  border-radius: 10px;
}
@media screen and (prefers-color-scheme: dark) {
  .languageSwitcherDialog {
    background: #0c322c;
    color: #ccedea;
    border-color: rgba(204, 237, 234, 0.25);
  }
}
.languageSwitcherDialog::backdrop {
  background: rgba(0, 0, 0, 0.75);
}
.languageSwitcherDialog .languageSwitcherDialog__top {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 2rem;
  padding-bottom: 1rem;
  font-size: 1.25rem;
}
.languageSwitcherDialog .languageSwitcherDialog__top button {
  font-size: 1.25rem;
  background: transparent;
  border: none;
  outline: none;
  filter: invert(14%) sepia(14%) saturate(5295%) hue-rotate(137deg) brightness(97%) contrast(88%);
  cursor: pointer;
}
@media screen and (prefers-color-scheme: dark) {
  .languageSwitcherDialog .languageSwitcherDialog__top button {
    filter: invert(86%) sepia(28%) saturate(185%) hue-rotate(124deg) brightness(85%) contrast(92%);
  }
}
.languageSwitcherDialog .languageList {
  font-size: 1.25rem;
  min-width: 14rem;
  line-height: 2.25rem;
}
@media screen and (min-width: 400px) {
  .languageSwitcherDialog .languageList {
    column-count: 2;
  }
}
@media screen and (min-width: 500px) {
  .languageSwitcherDialog .languageList {
    column-count: 3;
  }
}
.languageSwitcherDialog .languageList a {
  display: block;
}

.menuToggle {
  background: none;
  border: none;
  cursor: pointer;
}
@media screen and (min-width: 700px) {
  .menuToggle {
    display: none;
  }
}

.menuOverlay {
  position: fixed;
  flex-direction: column;
  top: 0;
  left: 0;
  min-width: 100vw;
  background: #ecfff8;
  z-index: 10001;
  border: none;
  color: inherit;
}
.menuOverlay::backdrop {
  background: rgba(0, 0, 0, 0.4);
}
@media screen and (prefers-color-scheme: dark) {
  .menuOverlay {
    background: #0c322c;
  }
}
.menuOverlay > * {
  padding: 0.3rem 2rem;
}
.menuOverlay .textLinks {
  margin: 1rem 0;
  display: flex;
  flex-direction: column;
  font-size: 2.25rem;
  gap: 0.5rem;
  font-weight: bold;
}

.container {
  margin: 0 auto;
  padding: 0 2rem;
  max-width: 1200px;
}

.footerHolder {
  background: rgb(237.9, 253.1, 247.5);
  padding: 2rem 0;
}
.footerHolder footer {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  color: rgb(7.064516129, 29.435483871, 25.9032258065);
}
@media screen and (prefers-color-scheme: dark) {
  .footerHolder footer {
    color: rgb(185.152173913, 230.347826087, 226.2391304348);
  }
}
.footerHolder footer .links {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  column-gap: 2rem;
  row-gap: 2rem;
  align-items: start;
}
.footerHolder footer .links .linkSet {
  flex: 1 0 10rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.footerHolder footer .links .linkSet .linkSetHeading {
  text-transform: uppercase;
  font-size: 0.8rem;
}
.footerHolder footer .links .linkSet ul {
  line-height: 1.75rem;
}
.footerHolder footer .links .linkSet .linkIcon {
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 1.25rem;
}
.footerHolder footer .links .linkSet ul {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  list-style-type: none;
}
.footerHolder footer .links .linkSet li a {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  width: max-content;
}
.footerHolder footer .links .linkSet li a:hover {
  color: #0c322c;
}
@media screen and (prefers-color-scheme: dark) {
  .footerHolder footer .links .linkSet li a:hover {
    color: #ccedea;
  }
}
.footerHolder footer .bottomBar {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  border-top: solid 1px rgba(0, 0, 0, 0.05);
  margin-top: 1rem;
  padding-top: 1.5rem;
  font-size: 0.8rem;
  gap: 1rem;
}
.footerHolder footer .bottomBar img {
  filter: invert(14%) sepia(14%) saturate(5295%) hue-rotate(137deg) brightness(97%) contrast(88%);
}
@media screen and (prefers-color-scheme: dark) {
  .footerHolder footer .bottomBar img {
    filter: invert(86%) sepia(28%) saturate(185%) hue-rotate(124deg) brightness(85%) contrast(92%);
  }
}
@media screen and (prefers-color-scheme: dark) {
  .footerHolder footer .bottomBar {
    border-top-color: rgba(255, 255, 255, 0.05);
  }
}
.footerHolder footer .bottomBar .legalDisclaimer {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.footerHolder footer .bottomBar .legalDisclaimer a {
  display: flex;
  align-items: center;
}
@media screen and (min-width: 500px) {
  .footerHolder footer .bottomBar .legalDisclaimer {
    flex-direction: row;
    gap: 1rem;
    text-align: unset;
  }
}
.footerHolder footer .bottomBar .wordmark {
  display: none;
  max-width: 6rem;
}
.footerHolder footer .bottomBar .socials {
  display: flex;
  gap: 1.5rem;
}
.footerHolder footer .bottomBar .socials .socialAccount {
  display: flex;
  align-items: center;
  justify-content: center;
}
.footerHolder footer .bottomBar .socials .socialAccount svg {
  transform: scale(2);
  color: #0F4030;
}
@media screen and (prefers-color-scheme: dark) {
  .footerHolder footer .bottomBar .socials .socialAccount svg {
    color: #A5C7C3;
  }
}
@media screen and (min-width: 700px) {
  .footerHolder footer .bottomBar {
    flex-direction: row;
  }
  .footerHolder footer .bottomBar .wordmark {
    display: unset;
  }
}
@media screen and (prefers-color-scheme: dark) {
  .footerHolder {
    background: rgb(10.0258064516, 41.7741935484, 36.7612903226);
  }
}

.introHolder {
  --_gradient-blend-mode: normal;
  --_gradient-blur: 20px;
  background: radial-gradient(at 64% 27%, #a9e9e1 0px, transparent 50%), radial-gradient(at 71% 60%, #70c4e7 0px, transparent 40%), radial-gradient(at 11% 41%, #cdecd7 0px, transparent 50%) #ecfff8;
  mix-blend-mode: var(--_gradient-blend-mode);
  backdrop-filter: blur(var(--_gradient-blur)) contrast(100%) brightness(100%);
  -webkit-backdrop-filter: blur(var(--_gradient-blur)) contrast(100%) brightness(100%);
}
@media screen and (prefers-color-scheme: dark) {
  .introHolder {
    background: radial-gradient(at 64% 27%, #0C7A6E 0px, transparent 50%), radial-gradient(at 71% 60%, #264C5C 0px, transparent 40%), radial-gradient(at 11% 41%, #45875B 0px, transparent 50%) #0C322C;
  }
}

.intro {
  padding: 8rem 0 1rem 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 4rem;
  height: 600px;
}
.intro h1 {
  font-size: 3rem;
  line-height: 90%;
}
@media screen and (min-width: 400px) {
  .intro h1 {
    font-size: 3.5rem;
  }
}
@media screen and (min-width: 500px) {
  .intro h1 {
    font-size: 4.5rem;
  }
}
@media screen and (prefers-color-scheme: dark) {
  .intro h1 {
    text-shadow: 1px 2px 5px rgba(0, 0, 0, 0.3333333333);
  }
}
.intro .introPrimary {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 1rem;
}
@media screen and (min-width: 300px) {
  .intro .introPrimary {
    min-width: 300px;
  }
}
@media screen and (min-width: 500px) {
  .intro .introPrimary {
    min-width: 400px;
  }
}
.intro .introPrimary .introPrimaryDescription {
  font-size: 1.2rem;
  line-height: 120%;
}
.intro .screenshot {
  position: relative;
}
.intro .screenshot::before {
  content: "";
  width: 600px;
  height: 374px;
  position: absolute;
  clip-path: polygon(15% 100%, 100% 100%, 85% 0%, 0% 0%);
  background: linear-gradient(to bottom, #9eddd8 5%, rgb(120.2366412214, 207.7633587786, 200.8167938931) 50%, #9eddd8 95%);
}
@media screen and (prefers-color-scheme: dark) {
  .intro .screenshot::before {
    background: linear-gradient(to bottom, #ccedea 5%, rgb(147.4565217391, 217.0434782609, 210.7173913043) 50%, #ccedea 95%);
  }
}
.intro .screenshot img {
  width: 600px;
  clip-path: polygon(15% 0%, 100% 0%, 85% 100%, 0% 100%);
}

.propositions {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  column-gap: 6rem;
  row-gap: 2rem;
  padding: 3rem 0;
}
@media screen and (min-width: 500px) {
  .propositions {
    row-gap: 4rem;
  }
}
.propositions .proposition {
  flex: 1 1 0;
  min-width: 14rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-start;
  justify-content: flex-start;
  line-height: 1.25rem;
}
@media screen and (min-width: 500px) {
  .propositions .proposition {
    width: 16rem;
  }
}
.propositions .proposition .text {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.propositions .proposition .text h3 {
  font-size: 1.35rem;
}
.propositions .proposition .text .description {
  line-height: 1.25rem;
  opacity: 0.8;
}
.propositions .proposition .text .description a {
  text-decoration: underline;
}
.propositions .proposition .image {
  background: rgb(217.175, 248.325, 236.8486842105);
  padding: 0.5rem;
  box-shadow: inset -10px -10px 20px -20px rgba(0, 0, 0, 0.3333333333);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.propositions .proposition .image img {
  filter: invert(14%) sepia(14%) saturate(5295%) hue-rotate(137deg) brightness(97%) contrast(88%);
}
@media screen and (prefers-color-scheme: dark) {
  .propositions .proposition .image {
    background: rgb(14.9612903226, 62.3387096774, 54.8580645161);
    box-shadow: inset -10px 10px 20px -20px rgba(255, 255, 255, 0.3333333333);
  }
  .propositions .proposition .image img {
    filter: invert(98%) sepia(65%) saturate(267%) hue-rotate(93deg) brightness(97%) contrast(91%);
  }
}

.builtins {
  background: rgb(217.175, 248.325, 236.8486842105);
  box-shadow: inset -10px -10px 40px -10px rgba(0, 0, 0, 0.0980392157);
  border-radius: 10px;
  padding: 1.5rem;
  margin-bottom: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
@media screen and (min-width: 700px) {
  .builtins {
    padding: 2rem;
    gap: 3rem;
    flex-direction: row;
    align-items: center;
  }
}
@media screen and (prefers-color-scheme: dark) {
  .builtins {
    background: rgb(16.935483871, 70.564516129, 62.0967741935);
    box-shadow: inset 10px -10px 40px -10px rgba(0, 0, 0, 0.3333333333);
  }
}
.builtins .builtinsPrimary {
  word-wrap: break-word;
}
@media screen and (min-width: 700px) {
  .builtins .builtinsPrimary {
    max-width: 20rem;
    flex: 1 1 4rem;
  }
}
.builtins .builtinsPrimary h3 {
  font-size: 2.5rem;
  line-height: 100%;
}
.builtins .builtinsSecondary {
  font-size: 1.2rem;
  column-gap: 2rem;
  padding-inline-start: 20px;
}
@media screen and (min-width: 700px) {
  .builtins .builtinsSecondary {
    flex: 3 3 12rem;
  }
}
@media screen and (min-width: 800px) {
  .builtins .builtinsSecondary {
    column-count: 2;
  }
}
.builtins .builtinsSecondary li {
  break-inside: avoid;
}
.builtins .builtinsSecondary li:nth-child(2n) {
  color: #0c322c;
  opacity: 0.8;
}
@media screen and (prefers-color-scheme: dark) {
  .builtins .builtinsSecondary li:nth-child(2n) {
    color: #ccedea;
  }
}

.flavorsBg {
  position: relative;
  padding-bottom: 4rem;
}
.flavorsBg::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: -1;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0) 18.75%, #d9f5ef 0 31.25%, rgba(0, 0, 0, 0) 0), repeating-linear-gradient(45deg, #d9f5ef -6.25% 6.25%, rgba(255, 255, 255, 0) 0 18.75%);
  background-size: 70px 70px;
  mask-image: linear-gradient(to bottom, transparent 0%, white 120px, white calc(100% - 120px), transparent 100%);
  mask-composite: intersect;
}
@media screen and (min-width: 1200px) {
  .flavorsBg::before {
    mask-image: linear-gradient(to left, transparent 0%, white 40%, white 60%, transparent 100%), linear-gradient(to bottom, transparent 0%, white 120px, white calc(100% - 120px), transparent 100%);
  }
}
@media screen and (prefers-color-scheme: dark) {
  .flavorsBg::before {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0) 18.75%, #0a3d32 0 31.25%, rgba(0, 0, 0, 0) 0), repeating-linear-gradient(45deg, #0a3d32 -6.25% 6.25%, rgba(255, 255, 255, 0) 0 18.75%);
    background-size: 70px 70px;
  }
}
.flavorsBg h3 {
  font-size: 1.5rem;
  padding: 3rem 2rem 1rem 0;
  color: #123f38;
}
@media screen and (prefers-color-scheme: dark) {
  .flavorsBg h3 {
    color: #bfe8e1;
  }
}

.flavors .content {
  background: rgba(236, 255, 248, 0.6);
  border-radius: 10px;
  border: solid 1px rgba(12, 50, 44, 0.05);
  backdrop-filter: blur(2px);
}
@media screen and (prefers-color-scheme: dark) {
  .flavors .content {
    border: solid 1px rgba(236, 255, 248, 0.05);
    background: rgba(12, 50, 44, 0.8);
  }
}
.flavors .content .flavorHolder {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.flavors .content .flavorHolder .flavor {
  padding: 2rem;
  flex: 1 1 25rem;
  display: flex;
  flex-direction: row;
  gap: 1rem;
  align-items: center;
}
.flavors .content .flavorHolder .flavor:first-child {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.flavors .content .flavorHolder .flavor:hover {
  text-decoration: none;
  background: rgba(12, 50, 44, 0.03);
}
@media screen and (prefers-color-scheme: dark) {
  .flavors .content .flavorHolder .flavor:hover {
    background: rgba(204, 237, 234, 0.03);
  }
}
.flavors .content .flavorHolder .flavor img {
  display: none;
}
@media screen and (min-width: 400px) {
  .flavors .content .flavorHolder .flavor img {
    display: unset;
    max-width: 4rem;
    filter: invert(14%) sepia(14%) saturate(5295%) hue-rotate(137deg) brightness(97%) contrast(88%);
  }
}
@media screen and (min-width: 400px) and (prefers-color-scheme: dark) {
  .flavors .content .flavorHolder .flavor img {
    filter: invert(86%) sepia(28%) saturate(185%) hue-rotate(124deg) brightness(85%) contrast(92%);
  }
}
.flavors .content .flavorHolder .flavor .flavor__topLine {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1rem;
}
.flavors .content .flavorHolder .flavor .name {
  font-size: 1.1rem;
  font-weight: bold;
  line-height: 120%;
}
.flavors .content .flavorHolder .flavor .description {
  font-size: 0.85rem;
  line-height: 100%;
}
.flavors .content .flavorHolder .flavor .experimentalTag {
  color: #0c322c;
  background: #ecfff8;
  font-size: 0.7rem;
  text-transform: uppercase;
  padding: 0.25rem 0.4rem;
  border-radius: 10px;
  font-weight: bold;
}
@media screen and (min-width: 400px) {
  .flavors .content .flavorHolder .flavor .name {
    font-size: 1.6rem;
  }
  .flavors .content .flavorHolder .flavor .description {
    font-size: unset;
  }
}
@media screen and (min-width: 700px) {
  .flavors .content .flavorHolder .flavor .name {
    font-size: 2.25rem;
  }
}
.flavors .flavorsFineprint {
  padding-top: 1rem;
  font-size: 0.95rem;
}
.flavors .flavorsFineprint a {
  text-decoration: underline;
}

/*# sourceMappingURL=homepage.css.map */