:root {
  --Josefin: "Josefin Sans", sans-serif;
  --beige: #f3ede4;
  --copyDarkPurple: #333333;
  --blue: #177acc;
}

body {
  font-family: "Josefin Sans", sans-serif;
  margin: 0px;
  margin-top: -3%;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  background-color: #f3ede4;
}

/* Landing Page */
.Landing {
  width: 100vw;
  height: 114vh;
  overflow-y: hidden;
  z-index: 999;
}
.scrollHover {
  position: absolute;
  width: 100vw;
  height: 25vh;
  z-index: 103;
  margin-left: 0%;
  margin-top: 42%;
  /* background-image: linear-gradient(transparent,black); */
}
#scrollPrompt {
  position: absolute;
  font-size: 4vw;
  margin-left: 41%;
}
.scrollOverlay {
  position: absolute;
  width: 100vw;
  height: 75vh;
  margin-top: 50vh;
  background-image: linear-gradient(transparent, var(--beige));
  z-index: -99;
  display: none;
}
.nudge {
  width: 7vw;
  margin-left: 46.5vw;
  margin-top: 15%;
}

.subNav {
  position: fixed;
  margin-left: 5%;
  margin-top: 10%;
  z-index: 999;
}
.subNav p {
  font-weight: 300;
  font-size: 1.25vw;
}
.subNav p:hover {
  cursor: pointer;
}

.Hexas {
  width: 100vw;
  z-index: 99;
  background-color: #f0e5d5;
  margin: 0px;
  display: flex;
  flex-direction: row;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

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

.cl1 {
  order: 1;
}
.cl2 {
  order: 2;
  margin-left: -5.6%;
}
.cl3 {
  order: 3;
  margin-left: -5.6%;
}
.cl4 {
  order: 4;
  margin-left: -5.6%;
}
.cl5 {
  order: 5;
  margin-left: -5.6%;
}
.cl6 {
  order: 6;
  margin-left: -5.6%;
}
.cl7 {
  order: 7;
  margin-left: -5.7%;
}

#mainLogo {
  z-index: 999;
  width: 60vw;
  top: 48%;
  left: 52%;
  transform: translate(-50%, -50%);
  position: fixed;
}
.whole {
  margin: 0px;
  width: 100%;
  z-index: 98;
}
.corner {
  width: 100%;
  margin: 0px;
}

.anims {
  z-index: 99;
  position: absolute;
  width: 21.4vw;
  cursor: pointer;
}
.anims:hover {
  transform: scale(1.1);
  z-index: 101;
}
#crystals {
  width: 11vw;
  margin-top: 0.4%;
}

#bee {
  margin-top: 9.7%;
  margin-left: 0.3%;
}
#turbine {
  margin-top: 28.55%;
  margin-left: 0.24%;
}
#fish {
  margin-top: 38%;
  margin-left: 0.2%;
}
#sat {
  margin-top: 10%;
  margin-left: 0.6%;
}
#buildings {
  width: 22vw;
  margin-top: 28.6%;
  margin-left: 0.25%;
}

#phone {
  margin-left: 0.45%;
  margin-top: 0.5%;
}
#hug {
  margin-top: 37.7%;
  margin-left: 0.1%;
}

#syringe {
  margin-top: 9.5%;
  margin-left: 0.3%;
}
#frog {
  margin-top: 28.9%;
  margin-left: 0.5%;
}
/* Landing Page for mobile */
.landingMobile {
  display: none;
  height: 100vh;
}
.mobileAni {
  width: 100vw;
  z-index: -98 !important;
}
#logo {
  z-index: -99 !important;
}
#mobileTitle {
  font-family: var(--Josefin);
  z-index: 999 !important;
  margin-top: 7.5%;
  text-align: center;
  font-size: 8vw;
  font-weight: 600;
}

/* Mobile end */

.homePage {
  width: 100vw;
  height: 100vh;
}
.homeRule {
  width: 60vw;
  height: 2px;
  background-color: black;
  margin-left: 21%;
  margin-top: 31.5%;
}
.homeText {
  margin-left: 21vw;
  width: 60vw;
}
.homeText p {
  margin: 0;
  padding: 0;
  margin-top: 2%;
}
#hp2p1 {
  text-align: center;
  font-size: 3.4vw;
  margin-left: -0.8vw;
  font-weight: 600;
}
#hp2p2 {
  text-align: center;
  font-weight: 300;
  font-size: 1.9vw;
}

.storiesPage {
  width: 100vw;
  height: 280vh;
}

.p3Title {
  text-align: center;
  margin-top: 5%;
}
#sPTitle {
  margin: 0;
  padding: 0;
  font-size: 3vw;
  font-weight: 600;
}
#tRule {
  width: 26%;
  margin-left: 37%;
  background-color: black;
  height: 2px;
}
.storyHexas {
  margin-left: 31.8%;
  margin-top: 6.5%;
}
.hexDivs {
  z-index: 998 !important;
  position: absolute;
}
.p3Hex {
  z-index: 999;
  width: 21vw;
}

