* {
  margin: 0px;
  padding: 0px;
  user-select: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
}
body{
  overflow:hidden;
}
#open-container {
  /* border:1px solid black; */
  position: absolute;
  z-index: 50;
  background-color: #18cc27;
  height: 100vh;
  min-width:100vw;
  display: grid;
  grid-template-rows: 1fr 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr;
  /* transform: translateY(-100vh); */
}
/* ========================== Opening  Animation ============================================================================= */
.Moveup {
  animation: moveup 8s ease-in-out;
  transform: translateY(-100vh);
}

@keyframes moveup {
  0% {
    transform: translatey(0px);
  }
  10% {
    transform: perspective(200px) rotate3d(0, 0, 60, 10deg);
  }
  20% {
    transform: translatex(0px);
  }
  30% {
    transform: perspective(200px) rotate3d(0, 0, -60, 10deg);
  }
  40% {
    transform: translatex(0px);
  }
  50% {
    transform: translatey(-250px);
  }
  60% {
    transform: translatey(0px);
  }
  70% {
    transform: translatey(-350px);
  }
  80% {
    transform: translatey(-550px);
  }
  90% {
    transform: translatey(-650px);
  }
  100% {
    transform: translatey(-800px);
  }
}
/* ================================================================================================ */
.center {
  display: flex;
  justify-content: center;
  align-items: center;
}
/* ===================================================================================================== */
#one {
  grid-column-start: 1;
  grid-column-end: -1;
  grid-row-start: 1;
}
#one > h1 {
  /* border: 1px solid rgb(0, 0, 0); */
  letter-spacing: 1rem;
  font-size: 6em;
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  padding: 5px 15px 5px 15px;
  color: rgba(255, 255, 255, 0.639);
}
#two {
  grid-row-start: 2;
  grid-row-end: 5;
}
/* ===================================================================================================== */
#three {
  grid-row-start: 3;
  grid-row-end: 5;
}
#three > button {
  border: none;
  min-height: 12vh;
  min-width: 15vw;
  border-radius: 2rem;
  background-color: darkgreen;
  color: rgba(245, 245, 245, 0.72);
  font-size: xx-large;
  font-weight: 400;
  letter-spacing: 0.5rem;
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  transition: 0.2s;
}
#three > button:hover {
  cursor: pointer;
  color: black;
  transition: 0.5s;
  background-color: rgba(0, 100, 0, 0.424);
  transform: scale(0.9);
}
/* ================================================================================================== */
#four {
  grid-row-start: -4;
  grid-row-end: -1;
}
#five > img {
  /* border: 1px solid rgb(0, 0, 0); */
  border-radius: 1rem;
  background-color: rgba(245, 245, 245, 0.706);
  margin: 15px 10px 15px 10px;
  padding: 8px 5px 5px 5px;
  height: 25vh;
  width: 30vh;
}
/* ========================================================================================================= */
.imaagee {
  margin: 4vh 4vh 4vh 7vh;
  /* background-color: rgba(7, 110, 7, 0.213); */
  height: 64vh;
  width: 28vw;
  padding: 5px;
  border-radius: 2.5rem;
  transition: all 1s;
}

@keyframes ro {
  0% {
    transform: perspective(300px) rotate3d(0, 0, 20, 360deg);
  }
  25% {
    transform: perspective(300px) rotate3d(0, 0, 20, 365deg);
  }
  50% {
    transform: perspective(300px) rotate3d(0, 0, 20, 360deg);
  }
  75% {
    transform: perspective(300px) rotate3d(0, 0, 20, 355deg);
  }
  100% {
    transform: perspective(300px) rotate3d(0, 0, 20, 360deg);
  }
}

.left {
  animation: ro 10s ease-in-out infinite;
}

.right {
  animation: ro 10s reverse ease-in-out infinite;
}
/* ===================================================================================================== */
.game-container {
  height: 99.8vh;
  /* border: 1px solid black; */
  background-color: rgb(255, 244, 221);
  display: flex;
}
#left {
  /* border: 1px solid black; */
  height: 100vh;
  width: 25%;
  background-image:url(water.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}
#left:hover{
  cursor: none;
}
#left img{
  position:absolute;
  /* bottom:3vh; */
  height:14vh;
  width:6%;
  border-radius:50%;
  border: 1px solid whitesmoke;
  box-shadow: 1px 1px 10px black;
  /* margin:5px; */
}
/* ========================== Left Circle settings and Animations ============================================================= */
.a{
  top:3%;
  animation: bubble_one  8s linear 0.2s infinite;
}

