body {
   background-color: rgba(165, 152, 97, 0.8);
   font-family: Helvetica;
}

.heroContainer {
   display: flex;
   flex-wrap: wrap;
   margin-top: -20px;
   background-color: #f2f2f2;
   justify-content: center;
   gap: 8%;
}

#mottoContainer {
   display: flex;
   justify-content: center;
   align-items: center;
   flex: 0 1 30%;
   margin-top: -8%;
}

#mottoText {
   width: 100%;
   font-size: 300%;
   font-weight: bold;
   color: #49748e;
}

#eBookContainer {
   display: flex;
   margin: 8% 0% 4% 0%;
   flex-direction: column;
   justify-content: space-evenly;
   align-items: center;
   flex: 0 1 35%;
}

#eBookImage  {
   width: 100%;
}



#appleBadge {
   width: 100%;
   margin: 40% 0px 0px 0px;
}

.introContainer {
   display: flex;
   background-color: #49748e;
   justify-content: center;
}

#introText {
   flex: 0 1 90%;
   font-size: 1.4em;
   margin: 20px;
   color: #e7e7e7;
}

.featuresContainer {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 80px;
   padding: 6% 0%;
   background: linear-gradient(to top, rgba(73, 116, 142, 0.7) 0%, rgb(73, 116, 142) 100%);
}

.featureRow {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 4%;
}

.featureImageLong {
   flex: 0 1 60%;
   display: flex;
   background-color: rgba(255, 255, 255, 0.9);
   border-radius: 14px;
}

.longImage {
   max-width: 100%;
}

.featureDesc {
   flex: 0 1 25%;
   font-size: 1.4em;
   color: #e7e7e7;
}

.textOnLeft {
   text-align: right;
}

.featureImageShort {
   flex: 0 1 50%;
   display: flex;
   background-color: #e7e7e7;
   border-radius: 10px;
}

.shortImage {
   max-width: 100%;
}

.endContainer {
   display: flex;
   background-color: #49748e;
   justify-content: center;
   align-items: center;
   gap: 5%;
}

#endText {
   flex: 0 1 60%;
   font-size: 1.4em;
   color: #e7e7e7;
}

#bottomBadge {
   max-width: 100%;
}

@media screen and (max-width: 850px) and (min-width: 619px) {

   #mottoText {
      font-size: 200%;
   }

   #introText {
      font-size: 1.3em;
   }

   .featureImageLong {
      flex: 0 1 55%;
   }

   .featureDesc {
      flex: 0 1 30%;
      font-size: 1.3em;
   }
   
}

@media screen and (max-width: 618px) {

   .heroContainer {
      margin: 16% 0%;
   }

   #mottoContainer {
      flex: 0 1 55%;
      text-align: center;
   }

   #mottoText {
      font-size: 200%;
   }

   #eBookContainer {
      min-width: 300px;
   }

   #introText {
      font-size: 1.2em;
   }

   .featureImageLong {
      min-width: 85%;
   }

   .featureImageShort {
      min-width: 80%;
   }

   .featureDesc {
      flex: 0 1 75%;
      font-size: 1.2em;
      text-align: center;
   }

   #sidenotesImg {
      order: 1;
   }

   #sidenotesTxt {
      order: 2;
   }

   #notesImg {
      order: 3;
   }

   #notesTxt {
      order: 4;
   }

   #endText {
      font-size: 1em;
   }

}