* {
  box-sizing: border-box;
  margin: 0px;
  padding: 0px;
}
html,body {
  font-size: 100%;
}
section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
li {
  margin: 13px 0px;
  border-left-width: 4px;
  border-left-style: solid;
  border-radius: 3%;
  padding-left: 10px;
  display: inline-block;
}
.oth-div li {
  border-left-color: rgb(200,205,210);
}
.tech-div li {
  border-left-color: rgb(137,139,142);
}
.bg-gray {
  background-color: rgb(187, 189, 192);
}

/* Hero styling */
.hero-div {
  width: 80vw;
  margin: 0px 0px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.hero-text-div {
  margin: 12vh 0px;
  text-align: center;
}
.hero-text-main {
  font-family: sans-serif;
  font-size: 10vw;
  font-weight: bold;
}
.hero-text-sub {
  font-family: serif;
  font-size: 6vw;
  font-style: italic;
  font-weight: 100;
}
.hero-img-div {
  margin: 13vh 0px 15vh 0px;
  text-align: center;
}
.app-icon-img {
  width: 40vw;
  height: 40vw;
  margin: auto;
  border: 2px solid rgb(180,190,190);
  border-radius: 25%;
}
.app-icon-192 {
  display: inline;
}
.app-icon-360 {
  display: none;
}
.app-name {
  margin-top: 12px;
  margin-bottom: 8px;
  font-family: Helvetica, sans-serif;
  font-size: 8vw;
}
.in-dev, .com-soon {
  color: rgb(90, 95, 100);
  font-family: Helvetica, sans-serif;
}
.dl-on-appstore-img {
  width: auto;
  height: 40px;
  margin: 4px auto;
  border: 0;
}

/* Interstitial styling */
.inte-div {
  margin: 15vw 0px 2vw 0px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-family: sans-serif;
  font-size: 5vw;
  font-weight: 100;
  font-variant: small-caps;
}
.inte-div-dark {
  color: rgb(90, 95, 100);
}
.inte-div-light {
  color: rgb(122, 127, 132);
}
.inte-div-line {
  width: 40%;
  margin-top: 5px;
}
.inte-div-line-dark {
  border-bottom: 2px solid rgb(90, 95, 100);
}
.inte-div-line-light {
  border-bottom: 2px solid rgb(122, 127, 132);
}

/* Key Feature styling */
.key-div {
  width: 80vw;
  margin-top: 18vw;
}
.key-div-last {
  margin-bottom: 20vw;
}
.key-vid {
  width: 80vw;
  height: 60vw;
  margin: 0px auto 7vw auto;
  border: 2px solid rgb(150,160,160);
  display: block;
  float: none;
  background-color: rgb(180, 180, 180);
}
.key-text-div {
  margin: auto;
}
.key-titl-div {
  margin-bottom: 5vw;
  text-align: center;
}
.key-titl {
  display: inline-block;
  font-family: sans-serif;
  font-size: 9.75vw;
  font-weight: bold;
}
.key-subt {
  max-width: 330px;
  display: inline-block;
  color: rgb(50, 50, 50);
  text-align: left;
  font-family: sans-serif;
  font-variant: small-caps;
  font-weight: 100;
  line-height: 92%;
}
.key-desc {
  margin-top: 4vw;
  text-align: left;
  font-family: sans-serif;
  line-height: 120%;
}

/* Other Feature styling */
.oth-div {
  width: 80vw;
  margin: 40px 0px 20vw 0px;
  column-count: 1;
  font-family: sans-serif;
}

/* Tech Requirements styling */
.tech-div {
  width: 80vw;
  margin: 40px 0px 18vw 0px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  column-count: 1;
  font-family: sans-serif;
}

/* Hope styling */
.hope-div {
  width: 80vw;
  margin: 8vh 5vw 10vh 5vw;
}
.hope-top-div {
  margin-bottom: 16vh;
}
.hope-intro {
  text-align: left;
  font-family: sans-serif;
  font-size: 9vw;
}
.hope-seg {
  text-align: left;
  font-family: serif;
  font-size: 5vw;
  font-weight: 100;
}
.hope-bot-div {
  margin-bottom: 5vw;
  text-align: right;
}
.hope-conc {
  display: inline-block;
  font-family: sans-serif;
  font-size: 5.5vw;
  font-weight: 100;
}
.hope-emp {
  margin: 1vh 0px;
  display: inline-block;
  font-family: sans-serif;
  font-size: 9vw;
}

/* Credits styling */
.cred-sect {
  border-top: 1px solid rgb(105, 110, 115);
}
.cred-div {
  width: 80vw;
  margin: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
@media screen and (min-width: 328px) {
  .key-titl {
    font-size: 2em;
  }
}
@media screen and (min-width: 400px) {
  .hero-text-main {
    font-size: 2.5em;
  }
  .hero-text-sub {
    font-size: 1.5em;
  }
  .app-name {
    font-size: 2em;
  }

  .inte-div {
    font-size: 1.25em;
  }

  .key-div {
    margin-top: 72px;
  }
  .key-vid {
    margin-bottom: 28px;
  }
  .key-titl-div {
    margin-bottom: 20px;
  }
  .key-desc {
    margin-top: 16px;
  }

  .hope-intro {
    font-size: 2.25em;
  }
  .hope-seg {
    font-size: 1.25em;
  }
}

@media screen and (min-width: 444px) {
  .hope-emp {
    font-size: 2.5em;
  }
}
@media screen and (min-width: 480px) {
  .app-icon-img {
    width: 192px;
    height: 192px;
  }
}
@media screen and (min-width: 525px) {
  .oth-div {
    column-count: 2;
  }

  .cred-div {
    flex-direction: row;
    justify-content: space-between;
  }
}
@media screen and (min-width: 582px) {
  .hope-conc {
    font-size: 2em;
  }
}
@media screen and (min-width: 600px) {
  .hero-div {
    margin: 12vh 0px;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
  }
  .hero-text-div {
    margin: 0px 30px 0px 0px;
    text-align: left;
  }
  .hero-text-main {
    font-size: 5vw;
  }
  .hero-text-sub {
    font-size: 3vw;
  }
  .hero-img-div {
    min-width: 210px;
    margin: 0px;
  }
  .app-icon-img {
    width: 20vw;
    height: 20vw;
  }
  .app-icon-192 {
    display: none;
  }
  .app-icon-360 {
    display: inline;
  }
  .app-name {
    font-size: 4vw;
  }

  .inte-div {
    margin: 8vw 0px 0px 0px;
    font-size: 2.25vw;
  }

  .key-vid {
    width: 480px;
    height: 360px;
    margin-bottom: 4vw;
  }
  .key-titl {
    font-size: 4.2vw;
  }
  .key-text-div {
    width: 480px;
  }

  .oth-div {
    margin-bottom: 8vw;
  }

  .tech-div {
    margin-bottom: 8vw;
  }

  .hope-intro {
    font-size: 4.5vw;
  }
  .hope-seg {
    font-size: 3vw;
  }
  .hope-conc {
    font-size: 4vw;
  }
  .hope-emp {
    font-size: 5vw;
  }
}
@media screen and (min-width: 800px) {
  .inte-div {
    margin: 8vw 0px 2vw 0px;
  }

  .key-div {
    width: 85vw;
    margin-top: 10vw;
  }
  .key-div-last {
    margin-bottom: 14vw;
  }
  .key-vid {
    width: 40vw;
    height: 30vw;
    margin: 0px 5vw 0px 0px;
    display: inline;
    float: left;
  }
  .key-text-div:not(.key-no-img) {
    width: 40vw;
    display: inline;
    float: right;
  }
  .key-titl-div:not(.key-no-img)  {
    text-align: left;
  }
}
@media screen and (min-width: 1000px) {
  .dl-on-appstore-img {
    height: 4vw;
    margin: .4vw auto;
  }
}
@media screen and (min-width: 1024px) {
  .oth-div {
    column-count: 3;
  }
}
@media screen and (min-width: 1048px) {
  .key-titl {
    font-size: 2.75em;
  }
}
@media screen and (min-width: 1067px) {
  .inte-div {
    font-size: 1.5em;
  }
}
@media screen and (min-width: 1100px) {
  .hope-conc {
    font-size: 2.75em;
  }
}
@media screen and (min-width: 1156px) {
  .hope-intro {
    font-size: 3.25em;
  }
}
@media screen and (min-width: 1200px) {
  .hero-text-sub {
    font-size: 2.25em;
  }

  .inte-div {
    margin: 96px 0px 24px 0px;
  }

  .key-div {
    max-width: 1020px;
  }
  .key-vid {
    max-width: 480px;
    max-height: 360px;
    margin-right: 60px;
  }
  .key-text-div:not(.key-no-img) {
    max-width: 480px;
  }

  .hope-seg {
    font-size: 2.25em;
  }
}
@media screen and (min-width: 1250px) {
  .dl-on-appstore-img {
    height: 50px;
    margin: 5px auto;
  }
}
@media screen and (min-width: 1280px) {
  .hero-text-main {
    font-size: 4em;
  }

  .hope-emp {
    font-size: 4em;
  }
}
@media screen and (min-width: 1300px) {
  .app-name {
    font-size: 3.25em;
  }
}
@media screen and (min-width: 1350px) {
  .key-div {
    margin-top: 135px;
  }
  .key-div-last {
    margin-bottom: 189px;
  }
}
@media screen and (min-width: 1500px) {
  .oth-div {
    margin-bottom: 120px;
  }

  .tech-div {
    margin-bottom: 120px;
  }
}
@media screen and (min-width: 1600px) {
  .hero-div {
    max-width: 1280px;
  }

  .oth-div {
    max-width: 1280px;
  }

  .tech-div {
    max-width: 1280px;
  }

  .hope-div {
    max-width: 1280px;
  }

  .cred-div {
    max-width: 1280px;
  }
}
@media screen and (min-width: 1800px) {
  .app-icon-img {
    width: 360px;
    height: 360px;
  }
}