.b{
  top:3%;  
  left:9%;
  animation: bubble_two  8s linear 0.4s infinite;
}

.c{
  top:3%;  
  left:18%;
  animation: bubble_three  8s linear 0.8s infinite;
}

.d{
  top:20%;  
  left:5%;
  animation: bubble_four  8s linear 0.1s infinite;
}

.e{
  top:20%;  
  left:15%; 
  animation: bubble_mix1  8s linear 1.5s infinite;
}

.f{
  bottom:24%;
  left:5%;
  animation: bubble_mix  8s linear 1s infinite;
}

.g{
  bottom:24%;  
  left:15%;
  animation: bubble_mix  8s linear 0.5s infinite;
}

.h{
  bottom:3%;
  animation: bubble_mix1  8s linear 0.5s infinite;
}

.i{
  bottom:3%;
  left:9%;
  animation: bubble_five  8s linear 0.9s infinite;
}

.j{
  bottom:3%;
  left:18%;
  animation: bubble_six  8s linear 0.7s infinite;
}
/* =================================================================================================================================== */
@keyframes bubble_one {
    0%{
      top:1%;
      left:2%;
    } 
    25%{
      left:2%;
      top:20%;
    } 
    50%{
      top:40%;
      right:9%;
    }
    75%{
      top:50%;
      left:9%;
    }
    100%{
      top:85%;
      left:9%;
    }
}
@keyframes bubble_two {
    0%{
      top:5%;
      left:6%;
    } 
    25%{
      left:12%;
      top:26%;
    } 
    50%{
      top:39%;
      right:7%;
    }
    75%{
      top:55%;
      left:18%;
    }
    100%{
      top:80%;
      left:5%;
    }
}
@keyframes bubble_three {
    0%{
      top:2%;
      left:12%;
    } 
    25%{
      left:4%;
      top:36%;
    } 
    50%{
      top:12%;
      right:3%;
    }
    75%{
      top:85%;
      left:6%;
    }
    100%{
      top:50%;
      left:5%;
    }
}  
  @keyframes bubble_four {
      0%{
        top:1%;
        left:0%;
      } 
      25%{
        left:6%;
        top:15%;
      } 
      50%{
        top:84%;
        left:12%;
      }
      75%{
        top:35%;
        left:18%;
      }
      100%{
        top:65%;
        left:1%;
      }
  }
  @keyframes bubble_five {
    0%{
      bottom:5%;
        left:5%;
      } 
      25%{
        bottom:23%;
        left:1%
      } 
      50%{
        bottom:50%;
        left:18%;
      }
      75%{
        bottom:85%;
        left:13%;
      }
      100%{
        bottom:45%;
        left:9%;
      }
    }
  @keyframes bubble_six {
    0%{
      bottom:15%;
        left:18%;
      } 
      25%{
        bottom:25%;
        left:9%
      } 
      50%{
        bottom:50%;
        right:1%;
      }
      75%{
        bottom:75%;
        left:5%;
      }
      100%{
        bottom:85%;
        left:2%;
      }
    }
  
@keyframes bubble_mix {
    0%{
      bottom:6%;
      left:1%;
    } 
    25%{
      bottom:18%;
      left:18%
    } 
    50%{
      bottom:36%;
      left:1%;
    }
    75%{
      bottom:50%;
      left:18%;
    }
    100%{
      bottom:75%;
      left:1%;
    }
}
@keyframes bubble_mix1 {
    0%{
      bottom:18%;
      left:1%;
    } 
    25%{
      top:13%;
      left:5%;
    } 
    50%{
      bottom:5%;
      left:18%;
    }
    75%{
      top:3%;
      left:5%;
    }
    100%{
      bottom:50%;
      left:18%;
    }
}

/* ====================================================================================================================================== */
#middle {
  /* border: 1px solid black; */
  height: 100vh;
  width: 50%;
  /* padding: 2px; */
  background-color: #1cd12b;
  /* background-image:linear-gradient(to left,#c7c7c7,e9e9e9); */
  display: flex;
  /* justify-content: end; */
  /* align-items: end; */
  flex-direction: column;
}
#right {
  /* border: 1px solid black; */
  height: 100vh;
  width: 25%;
  background-image:url(water.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}
