/************************************************/
/************* UNIVERSAL ELEMENTS ***************/
/************************************************/

body,
html {
  height: 100%;
  font-size: 20px; 
  /* font-family: 'Sriracha', cursive; */
  font-family: 'Rajdhani', sans-serif;
  line-height: 1.5em; 
  margin: 0em;
  color: #ffffcc; 
  background-color: #ffb3b3; 
  box-sizing: border-box;
}

h1 {
  letter-spacing: 5px;
  font-size: 50px;
  font-family: 'Rajdhani', sans-serif;
  color: #ffffcc;
  text-align: center;
  text-shadow: 5px 5px 5px #ff8080	;

}

h2 {
  letter-spacing: 3px;
  font-size: 25px;
  font-family: 'Rajdhani', bold;
  color: #ffffcc;
  text-align: center;
  line-height: 1.3em;
  text-shadow: 5px 5px 5px #ff8080	;

}

h3 {
  letter-spacing: 3px;
  font-size: 25px;
  font-family: 'Rajdhani', bold;
  color: #ffffcc;
  text-align: center;
  line-height: 1.3em;
  text-shadow: 5px 5px 5px #ff8080	;

}

p a {
  color: #ffffcc;
  text-shadow: 5px 5px 5px #ff8080	;
  text-decoration: none;
}

/************************************************/
/*************** CSS FOR NAV BAR ****************/
/************************************************/


ul.nav-bar {
  /* Styling for the <ul class="nav-bar"> element */
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #ffb3b3;
  border-style: solid;
  border-color: #ffb3b3;
}


li.nav {
  /* Styling for the <li class="nav"> element */
  float: right;
  font-family: 'Rajdhani', sans-serif;
  font-size: 25px;
}


li.nav a {
  /* Styling for the <a> elements in <li class="nav"> */
  display: block;
  color: #ffffcc;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: bold;
}


li.nav a:hover {
  /* Styling for the <a> elements when the mouse is hovering in <li class="nav"> */
  background-color: #ffffcc;
  color: #ffb3b3;
}

/************************************************/
/*********** CSS FOR FLEXBOX HEADING ************/
/************************************************/

.flex-container {
  display: flex; 
  flex-direction: row; 
  flex-wrap: nowrap; 
  justify-content: center; 
  align-items: center; 

  background-color: #ffffcc;
  padding: 5px;

  /* Positioning properties */
  position: absolute;
  left: 0%;
  right: 0%;
  top: 40%; 
  
  border-style: dotted;
  color: #ffb3b3;
}

.heading-home {
  color: #ffb3b3;
  font-size: 50px;
  letter-spacing: 10px;
  line-height: 10px;
  text-align: center;

}


.intro-text {
  background-color: #ffb3b3;
  padding: 4%;
  margin: 3%;
  color: #ffffcc; 
  font-size: 30px; 
  letter-spacing: 2px; 
  line-height: 1.4em;
  text-align: center;

  border-style: dotted;
  color: #ffffcc;
}


/************************************************/
/*************** PARALLAX SCROLL ****************/
/************************************************/

/*-----------TEXT SECTIONS-----------*/


.text-section {
  background-color: #ffb3b3;
  padding: 20px 45px;
  margin: 35px;
  text-align: center;
}

/*---------IMAGE STYLING + PARALLAX PROPERTY---------*/


.main-message,
.image-one,
.image-two,
.image-three, 
.image-four,
.image-five,
.image-six,
.image-seven,
.image-eight,
.image-nine,
.image-ten,
.image-eleven,
.image-twelve, 
.image-thirteen,
.image-fourteen,
.image-fifteen,
.image-sixteen,
.image-seventeen,
.image-eighteen,
.image-nineteen,
.image-twenty,
.image-twentyone,
.image-twentytwo,
.image-twentythree,
.image-twentyfour,
.image-twentyfive,
.image-twentysix,
.image-twentyseven
{
  position: relative;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #ffb3b3;
  background-size: cover;
  min-height: 100%; /* This adjusts the height of the image */

  background-attachment: value;
  
}

.main-message {
  background-image: url("https://cdn.glitch.com/4a45f388-bfea-4338-b6e1-0994a303a9b3%2Ffuji.jpg?v=1597537310185");
}

.image-one {
  background-image: url("https://cdn.glitch.com/4a45f388-bfea-4338-b6e1-0994a303a9b3%2Fkids.jpg?v=1597523831680");
}

.image-two {
  background-image: url("https://cdn.glitch.com/4a45f388-bfea-4338-b6e1-0994a303a9b3%2Frunning.jpg?v=1597523529529");
}

.image-s {
  background-image: url("https://cdn.glitch.com/4a45f388-bfea-4338-b6e1-0994a303a9b3%2Fkids.jpg?v=1597523831680");
}

.image-four {
  background-image : url("https://cdn.glitch.com/4a45f388-bfea-4338-b6e1-0994a303a9b3%2Fkids.jpg?v=1597523831680");
}
.image-five{
  background-image :url("https://cdn.glitch.com/4a45f388-bfea-4338-b6e1-0994a303a9b3%2Fkids.jpg?v=1597523831680");
}

