/* =========================================================
   PART 1
   VARIABLES, RESET, MAIN, HEADER AND MOBILE MENU

   Illustrator artboard: 440 × 956px
   Side margins: 22px
   Content width: 420px
   ========================================================= */


/* =========================================================
   VARIABLES
   ========================================================= */

:root {
  --artboard-width: 440;
  --artboard-height: 956;

  --mobile-margin: 2.5%;
  --mobile-content-width: calc(100% - (var(--mobile-margin) * 2));

  --header-height: 80px;

  --black: #000;
  --white: #fff;
  --gray: #888;
  --green: #006837;
}


/* =========================================================
   RESET
   ========================================================= */

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

html,
body {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  overflow-x: hidden;

  background: var(--white);
  color: var(--black);

  font-family: "futura-pt-condensed", sans-serif;
}

img {
  display: block;
}input,
textarea,
select {
  font: inherit;
}

a,
a:visited,
a:hover,
a:active {
  color: inherit;
  text-decoration: none;
}


/* =========================================================
   MAIN
   ========================================================= */

main {
  width: 100%;
  margin: 0;

  /* Prevents content from sitting beneath the fixed header */
  padding: var(--header-height) 0 0;
}


/* =========================================================
   MOBILE HEADER
   ========================================================= */


/* =========================================================
   HEADER LEFT
   ========================================================= */


/* =========================================================
   HEADER CENTER
   ========================================================= */


/* =========================================================
   DESKTOP NAVIGATION
   Hidden in mobile.css
   ========================================================= */


/* =========================================================
   HAMBURGER BUTTON
   ========================================================= */


/* =========================================================
   HAMBURGER OPEN STATE
   Changes the three lines into an X
   ========================================================= */


/* =========================================================
   MOBILE DROPDOWN MENU
   ========================================================= */


/* =========================================================
   HEADER LINKS
   ========================================================= */


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

/* =========================================================
   PART 2
   SHARED ARTBOARDS, LANDING AND ETERNAL BONDS

   Illustrator artboard: 440 × 956px

   Landing and existing Eternal Bonds values are preserved.
   ========================================================= */