@import url("https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700;900&family=Nunito:wght@500;700&display=swap");

:root {
  --clr-accent-400-value: 358, 76%, 70%;
  --clr-accent-300-value: 357, 77%, 77%;
  --clr-accent-200-value: 359, 77%, 82%;
  --clr-accent-100-value: 357, 74%, 88%;

  --clr-primary-400-value: 228, 39%, 23%;

  --clr-secondary-400-value: 34, 92%, 69%;
  --clr-secondary-300-value: 34, 92%, 77%;
  --clr-secondary-200-value: 33, 92%, 85%;
  --clr-secondary-100-value: 34, 90%, 92%;

  --clr-neutral-900-value: 232, 12%, 13%;
  --clr-neutral-700-value: 232, 12%, 30%;
  --clr-neutral-400-value: 232, 12%, 54%;
  --clr-neutral-300-value: 232, 12%, 75%;
  --clr-neutral-200-value: 232, 12%, 84%;
  --clr-neutral-100-value: 0 0% 100%;

  /* Redundance variable just to see the color faster */
  --clr-accent-400: hsl(0, 83%, 68%);
  --clr-accent-300: hsl(0, 83%, 77%);
  --clr-accent-200: hsl(0, 83%, 85%);
  --clr-accent-100: hsl(0, 83%, 92%);

  --clr-accent-400: hsl(49, 100%, 62%);
  --clr-accent-300: hsl(49, 100%, 77%);
  --clr-accent-200: hsl(49, 100%, 85%);
  --clr-accent-100: hsl(50, 100%, 92%);

  --clr-primary-400: hsl(228, 39%, 23%);
  --clr-primary-300: hsl(228, 39%, 35%);
  --clr-primary-200: hsl(228, 39%, 60%);

  --clr-secondary-400: hsl(214, 88%, 44%);
  --clr-secondary-300: hsl(214, 88%, 75%);
  --clr-secondary-200: hsl(214, 88%, 82%);
  --clr-secondary-100: hsl(214, 88%, 96%);

  --clr-neutral-900: hsl(232, 12%, 13%);
  --clr-neutral-700: hsl(232, 12%, 30%);
  --clr-neutral-400: hsl(232, 12%, 54%);
  --clr-neutral-300: hsl(232, 12%, 75%);
  --clr-neutral-200: hsl(232, 12%, 84%);
  --clr-neutral-100: hsl(0 0% 100%);

  --clr-primary-grey-400: hsl(210, 33%, 9%);

  /* -------------------------------------------------- */

  --clr-accent-400: hsl(var(--clr-accent-400-value));
  --clr-accent-300: hsl(var(--clr-accent-300-value));
  --clr-accent-200: hsl(var(--clr-accent-200-value));
  --clr-accent-100: hsl(var(--clr-accent-100-value));

  --clr-primary-400: hsl(var(--clr-primary-400-value));

  --clr-secondary-400: hsl(var(--clr-secondary-400-value));
  --clr-secondary-300: hsl(var(--clr-secondary-300-value));
  --clr-secondary-200: hsl(var(--clr-secondary-200-value));
  --clr-secondary-100: hsl(var(--clr-secondary-100-value));

  --clr-neutral-900: hsl(var(--clr-neutral-900-value));
  --clr-neutral-700: hsl(var(--clr-neutral-700-value));
  --clr-neutral-400: hsl(var(--clr-neutral-400-value));
  --clr-neutral-300: hsl(var(--clr-neutral-300-value));
  --clr-neutral-100: hsl(var(--clr-neutral-100-value));

  /* --ff-primary: "Nunito", sans-serif; */
  --ff-primary: "Be Vietnam Pro", sans-serif;

  --ff-body: var(--ff-primary);
  --ff-heading: var(--ff-primary);

  --fw-regular: 400;
  --fw-semi-bold: 600;
  --fw-bold: 900;

  --fs-300: 0.8125rem;
  --fs-400: 0.875rem;
  --fs-500: 1rem;
  --fs-600: 1.25rem;
  --fs-700: 1.75rem;
  --fs-800: 2.5rem;
  --fs-900: 3.5rem;

  --fs-body: var(--fs-400);
  --fs-primary-heading: var(--fs-800);
  --fs-secondary-heading: var(--fs-600);
  --fs-icon: var(--fs-700);
  --fs-suffix-heading: var(--fs-500);
  --fs-article-heading: var(--fs-500);
  --fs-nav: var(--fs-500);
  --fs-input: var(--fs-500);
  --fs-button: var(--fs-300);

  --size-100: 0.25rem;
  --size-200: 0.5rem;
  --size-300: 0.75rem;
  --size-400: 1rem;
  --size-500: 1.5rem;
  --size-600: 2rem;
  --size-700: 2.5rem;
  --size-800: 3rem;
  --size-900: 3.5rem;

  --space-100: 0.25rem;
  --space-200: 0.5rem;
  --space-300: 0.75rem;
  --space-400: 1rem;
  --space-500: 1.5rem;
  --space-600: 2rem;
  --space-700: 3.5rem;
  --space-800: 4rem;
  --space-900: 4.5rem;

  --corder-article-image: var(--size-500);

  --gradient-linear-diagonal-accent-400: linear-gradient(
    to bottom right,
    var(--clr-accent-400),
    var(--clr-accent-300)
  );

  --gradient-linear-diagonal-accent-300: linear-gradient(
    to bottom right,
    var(--clr-accent-300),
    var(--clr-accent-200)
  );

  --gradient-linear-diagonal-secondary-400: linear-gradient(
    to bottom right,
    var(--clr-secondary-400),
    var(--clr-secondary-300)
  );

  --gradient-linear-diagonal-secondary-300: linear-gradient(
    to bottom right,
    var(--clr-secondary-300),
    var(--clr-secondary-200)
  );

  --gradient-linear-diagonal-secondary-100: linear-gradient(
    to bottom right,
    var(--clr-secondary-100),
    transparent
  );
}