/*veggie platter*/
.image-six{
  background-image: url("https://cdn.glitch.com/4a45f388-bfea-4338-b6e1-0994a303a9b3%2Fveggies.jpg?v=1597537669284");
}

/*veggie platter*/
.image-seven{
  background-image: url("https://cdn.glitch.com/4a45f388-bfea-4338-b6e1-0994a303a9b3%2Fgym.jpg?v=1597537538794");
}

/*running track*/
.image-eight{
  background-image: url("https://cdn.glitch.com/4a45f388-bfea-4338-b6e1-0994a303a9b3%2Frunningtrack.jpg?v=1597537859759");
}
/*potato chips*/
.image-nine{
  background-image: url("https://cdn.glitch.com/4a45f388-bfea-4338-b6e1-0994a303a9b3%2Fchips.jpg?v=1597523035957");
}

/*icecream*/
.image-twentysix{
  backgroud-image: url("https://cdn.glitch.com/4a45f388-bfea-4338-b6e1-0994a303a9b3%2Ficecream.jpg?v=1597542291771");
}

/*coffee*/
.image-eleven{
  background-image: url("https://cdn.glitch.com/4a45f388-bfea-4338-b6e1-0994a303a9b3%2Fcoffee.jpg?v=1597538168859");
}

/*kale chips*/
.image-twelve{
  background-image: url("https://cdn.glitch.com/4a45f388-bfea-4338-b6e1-0994a303a9b3%2Fkalechips.jpg?v=1597538740914");
}

/*baked banana chips*/
.image-thirteen{
  background-image: url("https://cdn.glitch.com/4a45f388-bfea-4338-b6e1-0994a303a9b3%2Fbanana.jpg?v=1597539311840");
}

/*tofu*/
.image-fourteen{
  background-image: url("https://cdn.glitch.com/4a45f388-bfea-4338-b6e1-0994a303a9b3%2Ftofu.jpg?v=1597539430063");
}

/*weights*/
.image-fifteen{
  background-image: url("https://cdn.glitch.com/4a45f388-bfea-4338-b6e1-0994a303a9b3%2Fweights.jpg?v=1597539565991");
}

/*treadmill*/
.image-sixteen{
  background-image: url("https://cdn.glitch.com/4a45f388-bfea-4338-b6e1-0994a303a9b3%2Ftreadmill.jpg?v=1597539787412");
}

/*planet fitness*/
.image-seventeen{
  background-image: url("https://cdn.glitch.com/4a45f388-bfea-4338-b6e1-0994a303a9b3%2Fplanetfitness.jpg?v=1597540016814");
}

/*frozen banana*/
.image-eighteen{
  background-image: url("https://cdn.glitch.com/4a45f388-bfea-4338-b6e1-0994a303a9b3%2Fbananabites.jpg?v=1597542590119");
}

/*watermelon*/
.image-nineteen{
  background-image: url("https://cdn.glitch.com/4a45f388-bfea-4338-b6e1-0994a303a9b3%2Fwatermelon.jpg?v=1597542594017");
}

/*milk*/
.image-twenty{
  background-image: url("https://cdn.glitch.com/4a45f388-bfea-4338-b6e1-0994a303a9b3%2Fpopsicles.jpg?v=1597542590197");
}

/*yerba mate*/
.image-twentyone{
  background-image: url("https://cdn.glitch.com/4a45f388-bfea-4338-b6e1-0994a303a9b3%2Fyerba%20mate.jpg?v=1597542900729");
}

/*coco*/
.image-twentytwo{
  background-image: url("https://cdn.glitch.com/4a45f388-bfea-4338-b6e1-0994a303a9b3%2Fcoco.jpg?v=1597542902814");
}
/*kombucha*/
.image-twentythree{
  background-image: url("https://cdn.glitch.com/4a45f388-bfea-4338-b6e1-0994a303a9b3%2Fkombucha.jpg?v=1597542907374");
}

/*mood*/
.image-twentyfour{
  background-image: url("https://cdn.glitch.com/4a45f388-bfea-4338-b6e1-0994a303a9b3%2Fmood.jpg?v=1597543199699");
}

/*yoga*/
.image-twentyfive{
  background-image: url("https://cdn.glitch.com/4a45f388-bfea-4338-b6e1-0994a303a9b3%2Fyoga.jpg?v=1597543185624"); 
}

/*sunset*/
.image-twentyseven{
  background-image: url("https://cdn.glitch.com/4a45f388-bfea-4338-b6e1-0994a303a9b3%2Fsunset.jpg?v=1597544306521");
}

/*-----------IMAGE ATTRIBUTIONS (if required)-----------*/
.attributions {
  font-size: 12px;
  text-align: right;
  margin-right: 10px;
}

@media mediatype and (max width: 700px) {
  .flex-container {
    flex-wrap: wrap;
    top: 20%;
  }
}