/* Basic reset to remove margins and padding from body */
body {
  margin: 0;
  padding: 0;
  background: linear-gradient(
  135deg,
  #0B0A14,
  #171126,
  #101A27
  );
  overflow: hidden;
  justify-content: center;
  align-items: center;
  width: 100vmin;
  height: 100vmin;
}
html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: linear-gradient(
  135deg,
  #FFFFFF,
  #171126,
  #101A27
  );
}
body {
  background: linear-gradient(
      135deg,
      #3D3A2E 0%,
      #30283E 50%,
      #0B0A14 100%
  );
}
canvas {
  image-rendering: pixelated;
}
/* Full-Screen Image Container */
.image-container {
  position: relative; /* Needed for absolute positioning of the play button */
  width: min(100vmin, 100vmin);
  height: min(100vmin, 100vmin)
  left: 50%;
  transform: translateX(calc((100vw - 100vh) / 2));
}
.image-container2 {
  position: absolute; /* Needed for absolute positioning of the play button */
  width: min(20vmin, 20vmin);
  height: min(20vmin, 20vmin)
}
.image-text {
  /* Positions the text relative to the .image-container2 */
  position: absolute;
  /* Example positioning: Bottom left corner */
  bottom: 10px;
  left: 10px;
  /* Add styling for readability over an image */
  color: white;
  background-color: rgba(0, 0, 0, 1);
  padding: 5px;
  font-size: 14px;
}
/* Full-Screen Image Styling */
.image {
  width: 100%; /* Make the image fill the full width */
  height: 100%; /* Make the image fill the full height */
  object-fit: cover; /* Ensures the image covers the entire screen while maintaining its aspect ratio */
}
.Import{
  position: absolute;
  z-index: 2000000000;
  font-family:  Impact, Tahoma Bold;
  top: 86%;
  left: 15%;
}
.Export{
  position: absolute;
  z-index: 2000000000;
  font-family:  Impact, Tahoma Bold;
  top: 86%;
  left: 25%;
}
Import:active {
  transform: scale(0.98); 
  box-shadow: 3px 2px 22px rgba(0, 0, 0, 0.24); /* Reduce shadow to simulate pressing */
}
Export:active {
  transform: scale(0.98); 
  box-shadow: 3px 2px 22px rgba(0, 0, 0, 0.24); /* Reduce shadow to simulate pressing */
}
.player {
  position: absolute;
  top: 70%;
  left: 0%;
  width: 30%; /* Make the image fill the full width */
  height: 30%; /* Make the image fill the full height */
  object-fit: cover; /* Ensures the image covers the entire screen while maintaining its aspect ratio */
}
.smallimage {
  width: 23%; /* Make the image fill the full width */
  height: 22%; /* Make the image fill the full height */
  object-fit: cover; /* Ensures the image covers the entire screen while maintaining its aspect ratio */
}
.smallimage2 {
  width: 100%; /* Make the image fill the full width */
  height: 100%; /* Make the image fill the full height */
  object-fit: cover; /* Ensures the image covers the entire screen while maintaining its aspect ratio */
}
/* Play button styling */
.play-button {
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 290px;
  padding: 0;
  background:
      linear-gradient(
          90deg,
          rgba(246,211,101,0.12),
          rgba(149,130,178,0.18)
      );
  border: 2px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  backdrop-filter: blur(2px);
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  transition:
      box-shadow 0.25s ease,
      filter 0.2s ease,
      border-color 0.25s ease;
  box-shadow:
      0 4px 6px rgba(0,0,0,0.6),
      0 8px 16px rgba(0,0,0,0.4);
}
.options2-button {
  position: absolute;
  top: 80%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  padding: 0;
  background:
      linear-gradient(
          90deg,
          rgba(246,211,101,0.12),
          rgba(149,130,178,0.18)
      );
  border: 2px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  backdrop-filter: blur(2px);
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  transition:
      box-shadow 0.25s ease,
      filter 0.2s ease,
      border-color 0.25s ease;
  box-shadow:
      0 4px 6px rgba(0,0,0,0.6),
      0 8px 16px rgba(0,0,0,0.4);
}
.volume1-button {
  position: absolute; /* Position the button absolutely over the image */
  top: -385%; /* Center vertically */
  left: 250%; /* Center horizontally */
  transform: translate(-50%, -50%); /* Adjust for exact center */
  transform: translate( calc(((100vw - 100vh) / 2) - 50%), -50% );
  background-color: #90EE90; /* Blue background */
  background-color: transparent;
  border: none;
  border-radius: 5%; /* Circular button */
  padding: 0px; /* Size of the button */
  cursor: pointer;
  transition: 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.6),             0 8px 16px rgba(0, 0, 0, 0.4);
}
#fileInput {
position: absolute;
top: -150%;
left: 170%;
z-index: 9999999;
padding: 10px;
background: #FFEDB7;
color: black;
border: 2px solid #ffd000;
border-radius: 8px;
}
#fileNameDisplay {
position: absolute;
top: 56%;
left: 50%;
transform: translate(-50%, -50%);
color: black;
font-family: sans-serif;
font-size: 14px;
z-index: 1;
}
.volume2-button {
  position: absolute; /* Position the button absolutely over the image */
  top: -237%; /* Center vertically */
  left: 250%; /* Center horizontally */
  transform: translate(-50%, -50%); /* Adjust for exact center */
  transform: translate( calc(((100vw - 100vh) / 2) - 50%), -50% );
  background-color: #90EE90; /* Blue background */
  background-color: transparent;
  border: none;
  border-radius: 5%; /* Circular button */
  padding: 0px; /* Size of the button */
  cursor: pointer;
  transition: 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.6),             0 8px 16px rgba(0, 0, 0, 0.4);
}
.volume3-button {
  position: absolute; /* Position the button absolutely over the image */
  top: -127%; /* Center vertically */
  left: 250%; /* Center horizontally */
  transform: translate(-50%, -50%); /* Adjust for exact center */
  transform: translate( calc(((100vw - 100vh) / 2) - 50%), -50% );
  background-color: #90EE90; /* Blue background */
  background-color: transparent;
  border: none;
  border-radius: 5%; /* Circular button */
  padding: 0px; /* Size of the button */
  cursor: pointer;
  transition: 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.6),             0 8px 16px rgba(0, 0, 0, 0.4);
}
.shop-button {
  position: absolute; /* Position the button absolutely over the image */
  top: -421%; /* Center vertically */
  left: 473%; /* Center horizontally */
  transform: translate(-50%, -50%); /* Adjust for exact center */
  transform: translate( calc(((100vw - 100vh) / 2) - 50%), -50% );
  background-color: transparent;
  border: none;
  border-radius: 5%; /* Circular button */
  padding: 0px; /* Size of the button */
  cursor: pointer;
  transition: 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.6),             0 8px 16px rgba(0, 0, 0, 0.4);
}
.moregames-button {
  position: absolute; /* Position the button absolutely over the image */
  position: absolute; /* Position the button absolutely over the image */
  top: -371%; /* Center vertically */
  left: 473%; /* Center horizontally */
  transform: translate(-50%, -50%); /* Adjust for exact center */
  transform: translate( calc(((100vw - 100vh) / 2) - 50%), -50% );
  background-color: transparent;
  border: none;
  border-radius: 5%; /* Circular button */
  padding: 0px; /* Size of the button */
  cursor: pointer;
  transition: 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.6),             0 8px 16px rgba(0, 0, 0, 0.4);
}
.rate-button {
  position: absolute; /* Position the button absolutely over the image */
  top: -431%; /* Center vertically */
  left: 473%; /* Center horizontally */
  transform: translate(-50%, -50%); /* Adjust for exact center */
  transform: translate( calc(((100vw - 100vh) / 2) - 50%), -50% );
  background-color: transparent;
  border: none;
  border-radius: 5%; /* Circular button */
  padding: 0px; /* Size of the button */
  cursor: pointer;
  transition: 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.6),             0 8px 16px rgba(0, 0, 0, 0.4);
}
.purchase-button {
  position: absolute; /* Position the button absolutely over the image */
  top: -221%; /* Center vertically */
  left: 473%; /* Center horizontally */
  transform: translate(-50%, -50%); /* Adjust for exact center */
  transform: translate( calc(((100vw - 100vh) / 2) - 50%), -50% );
  background-color: transparent;
  border: none;
  border-radius: 5%; /* Circular button */
  padding: 0px; /* Size of the button */
  cursor: pointer;
  transition: 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.6),             0 8px 16px rgba(0, 0, 0, 0.4);
}
.profile-button {
  position: absolute; /* Position the button absolutely over the image */
  top: -171%; /* Center vertically */
  left: 473%; /* Center horizontally */
  transform: translate(-50%, -50%); /* Adjust for exact center */
  transform: translate( calc(((100vw - 100vh) / 2) - 50%), -50% );
  background-color: transparent;
  border: none;
  border-radius: 5%; /* Circular button */
  padding: 0px; /* Size of the button */
  cursor: pointer;
  transition: 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.6),             0 8px 16px rgba(0, 0, 0, 0.4);
}
.help-button {
  position: absolute; /* Position the button absolutely over the image */
  top: -20000%; /* Center vertically */
  left: 250%; /* Center horizontally */
  transform: translate(-50%, -50%); /* Adjust for exact center */
  background-color: transparent;
  border: none;
  border-radius: 5%; /* Circular button */
  padding: 0px; /* Size of the button */
  cursor: pointer;
  transition: 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.6),             0 8px 16px rgba(0, 0, 0, 0.4);
}
.back-button {
  position: absolute; /* Position the button absolutely over the image */
  top: -70%; /* Center vertically */
  left: 153%; /* Center horizontally */
  transform: translate(-50%, -50%); /* Adjust for exact center */
  transform: translate( calc(((100vw - 100vh) / 2) - 50%), -50% );
  background-color: transparent;
  border: none;
  border-radius: 5%; /* Circular button */
  padding: 0px; /* Size of the button */
  cursor: pointer;
  transition: 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.6),             0 8px 16px rgba(0, 0, 0, 0.4);
}
.back-button2 {
  position: absolute; /* Position the button absolutely over the image */
  top: -60%; /* Center vertically */
  left: 250%; /* Center horizontally */
  transform: translate(-50%, -50%); /* Adjust for exact center */
  transform: translate( calc(((100vw - 100vh) / 2) - 50%), -50% );
  background-color: transparent;
  border: none;
  border-radius: 5%; /* Circular button */
  padding: 0px; /* Size of the button */
  cursor: pointer;
  transition: 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.6),             0 8px 16px rgba(0, 0, 0, 0.4);
}
.back-button3 {
  position: absolute; /* Position the button absolutely over the image */
  top: -30%; /* Center vertically */
  left: 250%; /* Center horizontally */
  transform: translate(-50%, -50%); /* Adjust for exact center */
  transform: translate( calc(((100vw - 100vh) / 2) - 50%), -50% );
  background-color: transparent;
  border: none;
  border-radius: 5%; /* Circular button */
  padding: 0px; /* Size of the button */
  cursor: pointer;
  transition: 0.3s ease;
  z-index: 200000000;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.6),             0 8px 16px rgba(0, 0, 0, 0.4);
}
.purchase-button1 {
  position: absolute; /* Position the button absolutely over the image */
  top: -170%; /* Center vertically */
  left: 300%; /* Center horizontally */
  transform: translate(-50%, -50%); /* Adjust for exact center */
  transform: translate( calc(((100vw - 100vh) / 2) - 50%), -50% );
  background-color: transparent;
  border: none;
  border-radius: 5%; /* Circular button */
  padding: 0px; /* Size of the button */
  cursor: pointer;
  transition: 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.6),             0 8px 16px rgba(0, 0, 0, 0.4);
}
.back-button4 {
  position: absolute; /* Position the button absolutely over the image */
  top: -30%; /* Center vertically */
  left: 200%; /* Center horizontally */
  transform: translate(-50%, -50%); /* Adjust for exact center */
  transform: translate( calc(((100vw - 100vh) / 2) - 50%), -50% );
  background-color: transparent;
  border: none;
  border-radius: 5%; /* Circular button */
  padding: 0px; /* Size of the button */
  cursor: pointer;
  transition: 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.6),             0 8px 16px rgba(0, 0, 0, 0.4);
}
.next-button {
  position: absolute; /* Position the button absolutely over the image */
  top: -30%; /* Center vertically */
  left: 320%; /* Center horizontally */
  transform: translate(-50%, -50%); /* Adjust for exact center */
  transform: translate( calc(((100vw - 100vh) / 2) - 50%), -50% );
  background-color: transparent;
  border: none;
  border-radius: 5%; /* Circular button */
  padding: 0px; /* Size of the button */
  cursor: pointer;
  transition: 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.6),             0 8px 16px rgba(0, 0, 0, 0.4);
}
.replay-button {
  position: absolute; /* Position the button absolutely over the image */
  top: -70%; /* Center vertically */
  left: 263%; /* Center horizontally */
  transform: translate(-50%, -50%); /* Adjust for exact center */
  background-color: transparent;
  border: none;
  border-radius: 5%; /* Circular button */
  padding: 0px; /* Size of the button */
  cursor: pointer;
  transition: 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.6),             0 8px 16px rgba(0, 0, 0, 0.4);
}
.mute-button {
  position: absolute; /* Position the button absolutely over the image */
  top: -421%; /* Center vertically */
  left: 473%; /* Center horizontally */
  transform: translate(-50%, -50%); /* Adjust for exact center */
  transform: translate( calc(((100vw - 100vh) / 2) - 50%), -50% );
  background-color: transparent;
  border: none;
  border-radius: 5%; /* Circular button */
  padding: 0px; /* Size of the button */
  cursor: pointer;
  transition: 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.6),             0 8px 16px rgba(0, 0, 0, 0.4);
}
.game-button {
  position: absolute; /* Position the button absolutely over the image */
  top: -471%; /* Center vertically */
  left: 473%; /* Center horizontally */
  transform: translate(-50%, -50%); /* Adjust for exact center */
  transform: translate( calc(((100vw - 100vh) / 2) - 50%), -50% );
  background-color: transparent;
  border: none;
  border-radius: 5%; /* Circular button */
  padding: 0px; /* Size of the button */
  cursor: pointer;
  transition: 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.6),             0 8px 16px rgba(0, 0, 0, 0.4);
}
.mode1-button {
  position: absolute; /* Position the button absolutely over the image */
  top: -350%; /* Center vertically */
  left: 120%; /* Center horizontally */
  transform: translate(-50%, -50%); /* Adjust for exact center */
  transform: translate( calc(((100vw - 100vh) / 2) - 50%), -50% );
  border: none;
  border-radius: 5%; /* Circular button */
  padding: 0px; /* Size of the button */
  cursor: pointer;
  transition: 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.6),             0 8px 16px rgba(0, 0, 0, 0.4);
}
.mode2-button {
  position: absolute; /* Position the button absolutely over the image */
  top: -350%; /* Center vertically */
  left: 375%; /* Center horizontally */
  transform: translate(-50%, -50%); /* Adjust for exact center */
  transform: translate( calc(((100vw - 100vh) / 2) - 50%), -50% );
  background-color: rgba(1,1,1,0); /* Blue background */
  border: none;
  border-radius: 5%; /* Circular button */
  padding: 0px; /* Size of the button */
  cursor: pointer;
  transition: 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.6),             0 8px 16px rgba(0, 0, 0, 0.4);
}
.mode3-button {
  position: absolute; /* Position the button absolutely over the image */
  top: -150%; /* Center vertically */
  left: 120%; /* Center horizontally */
  transform: translate(-50%, -50%); /* Adjust for exact center */
  transform: translate( calc(((100vw - 100vh) / 2) - 50%), -50% );
  background-color: rgba(1,1,1,0); /* Blue background */
  border: none;
  border-radius: 5%; /* Circular button */
  padding: 0px; /* Size of the button */
  cursor: pointer;
  transition: 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.6),             0 8px 16px rgba(0, 0, 0, 0.4);
}
.mode4-button {
  position: absolute; /* Position the button absolutely over the image */
  top: -150%; /* Center vertically */
  left: 375%; /* Center horizontally */
  transform: translate(-50%, -50%); /* Adjust for exact center */
  transform: translate( calc(((100vw - 100vh) / 2) - 50%), -50% );
  background-color: rgba(1,1,1,0); /* Blue background */
  border: none;
  border-radius: 5%; /* Circular button */
  padding: 0px; /* Size of the button */
  cursor: pointer;
  transition: 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.6),             0 8px 16px rgba(0, 0, 0, 0.4);
}
button:hover {
  transform: translate(-50%, -52%);
  transform: translate( calc(((100vw - 100vh) / 2) - 50%), -52% );
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.7);
}
button {
  transform: translate(-50%, -52%);
  transform: translate( calc(((100vw - 100vh) / 2) - 50%), -50% );
}
.play-button:hover {
  transform: translate(-50%, -52%);
  background: linear-gradient(
      90deg,
      #f6d365 0%,
      #9582b2 50%,
      #f6d365 100%
  );
  filter: brightness(1.08);
  box-shadow:
      0 0 8px rgba(246,211,101,0.6),
      0 0 18px rgba(149,130,178,0.8),
      0 8px 20px rgba(0,0,0,0.6);
}
.options2-button:hover {
  transform: translate(-50%, -52%);
  background: linear-gradient(
      90deg,
      #f6d365 0%,
      #9582b2 50%,
      #f6d365 100%
  );
  filter: brightness(1.08);
  box-shadow:
      0 0 8px rgba(246,211,101,0.6),
      0 0 18px rgba(149,130,178,0.8),
      0 8px 20px rgba(0,0,0,0.6);
}
.play-button::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
      120deg,
      transparent 30%,
      rgba(255,255,255,0.18) 50%,
      transparent 70%
  );
  opacity: 0;
  transition:
      opacity 0.25s ease,
      transform 0.5s ease;
}
.play-button:hover::before {
  opacity: 1;
}
button:active {
  transform: translate(-50%, -48%);
  transform: translate( calc(((100vw - 100vh) / 2) - 50%), -48% );
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}
/* Play button icon color */
.play-button svg {
  fill: none;
  stroke: #211921; /* Set the icon color to white */
}
.shop-icon {
  width: 18vmin;
  height: 10vmin;
  pointer-events: none; /* prevents click issues */
}
.volume-icon {
  width: 23vmin;
  height: 12vmin;
  pointer-events: none; /* prevents click issues */
}
.help-icon {
  width: 18vmin;
  height: 10vmin;
  pointer-events: none; /* prevents click issues */
}
.mode-icon {
  width: 20vmin;
  height: 20vmin;
  pointer-events: none; /* prevents click issues */
}
.save-icon {
  width: 75vmin;
  height: 25vmin;
  pointer-events: none; /* prevents click issues */
}
.mute-icon {
  width: 18vmin;
  height: 10vmin;
  pointer-events: none; /* prevents click issues */
}
.purchase-icon {
  width: 27vmin;
  height: 15vmin;
  pointer-events: none; /* prevents click issues */
}
.rate-icon {
  width: 10vmin;
  height: 10vmin;
  pointer-events: auto; /* prevents click issues */
}
.st1-icon {
  width: 15vmin;
  height: 15vmin;
  pointer-events: none; /* prevents click issues */
}
.st3-icon {
  width: 15vmin;
  height: 15vmin;
  pointer-events: none; /* prevents click issues */
}
.mode-icon {
  width: 30vmin;
  height: 30vmin;
  pointer-events: none; /* prevents click issues */
}
.coin-icon {
  width: 14vmin;
  height: 14vmin;
  pointer-events: none; /* prevents click issues */
}
.trophy-icon {
  width: 10vmin;
  height: 10vmin;
  pointer-events: none; /* prevents click issues */
}
.back-icon {
  width: 14vmin;
  height: 14vmin;
  pointer-events: none; /* prevents click issues */
}
.replay-icon {
  width: 14vmin;
  height: 14vmin;
  pointer-events: none; /* prevents click issues */
}
.slidecontainer {
width: 100vmin; /* Width of the outside container */
}
/* The slider itself */
.slider3 {
position: absolute;
-webkit-appearance: none;  /* Override default CSS styles */
appearance: none;
left: 10%;
top: 30%;
width: 80%; /* Full-width */
height: 25px; /* Specified height */
background: #d3d3d3; /* Grey background */
outline: none; /* Remove outline */
opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
-webkit-transition: .2s; /* 0.2 seconds transition on hover */
transition: opacity .2s;
}
/* Mouse-over effects */}
/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
.slider3::-webkit-slider-thumb {
-webkit-appearance: none; /* Override default look */
appearance: none;
width: 25px; /* Set a specific slider handle width */
height: 25px; /* Slider handle height */
background: #04AA6D; /* Green background */
cursor: pointer; /* Cursor on hover */
}
.slider3::-moz-range-thumb {
width: 25px; /* Set a specific slider handle width */
height: 25px; /* Slider handle height */
background: #04AA6D; /* Green background */
cursor: pointer; /* Cursor on hover */
}
.slider2 {
position: absolute;
-webkit-appearance: none;  /* Override default CSS styles */
appearance: none;
left: 10%;
top: 60%;
width: 80%; /* Full-width */
height: 25px; /* Specified height */
background: #d3d3d3; /* Grey background */
outline: none; /* Remove outline */
opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
-webkit-transition: .2s; /* 0.2 seconds transition on hover */
transition: opacity .2s;
}
/* Mouse-over effects */}
/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
.slider2::-webkit-slider-thumb {
-webkit-appearance: none; /* Override default look */
appearance: none;
width: 25px; /* Set a specific slider handle width */
height: 25px; /* Slider handle height */
background: #04AA6D; /* Green background */
cursor: pointer; /* Cursor on hover */
}
.slider2::-moz-range-thumb {
width: 25px; /* Set a specific slider handle width */
height: 25px; /* Slider handle height */
background: #04AA6D; /* Green background */
cursor: pointer; /* Cursor on hover */
}
/* Mouse-over effects */}
/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
slider2::-webkit-slider-thumb {
-webkit-appearance: none; /* Override default look */
appearance: none;
width: 25px; /* Set a specific slider handle width */
height: 25px; /* Slider handle height */
background: #04AA6D; /* Green background */
cursor: pointer; /* Cursor on hover */
}
slider::-moz-range-thumb {
width: 25px; /* Set a specific slider handle width */
height: 25px; /* Slider handle height */
background: #04AA6D; /* Green background */
cursor: pointer; /* Cursor on hover */
}
/* The switch - the box around the slider */
.switch {
position: relative;
display: inline-block;
width: 150px;
height: 34px;
}
/* Hide default HTML checkbox */
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 200;
left: -250;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 5%;
}
.play-button:focus {
  outline: none;
  box-shadow: 0 0 5px 2px rgba(0, 123, 255, 0.8); /* Blue focus */
}
.switch8 {
position: absolute;
display: inline-block;
width: 90px;
height: 51px;
top: 10%;
left: 10%;
}
.switch8 input {
opacity: 0;
width: 0;
height: 0;
}
.slider8 {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider8:before {
position: absolute;
content: "";
height: 39px;
width: 39px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider8 {
background-color: #ffe555;
}
input:focus + .slider8 {
box-shadow: 0 0 1px #ffe555;
}
input:checked + .slider8:before {
-webkit-transform: translateX(39px);
-ms-transform: translateX(39px);
transform: translateX(39px);
}
.slider8.round {
border-radius: 51px;
}
.slider8.round:before {
border-radius: 50%;
}
[class^="text-overlay"] {
position: absolute;
left: 50%;
transform: translate(-50%, -50%);
width: 80vmin
font-family:  Impact, Tahoma Bold;
text-align: center;
line-height: 1.2;
color: #ffd000;
text-shadow:
  0 0 8px rgba(255, 208, 0, 0.7),
  1px 1px 0 #000,
  -1px -1px 0 #000,
  1px -1px 0 #000,
  -1px 1px 0 #000;
padding: 0.4em 0.8em;
border-radius: 1vmin;
backdrop-filter: blur(2px);
}
.text-overlay {
position: absolute; /* Position the text relative to its parent container */
top: 607%; /* Start the text from the vertical center */
left: 50%; /* Start the text from the horizontal center */
transform: translate(-50%, -50%); /* Centers the text perfectly */
color: #9079b3; /* Optional: Make text readable on the image */
background-color: rgba(0, 0, 0, 100); /* Optional: Add a semi-transparent background */
font-family:  Impact, Tahoma Bold;
font-size: 9vmin;
width: 250px;
padding: 0px; /* Optional: Add some space around the text */
text-align: center; /* Optional: Center the text content */
}
.text-overlay2 {
position: absolute; /* Position the text relative to its parent container */
top: 53%; /* Start the text from the vertical center */
left: 50%; /* Start the text from the horizontal center */
transform: translate(-50%, -50%); /* Centers the text perfectly */
color: #9079b3; /* Optional: Make text readable on the image */
background-color: rgba(0, 0, 0, 100); /* Optional: Add a semi-transparent background */
font-family:  Impact, Tahoma Bold;
font-size: 9vmin;
width: 250px;
padding: 0px; /* Optional: Add some space around the text */
text-align: center; /* Optional: Center the text content */
}
.text-overlay3 {
position: absolute; /* Position the text relative to its parent container */
top: 7%; /* Start the text from the vertical center */
left: 81%; /* Start the text from the horizontal center */
transform: translate(-50%, -50%); /* Centers the text perfectly */
color: #ffd000; /* Optional: Make text readable on the image */
background-color: rgba(0, 0, 0, 0); /* Optional: Add a semi-transparent background */
font-family:  Impact, Tahoma Bold;
font-size: 9vmin;
width: 250px;
padding: 0px; /* Optional: Add some space around the text */
text-align: center; /* Optional: Center the text content */
}
.text-overlay4 {
position: absolute; /* Position the text relative to its parent container */
top: 62%; /* Start the text from the vertical center */
left: 17%; /* Start the text from the horizontal center */
transform: translate(-50%, -50%); /* Centers the text perfectly */
color: #ffd000; /* Optional: Make text readable on the image */
background-color: rgba(0, 0, 0, 0.43); /* Optional: Add a semi-transparent background */
font-family:  Impact, Tahoma Bold;
font-size: 2vmin;
width: 100px;
padding: 0px; /* Optional: Add some space around the text */
text-align: center; /* Optional: Center the text content */
}
.text-overlay5 {
position: absolute; /* Position the text relative to its parent container */
top: 62%; /* Start the text from the vertical center */
left: 38%; /* Start the text from the horizontal center */
transform: translate(-50%, -50%); /* Centers the text perfectly */
color: #ffd000; /* Optional: Make text readable on the image */
background-color: rgba(0, 0, 0, 0.33); /* Optional: Add a semi-transparent background */
font-family:  Impact, Tahoma Bold;
font-size: 2vmin;
width: 100px;
padding: 0px; /* Optional: Add some space around the text */
text-align: center; /* Optional: Center the text content */
}
.text-overlay6 {
position: absolute; /* Position the text relative to its parent container */
top: 62%; /* Start the text from the vertical center */
left: 60%; /* Start the text from the horizontal center */
transform: translate(-50%, -50%); /* Centers the text perfectly */
color: #ffd000; /* Optional: Make text readable on the image */
background-color: rgba(0, 0, 0, 0.53); /* Optional: Add a semi-transparent background */
font-family:  Impact, Tahoma Bold;
font-size: 2vmin;
width: 100px;
padding: 0px; /* Optional: Add some space around the text */
text-align: center; /* Optional: Center the text content */
}
.text-overlay10 {
position: absolute; /* Position the text relative to its parent container */
top: 62%; /* Start the text from the vertical center */
left: 81%; /* Start the text from the horizontal center */
transform: translate(-50%, -50%); /* Centers the text perfectly */
color: #ffd000; /* Optional: Make text readable on the image */
background-color: rgba(0, 0, 0, 0.53); /* Optional: Add a semi-transparent background */
font-family:  Impact, Tahoma Bold;
font-size: 2vmin;
width: 100px;
padding: 0px; /* Optional: Add some space around the text */
text-align: center; /* Optional: Center the text content */
}
.text-overlay7 {
position: absolute; /* Position the text relative to its parent container */
top: 30%; /* Start the text from the vertical center */
left: 50%; /* Start the text from the horizontal center */
transform: translate(-50%, -50%); /* Centers the text perfectly */
color: #613375; /* Optional: Make text readable on the image */
background-color: rgba(0, 0, 0, 0.0); /* Optional: Add a semi-transparent background */
font-family:  Impact, Tahoma Bold;
font-size: 5vmin;
width: 250px;
padding: 0px; /* Optional: Add some space around the text */
text-align: center; /* Optional: Center the text content */
}
.text-overlay8 {
position: absolute; /* Position the text relative to its parent container */
top: 75%; /* Start the text from the vertical center */
left: 52%; /* Start the text from the horizontal center */
transform: translate(-50%, -50%); /* Centers the text perfectly */
color: #ffd000; /* Optional: Make text readable on the image */
background-color: rgba(0, 0, 0, 0); /* Optional: Add a semi-transparent background */
font-family:  Impact, Tahoma Bold;
font-size: 5vmin;
width: 500px;
padding: 0px; /* Optional: Add some space around the text */
text-align: center; /* Optional: Center the text content */
}
.text-overlay9 {
position: absolute; /* Position the text relative to its parent container */
top: 38%; /* Start the text from the vertical center */
left: 42%; /* Start the text from the horizontal center */
transform: translate(-50%, -50%); /* Centers the text perfectly */
color: #9B111E; /* Optional: Make text readable on the image */
background-color: rgba(0, 0, 0, 100); /* Optional: Add a semi-transparent background */
font-family:  Impact, Tahoma Bold;
font-size: 9vmin;
width: 250px;
padding: 0px; /* Optional: Add some space around the text */
text-align: center; /* Optional: Center the text content */
}
.text-overlay12 {
position: absolute; /* Position the text relative to its parent container */
top: 48%; /* Start the text from the vertical center */
left: 57%; /* Start the text from the horizontal center */
transform: translate(-50%, -50%); /* Centers the text perfectly */
color: #ffd000; /* Optional: Make text readable on the image */
background-color: rgba(0, 0, 0, 100); /* Optional: Add a semi-transparent background */
font-family:  Impact, Tahoma Bold;
font-size: 4vmin;
width: 450px;
padding: 0px; /* Optional: Add some space around the text */
text-align: center; /* Optional: Center the text content */
}
.text-overlay13 {
position: absolute; /* Position the text relative to its parent container */
top: 60%; /* Start the text from the vertical center */
left: 57%; /* Start the text from the horizontal center */
transform: translate(-50%, -50%); /* Centers the text perfectly */
color: #ffd000; /* Optional: Make text readable on the image */
background-color: rgba(0, 0, 0, 100); /* Optional: Add a semi-transparent background */
font-family:  Impact, Tahoma Bold;
font-size: 4vmin;
width: 450px;
padding: 0px; /* Optional: Add some space around the text */
text-align: center; /* Optional: Center the text content */
}
.text-overlay14 {
position: absolute; /* Position the text relative to its parent container */
top: 72%; /* Start the text from the vertical center */
left: 57%; /* Start the text from the horizontal center */
transform: translate(-50%, -50%); /* Centers the text perfectly */
color: #ffd000; /* Optional: Make text readable on the image */
background-color: rgba(0, 0, 0, 100); /* Optional: Add a semi-transparent background */
font-family:  Impact, Tahoma Bold;
font-size: 4vmin;
width: 450px;
padding: 0px; /* Optional: Add some space around the text */
text-align: center; /* Optional: Center the text content */
}
.text-overlay15 {
position: absolute; /* Position the text relative to its parent container */
top: 84%; /* Start the text from the vertical center */
left: 57%; /* Start the text from the horizontal center */
transform: translate(-50%, -50%); /* Centers the text perfectly */
color: #ffd000; /* Optional: Make text readable on the image */
background-color: rgba(0, 0, 0, 100); /* Optional: Add a semi-transparent background */
font-family:  Impact, Tahoma Bold;
font-size: 4vmin;
width: 450px;
padding: 0px; /* Optional: Add some space around the text */
text-align: center; /* Optional: Center the text content */
}
.text-overlay16 {
position: absolute; /* Position the text relative to its parent container */
top: 67%; /* Start the text from the vertical center */
left: 16%; /* Start the text from the horizontal center */
transform: translate(-50%, -50%); /* Centers the text perfectly */
color: #ffd000; /* Optional: Make text readable on the image */
background-color: rgba(0, 0, 0, 100); /* Optional: Add a semi-transparent background */
font-family:  Impact, Tahoma Bold;
font-size: 3vmin;
width: 450px;
padding: 0px; /* Optional: Add some space around the text */
text-align: center; /* Optional: Center the text content */
}
.text-overlay17 {
position: absolute; /* Position the text relative to its parent container */
top: 67%; /* Start the text from the vertical center */
left: 48%; /* Start the text from the horizontal center */
transform: translate(-50%, -50%); /* Centers the text perfectly */
color: #ffd000; /* Optional: Make text readable on the image */
background-color: rgba(0, 0, 0, 100); /* Optional: Add a semi-transparent background */
font-family:  Impact, Tahoma Bold;
font-size: 3vmin;
width: 450px;
padding: 0px; /* Optional: Add some space around the text */
text-align: center; /* Optional: Center the text content */
}
.text-overlay18 {
position: absolute; /* Position the text relative to its parent container */
top: 67%; /* Start the text from the vertical center */
left: 81%; /* Start the text from the horizontal center */
transform: translate(-50%, -50%); /* Centers the text perfectly */
color: #ffd000; /* Optional: Make text readable on the image */
background-color: rgba(0, 0, 0, 100); /* Optional: Add a semi-transparent background */
font-family:  Impact, Tahoma Bold;
font-size: 3vmin;
width: 450px;
padding: 0px; /* Optional: Add some space around the text */
text-align: center; /* Optional: Center the text content */
}
.text-overlay19 {
position: absolute; /* Position the text relative to its parent container */
top: 71%; /* Start the text from the vertical center */
left: 16%; /* Start the text from the horizontal center */
transform: translate(-50%, -50%); /* Centers the text perfectly */
color: #ffd000; /* Optional: Make text readable on the image */
background-color: rgba(0, 0, 0, 100); /* Optional: Add a semi-transparent background */
font-family:  Impact, Tahoma Bold;
font-size: 3vmin;
width: 450px;
padding: 0px; /* Optional: Add some space around the text */
text-align: center; /* Optional: Center the text content */
}
.text-overlay20 {
position: absolute; /* Position the text relative to its parent container */
top: 71%; /* Start the text from the vertical center */
left: 48%; /* Start the text from the horizontal center */
transform: translate(-50%, -50%); /* Centers the text perfectly */
color: #ffd000; /* Optional: Make text readable on the image */
background-color: rgba(0, 0, 0, 100); /* Optional: Add a semi-transparent background */
font-family:  Impact, Tahoma Bold;
font-size: 3vmin;
width: 450px;
padding: 0px; /* Optional: Add some space around the text */
text-align: center; /* Optional: Center the text content */
}
.text-overlay21 {
position: absolute; /* Position the text relative to its parent container */
top: 71%; /* Start the text from the vertical center */
left: 81%; /* Start the text from the horizontal center */
transform: translate(-50%, -50%); /* Centers the text perfectly */
color: #ffd000; /* Optional: Make text readable on the image */
background-color: rgba(0, 0, 0, 100); /* Optional: Add a semi-transparent background */
font-family:  Impact, Tahoma Bold;
font-size: 3vmin;
width: 450px;
padding: 0px; /* Optional: Add some space around the text */
text-align: center; /* Optional: Center the text content */
}
.text-overlay25 {
position: absolute; /* Position the text relative to its parent container */
top: 8%; /* Start the text from the vertical center */
left: 50%; /* Start the text from the horizontal center */
transform: translate(-50%, -50%); /* Centers the text perfectly */
color: #ffd000; /* Optional: Make text readable on the image */
background-color: rgba(0, 0, 0, 0); /* Optional: Add a semi-transparent background */
font-family:  Impact, Tahoma Bold;
font-size: 5vmin;
width: 750px;
padding: 0px; /* Optional: Add some space around the text */
text-align: center; /* Optional: Center the text content */
}

.text-overlay30{
  position: absolute;
  left: 50%;
  top: 47%;
  font-size: clamp(28px, 4vmin, 70px);
  letter-spacing: 0.05em; 
  transform: translate(-50%, -50%);
  width: min(85%, 1100px);
  font-family:  Impact, Tahoma Bold;
  text-align: center;
  line-height: 1.2;
  white-space: pre-line;
  color: #ffd000;
  text-shadow:
    0 0 8px rgba(255, 208, 0, 0.7),
    3px 3px 0 #000,
    -3px -3px 0 #000,
    3px -3px 0 #000,
    -3px 3px 0 #000;
  padding: 0.4em 0.8em;
  border-radius: 1vmin;
  backdrop-filter: blur(2px);
  }
.text-overlay26,
.text-overlay27,
.text-overlay28{
position: absolute;
left: 50%;
transform: translate(-50%, -50%);
width: min(85%, 1100px);
font-family:  Impact, Tahoma Bold;
text-align: center;
line-height: 1.2;
white-space: pre-line;
color: #ffd000;
text-shadow:
  0 0 8px rgba(255, 208, 0, 0.7),
  3px 3px 0 #000,
  -3px -3px 0 #000,
  3px -3px 0 #000,
  -3px 3px 0 #000;
padding: 0.4em 0.8em;
border-radius: 1vmin;
backdrop-filter: blur(2px);
}
/* Description */
.text-overlay26 {
top: 31%;
font-size: clamp(28px, 4vmin, 70px);
letter-spacing: 0.05em;
}
.text-overlay28 {
top: 10%;
font-size: clamp(50px, 6vmin, 100px);
letter-spacing: 0.05em;
}
/* Warning */
.text-overlay27 {
top: 52%;
font-size: clamp(28px, 4vmin, 70px);
color: #ff5a5a;
text-shadow:
  0 0 10px rgba(255, 80, 80, 0.8),
  2px 2px 0 #000,
  -2px -2px 0 #000,
  2px -2px 0 #000,
  -2px 2px 0 #000;
padding: 0.6em 1em;
}

[class^="text-overlay"]::not([class="text-overlay31"]) {
position: absolute;
left: 50%;
transform: translate(-50%, -50%);
width: 80vmin
font-family:  Impact, Tahoma Bold;
text-align: center;
line-height: 1.2;
padding: 0.4em 0.8em;
border-radius: 1vmin;

}
.text-overlay31 {
  position: absolute; /* Position the text relative to its parent container */
  top: 50%; /* Start the text from the vertical center */
  left: 48%; /* Start the text from the horizontal center */
  transform: translate(-50%, -50%); /* Centers the text perfectly */
  color: #ffd700; /* Optional: Make text readable on the image */
  background-color: rgba(0, 0, 0, 0); /* Optional: Add a semi-transparent background */
  font-family:  Impact, Tahoma Bold;
  font-size: 6vmin;
  width: 250px;
  padding: 0px; /* Optional: Add some space around the text */
  backdrop-filter: blur(0px);
  text-align: center; /* Optional: Center the text content */
  }
input[name="codes"] {
  position: absolute;
  top: 75%;
  left: 15%;
  width: 150px;
  padding: 10px;
  font:  Impact, Tahoma Bold
  font-size: 16px;
  border: 2px solid #ffd700;
  color: #ffd700;
  background-color: #3a3b3b;
  border-radius: 6px;
  outline: none;
  input[name="codes"]:focus {
    border-color: #000000;
    box-shadow: 0 0 4px rgba(74, 144, 226, 0.5);
  }
}
.text-overlay32 {
  position: absolute; /* Position the text relative to its parent container */
  top: 95%; /* Start the text from the vertical center */
  left: 25%; /* Start the text from the horizontal center */
  transform: translate(-50%, -50%); /* Centers the text perfectly */
  color: #ffd000; /* Optional: Make text readable on the image */ 
  font-family:  Impact, Tahoma Bold;
  font-size: 3vmin;
  width: 25ch;
  padding: 0px; /* Optional: Add some space around the text */
  text-align: center; 
  font-size: clamp(14px, 2vmin, 35px);
  letter-spacing: 0.05em; 
  transform: translate(-50%, -50%);
  width: min(25ch);
  font-family:  Impact, Tahoma Bold;
  text-align: center;
  line-height: 1.2;
  white-space: pre-line;
  max-width: 75ch; /* limits line to ~75 characters */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #ffd000;
  text-shadow:
    0 0 8px rgba(255, 208, 0, 0.7),
    3px 3px 0 #000,
    -3px -3px 0 #000,
    3px -3px 0 #000,
    -3px 3px 0 #000;
  padding: 0.4em 0.8em;
  border-radius: 1vmin;
  backdrop-filter: blur(0px);
}
.text-overlay33 {
  position: absolute; /* Position the text relative to its parent container */
  top: 92.5%; /* Start the text from the vertical center */
  left: 25%; /* Start the text from the horizontal center */
  transform: translate(-50%, -50%); /* Centers the text perfectly */
  color: #ffd000; /* Optional: Make text readable on the image */ 
  font-family:  Impact, Tahoma Bold;
  font-size: 3vmin;
  width: 25ch;
  padding: 0px; /* Optional: Add some space around the text */
  text-align: center; 
  font-size: clamp(14px, 2vmin, 35px);
  letter-spacing: 0.05em; 
  transform: translate(-50%, -50%);
  width: min(25ch);
  font-family:  Impact, Tahoma Bold;
  text-align: center;
  line-height: 1.2;
  white-space: pre-line;
  max-width: 75ch; /* limits line to ~75 characters */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #ffd000;
  text-shadow:
    0 0 8px rgba(255, 208, 0, 0.7),
    3px 3px 0 #000,
    -3px -3px 0 #000,
    3px -3px 0 #000,
    -3px 3px 0 #000;
  padding: 0.4em 0.8em;
  border-radius: 1vmin;
  backdrop-filter: blur(0px);
}
.small-button {
position: absolute;
top: 86%;
left: 4%;
font-size: 5vmin;      /* Smaller text */
padding: 2px 4px;     /* Less internal spacing */
width: auto;          /* Fit width to content */
color: rgba(255, 215, 0, 1);
background-color: #613375;
font-family:  Impact, Tahoma Bold;
/* You can add more styling here, e.g., border, background color */
}
/* Hover effect */
.small-button:hover {
  color: rgba(181, 148, 16, 1); /* Darker blue on hover */
}
.small-button2 {
position: absolute;
top: 86%;
left: 13%;
font-size: 5vmin;      /* Smaller text */
padding: 2px 4px;     /* Less internal spacing */
width: auto;          /* Fit width to content */
color: rgba(255, 215, 0, 1);
background-color: #613375;
font-family:  Impact, Tahoma Bold;
/* You can add more styling here, e.g., border, background color */
}
/* Hover effect */
.small-button2:hover {
     color: rgba(181, 148, 16, 1); /* Darker blue on hover */
}
.small-button3 {
position: absolute;
top: 86%;
left: 22%;
font-size: 5vmin;      /* Smaller text */
padding: 2px 4px;     /* Less internal spacing */
width: auto;          /* Fit width to content */
color: rgba(255, 215, 0, 1);
background-color: #613375;
font-family:  Impact, Tahoma Bold;
/* You can add more styling here, e.g., border, background color */
}
/* Hover effect */
.small-button3:hover {
     color: rgba(181, 148, 16, 1); /* Darker blue on hover */
}
.small-button4 {
position: absolute;
top: 86%;
left: 31%;
font-size: 5vmin;      /* Smaller text */
padding: 2px 4px;     /* Less internal spacing */
width: auto;          /* Fit width to content */
color: rgba(255, 215, 0, 1);
background-color: #613375;
font-family:  Impact, Tahoma Bold;
/* You can add more styling here, e.g., border, background color */
}
/* Hover effect */
.small-button4:hover {
     color: rgba(181, 148, 16, 1); /* Darker blue on hover */
}
.iframe2 {
  position: absolute;
  z-index: 99999;
  top: 39%;
  left: 15%;
}
.iframe3 {
  position: absolute;
  z-index: 99999;
  top: 100px;
  left: 15%;
}
.iframe4 {
  position: absolute;
  z-index: 99999;
  top: 64%;
  left: 15%;
}
.iframe5 {
  position: absolute;
  z-index: 1;
  bottom: 2px;
}
.game-container {
  position: relative;
}
.game-container::before {
  content: "";
  position: absolute;
  inset: -500px;
  background: linear-gradient(
      135deg,
      #0B0A14,
      #171126,
      #101A27
  );
  z-index: -1;
}
#myCanvas {
width: min(100vmin, 100vmin);
height: min(100vmin, 100vmin)
pointer-events: auto
}
#controls {
position: absolute;
bottom: 20px;
left: 50%;
z-index: 9999; /* ABOVE canvas */
pointer-events: auto;
}
.btn {
width: 60px;
height: 60px;
font-size: 24px;
border-radius: 12px;
border: none;
margin: 6px;
background: rgba(74, 74, 82, 0.85);
color: white;
}
.btn:active {
background: #7a3ab5;
}

.big-rectangular-button {
position: fixed;
bottom: 20px;
left: 20px;
width: 100px;
height: 60px;
font-size: 20px;
background: red;
color: white;
border: none;
z-index: 9999;
}
/* Optional: Add hover effect for better user experience */
.big-rectangular-button:hover {
  background-color: #0056b3; /* Darker blue on hover */
}