.hex2 {
  margin-top: -21.7%;
  margin-left: 37%;
}
.RWNW {
  z-index: 99;
}
.SoS {
  margin-top: 17.72%;
}
.JH {
  margin-top: 35.35%;
}

.blackRule {
  background-color: black;
  height: 2px;
  width: 50%;
  margin-left: 25%;
  margin-top: 5%;
}
.br2 {
  margin-top: 5%;
}
#lsp3p1{
  margin-top: 5%;
}
.lastSection {
  height: 100vh;
  text-align: center;
}

.p3p {
  font-size: 2vw;
  font-weight: 600;
  line-height: 2.2vw;
  margin-bottom: 0.3%;
}
#p3p1 {
  margin-top: 5%;
}
#p3p2 {
  margin-bottom: 0.5%;
  padding-bottom: 0;
}
#email {
  margin: 0;
  padding: 0;
  font-size: 2vw;
  font-weight: 600;
  color: #177acc;
  text-decoration: none;
}

.socials {
  width: 50%;
  margin-left: 25%;
  margin-top: 5%;
  margin-bottom: 5%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  z-index: 99 !important;
}
.socialLeft p {
  margin: 0;
  padding: 0;
}
#sp1 {
  font-size: 2vw;
  font-weight: 500;
}
#sp2 {
  font-size: 1.18vw;
  font-weight: 300;
}
#subForm {
  width: 100%;
}
.verticalRule {
  width: 1px;
  background-color: black;
}
.socialRight img {
  width: 3.5vw;
}
#sp3 {
  font-size: 1.18vw;
  font-weight: 300;
  line-height: 1.25vw;
}
#insta {
  font-weight: 600;
  color: #177acc;
  text-decoration: none;
}
#subForm {
  margin-top: 6%;
  width: 102%;
  margin-left: -2%;
}
#subForm input[type="email"] {
  background-color: white;
  border: none;
  font-family: "Josefin Sans", sans-serif;
  height: 2.5vw;
  width: 70%;
  font-size: 1.25vw;
  font-weight: 300;
  margin-top: 3%;
  margin-right: 0;
  padding-right: 0;
  text-align: center;
}
#subForm button[type="submit"] {
  width: 25%;
  border: none;
  background-color: #177acc;
  border-color: #177acc;
  border-width: 1px;
  border-style: solid;
  color: whitesmoke;
  font-family: "Josefin Sans", sans-serif;
  font-size: 1.25vw;
  font-weight: 600;
  height: 2.5vw;
}
#arrow {
  margin-top: 2%;
  cursor: pointer;
}
#lsp3p3 {
  font-size: 1.5vw;
  font-weight: 300;
}
#copyRight {
  font-size: 1.25vw;
  font-weight: 300;
  padding-bottom: 5%;
}

@media only screen and (min-device-width: 320px) and (max-device-width: 812px) {
  .Landing {
    display: none;
  }
  .landingMobile {
    display: inline;
  }
  .subNav {
    display: none;
  }
  #mobileNavDots {
    margin-left: 86% !important;
  }

  .Hexas {
    position: relative;
    top: 0%;
    transform: translate(-50%, 0%);
    width: 185vw;
  }
  .anims {
    width: 40vw;
  }
  #buildings {
    width: 41vw;
    margin-top: 28.3%;
    margin-left: 0.4%;
  }

  .blackRule {
    width: 85%;
    margin-left: 7.5%;
    margin-top: 5%;
  }
  .br0 {
    margin-top: 7.5%;
  }
  .br2 {
    margin-top: 10%;
  }

  .p3p {
    font-size: 5.5vw;
    line-height: 5.75vw;
  }
  #lsp3p1 {
    margin-top: 5%;
  }
  #email {
    font-size: 5.5vw;
  }
  .socials {
    width: 75%;
    margin-left: 12.5%;
    margin-top: 10%;
    flex-direction: column;
  }
  .socialLeft {
    width: 100%;
  }
  #sp1 {
    font-size: 5.5vw;
  }
  #sp2 {
    margin-top: 1%;
    font-size: 2.75vw;
  }
  .verticalRule {
    display: none;
  }
  .socialRight {
    margin-top: 10%;
    width: 100%;
  }
  .socialRight img {
    width: 12vw;
  }
  #sp3 {
    font-size: 5vw;
    line-height: 5.25vw;
  }
  #subForm input[type="email"] {
    font-size: 3.75vw;
    height: 6vw;
  }
  #subForm button[type="submit"] {
    font-size: 3.75vw;
    height: 6vw;
  }
  .br2 {
    margin-top: 5%;
  }
  #arrow {
    margin-top: 10%;
  }
  #copyRight {
    font-size: 1.75vw;
  }
}