html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: hidden;
}

.container {
  width: 100%;
  height: 100vh;

  display: flex;
  justify-content: center;
  align-items: center;

  font-family: "JT Percy", sans-serif;
  color: white;
}

h1 {
  font-size: 80px;

  animation: float 7s ease-in-out infinite;

  transition: transform 0.8s ease-out;
}


h1:hover {
  animation: float 5s ease-in-out infinite;
}

@keyframes float {
  0% {
    transform: translate(0px, 0px);
  }

  25% {
    transform: translate(10px, -20px);
  }

  50% {
    transform: translate(-6px, -20px);
  }

  75% {
    transform: translate(10px, -8px);
  }

  100% {
    transform: translate(0px, 0px);
  }
}




body {
  margin: 0;
  min-height: 200vh;

  background: linear-gradient(
    to bottom,
    #ffffff,
    #ffe0b2,
    #87ceeb,
    #ff8a65,
    #283593,
    #ffffff
  );

  background-size: 100% 400%;

  animation: skyShift 40s ease-in-out infinite;
}

@keyframes skyShift {
  0% {
    background-position: 50% 0%;
  }

  50% {
    background-position: 50% 100%;
  }

  100% {
    background-position: 50% 0%;
  }
}


.time img {
  width: 150px;
  height: auto;
  display: block;

  margin-left: 500px;
  margin-top: 100px;
}

.close-up img {
  width: 250px;
  height: auto;
  display: block;

  margin-left: 800px;
  margin-top: 100px;
}


.whispering img {
  width: 100%;
  height: auto;
  display: block;

  margin-left: 0px;
  margin-top: -250px;
}


.time1{
  width: 100%;
  height: 100vh;

  display: flex;
  justify-content: center;
  align-items: center;

  font-family: "JT Percy", sans-serif;
  color: white;

  margin-top: -250px;
  margin-left: -600px;

}

h2 {
  font-size: 50px;
}


.whispering {
  position: relative;
}

.sentence1 {
  position: absolute;
  top: 50%;
  left: 50%;

  opacity: 0; transition: opacity 2s ease;

  transform: translate(-50%, calc(-50% + 315px));
}

.whispering:hover .sentence1 {
  opacity: 1;
  
}





.time1218 img {
  width: 150px;
  height: auto;
  display: block;

  margin-left: 1100px;
  margin-top: 0px;
}


.close-up1218 img {
  width: 250px;
  height: auto;
  display: block;

  margin-left: 1200px;
  margin-top: -300px;
}


.time1218{
  width: 100%;
  height: 100vh;

  display: flex;
  justify-content: center;
  align-items: center;

  font-family: "JT Percy", sans-serif;
  color: white;

  margin-top: -280px;
  margin-left: -600px;

}


.whispering1218 img {
  position: relative;
  width: 1920px;
  height: auto;
  margin-top: -250px;
}

.sentence2 {
  position: absolute;
  top: 50%;
  left: 50%;

  opacity: 0; transition: opacity 2s ease;

  transform: translate(-50%, calc(-50% - 320px));
}

.whispering1218:hover .sentence2 {
  opacity: 1;
}




.time1248 img {
  width: 150px;
  height: auto;
  display: block;

  margin-left: 1500px;
  margin-top: -1400px;
}

.close-up1248 img {
  width: 250px;
  height: auto;
  display: block;

  margin-left: 500px;
  margin-top: -1000px;
}

.time1248{
  width: 100%;
  height: 100vh;

  display: flex;
  justify-content: center;
  align-items: center;

  font-family: "JT Percy", sans-serif;
  color: white;

  margin-top: -280px;
  margin-left: -200px;

}


.whispering1248 img {
  position: relative;
  width: 100%;
  height: auto;
  margin-top: -250px;
}

.sentence3 {
   position: absolute;
  left: 50%;
  top: 50%;

  transform: translate(-114%, calc(-70% + 100px));

  opacity: 0;
  filter: drop-shadow(0 0 0 rgba(243, 6, 6, 0));

  transition: opacity 0.1s ease, filter 0.1s ease;
}

