body {
  margin: 0;
  padding: 0;
  background: #e7f7fe;
  font-family: 'Fredoka', sans-serif;
  overflow-x: hidden;
}

h1 {
  font-family: 'Fredoka', sans-serif;
  display: block;
  text-align: center;
  color: #fcc7e2;
  font-weight: 900;
  font-size: 8rem;
  text-shadow: -4px -4px 0 #fff, 4px -4px 0 #fff, -4px 4px 0 #fff, 4px 4px 0 #fff;
  z-index: 2;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
}
.intro p {
  font-family: 'Fredoka', sans-serif;
  font-size: 2rem;
  z-index: 100;
  width: 40vw;
  text-align: center;
  color: white;
}

.intro {
  background-color: #fdd9d9;
  padding: 10px 10px;
  border-radius: 10px;
  position: absolute;
  left: 30%;
  top: 45%;
  z-index: 2;
}


.Start-page {
  display: flex;
  margin: 0;
  max-width: 100vw;
  max-height: 100vh;
}
#music-button {
  background-color: #ffc4c4;
  width: 100px;
  height: 100px;
  color: white;
  padding: 10px;
  border: 5px solid white;
  border-radius: 50%;
  font-size: 50px;
  font-weight: 900;
  margin-top: 5vh;
  margin: 1vh;
  position: absolute;
  top: 5%;
  left: 5%;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
}
#music-game{
  background-color: #ffc4c4;
  width: 100px;
  height: 100px;
  color: white;
  padding: 10px;
  border: 5px solid white;
  border-radius: 50%;
  font-size: 50px;
  font-weight: 900;
  margin-top: 5vh;
  margin: 1vh;
  position: absolute;
  top: 5%;
  left: 5%;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
}
#music-button img{
  scale: 15%;
}
#music-game img{
  scale: 15%;
}
#music-button:hover {
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
  transform: translateY(-5px);
}
#music-game:hover {
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
  transform: translateY(-5px);
}
#start-button {
  background-color: #ffc4c4;
  width: 250px;
  height: 100px;
  color: white;
  padding: 10px;
  border: 5px solid white;
  border-radius: 10px;
  font-size: 50px;
  font-weight: 900;
  margin-top: 5vh;
  margin: 1vh;
  position: absolute;
  bottom: 5%;
  right: 5%;
  z-index: 2;
}
#start-button:hover {
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
  transform: translateY(-5px);
}

.sad-img img {
  position: absolute;
  bottom: 5%;
  max-width: 30vw;
  z-index: 2;
}

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

.score-container {
  display: flex;
  align-items: center;
  margin-left: 4vh;

}

.score-container h2 {
  display: block;
  text-align: center;
  color: #fcc7e2;
  font-weight: 900;
  font-size: 3rem;
  margin-right: 20px;
}

.grid {
  display: flex;
  flex-wrap: wrap;
  width: 81vh;
  height: 81vh;
  align-items: center;
  justify-content: center;
  margin: auto;
  z-index: 3;
}

.square {
  margin: 0;
  width: 25vh;
  height: 25vh;
  border: solid pink 1vh;
}

.mole {
  background-image: url(Assets/Candies-02.png);
  background-size: 200px;
  background-repeat: no-repeat;
  background-position: center;
}

.finalscore {
  position: fixed;
  top: 0;
  left: 0;
  background-color: #3939392d;
  width: 100vw;
  height: 100vh;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  display: none;
}

.popup {
  background-color: #ffc4c4;
  color: white;
  padding: 10px;
  border: 2px solid white;
  border-radius: 10px;
  font-size: 16px;
  width: 50vh;
  height: 50vh;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.popup img {
  max-width: 50%;
  margin-bottom: 4vh;
}

.buttons {
  display: flex;
}

.buttons button {
  background-color: #ffc4c4;
  width: 140px;
  height: 70px;
  color: white;
  padding: 10px;
  border: 5px solid white;
  border-radius: 10px;
  font-size: 25px;
  font-weight: 900;
  margin-top: 5vh;
  margin: 1vh;
}
.buttons button:hover {
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
  transform: translateY(-5px);
}


.popup h2 {
  margin-top: 2vh;
  margin: 0;
}

.welcome-page {
  display: flex;
  width: 100vw;
  max-height: 100vh;
}

.rainbow {
  position: fixed;
  bottom: 0;
  right: 0%;
  z-index: 1;
}

.rainbow img {
  max-width: 50vw;
  opacity: 90%;
}

.clouds-start img {
  position: absolute;
  bottom: 0;
  max-width: 100%;
  height: 30vh;
  z-index: 1;
  animation: flow calc(15s * var(--i)) linear infinite;
}

@keyframes flow {
  0% {
    transform: translateX(-130%);
  }

  100% {
    transform: translateX(100%);
  }
}
#rabcloud{
 position: absolute;
 top: 15%;
right: 10%;
}

