/* ---------- HOME PAGE STYLES ----------- */

/* MOBILE */

.homePage {
  height: 100%;
  width: 100vw;
  background-color: #f9f9f9;
}

.desktopLogo {
  height: 80vh;
  width: 80vw;
  margin: auto;
  display: none;
}

.mobileLogo {
  display: block;
  position: relative;
  width: 50vw;
  margin: 20% auto 14% auto;
}

.down-arrow {
  width: 40vw;
  display: block;
  margin: auto;
  position: relative;
  margin: 4% auto 10% auto;
}

.intro {
  display: block;
  position: relative;
  height: auto;
  width: 80vw;
  margin: 0 auto 12vh auto;
  padding-top: 6%;
}

.intro h1 {
  color: #3fa8c1;
  font-size: var(--step-2);
}

.intro_heading em {
  font-family: condiment;
  color: #ffac35;
}

.intro p {
  color: #001f54;
  font-size: var(--step-1);
  line-height: 1.4em;
}

.intro a {
  color: #3fa8c1;
  font-weight: 700;
  text-decoration: none;
}

.intro a:hover {
  font-weight: 700;
  text-decoration: #ffac35 wavy underline;
}

.intro h2 {
  display: inline;
  color: #231f20;
  font-size: 3.4em;
  line-height: 1.4em;
  font-weight: 900;
}

.intro h2:hover {
  text-decoration: #ffac35 wavy underline;
}

/* DESKTOP */
@media only screen and (min-width: 1000px) {
  .desktopLogo {
    height: 80vh;
    width: 80vw;
    /* margin: 4%; */
    display: block;
    position: relative;
  }

  .mobileLogo {
    display: none;
  }
  .down-arrow {
    width: 40vw;
    margin: 0% auto 0% auto;
  }

  .intro {
    height: 100vh;
    width: 80vw;
    margin: 0 auto 2vh auto;
    padding-top: 6%;
  }

  .intro h1 {
    font-size: var(--step-4);
    line-height: 1.4em;
  }

  .intro p {
    color: #001f54;
    font-size: var(--step-2);
    line-height: 1.4em;
  }

  .intro h2 {
    display: inline;
    color: #231f20;
    font-size: var(--step-3);
    line-height: 1.4em;
    font-weight: 900;
  }
}

/* LARGE DESKTOP */
@media only screen and (min-width: 1500px) {
  .intro h1 {
    font-size: var(--step-5);
    line-height: 1.4em;
  }

  .intro p {
    font-size: var(--step-3);
    line-height: 1.4em;
  }
}