.whispering1248:hover .sentence3 {
   opacity: 1;
  filter: drop-shadow(0 0 5px rgb(255, 19, 169));

  transition: opacity 1s ease, filter 1s ease;
}




.time1318 img {
  width: 150px;
  height: auto;
  display: block;

  margin-left: 500px;
  margin-top: -1000px;
}

.close-up1318 img {
  width: 250px;
  height: auto;
  display: block;

  margin-left: 1200px;
  margin-top: -900px;
}


.time1318{
  width: 100%;
  height: 100vh;

  display: flex;
  justify-content: center;
  align-items: center;

  font-family: "JT Percy", sans-serif;
  color: white;

  margin-top: -310px;
  margin-left: -200px;

}

.whispering1318 img {
  position: relative;
  width: 1920px;
  height: auto;
  margin-top: 0px;
  display: block;
  margin-top: -200px;


}

.sentence4 {
   position: absolute;
  top: 50%;
  left: 50%;

  transform: translate(-45%, calc(-30% - 600px));

  opacity: 0;
 

  transition: opacity 1s ease, filter 1s ease;
}


.whispering1318:hover .sentence4 {
  opacity: 1;

}






.time1348 img {
  width: 150px;
  height: auto;
  display: block;

  margin-left: -500px;
  margin-top: -1200px;
}


.close-up1348 img {
  width: 250px;
  height: auto;
  display: block;

  margin-left: 1000px;
  margin-top: -1000px;
}


.time1348{
  width: 100%;
  height: 100vh;

  display: flex;
  justify-content: center;
  align-items: center;

  font-family: "JT Percy", sans-serif;
  color: white;

  margin-top: -280px;
  margin-left: -200px;

}

.whispering1348 img {
  position: relative;
  width: 1920px;
  height: auto;
  margin-top: -250px;
}

.sentence5 {
  position: absolute;
  top: 50%;
  left: 50%;

  opacity: 0; transition: opacity 2s ease;

  transform: translate(-43%, calc(-45% - 330px));
}

.whispering1348:hover .sentence5 {
  opacity: 1;
}





.time1418 img {
  width: 150px;
  height: auto;
  display: block;

  margin-left: 1000px;
  margin-top: -1400px;
}

.close-up1418 img {
  width: 250px;
  height: auto;
  display: block;

  margin-left: 600px;
  margin-top: -1000px;
}


.time1418{
  width: 100%;
  height: 100vh;

  display: flex;
  justify-content: center;
  align-items: center;

  font-family: "JT Percy", sans-serif;
  color: white;

  margin-top: -280px;
  margin-left: -200px;

}


.whispering1418 img {
  position: relative;
  width: 100%;
  height: auto;
  margin-top: -250px;
}

.sentence6 {
    position: absolute;
  top: 50%;
  left: 50%;

  opacity: 0; transition: opacity 2s ease;

  transform: translate(-50%, calc(-35% - 330px));

  filter: drop-shadow(0 0 0 rgb(255, 0, 187));

 filter: drop-shadow(0 0 0 rgb(255, 0, 187));


  transition: opacity 1s ease, filter 1s ease;
 
}

.whispering1418:hover .sentence6 {
  opacity: 1;

  filter: drop-shadow(0 0 10px rgb(255, 0, 187));


}






.time1448 img {
  width: 150px;
  height: auto;
  display: block;

  margin-left: -200px;
  margin-top: -900px;
}

.close-up1448 img {
  width: 250px;
  height: auto;
  display: block;

  margin-left: 1200px;
  margin-top: -1200px;
}


.time1448{
  width: 100%;
  height: 100vh;

  display: flex;
  justify-content: center;
  align-items: center;

  font-family: "JT Percy", sans-serif;
  color: white;

  margin-top: -80px;
  margin-left: -200px;

}

.whispering1448 img {
  position: relative;
  width: 1920px;
  height: auto;
  margin-top: -80px;
}

.sentence7 {
    position: absolute;
  top: 50%;
  left: 50%;

  opacity: 0; transition: opacity 2s ease;

  transform: translate(-88%, calc(-78% - 330px));

  filter: drop-shadow(0 0 0 rgb(255, 0, 187));

 filter: drop-shadow(0 0 0 rgb(255, 0, 187));


  transition: opacity 1s ease, filter 1s ease;
}

