@import url('https://fonts.googleapis.com/css2?family=Creepster&display=swap');

#cuerpo {
  background: radial-gradient(circle at center, #532a80 0%, #000000 100%) !important;
}

.content {
  border: 2px solid #ff4500 !important;
  box-shadow: 0 0 20px rgba(255, 69, 0, 0.5) !important;
  backdrop-filter: blur(5px);
  background-image: url("https://media.istockphoto.com/id/1038383524/es/vector/fondo-de-halloween-de-negro-con-blanco-tela-de-ara%C3%B1a-y-ara%C3%B1as.jpg?s=170667a&w=0&k=20&c=FpyBXWgT0ieoB7aeXGSbTBslvS8fIZy8oxQpMIzCkSI=");
}

.icon_text {
  color: #f86903;
  font-family: 'Creepster', cursive;
}

.fichas {
  background: linear-gradient(135deg, #2a0a3a, #100015) !important;
  border: 1px solid #ff6600 !important;
  color: #ffb347 !important;
  transition: transform 0.3s, box-shadow 0.3s;
}

.fichas:hover {
  
  box-shadow: 0 0 15px #ff6600;
  background: linear-gradient(135deg, #3a0a4a, #1a0025) !important;
}

.icon_ficha{
  background: whitesmoke;
}

.logo, span {
  text-shadow: 0 0 10px #ff0055, 0 0 20px #ff0055 !important;
  color: #ff9966 !important;
}


  .toggle {
    display: flex;
    justify-content: center;
    position: relative;
    position: absolute;
    top: 90%;
    left: 92%;
    transform: rotate(90deg);
  }

  .toggle-input {
    position: absolute;
    z-index: 2;
    bottom: 132.5%;
    border-radius: 50%;
    transform: rotate(-25deg);
    transform-origin: 50% 4.75em;
    width: 1.75em;
    height: 1.75em;
    opacity: 0;
    transition: transform 0.24s cubic-bezier(0.65, 1.35, 0.5, 1);
    cursor: pointer;
  }
  .toggle-input:checked {
    transform: rotate(25deg);
  }
  .toggle-handle-wrapper {
    position: absolute;
    z-index: 1;
    bottom: -135%;
    -webkit-mask-image: linear-gradient(to bottom, #000 62.125%, transparent 50%);
    mask-image: linear-gradient(to bottom, #000 62.125%, transparent 50%);
    width: 200%;
    overflow: hidden;
  }
  .toggle-handle {
    display: flex;
    flex-direction: column;
    align-items: center;
    transform: rotate(-25deg);
    transform-origin: bottom center;
    transition: transform 0.24s cubic-bezier(0.65, 1.35, 0.5, 1);
  }
  .toggle-input:checked + .toggle-handle-wrapper > .toggle-handle {
    transform: rotate(25deg);
  }
  .toggle-handle-knob {
    position: relative;
    z-index: 1;
    border-radius: 50%;
    width: 1.75em;
    height: 1.75em;
    background-image: radial-gradient(farthest-corner at 70% 30%, #fedee2 4%, #d63534 12% 24%, #a81a1a 50% 65%, #d63534 75%);
    transition: transform 0.24s cubic-bezier(0.65, 1.35, 0.5, 1);
  }
  .toggle-input:checked + .toggle-handle-wrapper .toggle-handle-knob {
    transform: rotate(-90deg);
  }
  .toggle-handle-knob::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    border-radius: inherit;
    width: 100%;
    height: 100%;
    box-shadow: inset 0 0 8px 2px rgba(255, 255, 255, 0.4);
    opacity: 0;
    transition: opacity 0.2s;
  }
  @media (hover: hover) {
    .toggle-input:hover + .toggle-handle-wrapper , .toggle-input:focus-visible + .toggle-handle-wrapper  {
      opacity: 1;
    }
  }
  .toggle-handle-bar-wrapper {
    position: relative;
    width: 0.5em;
    height: 3em;
  }
  .toggle-handle-bar {
    position: absolute;
    top: -0.875em;
    left: 0;
    width: 100%;
    height: calc(100% + 0.875em);
    background-image: linear-gradient(to right, #777475, #a4a4a4, #fff 45% 55%, #a4a4a4, #777475);
    background-position-x: 0.06125em;
    transition: background-position-x 0.24s cubic-bezier(0.65, 1.35, 0.5, 1);
    box-shadow: inset 0 1em 0.25em rgba(0, 0, 0, 0.4);
  }
  .toggle-input:checked + .toggle-handle-wrapper .toggle-handle-bar {
    background-position-x: -0.06125em;
  }
  .toggle-base {
    position: relative;
    border-radius: 3.125em;
    padding: 0.25em;
    width: 3.5em;
    height: 1.125em;
    background-color: #fff;
    background-image: linear-gradient(to bottom, #fff, #d7d7d7);
    box-shadow: 0 -0.25em 0.5em #fff, 0 0.25em 0.5em #d7d7d7;
  }
  .toggle-base-inside {
    position: relative;
    border-radius: inherit;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to bottom, #a6a6a6, #7d7d7d);
    box-shadow: inset 0 0.0625em rgba(255, 255, 255, 0.2), inset 0 -0.03125em white, inset 0 -0.0625em 0.25em rgba(0, 0, 0, 0.1);
  }
  .toggle-base-inside::after {
    content: '';
    position: absolute;
    border-radius: inherit;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to bottom, #5ab054, #438c3c);
    box-shadow: inherit;
    opacity: 0;
    transition: opacity 0.24s cubic-bezier(0.65, 1.35, 0.5, 1);
  }
  .toggle-input:checked ~ .toggle-base self::after {
    opacity: 1;
  }