/* Applied to all pages start */

*{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

:root{
    --accent:white;
}

.block-message {
  padding: 50px;
  font-size: 24px;
  color: var(--accent);
  display: none;
}

.rid{
  pointer-events: none !important; 
  
}

h1, h2, h3{
  font-family: "Lilita One", sans-serif !important;
}


h2, h3{
  font-size: 2rem;
  background: linear-gradient(#7da8e8, #2418a5);
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 0.25px white;
}


.page {
    display: flex;
    height: 100vh; 
    justify-content: center;
    align-items: center;
    background-color: rgb(99, 99, 254);
}


.wave_container{
    position: relative;
    width: 100%;
    height: 100vh;
    background-color: #3586ff;
    background-image: linear-gradient(#7da8e8,#3586ff,#1866dc, #020e20 );
    overflow: hidden;
   }
  
   .wave_container .wave{
    position: absolute;
    bottom: 0;
    left: 0;
    width:100vw;
    height: 100px;
    max-height:20vh;
    background: url(wave.png);
    background-size: 1000px 100px;

   }
  
  
   .wave_container .wave.wave_one{
    animation: animate 30s linear infinite;
    z-index: 1000;
    opacity: 0.8;
    animation-delay: 0s;
    bottom: 0;
   }
  
   @keyframes animate {
    
    0%{
      background-position-x: 0;
    }
  
    100%{
      background-position-x: 1000px;
    }
  
   }
  
  
   .wave_container .wave.wave_two{
    animation: animate_two 15s linear infinite;
    z-index: 999;
    opacity: 0.5;
    animation-delay: -5s;
    bottom: 10px;
   }
  
   @keyframes animate_two {
    
    0%{
      background-position-x: 0;
    }
  
    100%{
      background-position-x: 1000px;
    }
  
  }
  
  
  .wave_container .wave.wave_three{
    animation: animate_three 30s linear infinite;
    z-index: 998;
    opacity: 0.2;
    animation-delay: -2s;
    bottom: 15px;
   }
  
   @keyframes animate_three {
    
    0%{
      background-position-x: 0;
    }
  
    100%{
      background-position-x: 1000px;
    }
  
  }
  
  .wave_container .wave.wave_four{
    animation: animate_four 15s linear infinite;
    z-index: 997;
    opacity: 0.7;
    animation-delay: -15s;
    bottom: 20px;
   }


   /* coralreef and images */
   .greenplant_one{
    position: absolute;
    left:-1%;
    top:45%;
    max-width: 20vw;
    z-index: 1;
   }
   
   .coralreef_one{
    position: absolute;
    right:-0.25%;
    top:45%;
    max-width: 20vw;
   }

   .coralreef_two{
    position: absolute;
    top:60%;
    left: 10%;
    max-width: 25vw;
   }

   .fishpod{
    position: absolute;
    top:10%;
    right: 5%;
    max-width: 25vw;
    opacity: 25%;
   }

   .fishypod{
    position: absolute;
    top:50%;
    left: 10%;
    max-width: 25vw;
    opacity: 25%;
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
   }



  .btn-container{
    display: flex;
    gap: 10px;
    width:80%;
  }

  .btn-container button{
    flex: 1; 
    padding: 10px;
    text-align: center;
  }

  .animate_btn{
    padding:.5rem 1rem;
    border: .2rem solid var(--accent);
    color:var(--accent);
    cursor: pointer;
    font-size: 1.7rem;
    border-radius: .5rem;
    position: relative;
    z-index: 1;
    background-color: transparent;
}

.animate_btn::before{
    content:'';
    position: absolute;
    top:0;
    right:0;
    width:0%;
    height:100%;
    background:var(--accent);
    transition: .3s linear;
    z-index: -1;
}

.animate_btn:hover::before{
    width:100%;
    left:0;
}

.animate_btn:hover{
    color: #1866dc;
}

.animate_btn:focus{
  border:3px solid black;
  opacity: 70% !important;
}

.next{
  width:225px;
}

.next:focus{
  opacity: 100% !important;
  border: .2rem solid var(--accent);
  border-radius: .5rem;
}

.choice-btn{
  width:225px;
}


.gif_container{
  display: flex;
  align-items: center;
  flex-direction: column;
}

/* custom alert start */
#custom-alert {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5); 
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.alert-content {
  background: #fff;
  padding: 20px;
  border-radius: 10px;
  text-align: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  max-width: 300px;
  width: 80%;
}

#alert-message {
  position: relative;
  font-size: 20px; 
  color: #333;
  z-index: 10000;
}



#alert-ok-button {
  background-color: #7da8e8;
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  margin-top:1rem;
}

#alert-ok-button:hover {
  background-color: #3586ff;
}