.whispering1448:hover .sentence7 {
    opacity: 1;

  filter: drop-shadow(0 0 10px rgb(255, 0, 187));
}




.time1518 img {
  width: 150px;
  height: auto;
  display: block;

  margin-left: -500px;
  margin-top: -2000px;
}


.close-up1518 img {
  width: 250px;
  height: auto;
  display: block;

  margin-left: 1000px;
  margin-top: -1400px;
}


.time1518{
  width: 100%;
  height: 100vh;

  display: flex;
  justify-content: center;
  align-items: center;

  font-family: "JT Percy", sans-serif;
  color: white;

  margin-top: -80px;
  margin-left: -100px;

}


.whispering1518 img {
  position: relative;
  width: 1920px;
  height: auto;
  margin-top: -100px;
}

.sentence8 {
  position: absolute;
  top: 50%;
  left: 50%;

  opacity: 0; transition: opacity 2s ease;

    transform: translate(-50%, -50%);

  margin-top: -80px;
  margin-left: -100px;
}

.whispering1518:hover .sentence8 {
  opacity: 1;
}







.time1548 img {
  width: 150px;
  height: auto;
  display: block;

  margin-left: 1200px;
  margin-top: -2000px;
}


.close-up1548 img {
  width: 250px;
  height: auto;
  display: block;

  margin-left: 500px;
  margin-top: -1300px;
}


.time1548{
  width: 100%;
  height: 100vh;

  display: flex;
  justify-content: center;
  align-items: center;

  font-family: "JT Percy", sans-serif;
  color: white;

  margin-top: -80px;
  margin-left: -100px;

}

.whispering1548 img {
  position: relative;
  width: 1920px;
  height: auto;
  margin-top: -100px;
}

.sentence9 {
  position: absolute;
  top: 50%;
  left: 53%;

  opacity: 0; transition: opacity 2s ease;

  transform: translate(-45%, calc(-50% - 450px));
}

.whispering1548:hover .sentence9 {
  opacity: 1;
}







.time1618 img {
  width: 150px;
  height: auto;
  display: block;

  margin-left: -500px;
  margin-top: -2000px;
}


.close-up1618 img {
  width: 250px;
  height: auto;
  display: block;

  margin-left: 1300px;
  margin-top: -1400px;
}



.time1618{
  width: 100%;
  height: 100vh;

  display: flex;
  justify-content: center;
  align-items: center;

  font-family: "JT Percy", sans-serif;
  color: white;

  margin-top: -80px;
  margin-left: -100px;

}



.whispering1618 img {
  position: relative;
  width: 1920px;
  height: auto;
  margin-top: -100px;
}

.sentence10 {
  position: absolute;
  top: 50%;
  left: 53%;

  opacity: 0; transition: opacity 2s ease;

  transform: translate(-47%, calc(-50% - 450px));
}

.whispering1618:hover .sentence10 {
  opacity: 1;
}



.containerintro {
  width: 100%;
  height: 100vh;

  display: flex;
  justify-content: center;
  align-items: center;

  font-family: "JT Percy", sans-serif;
  color: white;

  margin-top: -800px;
}

h3 {
  font-size: 45px;
  line-height: 1.1;
  max-width: 1200px;


  letter-spacing: 12px;
  opacity: 0.75;

  transition:
    transform 0.3s ease,
    letter-spacing 1.5s ease,
    opacity 1.5s ease,
    filter 1.5s ease;

}

h3:hover {
    animation: floatText 6s ease-in-out infinite;

  letter-spacing: 0px;
  opacity: 1;
  filter: blur(0px);
}

@keyframes floatText {
  0% {
    transform: translate(0px, 0px);
  }

  25% {
    transform: translate(8px, -12px);
  }

  50% {
    transform: translate(-6px, -20px);
  }

  75% {
    transform: translate(10px, -8px);
  }

  100% {
    transform: translate(0px, 0px);
  }
}