#right img{
  position:absolute;
  /* bottom:3vh; */
  height:14vh;
  width:6%;
  border-radius:50%;
  margin:5px;
  border: 1px solid whitesmoke;
  box-shadow: 1px 1px 10px black;
}
#right:hover{
  cursor: none;
}
/* =========================================================================================================== */
.k{
  top:3%;
  animation: bubble_one_cross  8s linear 0.2s infinite;
}

.l{
  top:3%;  
  right:9%;
  animation: bubble_two_cross  8s linear 0.4s infinite;
}

.m{
  top:3%;  
  right:18%;
  animation: bubble_three_cross  8s linear 0.8s infinite;
}

.n{
  top:20%;  
  right:5%;
  animation: bubble_four_cross  8s linear 0.1s infinite;
}

.o{
  top:20%;  
  right:15%; 
  animation: bubble_mix1_cross  8s linear 1.5s infinite;
}

.p{
  bottom:24%;
  right:5%;
  animation: bubble_mix_cross  8s linear 1s infinite;
}

.q{
  bottom:24%;  
  right:15%;
  animation: bubble_mix_cross  8s linear 0.5s infinite;
}

.r{
  bottom:3%;
  animation: bubble_mix1_cross  8s linear 0.5s infinite;
}

.s{
  bottom:3%;
  right:9%;
  animation: bubble_five_cross  8s linear 0.9s infinite;
}

.t{
  bottom:3%;
  right:18%;
  animation: bubble_six_cross  8s linear 0.7s infinite;
}
/* =================================================================================================================================== */
@keyframes bubble_one_cross {
  0%{
    top:1%;
    right:2%;
  } 
  25%{
    right:4%;
    top:20%;
  } 
  50%{
    top:40%;
    right:9%;
  }
  75%{
    top:50%;
    right:7%;
  }
  100%{
    top:85%;
    right:3%;
  }
}
@keyframes bubble_two_cross {
  0%{
    top:5%;
    right:6%;
  } 
  25%{
    right:12%;
    top:26%;
  } 
  50%{
    top:39%;
    right:7%;
  }
  75%{
    top:55%;
    right:18%;
  }
  100%{
    top:80%;
    right:5%;
  }
}
@keyframes bubble_three_cross {
  0%{
    top:2%;
    right:12%;
  } 
  25%{
    right:4%;
    top:36%;
  } 
  50%{
    top:12%;
    right:3%;
  }
  75%{
    top:85%;
    right:6%;
  }
  100%{
    top:50%;
    right:5%;
  }
}  
@keyframes bubble_four_cross {
    0%{
      top:1%;
      right:0%;
    } 
    25%{
      right:6%;
      top:15%;
    } 
    50%{
      top:84%;
      right:12%;
    }
    75%{
      top:35%;
      right:18%;
    }
    100%{
      top:65%;
      right:1%;
    }
}
@keyframes bubble_five_cross {
  0%{
    bottom:5%;
      right:5%;
    } 
    25%{
      bottom:23%;
      right:1%
    } 
    50%{
      bottom:50%;
      right:18%;
    }
    75%{
      bottom:85%;
      right:13%;
    }
    100%{
      bottom:45%;
      right:9%;
    }
  }
@keyframes bubble_six_cross {
  0%{
    bottom:15%;
      right:18%;
    } 
    25%{
      bottom:25%;
      right:9%
    } 
    50%{
      bottom:50%;
      right:1%;
    }
    75%{
      bottom:75%;
      right:5%;
    }
    100%{
      bottom:85%;
      right:2%;
    }
  }

@keyframes bubble_mix_cross {
  0%{
    bottom:6%;
    right:1%;
  } 
  25%{
    bottom:18%;
    right:18%
  } 
  50%{
    bottom:36%;
    right:1%;
  }
  75%{
    bottom:50%;
    right:18%;
  }
  100%{
    bottom:75%;
    right:1%;
  }
}
@keyframes bubble_mix1_cross {
  0%{
    bottom:18%;
    right:1%;
  } 
  25%{
    top:13%;
    right:5%;
  } 
  50%{
    bottom:5%;
    right:18%;
  }
  75%{
    top:3%;
    right:5%;
  }
  100%{
    bottom:50%;
    right:18%;
  }
}