.alert-hidden {
  display: none !important;
}
/* custom alert end */


/* Applied to all pages end */


/*Page one styles start*/


#page1 {
    display: flex;
    justify-content: center; 
    align-items: center; 
    width: 100%;
    flex-direction: column;
}

.animation-wrapper{
    width: fit-content;
}


.typewriter-container {
    white-space: nowrap; 
    overflow: hidden; 
    letter-spacing: 0.15em; 
    animation: typing 2s steps(32, end), blink-caret 0.75s step-end infinite;
}

.typewriter-text {
    color: orangered; 
    text-shadow: 1px 1.5px black;
    font-family: "Lilita One", sans-serif;

}

@keyframes typing {
    from { width: 0; }
    to { width: 100%; }
}


/*Page one styles end*/


/* Page two styles starts */

.page_two_content{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2rem;
  border: 1px solid  #7da8e8;
  border-radius: 15px;

}

h2{
  margin-bottom: 30px;
  color: white;
}

#gifCry{
  /* margin-block:-1.25rem; */
  margin-top: -1.25rem;
  margin-bottom: -1rem;
  z-index: 100;
}

.gif_dance{
  display: none;
  width: 300px !important;
}


#continueBtn{
  display: none;
  margin-top: 25px;
}

/* Page two styles end */

/* Page three styles start */

.page_three_content{
  padding: 2rem;
  border: 1px solid  #7da8e8;
  border-radius: 15px;
}

.calendar , .time{
  background-color: transparent;
  border: solid #7da8e8 1px;
  font-size: 1.5rem;
  width:200px;
  height:2rem;
  color:black;
}

.gif_jump{
  display: none;
  width: 300px !important;
 } 

 #nextBtnThree{
  display: block;
  margin-top:1rem;
  justify-self: center;
 }

 #continueBtnThree{
  display: none;
  margin-top:1rem;
  align-self: center;
  margin-inline:auto;
 }


/* Page three styles ends */


/* Page four styles starts */

.page_four_content{
  line-height: 35px;
  border: solid #7da8e8 1px;
  border-radius: 15px;
  padding:2rem;
}


.page_four_content h2{
  margin:0;
}

.page_four_content p{
  font-size: 12px;
  color: var(--accent);
  margin:0;
}

.page_four_content input{
  width:200px;
  height:45px;
  font-size: 1.2rem;
  border: 1px solid  #7da8e8;
  background-color: transparent;
  border-radius: 3px;
  color: var(--accent);
  padding:7px;
}

.page_four_content input::placeholder{
  color:var(--accent);
  opacity: 60%;
}

#nextBtnFour{
  margin-left:15px;
}

#gifTap{
  display: none;
  width:300px !important;
}

#continueBtnFour{
  display: none;
  margin-top:1rem;
  margin-inline:auto;
}


/* Page four styles ends */


/* Page five style start */

.page_five_content{
  border: solid #7da8e8 1px;
  border-radius: 15px;
  padding:2rem;
  display: flex;
  flex-direction: column;
}

.page_five_content .btn-container{
  display: flex;
  gap:15px;
}

.page_five_content button:first-child::before,
.page_five_content button:first-child::after {
  content: "";
  position: absolute;
  width: 107%; 
  height: 1px; 
  background-color: black; 
  top: 50%;
  left: 10%;
  transform-origin: center;
  margin-left:-25px;
}

.page_five_content button:first-child::before {
  transform: rotate(18deg);
}

.page_five_content button:first-child::after {
  transform: rotate(-18deg);
}

#gifSparkle{
  display: none;
  width:300px !important;
}

#continueBtnFive{
  display: none;
  margin-top:1rem;
  margin-inline:auto;
}

/* Page five style ends */


/* Page six style ends */

.page_six_content{
  border: solid #7da8e8 1px;
  border-radius: 15px;
  padding:2rem;
  display: flex;
  flex-direction: column;
}

