/*****
Colors & Breakpoints
*****/

:root {
  --light-color: GhostWhite;
  --black: hsl(0, 0%, 10%);
  --main-color: hsl(128, 80%, 32%); /* #109121 */
  --main-color-dark: hsl(128, 80%, 25%);
  --pop-color: hsl(128, 100%, 80%); /* #990A02 */
  --pop-light: hsl(3, 80%, 41%);

  --ff-title: "BFNarrow", sans-serif;
  --ff-serif: "Crimson Text", serif;

  /* Breakpoints */
  --break-small: 37.5em;
  --break-medium: 56.25em;
  --break-large: 75em;

  /* set base values */
  --text-base-size: 1em;
  --text-scale-ratio: 1.2;

  /* type scale */
  --text-xs: calc(1em / var(--text-scale-ratio) / var(--text-scale-ratio));
  --text-sm: calc(1em / var(--text-scale-ratio));
  --text-md: calc(1em * var(--text-scale-ratio));
  --text-lg: calc(1em * var(--text-scale-ratio) * var(--text-scale-ratio));
  --text-xl: calc(
    1em * var(--text-scale-ratio) * var(--text-scale-ratio) *
      var(--text-scale-ratio)
  );
  --text-xxl: calc(
    1em * var(--text-scale-ratio) * var(--text-scale-ratio) *
      var(--text-scale-ratio) * var(--text-scale-ratio)
  );
  --text-xxxl: calc(
    1em * var(--text-scale-ratio) * var(--text-scale-ratio) *
      var(--text-scale-ratio) * var(--text-scale-ratio) *
      var(--text-scale-ratio)
  );

  /*spacing */
  --space-unit: 1em;
  --space-xxs: 0.25em;
  --space-xs: 0.5em;
  --space-sm: 0.75em;
  --space-md: 1.25em;
  --space-lg: 2em;
  --space-xl: 3.25em;
  --space-xxl: 5.25em;
}

/*****
  Border Box
  *****/

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

* {
  margin: 0;
  padding: 0;
}

html {
  box-sizing: border-box;
  font-family: "Crimson Text", serif;
  color: var(--black);
  font-size: 1.25rem;
}

h1 {
  font-family: "BetterFly", sans-serif;
  font-size: 40px;

  text-align: center;
}

h1 a {
  text-decoration: none;

  color: black;
}

/* Navigation */
.nav-header ul {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;

  list-style-type: none;

  margin: 0 1rem 2rem 1rem;
}

.nav-header ul li a {
  text-decoration: none;

  font-size: 1.4rem;

  padding: 0.5em;

  color: var(--main-color-dark);
}

.nav-header ul li a:hover {
  text-decoration: underline;
}

img {
  width: 100%;
}

.title {
  font-family: var(--ff-title);
  text-align: center;
}

h2 {
  font-size: 5rem;
  letter-spacing: 4px;
}

div.hero {
  background-color: #333;
  background-image: url(../hero-bg.jpg);
  background-attachment: fixed;
  background-blend-mode: multiply;
  color: #fff;

  background-size: cover;

  padding: 25vh 0.7em;

  font-family: var(--ff-title);
  text-align: center;
}

div.intro {
  padding: 20vh 0.5em;
}

.green {
  color: var(--main-color);
}

div.details {
  display: flex;
  flex-direction: column;

  background-color: rgba(96, 0, 96, 0.8);

  color: #fff;
}

h3,
h4 {
  font-family: var(--ff-title);
  text-align: center;
}

h3 {
  font-size: 3.5rem;
}
h4 {
  font-size: 3rem;
}

div.diff_1 {
  background-image: url(../granola-bg.jpg);
  background-repeat: no-repeat;
  background-size: cover;

  padding: 1em;
}

div.diff_2 {
  padding: 1.5em 1.2em;
  text-align: center;
}

div.order {
  padding: 1.5em;

  background-color: #f0f0f0;
}

div.btn-group {
  margin: 20px auto;
  display: flex;
  flex-direction: column;
  align-items: center;

  width: 90%;
}
.btn {
  margin: 10px 0;
}
.btn {
  background-color: var(--main-color);

  width: 80%;
  padding: 0.5em 0;

  text-align: center;

  border-radius: 5px;
}