/* ====================================================================================================================================== */
#navbar {
  /* border: 1px solid black; */
  height: 12%;
  width: 90%;
  margin: 20px 0px 45px 35px;
  border-radius: 1.5rem;
  display: flex;
  justify-content:space-around;
  align-items: center;
}
#navbar>button{
  background-color:#18cc2700;
  border: none;
  height:11.5vh;
  width:32%;
  /* margin:1px; */
  border-radius:1.5rem;
  font-family:"shizuru", sans-serif;
  font-size: 2rem;
  font-weight: 700;
  color:rgba(245, 245, 220, 0.798);
  transition: all 0.5s;
}
#navbar>button:hover{
  background-color:rgba(0, 128, 0, 0.416) ;
  cursor: pointer;
  color: black;
}
#playgame {
  background-color: rgba(0, 100, 0, 0.906);
  /* border: 1px solid black; */
  height: 100vh;
  width: 85%;
  margin: 20px 0px 30px 49px;
  border-radius: 1.5rem;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 5px;
  padding: 10px;
}
#playgame > button {
  background-color:rgba(255, 255, 255, 0.761);
  border-radius: 2.5rem;
  border: none;
  font-family: "Protest Revolution", sans-serif;
  font-size: 6rem;
  font-weight: 700;
  cursor: pointer;
}
/* ------------------------------------------------------------------------------------------ */
.winning{
  /* border:1px solid black; */
  position:absolute;
  background-color: rgba(0, 0, 0, 0.87);
  z-index: 5;
  height:100vh;
  width:100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap:5;
}
.winning>h1{
  /* border:1px solid beige; */
  color: goldenrod;
  font-size: 6rem;
  font-family: "Protest Revolution", sans-serif;
  margin:0px 0px 100px 100px;
  font-weight: 700;
}
.winning>img{
  /* border:1px solid beige; */
  position: relative;
  bottom: 20px;
  height:150px;
  width:150px;
  top:25%;
  right:18%;
  margin:0px 0px 150px 0px;
}
/* ================================================================================ */
.popup{
  position: absolute;
  background-color:rgba(0, 0, 0, 0.9);
  transition: all 0.3s ease-in-out;
}
#close{
  position:absolute;
  right:0px;
  top:0px;
  color: black;
  transition: all 0.3s;
}
#close:hover{
  color: beige;
  cursor: pointer;
}

.active{
  height:100%;
  width:100%;
}
.how-to-plays{
  height:0%;
  width:0%;
  position: absolute;
  opacity:0;
  background-color:rgba(0, 100, 0, 0.6);
  color: #fff;
  top:50%;
  left:50%;
  padding:15px;
  border-radius: 1rem;
  display: flex;
  flex-direction: column;
  text-align: center;
  overflow:auto;
  font-family:"Hachi Maru Pop", cursive; 
  transition: all 0.5s ease-in-out;
  transform: translate(-50%,-50%) scale(1.4);
}
.activehtp{
  height:70%;
  width:40%;
  opacity:5;
  transform: translate(-50%,-50%) scale(1.1);
  /* cursor:text; */
}

.how-to-plays::-webkit-scrollbar{
  width:7px;
}
.how-to-plays::-webkit-scrollbar-track{
  background-color:rgba(0, 100, 0, 0.723);
  border-radius:15px;
  margin-block:10vh;
}
.how-to-plays::-webkit-scrollbar-thumb{
  background-color:rgba(240, 255, 255, 0.477);
  border-radius:1.5rem;
}
.how-to-plays::-webkit-scrollbar-thumb:hover{
  background-color:rgba(240, 255, 255, 0.758);
}
.hp>h1{
  color:black;
  font-size: 2.5rem;
  font-weight: 600;
  margin:15px 10px;
}
.hp>p{
  color:azure(255, 255, 255, 0.749);
  font-size:1rem;
  font-weight: 400;
  letter-spacing:3px;
  line-height:25px;
  margin:10px
}
.hp>img{
  opacity:0.8;
  height:35vh;
  width:25vw;
  margin:10px;
}
.olul>h1{
  color:black;
  font-size: 2.5rem;
  font-weight: 600;
  margin:15px 10px;
  
}
.olul>ol>li{
  color:black;
  font-size: 1.5rem;
  font-weight: 600;
  margin:15px 10px;
  text-align:center;
  list-style:none;
}
.olul>ol>ul>li{
  color:azure(255, 255, 255, 0.749);
  font-size:1rem;
  font-weight: 400;
  letter-spacing:3px;
  line-height:25px;
  margin:10px;
  list-style:none;
}