html,
body {
  max-width: 100%;
  overflow-x: hidden;
}
body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}
/* Styling for intro section */
#intro {
  height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: white;
}

#fruit_page,
#with_a,
#twist {
  font-size: 40px;
  text-align: center;
  font-weight: 700;
  position: absolute;
}

#main_intro {
  position: absolute;
  text-align: center;
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
}

#main_intro p {
  text-align: center;
  margin: 0;
}

#ready,
#learn {
  grid-area: 1/1/2/2;
  font-size: 20px;
  font-weight: 300;
}

#exotic,
#fruits {
  font-size: 40px;
  font-weight: 700;
}

#with_a,
#twist {
  opacity: 0;
}

#ready .char,
#exotic .char,
#learn .char,
#fruits .char {
  opacity: 0;
}

#to_lychee {
  opacity: 0;
  color: #840000;
  text-align: center;
  position: absolute;
  font-size: 40px;
  font-weight: 700;
  line-height: 60px;
}

/* Styling for lychee, papaya, durian, sweetsop, mangosteen */
#lychee,
#papaya,
#durian,
#custard,
#mangosteen {
  height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #ff8080;
}

#papaya {
  background-color: #ffc080;
}

#durian {
  background-color: #ffee80;
}

#custard {
  background-color: #80ff80;
}

#mangosteen {
  background-color: #bb80ff;
}

#lychee_name,
#papaya_name,
#durian_name,
#custard_name,
#mangosteen_name {
  font-size: 50px;
  text-align: center;
  font-weight: 700;
  position: absolute;
  color: #840000;
}

#papaya_name {
  color: #d75300;
}

#durian_name {
  color: #808000;
}

#custard_name {
  color: #0a7a00;
  font-size: 45px;
}

#mangosteen_name {
  color: #55006e;
  font-size: 40px;
}

#lychee_content,
#papaya_content,
#durian_content,
#custard_content,
#mangosteen_content {
  position: absolute;
  height: 100vh;
  display: grid;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
  align-items: center;
  justify-items: center;
}

#lychee_image,
#papaya_image,
#durian_image,
#custard_image,
#mangosteen_image {
  grid-area: 1/1/3/2;
  height: 100%;
  opacity: 0;
  -webkit-mask-box-image: -webkit-linear-gradient(
    bottom,
    transparent 0%,
    #840000 40%,
    #840000 40%
  );
}

#papaya_image {
  -webkit-mask-box-image: -webkit-linear-gradient(
    bottom,
    transparent 0%,
    #d75300 40%,
    #d75300 40%
  );
}

#durian_image {
  -webkit-mask-box-image: -webkit-linear-gradient(
    bottom,
    transparent 0%,
    #808000 40%,
    #808000 40%
  );
}

#custard_image {
  -webkit-mask-box-image: -webkit-linear-gradient(
    bottom,
    transparent 0%,
    #0a7a00 40%,
    #0a7a00 40%
  );
}

#mangosteen_image {
  -webkit-mask-box-image: -webkit-linear-gradient(
    bottom,
    transparent 0%,
    #55006e 40%,
    #55006e 40%
  );
}

#lychee_title,
#papaya_title,
#durian_title,
#custard_title,
#mangosteen_title {
  grid-area: 2/1/4/2;
  font-size: 50px;
  font-weight: 700;
}

/* fix sweetsop title size for phone view*/
#custard_title {
  font-size: 45px;
}

#mangosteen_title {
  font-size: 40px;
}

#lychee_title .char,
#papaya_title .char,
#durian_title .char,
#custard_title .char,
#mangosteen_title .char {
  color: #ff8080;
  opacity: 0;
}

#papaya_title .char {
  color: #ffc080;
}

#durian_title .char {
  color: #ffee80;
}

#custard_title .char {
  color: #80ff80;
}

#mangosteen_title .char {
  color: #bb80ff;
}

