/* Global styles */
/* https://coolors.co/03045e-0077b6-a9e4ef-d72638-070600-fef9ff */

:root {
  /* Main shades */
  --twilight: #03045e;
  --teal: #0077b6;
  --frost: #a9e4ef;
  --crimson: #d72638;
  --black: #070600;
  --white: #fef9ff;

  /* Darker/lighter shades */
  --twilight-dark: #01011c;
  --teal-dark: #003b5b;
  --teal-hover: #005f92;
  --frost-light: #e5f7fa;

  /* Alpha shades */
  --white-alpha-e8: #fef9ffe8;
  --white-alpha-a0: #fef9ffa0;
  --white-alpha-80: #fef9ff80;
  --white-alpha-50: #fef9ff50;
  --twilight-alpha-d0: #03045ed0;
  --twilight-alpha-80: #03045e80;
  --teal-alpha-80: #0077b680;
  --frost-alpha-80: #a9e4ef80;
  --frost-alpha-50: #a9e4ef50;
  --frost-alpha-30: #a9e4ef30;
  --black-alpha-a0: #070600a0;
  --twilight-dark-alpha-80: #01011c80;

  /* Other shades */
  --success: #28965a;

  /* Neutral shades */
  --grey-50: #fcf7f8;
  --grey-100: #eee9ea;
  --grey-200: #dfdadb;
  --grey-300: #c1bcbd;
  --grey-400: #a49f9f;
  --grey-500: #959090;
  --grey-600: #868181;
  --grey-700: #696464;
  --grey-800: #4b4646;
  --grey-900: #2d2828;
  --grey-950: #0f0a0a;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  transition: all 0.3s ease-in-out;
}

/* .transition-smooth {
    transition: all 0.3s ease-in-out;
} */

html {
  scroll-behavior: smooth;
}

body {
  position: relative;
  width: 100vw;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  background-color: var(--white);
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Oxygen,
    Ubuntu,
    Cantarell,
    "Open Sans",
    "Helvetica Neue",
    sans-serif;
}

/* body.nav-drawer-open {
  overflow-y: hidden;
} */

/* Font families */
/* https://github.com/mrkelly/lato/tree/master/font */
@font-face {
  font-family: "Lato";
  src: url("../assets/fonts/Lato-Light.woff2") format("woff2");
  src: url("../assets/fonts/Lato-Light.woff2") format(woff2);
  font-weight: 300;
  font-display: swap;
}

@font-face {
  font-family: "Lato";
  src: url("../assets/fonts/Lato-Regular.woff2") format("woff2");
  src: url("../assets/fonts/Lato-Regular.woff2") format(woff2);
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Lato";
  src: url("../assets/fonts/Lato-SemiBold.woff2") format("woff2");
  src: url("../assets/fonts/Lato-SemiBold.woff2") format(woff2);
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Lato";
  src: url("../assets/fonts/Lato-Bold.woff2") format("woff2");
  src: url("../assets/fonts/Lato-Bold.woff2") format(woff2);
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Merriweather";
  src: url("../assets/fonts/Merriweather-VariableFont.woff2") format("woff2-variations");
  src: url("../assets/fonts/Merriweather-VariableFont.woff2") format(woff2) tech(variations);
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Merriweather";
  src: url("../assets/fonts/Merriweather-Italic-VariableFont.woff2") format("woff2-variations");
  src: url("../assets/fonts/Merriweather-Italic-VariableFont.woff2") format(woff2) tech(variations);
  font-weight: 300 900;
  font-style: italic;
  font-display: swap;
}

/* Headings and text */
.h1,
h1 {
  font-family: "Lato";
  font-weight: 700;
  font-size: 2.25rem;
  line-height: 1.1;
}

.h2,
h2 {
  font-family: "Merriweather";
  font-weight: 700;
  font-size: 2rem;
  line-height: 1.1;
  color: var(--twilight);
}

.h3,
h3 {
  font-family: "Merriweather";
  font-size: 2rem;
  line-height: 1;
  color: var(--twilight);
}

.h4,
h4 {
  font-family: "Lato";
  font-size: 1.6rem;
  line-height: 1;
  color: var(--twilight);
}

.h5,
h5 {
  font-family: "Lato";
  font-size: 1.5rem;
  line-height: 1;
  /* color: var(--brown-950); */
}

.h6,
h6 {
  font-family: "Lato";
  font-size: 1.25rem;
  line-height: 1;
  /* color: var(--brown-950); */
}

.body1,
p,
span,
img {
  font-family: "Lato";
  line-height: 1.3;
  font-size: 1rem;
  font-weight: 400;
}

em {
  font-family: "Merriweather";
  font-style: italic;
  font-weight: 400;
}

.body2 {
  font-family: "Lato";
  line-height: 1.3;
  font-size: 1rem;
}

blockquote {
  font-family: "Merriweather";
  line-height: 1;
}

footer {
  font-family: "Lato";
}

/* 400px */
/* @media (min-width: 25rem) {
    
} */

/* 640px */
@media (min-width: 40rem) {
  .h1,
  h1 {
    font-size: 2.75rem;
  }

  .body1,
  p,
  span {
    font-size: 1.1rem;
  }
}

/* 768px */
@media (min-width: 48rem) {
  .h1,
  h1 {
    font-size: 3rem;
  }

  .body1,
  p,
  span {
    font-size: 1.2rem;
  }

  /* .body2 {
    font-size: 1.1rem;
  } */
}

/* 1024px */
@media (min-width: 64rem) {
  .h1,
  h1 {
    font-size: 3.5rem;
  }

  .body1,
  p,
  span {
    font-size: 1.3rem;
  }

  /* .body2 {
    font-size: 1.2rem;
  } */
}

/* 1280px */
@media (min-width: 80rem) {
  .h1,
  h1 {
    font-size: 4rem;
  }

  .h2,
  h2 {
    font-size: 2.5rem;
  }

  .body1,
  p,
  span {
    font-size: 1.35rem;
  }

  /* .body2 {
    font-size: 1.25rem;
  } */
}

/* 1536px */
@media (min-width: 96rem) {
  .h1,
  h1 {
    font-size: 4.5rem;
  }

  .h2,
  h2 {
    font-size: 3rem;
  }

  .h3,
  h3 {
    font-size: 2.5rem;
  }

  .h4,
  h4 {
    font-size: 2rem;
  }

  .h5,
  h5 {
    font-size: 2.25rem;
  }

  .h6,
  h6 {
    font-size: 2.25rem;
  }

  .body1,
  p,
  span {
    font-size: 1.4rem;
  }

  /* .body2 {
    font-size: 1.2rem;
  } */

  .overline-badge {
    border-radius: 2rem;
  }

  .overline {
    font-size: 1rem;
  }
}

/* 1920px */
@media (min-width: 120rem) {
  .h1,
  h1 {
    font-size: 5rem;
  }

  .body1,
  p,
  span {
    font-size: 1.75rem;
  }

  .body2 {
    font-size: 1.25rem;
  }
}