.btn-class-name {
  --primary: 255, 90, 120;
  --secondary: 150, 50, 60;
  width: 60px;
  height: 50px;
  border: none;
  outline: none;
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
  outline: 10px solid rgba(var(--primary), 0.5);
  border-radius: 100%;
  position: relative; /* Cambiado de absolute a relative */
  transition: 0.3s;
  margin: 0 20px; /* Añadir margen horizontal */
}

.btn-class-name2 {
  --primary: 90, 255, 120;
  --secondary: 50, 150, 60;
  width: 60px;
  height: 50px;
  border: none;
  outline: none;
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
  outline: 10px solid rgba(var(--primary), 0.5);
  border-radius: 100%;
  position: relative; /* Cambiado de absolute a relative */
  transition: 0.3s;
  margin: 0 20px; /* Añadir margen horizontal */
}

.btn-class-name .back {
  background: rgb(var(--secondary));
  border-radius: 100%;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.btn-class-name2 .back {
  background: rgb(var(--secondary));
  border-radius: 100%;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.btn-class-name .front {
  background: linear-gradient(
    0deg,
    rgba(var(--primary), 0.6) 20%,
    rgba(var(--primary)) 50%
  );
  box-shadow: 0 0.5em 1em -0.2em rgba(var(--secondary), 0.5);
  border-radius: 100%;
  position: absolute;
  border: 1px solid rgb(var(--secondary));
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.2rem;
  font-weight: 600;
  font-family: inherit;
  transform: translateY(-15%);
  transition: 0.15s;
  color: rgb(var(--secondary));
}

.btn-class-name2 .front {
  background: linear-gradient(
    0deg,
    rgba(var(--primary), 0.6) 20%,
    rgba(var(--primary)) 50%
  );
  box-shadow: 0 0.5em 1em -0.2em rgba(var(--secondary), 0.5);
  border-radius: 100%;
  position: absolute;
  border: 1px solid rgb(var(--secondary));
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.2rem;
  font-weight: 600;
  font-family: inherit;
  transform: translateY(-15%);
  transition: 0.15s;
  color: rgb(var(--secondary));
}

.btn-class-name:active .front {
  transform: translateY(0%);
  box-shadow: 0 0;
}

.btn-class-name2:active .front {
  transform: translateY(0%);
  box-shadow: 0 0;
}

.Content-controls {
  width: 100%;
  height: 20%;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  z-index: 99;
  bottom: 0;
  gap: 40px; /* Añadir espacio entre botones */
}

/* PopTop Styles */
.popup-toggle {
  position: absolute;
  opacity: 0;
  height: 0;
  width: 0;
}

.chevron-down {
  display: none;
}

.container_PopTop {
  --size: 30px;

  right: 20px;
  bottom: 20px;
  z-index: 2000 !important;
  cursor: pointer;
  transition: all 0.5s ease-in-out;
}

.container_PopTop svg {
  fill: #fff;
  transition: transform 0.3s ease;
  transform: rotate(-180deg) !important;
  cursor: pointer;
}

.panel_PopTop {
  display: none !important;

  top: 0;
  left: 10%;
  width: 100%;
  height: 100vh;

  justify-content: center;
  align-items: center;
  z-index: 1000;
  padding: 0%;
}

.panel_PopTop img {
  max-width: 80%;
  max-height: 80%;
  border-radius: 10px;
  object-fit: contain;
}

/* Checked State */
.popup-toggle:checked ~ .Content-controls .chevron-right {
  display: none;
}

.popup-toggle:checked ~ .panel_PopTop {
  display: flex !important;
}

.popup-toggle:checked ~ .Content-controls .chevron-down {
  display: block;
  transform: rotate(180deg);
}

.exitGame {
  position: absolute;
  bottom: 0;
  font-size: 20px;
  font-weight: 200;
  cursor: pointer;
  color: #fff;
  text-decoration: underline;
  transition: all 0.5s ease-in-out;
  padding: 0px;
}

.exitGame svg:hover {
  fill: #ccc;
}