.character img {
  position: absolute;
  bottom: 0%;
  left: 0%;
  max-width: 25vw;
  z-index: 2;
  margin: 0;
}
#tap{
  background-color: #fcc7e2;
  padding: 20px 10px;
  border-radius: 10px;
  position: absolute;
  left: 3%;
  top: 35%;
  z-index: 2;
  font-size: 1.5rem;
  z-index: 100;
  text-align: center;
  color: white;
}/* Restoration: preserve the original art and make its controls usable at any size. */
*{box-sizing:border-box}body{font-family:'Arial Rounded MT Bold',Arial,sans-serif;min-height:100svh}.Start-page{min-height:100svh;position:relative;overflow:hidden}.Start-page h1{font-size:clamp(42px,6.5vw,90px);top:6%;margin:0;width:100%;transform:translateX(-50%);color:#e77fae}.intro{top:40%;left:28%;width:44%;padding:18px}.intro p{width:auto;font-size:clamp(15px,2vw,27px);color:#663955;margin:0;line-height:1.5}#rabcloud{top:20%;right:8%;width:18%}#rabcloud img{width:100%}.sad-img img{width:27%;max-height:46vh;object-fit:contain}.rainbow,.clouds-start{pointer-events:none}#music-button,#music-game{width:62px;height:62px;top:19%;left:4%;border-width:3px}#music-button img,#music-game img{scale:1;width:35px;height:35px;object-fit:contain}#start-button{width:180px;height:70px;font-size:30px;color:#653b52;border-width:3px;bottom:10%}.gaming{min-height:100svh;padding:15px 0 25px;position:relative;overflow:hidden}.score-container{margin:0;gap:12px;position:relative;z-index:3}.score-container h2{font-size:25px;color:#8d4e72;margin:10px 0 20px}.grid{width:min(60vh,70vw);height:auto;aspect-ratio:1;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.square{width:100%;height:100%;border:4px solid #e79bbe;border-radius:14px;background-color:#ffffffb0;cursor:pointer;touch-action:manipulation}.mole{background-size:80%}button:focus-visible{outline:4px solid #69559e;outline-offset:3px}#tap{position:relative;left:auto;top:auto;order:5;font-size:15px;color:#633b52;margin-top:15px;padding:10px;z-index:3}.character img{width:20%;max-height:33vh;object-fit:contain}.finalscore{padding:20px}.popup{width:min(440px,100%);height:auto;min-height:390px;padding:24px;color:#633b52;text-align:center}.popup img{height:100px;object-fit:contain;margin-bottom:20px}.popup h2{font-size:20px}.popup .score{font-size:44px;margin:10px}.buttons{flex-wrap:wrap;justify-content:center}.buttons button{width:auto;min-width:120px;height:55px;font-size:18px;color:#633b52;padding:10px 18px}.gaming #music-game{top:2%;left:3%}.clouds-start img{max-width:none}
@media(max-width:600px){.Start-page h1{top:8%;font-size:43px}.intro{left:10%;top:35%;width:80%}.intro p{font-size:17px}.sad-img img{width:45%;max-width:none;bottom:8%}#rabcloud{top:19%;right:10%;width:26%}#music-button{top:21%;width:48px;height:48px}#music-game{width:42px;height:42px}#music-game img{width:23px;height:23px}#start-button{width:125px;height:62px;bottom:10%;font-size:27px}.grid{width:90vw;gap:7px}.gaming{padding-top:75px}.score-container h2{font-size:24px}.character img{display:none}.popup{min-height:350px}.rainbow img{max-width:80vw}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}