.page_six_content .btn-container{
  display: inline-flex;
  gap: 15px;
}


.page_six_content .btn-container button:nth-last-child(1){
  white-space: nowrap;
}

.page_six_content .next{
  margin-top:1rem;
  align-self: flex-end;
}

#gifCircle{
  display: none;
  width:300px !important;
}

#continueBtnSix{
  display: none;
  margin-top:1rem;
  margin-inline:auto;
}

/* Page six style ends */

/* Page seven style starts */

.page_seven_content{
  border: solid #7da8e8 1px;
  border-radius: 15px;
  padding:2rem;
  display: flex;
  flex-direction: column;
}

.page_seven_content h2{
  margin:0;
}

.page_seven_content p{
  color: var(--accent);
  margin-block:1rem;
  width: 50%;
}

.page_seven_content textarea{
  width: 50%;
  height:5rem;
  border: 1px solid  #7da8e8;
  background-color: transparent;
  border-radius: 3px;
  color: var(--accent);
  padding:7px;
  font-size: 1.2rem;
}

.page_seven_content textarea::placeholder{
  color:var(--accent);
  opacity: 60%;
}



.page_seven_content button{
  width: 200px;
  align-self: flex-end;
}

#uncleSamBtn{
  z-index: 100;
}

#gifKiss{
  display: none;
  width:300px !important;
}

#continueBtnSeven{
  display: none;
  margin-top:1rem;
  margin-inline:auto;
}

/* Page seven style ends */

/* Page eight style starts */

.page_eight_content{
  border: solid #7da8e8 1px;
  border-radius: 15px;
  padding:2rem;
  display: flex;
  flex-direction: column;
  width: fit-content;
  max-width: 700px;
}

.page_eight_content h2{
  width: fit-content;
  margin: 0;
}

.page_eight_content p{
  color:var(--accent);
}
 

.page_eight_content button{
  width:200px;
  align-self:center;
}

#summaryDetails{
  font-size: 1.3rem;
  color: var(--accent);
  line-height: 2rem;
  margin-bottom: 1rem;
  z-index: 100;
}

#jelly{
  width:30%;
  position: absolute;
  left:75%;
  max-width:200px;
  align-self: flex-end;
}
#eightWordsp{
  margin-top: 0.5rem;
  margin-bottom: 0;
  z-index: 2;
  
}

#gifExplode{
  width: 300px !important;
  display: none;
}

#eightWords{
  display: none;
  width: 300px;
  margin-top: 1rem;
  text-align: center;
  font-size: 1.5rem;
}

#confirm{
  z-index: 100000;
}

/* Page eight style ends */

/* Food page start styles */


.page_food_content h2{
  text-align: center;
}

.page_food_content{
  max-width: 700px;
}

.food_wrapper{
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap:1rem;
}

.food_img{
  max-width:125px;
  justify-self: center;
  width:100%;
}

.food_card{
  transition: all 0.15s ease-in-out;
  border-radius: 15px;
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 2;
  width: 100%;
  max-width: 250px;
  gap:1.5rem;
  box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.03),
  20px 20px 40px rgba(0, 0, 0, 0.05),
  30px 30px 60px rgba(0, 0, 0, 0.01);
  border: 1px solid  #7da8e8;
  padding: 15px;
}

.food_card:hover{
  background-color: rgba(125, 168, 232, 0.4) ;
}

.food_card:focus{
  background-color: rgba(125, 168, 232, 0.4) ;
}

.food_card h2{
  margin:0;
}

.food_card:nth-child(4){
  z-index: 100;
}

.page_food_content button{
  grid-column: 2;
  z-index: 10000;
}

#continueBtnFood{
  display: none;
  margin-top: 1rem;
  margin-inline:auto;
}

#gifFood{
  display: none;
  width: 300px !important;
  margin-inline: auto;
}

/* Food page styles end */



@media screen and (max-width: 1024px) {
  #page1 > *:not(:first-child) , #page2 > *:not(:first-child) , #page3 > *:not(:first-child) , #page4 > *:not(:first-child) , #page5 > *:not(:first-child) , #page6 > *:not(:first-child) , #page7 > *:not(:first-child) , #page8 > *:not(:first-child){
      display: none;
  }

  .block-message{
    display: block;
  }

  .page {
    background-color: rgb(99, 99, 254);
}

}