@media (min-width: 40em) {
  :root {
    /* --fs--body: var(--fs-500); */
    --fs-primary-heading: var(--fs-900);
    --fs-secondary-heading: var(--fs-700);
    --fs-article-heading: var(--fs-600);

    --fs-nav: var(--fs-300);
  
    --corder-article-image: var(--size-900);
  }
}

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin */
* {
  margin: 0;
  padding: 0;
  font: inherit;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role="list"],
ol[role="list"] {
  list-style: none;
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

html,
body {
  min-height: 100%;
}

/* Set core body defaults */
body {
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture,
svg {
  max-width: 100%;
  display: block;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Utility classes */
.text-primary-400 {
  color: var(--clr-primary-400);
}

.text-primary-300 {
  color: var(--clr-primary-300);
}

.text-primary-200 {
  color: var(--clr-primary-200);
}

.text-accent-400 {
  color: var(--clr-accent-400);
}

.text-secondary-400 {
  color: var(--clr-secondary-400);
}

.text-accent-100 {
  color: var(--clr-accent-100);
}

.text-neutral-100 {
  color: var(--clr-neutral-100);
}

.text-neutral-900 {
  color: var(--clr-neutral-100);
}

.text-neutral-700 {
  color: var(--clr-neutral-700);
}

.bg-primary-400 {
  background-color: var(--clr-primary-400);
}

.bg-accent-400 {
  background-color: var(--clr-accent-400);
}

.bg-accent-300 {
  background-color: var(--clr-accent-300);
}

.bg-accent-100 {
  background-color: var(--clr-accent-100);
}

.bg-secondary-100 {
  background-color: var(--clr-secondary-100);
}

.bg-neutral-100 {
  background-color: var(--clr-neutral-100);
}

.bg-neutral-900 {
  background-color: var(--clr-neutral-900);
}

.bg-primary-grey-400 {
  background-color: var(--clr-primary-grey-400);
}

.fw-bold {
  font-weight: var(--fw-bold);
}

.fw-semi-bold {
  font-weight: var(--fw-semi-bold);
}

.fw-regular {
  font-weight: var(--fw-regular);
}

.fs-primary-heading {
  font-size: var(--fs-primary-heading);
  line-height: 0.95;
}

.fs-secondary-heading {
  font-size: var(--fs-secondary-heading);
}

.fs-suffix-heading {
  font-size: var(--fs-suffix-heading);
}

.fs-text-field {
  font-size: var(--fs-intput);
}

.fs-icon {
  font-size: var(--fs-icon);
}

.fs-article-heading {
  font-size: var(--fs-article-heading);
}

.fs-300 {
  font-size: var(--fs-300);
}

.fs-400 {
  font-size: var(--fs-400);
}

.fs-500 {
  font-size: var(--fs-500);
}

.fs-600 {
  font-size: var(--fs-600);
}

.fs-700 {
  font-size: var(--fs-700);
}

.fs-800 {
  font-size: var(--fs-800);
}

.fs-900 {
  font-size: var(--fs-900);
}

.padding-block-100 {
  padding-block: var(--space-100);
}

.padding-block-200 {
  padding-block: var(--space-200);
}

.padding-block-500 {
  padding-block: var(--space-500);
}

.padding-block-600 {
  padding-block: var(--space-600);
}

.padding-block-700 {
  padding-block: var(--space-700);
}

.padding-block-900 {
  padding-block: var(--space-900);
}

.padding-top-400 {
  padding-top: var(--space-400);
}

@media (max-width: 40em) {
  .display-sm-padding-vertical-400 {
    padding: var(--space-400) 0;
  }

  .display-sm-padding-vertical-500 {
    padding: var(--space-500) 0;
  }

  .display-sm-padding-vertical-700 {
    padding: var(--space-700) 0;
  }
}

.padding-top-700 {
  padding-top: var(--space-700);
}

.padding-top-900 {
  padding-top: var(--space-900);
}

.padding-horiz-400 {
  padding: 0 var(--space-400);
}

.padding-horiz-200 {
  padding: 0 var(--space-200);
}

.padding-horiz-100 {
  padding: 0 var(--space-100);
}

.padding-400 {
  padding: var(--space-400);
}

.padding-500 {
  padding: var(--space-500);
}

.padding-600 {
  padding: var(--space-600);
}

.padding-700 {
  padding: var(--space-700);
}

@media (min-width: 40em) {
  .md-padding-400 {
    padding: var(--space-400);
  }

  .md-padding-block-700 {
    padding-block: var(--space-700);
  }
  
  .md-padding-top-700 {
    padding-top: var(--space-700);
  }
}

.padding-right-200 {
  padding-right: var(--size-200);
}

.margin-100 {
  margin: var(--size-100);
}

.margin-200 {
  margin: var(--size-200);
}

.margin-400 {
  margin: var(--size-400);
}

.margin-vertical-100 {
  margin: var(--size-100) 0;
}

.margin-vertical-200 {
  margin: var(--size-200) 0;
}

.margin-vertical-400 {
  margin: var(--size-400) 0;
}

.margin-left-100 {
  margin-left: var(--size-100);
}

.margin-left-200 {
  margin-left: var(--size-200);
}

.margin-left-400 {
  margin-left: var(--size-400);
}

.margin-top-100 {
  margin-top: var(--size-100);
}

.margin-top-200 {
  margin-top: var(--size-200);
}

.margin-top-400 {
  margin-top: var(--size-400);
}

.corner-rounded-200 {
  border-radius: var(--size-200);
}

.corner-rounded-300 {
  border-radius: var(--size-300);
}

.corner-rounded-400 {
  border-radius: var(--size-400);
}

.corner-rounded-900 {
  border-radius: var(--size-900);
}

.corner-rounded-article {
  border-radius: var(--corder-article-image);
}

@media (min-width: 40em) {
  .display-md-corner-rounded-900 {
    border-radius: var(--size-900);
  }
}

.corner-left-rounded-900 {
  border-start-end-radius: var(--size-900);
  border-end-end-radius: var(--size-900);
}

/* .list-style-none {
  list-style: none;
} */

.text-diagonal-gradient-accent-400 {
  background: var(--gradient-linear-diagonal-accent-400);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.display-flex {
  display: flex;
}

@media (max-width: 40em) {
  .display-sm-display-none {
    display: none;
  }
}

.flex-direction-row {
  flex-direction: row;
}

.flex-direction-column {
  flex-direction: column;
}

.align-items-end {
  align-items: end;
}

.gap-400 {
  gap: var(--size-400);
}

.gap-200 {
  gap: var(--size-200);
}

.gap-0 {
  gap: 0;
}

.grid-place-items-center {
  display: grid;
  place-items: center;
}

@media (min-width: 40em) {
  .display-md-grid-place-items-start {
    display: grid;
    place-items: start;
  }

  .display-md-grid-justify-items-start {
    display: grid;
    justify-items: start;
  }
}

.position-relative {
  position: relative;
}

.position-absolute {
  position: absolute;
  top: 0;
}

.list-items-style-none > li {
  list-style: none;
}

.list-items-gap-400 > li:where(:not(:first-child)) {
  padding-top: var(--size-400);
}

.list-items-gap-500 > li:where(:not(:first-child)) {
  padding-top: var(--size-500);
}

.list-items-gap-700 > li:where(:not(:first-child)) {
  padding-top: var(--size-700);
}

/* general styling */

::selection {
  background-color: var(--clr-accent-400);
  color: var(--clr-neutral-100);
}

body {
  font-size: var(--fs-body);
  font-family: var(--ff-body);
  color: var(--clr-primary-400);
}

.primary-header {
  position: fixed;
  width: 100%;
  z-index: 1;
}

.container {
  --max-width: 1100px;
  --padding-value: var(--container-padding, 1rem);

  width: min(var(--max-width), 100% - (var(--padding-value) * 2));
  margin-inline: auto;
}

.container-padding-700 {
  --container-padding: var(--space-700);
}

.container-padding-600 {
  --container-padding: var(--space-600);
}

.container-padding-500 {
  --container-padding: var(--space-500);
}

.display-fill-width {
  width: 100%;
}

@media (max-width: 40em) {
  .display-sm-fill-width {
    width: 100%;
  }

  .display-sm-container-padding-0 {
    --container-padding: 0;
  }
}

.button {
  cursor: pointer;
  border: none;
  padding: var(--size-300) var(--size-500);
  color: var(--clr-neutral-100);
  font-weight: var(--fw-semi-bold);
  border-radius: 100vmax;
  background-color: var(--clr-accent-400);
  background-image: var(--gradient-linear-diagonal-accent-400);
}

.button:is(:hover, :active) {
  background-color: var(--clr-accent-300);
  background-image: var(--gradient-linear-diagonal-accent-300);
}

.button[data-background-color="secondary"] {
  background-color: var(--clr-secondary-400);
  background-image: var(--gradient-linear-diagonal-secondary-400);
}

.button[data-background-color="secondary"]:is(:hover, :active) {
  background-color: var(--clr-secondary-300);
  background-image: var(--gradient-linear-diagonal-secondary-300);
}

.button[data-type="outlined"] {
  border: 1px solid var(--clr-accent-400);
  color: var(--clr-accent-400);
  background-color: var(--clr-neutral-100);
  background-image: none;
}

.button[data-type="inverted"] {
  border: none;
  color: var(--clr-accent-400);
  background-color: var(--clr-neutral-100);
  background-image: none;
}

.text-field-wrapper {
  --border-size: 1.6px;
  --vertical-margin-size: var(--size-400);
  --vertical-padding-size: var(--size-400);
  --suffix-icon-button-size: var(--suffix-icon-size, var(--size-600));

  background-color: var(--clr-neutral-100);
  box-shadow: 0 0 10px -4px var(--clr-neutral-200);
  border-radius: var(--size-300);
}

.text-field-wrapper:has(input:focus) {
  box-shadow: 0 0 10px -2px var(--clr-neutral-200);
}

.text-field-wrapper input {
  width: 100%;
  border: none;
  padding: var(--vertical-padding-size);
  background-color: transparent;
}

.text-field-wrapper input:focus {
  border: none;
  outline: none;
}

.even-columns {
  --gap-value: var(--gap, var(--size-700));
  --info-content-padding-size: var(--size-900);

  display: grid;
  gap: var(--gap-value);
}

.even-columns[data-type="gap-zero"] {
  --gap: 0;
}

.truncate {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.expanded-height {
  height: 100%;
}

.even-columns-always-flow {
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
}

@media (min-width: 40em) {
  .even-columns {
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
  }
}

.flex-grow-1 {
  flex-grow: 1;
}

@media (min-width: 40em) {
  .display-md-padding-400 {
    padding: 2rem;
  }

  .display-md-grid-align-center {
    align-items: center;
  }

  .display-md-grid-justify-end {
    justify-items: end;
  }

  .display-md-margin-left-auto {
    margin-left: auto;
  }

  .effect-image-hover-zoom-wrapper {
    overflow: hidden;
  }

  .effect-image-hover-zoom-wrapper img {
    transition: transform 0.3s ease-in-out;
  }

  .effect-image-hover-zoom-wrapper:hover img {
    transform: scale(1.1);
  }

  .even-columns[data-md-filp="horiz"] .effect-image-hover-zoom-wrapper {
    grid-column-start: 1;
    grid-column-end: 2;
  }

  .info-content {
    margin-right: var(--info-content-padding-size);
    margin-left: 0;
  }

  .even-columns[data-md-filp="horiz"] .info-content {
    margin-left: var(--info-content-padding-size);
    margin-right: 0;
  }
}

:where(.flow :not(:first-child)) {
  margin-top: var(--flow-spacer, var(--space-400));
}

.info-card-flow-spacer {
  --flow-spacer: var(--space-100);
}

.mascot-image {
  height: min(24rem, 64dvh, 72dvw);
  aspect-ratio: 1;
  object-fit: contain;
}

.nav-wrapper {
  --blur-size: var(--size-200);
  --blur: blur(var(--blur-size));

  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 var(--size-400);

  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  /* background-color: hsl(var(--clr-neutral-100-value), 0.5) */
  background-color: rgb(255, 255, 255, 0.5);
  border-bottom: 1px solid rgb(0, 0, 0, 0.05);
}

.nav-wrapper > .button {
  margin: var(--size-200) 0;
}

.nav-wrapper li[data-type="selected"] a {
  color: var(--clr-accent-400);
}

.primary-navigation {
  display: grid;
}

@media (max-width: 40em) {
  .primary-navigation {
    display: none;
  }
}

.nav-list {
  display: flex;
  align-items: center;
  gap: clamp(var(--size-500), 5vw, var(--size-600));
}



.nav-list a {
  text-decoration: none;
  color: var(--fs-nav);
  font-weight: var(--fw-semi-bold);
}

.mobile-nav-toggle {
  display: none;
}

@media (max-width: 40em) {
  .nav-list {
    display: grid;
    gap: var(--size-600);
    text-align: center;
    font-weight: var(--fw-bold);
  }
}

@media (max-width: 40em) {
  .mobile-nav-toggle {
    display: block;
    border: none;
    background-color: transparent;
  }

  .mobile-nav-toggle .icon-close {
    display: none;
  }
}

@media (max-width: 40em) {
  .join-us-button {
    display: none;
  }
}

.grid-items {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: auto;
  gap: 1rem;
}

.grid-items li {
  list-style: none;
}

.circle-avatar::before {
  --accent-color: var(--clr-item-accent, var(--clr-accent-400));
  --width: var(--size-item-box, var(--size-900));

  width: var(--width);
  aspect-ratio: 1;

  display: grid;
  place-items: center;

  color: var(--accent-color);
  border: 2px solid var(--accent-color);
  border-radius: 100vmax;
}

.circle-avatar::before > * {
  background: var(--gradient-linear-diagonal-accent-400);
  --webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.material-card {
  transition: 0.3s;
}

.material-card:hover {
  cursor: pointer;
  box-shadow: 0 0 10px 0px var(--clr-neutral-200);
}

:where([data-type="accent-color-1"]) {
  --accent-color: green;
}

.download-items {
  list-style: none;
}

.fitted-logo-height {
  height: 2em;
}

.fitted-logo-height img {
  height: 100%;
}


.footer-logo {
  text-decoration: none;
}

.footer-logo img {
  object-fit: contain;
}

.display-md-position-absolute {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: -1;
  border: 1px solid grey;
}

.feature-list-item {
  --size-padding: var(--size-400);
  --size-image-width: 5rem;

  transform: translateX(-105%);
  padding-block: calc(var(--size-padding) / 2);
  padding-left: var(--size-padding);
  padding-right: var(--size-image-width);
  border-radius: var(--size-400);
  font-size: var(--fs-300);

  background-color: var(--clr-secondary-100);
  background-image: var(--gradient-linear-diagonal-secondary-100);
}

.feature-list-item img {
  width: var(--size-image-width);
  height: auto;
  position: absolute;
  bottom: 0;
  right: 0;
  transform: translateX(var(--size-400));
}

.mascot-bg-pattern {
  height: 100%;
  bottom: 0;
  z-index: -2;
  transform: scale(1.6) translateX(-30%) translateY(-10%);
  opacity: 0.6;
}

.locate-me-button {
  cursor: pointer;
  border: none;
  background-color: var(--clr-accent-400);
  background-image: var(--gradient-linear-diagonal-accent-400);
}

.locate-me-button:hover {
  background-color: var(--clr-accent-200);
  background-image: var(--gradient-linear-diagonal-accent-300);
}

.social-list {
  list-style: none;
  display: flex;
  gap: var(--size-600);
}

.logo-social-list {
  display: grid;
}

@media (min-width: 40em) {
  .logo-social-list {
    /* align-items: flex-start; */
    align-content: space-between;
  }
}

.footer-nav {
  columns: 2;
}

.footer-nav a {
  font-weight: var(--fw-semi-bold);
  text-decoration: none;
  color: var(--clr-neutral-100);
}

.footer-nav a:is(:hover, :active) {
  text-decoration: none;
  color: var(--clr-accent-400);
}