#lychee_des,
#papaya_des,
#durian_des,
#custard_des,
#mangosteen_des {
  grid-area: 3/1/6/2;
  font-size: 15px;
  font-weight: 500;
  padding: 10% 15%;
  letter-spacing: 1px;
  line-height: 35px;
  margin: auto;
  color: #ff8080;
  text-align: center;
}

#papaya_des {
  color: #ffc080;
}

#durian_des {
  color: #ffee80;
}

#custard_des {
  color: #80ff80;
}

#mangosteen_des {
  color: #bb80ff;
}

#lychee_des .word,
#papaya_des .word,
#durian_des .word,
#custard_des .word,
#mangosteen_des .word {
  opacity: 0;
}

#to_papaya,
#to_durian,
#to_custard,
#to_mangosteen,
#to_end {
  opacity: 0;
  color: #d75300;
  text-align: center;
  position: absolute;
  font-size: 40px;
  font-weight: 700;
  line-height: 60px;
}

#to_durian {
  color: #808000;
}

#to_custard {
  color: #0a7a00;
}

#to_mangosteen {
  color: #55006e;
}

#to_end {
  color: #000000;
}

@media only screen and (min-width: 350px) {
  #lychee_des,
  #papaya_des,
  #durian_des,
  #custard_des,
  #mangosteen_des {
    grid-area: 3/1/6/2;
    font-size: 20px;
    font-weight: 500;
    padding: 10% 15%;
    letter-spacing: 1.5px;
    line-height: 45px;
    margin: auto;
    text-align: center;
  }
}

@media only screen and (min-width: 600px) {
  /* Styling for intro section */
  #fruit_page,
  #with_a,
  #twist {
    font-size: 80px;
    text-align: center;
    font-weight: 900;
    position: absolute;
  }

  #exotic,
  #fruits {
    font-size: 80px;
    font-weight: 900;
  }

  #ready,
  #learn {
    font-size: 40px;
    font-weight: 500;
    letter-spacing: 1.5px;
    line-height: 40px;
  }

  #to_lychee {
    font-size: 80px;
    font-weight: 900;
    line-height: 120px;
  }

  /* Styling for lychee, papaya, durian */
  #lychee_name,
  #papaya_name,
  #durian_name,
  #custard_name,
  #mangosteen_name {
    font-size: 80px;
    font-weight: 900;
  }

  #lychee_title,
  #papaya_title,
  #durian_title,
  #custard_title,
  #mangosteen_title {
    font-size: 80px;
    font-weight: 900;
  }

  #lychee_des,
  #papaya_des,
  #durian_des,
  #custard_des,
  #mangosteen_des {
    font-size: 150%;
    letter-spacing: 1.5px;
    font-weight: 500;
    padding: 60px 15%;
    line-height: 200%;
    text-align: justify;
  }

  #to_papaya,
  #to_durian,
  #to_custard,
  #to_mangosteen,
  #to_end {
    font-size: 80px;
    font-weight: 900;
    line-height: 120px;
  }
}

@media only screen and (min-width: 900px) {
  #lychee_des,
  #papaya_des,
  #durian_des,
  #custard_des,
  #mangosteen_des {
    font-size: 175%;
    letter-spacing: 1.5px;
    font-weight: 500;
    padding: 60px 15%;
    line-height: 225%;
    text-align: justify;
  }
}

@media only screen and (min-width: 1200px) {
  #lychee_des,
  #papaya_des,
  #durian_des,
  #custard_des,
  #mangosteen_des {
    font-size: 200%;
    letter-spacing: 1.5px;
    font-weight: 500;
    padding: 60px 15%;
    line-height: 250%;
    text-align: justify;
  }
}

@media only screen and (min-width: 1500px) {
  #lychee_des,
  #papaya_des,
  #durian_des,
  #custard_des,
  #mangosteen_des {
    font-size: 220%;
    letter-spacing: 1.5px;
    font-weight: 500;
    padding: 60px 15%;
    line-height: 275%;
    text-align: justify;
  }
}