a.btn {
  color: #fff;
  text-decoration: none;
  font-size: 1.2rem;

  width: 90%;
  max-width: 300px;
  padding: 10px 10px;
}

a:hover.btn {
  background-color: var(--main-color-dark);
}

.btn a:hover {
  background-color: var(--main-color-dark);
}

.products {
  background-color: #fff;

  padding: 1em 1em;

  margin-bottom: 1em;
}

div.cards {
  display: flex;
  flex-direction: column;
}

.card {
  margin: 2rem auto;

  max-width: 450px;

  border: 1px solid;
  border-radius: 1.5rem;
  border-width: 1px 0 0 1px;
  box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.7);
  overflow: hidden;
}

.products p {
  text-align: center;

  margin: 0 1.5em;
  padding: 1em 1.25em;
}

footer {
  background-color: #111;

  display: flex;
  justify-content: space-around;

  padding: 2em;
}

ul.social {
  list-style-type: none;
}

ul.nav-foot {
  list-style-type: none;

  height: 100%;

  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.nav-foot a {
  text-decoration: none;
  color: #fff;

  padding: 00.5em;

  font-size: 30px;
}

.nav-foot a:hover {
  text-decoration: underline;
}

.social li a img {
  max-width: 100px;

  margin: 0.8em;
  padding: 0.5em;

  filter: invert(1);
}

@media only screen and (min-width: 800px) {
  div.intro {
    padding: 20vh 2em;
  }
  div.details {
    flex-direction: row;
  }

  div.diff_1,
  div.diff_2 {
    flex: 1 0 50%;
  }

  h3,
  h4 {
    text-align: right;

    max-width: 450px;

    margin-left: auto;

    letter-spacing: 1px;
  }

  div.diff_2 {
    text-align: left;
    align-self: center;
    padding: 0 2em;
    padding: 0 5em 0 2em;
  }

  div.diff_2 p {
    margin-right: auto;
    max-width: 450px;
  }

  .order p {
    max-width: 75ch;
    margin: 0 auto;
  }

  div.cards {
    margin: 0 auto;
    flex-direction: row;
    flex-wrap: wrap;

    justify-content: space-evenly;
    max-width: 1600px;
  }

  .card {
    margin: 10px 1em;
    flex: 0 1 45%;
  }
}

/*****
  FONTS
  *****/

@font-face {
  font-family: "BetterFly";
  src: url("../fonts/betterfly-draft-webfont.eot");
  src: url("../fonts/betterfly-draft-webfont.woff2") format("woff2"),
    url("../fonts/betterfly-draft-webfont.woff") format("woff"),
    url("../fonts/betterfly-draft-webfont.svg") format("svg");
}

@font-face {
  font-family: "BFNarrow";
  src: url("../fonts/betterfly-narrow-webfont.eot");
  src: url("../fonts/betterfly-narrow-webfont.woff2") format("woff2"),
    url("../fonts/betterfly-narrow-webfont.woff") format("woff");
}

@font-face {
  font-family: "Crimson Text";
  font-style: italic;
  font-weight: 400;
  src: local("Crimson Text Italic"), local("CrimsonText-Italic"),
    url("https://fonts.gstatic.com/s/crimsontext/v8/wlpogwHKFkZgtmSR3NB0oRJfajhRK_Z_3rhH.woff2")
      format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Crimson Text";
  font-style: italic;
  font-weight: 700;
  src: local("Crimson Text Bold Italic"), local("CrimsonText-BoldItalic"),
    url("https://fonts.gstatic.com/s/crimsontext/v8/wlprgwHKFkZgtmSR3NB0oRJfajDqDuNS_LVtfaKv.woff2")
      format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Crimson Text";
  font-style: normal;
  font-weight: 400;
  src: local("Crimson Text Regular"), local("CrimsonText-Regular"),
    url("https://fonts.gstatic.com/s/crimsontext/v8/wlp2gwHKFkZgtmSR3NB0oRJfbwhTIfFd3A.woff2")
      format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Crimson Text";
  font-style: normal;
  font-weight: 700;
  src: local("Crimson Text Bold"), local("CrimsonText-Bold"),
    url("https://fonts.gstatic.com/s/crimsontext/v8/wlppgwHKFkZgtmSR3NB0oRJX1C1GDNNQ9rJPfw.woff2")
      format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}