styles.css

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  user-select: none;
  font-family: Arial, Helvetica, sans-serif;
}

html,
body {
  width: 100%;
  height: 100%;
  max-width: 2400px;
  max-height: 100vh;
  margin-inline: auto;
  position: relative;
  background-color: transparent;
}

html,
body,
centrar {
  min-width: 350px !important;
}

html {
  scrollbar-width: thin;
  scrollbar-color: #c9c9c9 transparent;
  background-color: #000;
  display: flex;
  flex-wrap: wrap;
  place-content: center;
}

body {
  max-height: 1600px;
}

.html-scheme {
  position: fixed;
  width: 100%;
  height: 100%;
  inset: 0;
  z-index: -1;
  background-color: black;
}

.button-playlist {
  --size: 3rem;
  border: none;
  outline: none;
  position: absolute;
  z-index: 9999;
  top: 1rem;
  left: 8px;
  width: var(--size);
  height: var(--size);
  background-color: transparent;
  box-shadow: inset 0 0 0 0 #0f05;
  border-radius: 50%;
  display: flex;
  flex-wrap: wrap;
  place-items: center;
  transition: box-shadow 1.5s ease;

  img {
    pointer-events: none;
    scale: 0.7;
  }

  &.button-playlist-active {
    box-shadow: inset 0 0 10px 20px #0f05;

    & + .playlist-section {
      left: 0;
      opacity: 1;
    }
  }
}

.container-backup {
  --current-even-gradient: linear-gradient(to right, #67b26f, #4ca2cd);
  --current-odd-gradient: linear-gradient(to right, #3494e6, #ec6ead);
  position: absolute;
  scrollbar-width: thin;
  background-color: black;
  inset: 0;
  z-index: 20000;
  width: 100%;
  height: 100%;
  padding: 1.2rem;
  font-size: 1rem;
  overflow-y: auto;
  color: #fff9;
  opacity: 0;
  display: none;
  transform: scale(0);
  transition: transform 0.3s ease, display 0.3s ease allow-discrete,
    opacity 0.3s ease;

  &.container-backup-open {
    display: block;
    opacity: 1;
    transform: scale(1);

    .container-backup-centrado {
      opacity: 1;
      transform: scale(1);
    }
  }

  .titulo-header {
    width: 100%;
    position: relative;
    display: flex;
    justify-content: space-between;

    h4 {
      text-transform: uppercase;
      width: 60%;
      text-wrap: balance;
    }

    button.go-back {
      position: relative;
      border-radius: 999px;
      border: none;
      outline: none;
      background-image: linear-gradient(45deg, magenta, springgreen);
      box-shadow: 0 0 5px #0004;

      * {
        pointer-events: none;
      }

      &::before {
        border-radius: inherit;
        background-color: transparent;
      }
    }
  }

  .container-backup-centrado {
    max-width: 700px;
    margin-inline: auto;
    opacity: 0;
    transform: scale(0);
    transition: transform 0.3s ease, opacity 0.3s ease;
  }

  ul {
    margin-left: 1.5rem;
  }

  hr {
    margin-block: 1rem;
  }

  button:not(.tachito):not(.copiar) {
    padding: 0.5rem;
    position: relative;
    border: none;
    outline: none;
    position: relative;
    background-color: transparent;
    box-shadow: inset 0 0 0 1px #fff8;
    color: white;
    margin-bottom: 10px;

    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
      width: 100%;
      height: 100%;
      background-color: #00dbde;
      transition: transform 0.3s ease;
      transform-origin: 0% 0%;
      transform: scale(1);
    }

    &.btn-backup-active {
      &::before {
        transform-origin: 100% 100%;
        transform: scale(0);
      }
    }

    &:nth-child(even)::before {
      background: var(--current-odd-gradient);
    }

    &:nth-child(odd)::before {
      background: var(--current-even-gradient);
    }

    &.btn-delete::before {
      background-image: linear-gradient(45deg, #f00, magenta);
    }
  }

  .textarea-container {
    width: auto;
    height: auto;
    position: relative;
    margin-bottom: 20px;

    &::before {
      content: '';
      display: block;
      width: 100%;
      height: 100%;
      position: absolute;
      top: 5px;
      left: 5px;
      z-index: -1;
    }

    &:nth-child(even)::before {
      background: var(--current-even-gradient);
    }

    &:nth-child(odd)::before {
      background: var(--current-odd-gradient);
    }

    .tachito,
    .copiar {
      display: flex;
      border: none;
      outline: none;
      width: 1rem;
      height: 1rem;
      background-color: transparent;
      position: absolute;
      bottom: 0.4rem;
      cursor: pointer;
      z-index: 10000;
      -webkit-tap-highlight-color: transparent;
    }

    .wrapper-indent {
      position: absolute;
      right: 3.8rem;
      bottom: 0.3rem;
      transform: scale(0.9);

      input {
        border: none;
        outline: none;
        width: 4rem;
      }
    }

    .copiar {
      right: 2.5rem;
    }

    .tachito {
      right: 1rem;
    }
  }

  .container-output::before {
    background-image: linear-gradient(to right, #67b26f, #4ca2cd) !important;
  }

  .textarea-secundaria {
    position: relative;
    top: 50px;
  }

  a:not(:visited) {
    color: #ffff00;
  }

  a:visited {
    color: orange;
  }

  a:hover {
    color: #2ecc71;
    transform: scale(1.05);
  }

  a:active {
    color: #e74c3c;
    transform: scale(0.95);
  }

  textarea,
  input[list='opciones'] {
    display: block;
    width: 100%;
    resize: none;
    box-shadow: inset 4px 4px 18px #0004, inset -4px -4px 18px #0004;
    background-color: #e9e9e9;
    padding: 0.4rem;
    outline: none;
    field-sizing: content;
    position: relative;

    &.non-valid {
      box-shadow: inset 4px 4px 18px #f004, inset -4px -4px 18px #f004;
    }

    &.valid {
      box-shadow: inset 4px 4px 18px #0f04, inset -4px -4px 18px #0f04;
    }
  }

  #textarea-output,
  #textarea-output-2,
  #textarea-get-json-all,
  #input-get-array-of-a-playlist {
    padding-bottom: 32px;
  }
}

.playlist-section {
  content-visibility: auto;
  transition: left 1s ease;
  position: absolute;
  z-index: 1111;
  left: -200%;
  opacity: 0;
  top: 0;
  width: 30%;
  scroll-behavior: smooth;
  height: 100%;
  overflow-y: auto;
  background-color: #e9e9e9;
  transition: opacity 0.5s ease, left 0.3s ease;
  scrollbar-width: thin;
  scrollbar-color: var(--color1, 'gray') black;

  .settings-backup {
    position: absolute;
    color: white;
    right: 0.9rem;
    bottom: 0.3rem;
    border-radius: 50%;
    background-color: transparent;
    padding: 0.4rem;
    align-content: center;

    div {
      pointer-events: none;
      line-height: 0.5;
    }
  }

  .playlist-section-articles {
    width: 100%;
    height: max-content;
  }

  .padding-top-card {
    height: 78px;
  }

  .card-single {
    padding: 0.5rem;
    display: flex;
    column-gap: 0.5rem;
    position: relative;
    z-index: 1100;

    .card-single-left {
      background-color: transparent;
      display: flex;
      flex-wrap: wrap;
      place-content: center;
      width: fit-content;
      height: fit-content;

      a,
      img {
        -webkit-tap-highlight-color: transparent;
      }

      .img {
        pointer-events: none;
        aspect-ratio: 1;
        width: 3rem;
        height: 3rem;
        background-image: var(--bg-img-playlist);
        background-position: center;
        background-size: cover;
        position: relative;
        --black: #0004;
        filter: drop-shadow(1px 0px 0px var(--black))
          drop-shadow(-1px 0px 0px var(--black))
          drop-shadow(0px -1px 0px var(--black));
      }
    }

    .card-single-right {
      width: 64%;

      a {
        text-decoration: none;
        color: black;
        -webkit-tap-highlight-color: transparent;
      }

      h3 {
        user-select: text;
      }
    }

    .three-points {
      position: absolute;
      right: 1.5rem;
      width: 1rem;
      height: 3rem;
      background-color: transparent;
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      place-content: center;
      row-gap: 3px;

      .point {
        pointer-events: none;
        width: 0.4rem;
        height: 0.4rem;
        background-color: black;
        border-radius: 50%;
      }

      .options {
        position: absolute;
        opacity: 0;
        display: none;
        flex-direction: column;
        background-color: transparent;
        border-radius: 30px;
        right: 1rem;
        padding: 0.5rem;
        flex-wrap: wrap;
        place-items: center;

        &.options-active {
          opacity: 1;
          display: flex;
        }

        .item {
          width: fit-content;
          text-align: center;
          display: flex;
          flex-wrap: wrap;
          place-items: center;

          &:hover {
            svg {
              fill: white;
            }
          }
        }

        .item-1 {
          background-color: transparent;

          svg {
            margin-bottom: 3px;
          }
        }

        .item-2 {
          border-top: 2px solid #000;
          background-color: transparent;
        }

        svg {
          width: 1.3rem;
          height: 1.3rem;
          align-content: center;
          padding: 0.2rem;
          pointer-events: none;
          display: block;
          margin-inline: auto;
          margin-top: 3px;
        }
      }
    }
  }

  .card-single:nth-child(3n + 1) {
    background-color: color-mix(
      in srgb,
      var(--color1, #f004),
      transparent 55%
    );
  }

  .card-single:nth-child(3n + 2) {
    background-color: color-mix(
      in srgb,
      var(--color2, #f004),
      transparent 55%
    );
  }

  .card-single:nth-child(3n + 3) {
    background-color: color-mix(
      in srgb,
      var(--color3, #00f4),
      transparent 55%
    );
  }

  .playlist-container-form,
  .playlist-container-form-2 {
    width: 100%;
    background-color: black;
    padding: 1rem;
    padding-bottom: 2.3rem;
    position: fixed;
    top: 0px;
    left: 0;
    padding-left: 80px;
    display: flex;
    justify-content: center;
    z-index: 2000;

    input {
      display: block;
      padding: 0.3rem 0.8rem;
      border: none;
      outline: none;
      min-height: 30px;
      font-size: clamp(0.75rem, 0.6646rem + 0.3902vw, 1.25rem);
    }

    input[type='text'] {
      width: 70%;
      border-radius: 28px 0 0 28px;

      &.valid {
        background-color: #00ff00dd;
      }

      &.invalid {
        background-color: #ff0000dd;
      }
    }

    input[type='submit'] {
      border-radius: 0 28px 28px 0;
      transition: background-image 0.3s linear;
      background-image: linear-gradient(45deg, skyblue, springgreen);

      &:hover {
        background-image: linear-gradient(45deg, violet, springgreen);
      }
    }

    .max-length-input {
      position: absolute;
      color: white;
      bottom: 8px;
      font-size: 13px;
    }
  }

  .playlist-container-form-2 {
    background-color: #00dbde;
    background-image: linear-gradient(90deg, #00dbde 0%, #fc00ff 100%);
    top: -100%;
  }

  .playlist-container-form.goUp {
    animation: haciaArriba 1s ease 1 forwards;
  }

  .playlist-container-form-2.goUp {
    animation: haciaArriba 1s ease 1 forwards;
  }

  .playlist-container-form.goDown {
    animation: haciaAbajo 1s ease 1 forwards;
  }

  .playlist-container-form-2.goDown {
    animation: haciaAbajo 1s ease 1 forwards;
  }
}

@media (width <=1111px) {
  .playlist-section {
    width: 100%;
  }
}

/* ===========================EXTRA========================= */

.left,
.right {
  position: absolute;
  color: white;
  width: fit-content;
  height: fit-content;
  z-index: 800;
  font-style: italic;
  font-size: clamp(1rem, 0.9348rem + 0.3261vw, 1.1875rem);
}

.left {
  left: 1rem;
  bottom: 1rem;
  height: fit-content;
}

.right {
  top: 1rem;
  right: 1rem;
}

/* ============================LOADERS============================*/

.centrar.pyramid {
  .pyramid-loader {
    z-index: 30;
    margin-inline: auto;
    position: relative;
    width: 300px;
    height: 150px;
    pointer-events: none;
    display: block;
    transform-style: preserve-3d;
    transform: rotateX(-20deg) translateY(-40px);

    .wrapper {
      position: relative;
      width: 100%;
      height: 100%;
      transform-style: preserve-3d;
      animation: spin 4s linear infinite;

      .side {
        width: 70px;
        height: 70px;
        background: linear-gradient(
          to bottom right,
          var(--color1, lime),
          var(--color3, cyan)
        );
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        transform-origin: center top;
        clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
      }

      .side1 {
        transform: rotateZ(-30deg) rotateY(90deg);
        background: linear-gradient(
          to bottom right,
          var(--color3, cyan),
          var(--color1, lime)
        );
      }

      .side2 {
        transform: rotateZ(30deg) rotateY(90deg);
        background: linear-gradient(
          to bottom right,
          var(--color1, lime),
          var(--color3, cyan)
        );
      }

      .side3 {
        transform: rotateX(30deg);
        background: linear-gradient(
          to bottom right,
          var(--color1, lime),
          var(--color3, cyan)
        );
      }

      .side4 {
        transform: rotateX(-30deg);
        background: linear-gradient(
          to bottom right,
          var(--color3, cyan),
          var(--color1, lime)
        );
      }

      .shadow {
        width: 60px;
        height: 60px;
        background: gray;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        transform: rotateX(90deg) translateZ(-40px);
        filter: blur(12px);
      }
    }
  }
}

.centrar.cube {
  .container-cube {
    --w: 60px;
    --w-negative: calc(var(--w) * -1);
    height: var(--w);
    width: var(--w);
    position: relative;
    z-index: 40;
    top: -40px;
    transform-style: preserve-3d;
    animation: rotarY 10s linear alternate infinite both;

    .side {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(
        to bottom right,
        var(--color1, lime),
        var(--color2, lime),
        var(--color3, cyan)
      );
    }

    .behind {
      transform: translateZ(var(--w-negative));
    }

    .right {
      transform-origin: 100% 50%;
      transform: rotateY(-90deg);
    }

    .left {
      transform-origin: 0% 50%;
      transform: rotateY(90deg);
    }

    .top {
      transform-origin: 50% 0;
      transform: rotateX(-90deg);
    }

    .bottom {
      transform-origin: 50% 100%;
      transform: rotateX(90deg);
    }
  }
}

.centrar.star {
  .container-star {
    width: 150px;
    height: 150px;
    --height-side-pentagon: 150px;
    position: relative;
    top: -220px;
    transform-style: preserve-3d;
    perspective: 10000px;
    animation: rotarStar 10s linear infinite alternate both;
    zoom: 0.35;

    .side {
      width: 100%;
      height: 100%;
      position: absolute;
      clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
      transform-style: preserve-3d;
      perspective: 10000px;

      * {
        transform-style: preserve-3d;
        perspective: 10000px;
      }

      .triangle-front {
        width: 100%;
        height: 55%;
        position: absolute;
        bottom: 0;
        background-color: #e60b0988;
        transform-origin: 50% 100%;
        transform: rotateX(-90deg);
        clip-path: polygon(0 100%, 50% 0, 100% 100%);
      }

      .triangle-behind {
        width: 100%;
        height: 55%;
        position: absolute;
        bottom: 0;
        background-color: #ffcb6baa;
        transform-origin: 50% 100%;
        transform: rotateX(-90deg)
          translateZ(calc(-1 * var(--height-side-pentagon)));
        clip-path: polygon(0 100%, 50% 0, 100% 100%);
      }

      .triangle-left {
        position: absolute;
        top: 0;
        left: 0;
        background-color: #59d10288;
        width: 100%;
        height: 100%;
        transform-origin: 0% 50%;
        transform: rotateY(-60deg);
      }

      .triangle-right {
        position: absolute;
        top: 0;
        right: 0;
        background-color: #84ffc988;
        width: 100%;
        height: 100%;
        transform-origin: 100% 50%;
        transform: rotateY(60deg);
      }

      &.front {
        background-color: #fff8;
      }

      &.behind {
        background-color: #00f8;
        transform: translateZ(calc(var(--height-side-pentagon) * -1));
      }

      &.top-left {
        width: 95px;
        height: var(--height-side-pentagon);
        background-color: #ff08;
        clip-path: none;
        left: -10px;
        bottom: 122px;
        transform-origin: 50% 100%;
        transform: rotate(-37deg) rotateX(90deg);
      }

      &.top-right {
        width: 95px;
        height: var(--height-side-pentagon);
        background-color: #0ff8;
        clip-path: none;
        right: -10px;
        bottom: 122px;
        transform-origin: 50% 100%;
        transform: rotate(37deg) rotateX(90deg);
      }

      &.bottom-right {
        width: 96.5px;
        height: var(--height-side-pentagon);
        background-color: #0f08;
        clip-path: none;
        right: -35px;
        top: -46.5px;
        transform-origin: 50% 100%;
        transform: rotate(106deg) rotateX(90deg);
      }

      &.bottom-left {
        width: 96.5px;
        height: var(--height-side-pentagon);
        background-color: #f008;
        clip-path: none;
        left: -35px;
        top: -46.5px;
        transform-origin: 50% 100%;
        transform: rotate(-106deg) rotateX(90deg);
      }

      &.bottom-center {
        width: 96.5px;
        height: var(--height-side-pentagon);
        background-color: #e81cff88;
        clip-path: none;
        left: 50%;
        top: 0;
        transform-origin: 50% 100%;
        transform: rotate(0deg) translateX(-50%) rotateX(90deg) scaleZ(-1);
      }
    }
  }
}

.centrar.tetraPyramid {
  transform-style: preserve-3d;
  perspective: 10000px;
  .container-tetra {
    width: 120px;
    height: 120px;
    transform-style: preserve-3d;
    perspective: 10000px;
    position: relative;
    top: -100px;
    animation: girar4Piramids 8s linear infinite alternate both;

    & .cube {
      width: 120px;
      height: 120px;
      position: absolute;
      transform-style: preserve-3d;
      perspective: 10000px;

      & .side {
        width: 100%;
        height: 100%;
        position: absolute;
        background-color: #0002;
        background-color: #000;
        transform-style: preserve-3d;
        perspective: 10000px;
        overflow: hidden;
        left: 0;
        top: 0;

        &::before {
          content: '';
          display: block;
          position: absolute;
          inset: 0;
          width: 100%;
          height: 100%;
          background-image: linear-gradient(45deg, #60efff, #00ff87, #e81cff);
          filter: blur(50px);
        }

        &.front {
          transform: none;
        }

        &.behind {
          transform: translateZ(-120px);
        }

        &.right {
          transform-origin: 100% 0%;
          transform: rotateY(-90deg);
        }

        &.left {
          transform-origin: 0% 0%;
          transform: rotateY(90deg);
        }

        &.top {
          transform-origin: 50% 0%;
          transform: rotateX(-90deg);
        }
        &.bottom {
          transform-origin: 50% 100%;
          transform: rotateX(90deg);
        }
      }
    }

    & .triangle {
      width: 120px;
      height: 120px;
      position: absolute;
      bottom: 118px;
      transform-style: preserve-3d;
      perspective: 10000px;

      & .side {
        transform-style: preserve-3d;
        perspective: 10000px;
      }

      &.triangle-top {
        bottom: -118px;
        transform: scaleY(-1);
      }

      &.triangle-right {
        left: 118px;
        bottom: 0;
        transform: rotate(-90deg) scaleY(-1);
      }

      &.triangle-left {
        left: -118px;
        bottom: 0;
        transform: rotate(-90deg) scaleX(-1);
      }

      &.triangle-frontend {
        bottom: -1px;
        transform: rotate(90deg) rotateX(-90deg) translate(0px, -61px)
          translateZ(-116px);
        left: -175px;
      }

      &.triangle-backend {
        bottom: -36px;
        transform: rotate(90deg) rotateX(-90deg) scaleY(-1)
          translate(-36px, -178px) translateZ(253px);
        left: 194px;
      }

      & .side {
        width: 100%;
        height: 100%;
        clip-path: polygon(50% 0, 100% 100%, 0 100%);
        position: absolute;
        left: 0;
        top: 0;

        &.front,
        &.behind {
          transform-origin: 50% 100%;
        }

        &.bottom {
          opacity: 0;
        }

        &.front {
          background-color: #fff8;
          transform: rotateX(30deg);
        }

        &.behind {
          background-color: #00f8;
          transform: translateZ(-120px) rotateX(-30deg);
        }

        &.right {
          transform-origin: 100% 100%;
          transform: rotateY(-90deg) rotateX(-30deg);
          background-color: #f0f8;
        }

        &.left {
          transform-origin: 0% 100%;
          transform: rotateY(90deg) rotateX(-30deg);
          background-color: #0f08;
        }
      }
    }
  }
}

.centrar.multiFaces {
  .container-multi {
    position: relative;
    top: -220px;
    width: 150px;
    height: 300px;
    transform-style: preserve-3d;
    transition: transform 3s linear;
    animation: multi 6s linear infinite alternate;
    zoom: 0.3;
    pointer-events: none;

    @media (width <= 1000px) {
      width: 200px;
      height: 300px;
    }

    .lado {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      transform: rotateX(calc(360deg / 45 * var(--d))) translateZ(5vw);
    }

    .lado:nth-child(even) {
      background-color: var(--color1);
    }

    .lado:nth-child(odd) {
      background-color: var(--color3);
    }
  }
}

.centrar.triangPre {
  .container-pretriang {
    position: relative;
    top: -190px;
    height: 100vh;
    width: 100%;
    left: 0;
    zoom: .4;

    @media (width <= 1111px) {
      zoom: .5;
    }

    .container-cube {
      --size: 200px;
      --negative-size: -200px;
      width: var(--size);
      height: var(--size);
      position: absolute;
      top: 50%;
      left: 50%;
      transform-style: preserve-3d;
      perspective: 300px;
      animation: rotarTriang 8s linear infinite alternate both;

      @media (width <=1000px) {
        --size: 150px;
        --negative-size: -150px;
      }

      .side {
        position: absolute;
        width: var(--size);
        height: var(--size);
        left: 0;
        top: 0;
      }

      .front {
        background-color: #f0f5;
      }

      .behind {
        background-color: #0f05;
        transform: translate3d(0, 0, var(--negative-size));
      }

      .top {
        background-color: #f005;
        transform-origin: 50% 0;
        transform: rotateX(-90deg);
      }

      .bottom {
        background-color: #00f5;
        transform-origin: 50% 100%;
        transform: rotateX(90deg);
      }

      .right {
        background-color: #0ff5;
        transform-origin: 100% 0%;
        transform: rotateY(-90deg);
      }

      .left {
        background-color: #ff05;
        transform-origin: 0% 0%;
        transform: rotateY(90deg);
      }
    }
  }
}

.centrar.rombo3d {
  .container-rombo {
    position: relative;
    inset: 0;
    top: -190px;
    background-color: #000;
    display: flex;
    flex-wrap: wrap;
    height: 100vh;
    place-content: center;
    zoom: 0.45;

    @media (width <= 1111px) {
      top: -220px;
    }

    .container-octa {
      --w: 150px;
      --h: 150px;
      width: var(--w);
      height: var(--h);
      position: relative;
      top: -3vw;
      perspective: 5000px;
      transform-style: preserve-3d;
      animation: rotarRombo 8s linear infinite alternate both;

      .side {
        position: absolute;
        width: 200px;
        left: 0;
        top: 0;
        width: var(--w);
        height: var(--h);
        clip-path: polygon(50% 0, 100% 100%, 0 100%);
        background-image: linear-gradient(
          to right bottom,
          var(--color1),
          var(--color2),
          var(--color3)
        );
      }

      .side-btn {
        top: 100%;
        clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
        background-image: linear-gradient(
          to right top,
          var(--color1),
          var(--color2),
          var(--color3)
        );
      }

      .base {
        clip-path: none;
        transform-origin: 50% 100%;
        transform: rotateX(-90deg);
        visibility: hidden;
      }

      .front {
        transform-origin: 50% 100%;
        transform: rotateX(-30deg);
      }

      .back {
        transform-origin: 50% 100%;
        transform: translateZ(var(--w)) rotateX(30deg);
      }

      .right {
        transform-origin: 100% 100%;
        transform: rotateY(90deg) rotateX(30deg);
      }

      .left {
        transform-origin: 0% 100%;
        transform: rotateY(-90deg) rotateX(30deg);
      }

      .front-bottom {
        transform-origin: 50% 0;
        transform: rotateX(30deg);
      }

      .back-bottom {
        transform-origin: 50% 0;
        transform: translateZ(var(--w)) rotateX(-30deg);
      }

      .left-bottom {
        transform-origin: 0% 0%;
        transform: rotateY(-90deg) rotateX(-30deg);
      }

      .right-bottom {
        transform-origin: 100% 0%;
        transform: rotateY(90deg) rotateX(-30deg);
      }
    }
  }
}

.centrar.sticks8 {
  .container-8-sticks {
    width: 200px;
    height: 200px;
    transform-style: preserve-3d;
    perspective: 10000px;
    transform: rotateX(40deg) rotateY(48deg);
    position: relative;
    top: -245px;
    animation: rotate8sticks 10s linear infinite alternate;
    zoom: 0.4;

    @media (width <= 1111px) {
      top: -285px;
      zoom: 0.35;
    }

    .block {
      width: 100%;
      height: 100%;
      position: absolute;
      transform-style: preserve-3d;
      perspective: 10000px;

      .rectangle {
        width: 100%;
        height: 40px;
        position: absolute;
        transform-style: preserve-3d;
        perspective: 10000px;

        .side {
          width: 100%;
          height: 100%;
          position: absolute;
          left: 0;
          top: 0;

          &:nth-child(1) {
            background-color: #0ff8;
            transform: rotateX(0deg);
          }
          &:nth-child(2) {
            background-color: #0f08;
            transform: rotateX(0deg) translateZ(-40px);
          }

          &:nth-child(3) {
            background-color: #00f8;
            transform-origin: 50% 0;
            transform: rotateX(-90deg);
          }

          &:nth-child(4) {
            background-color: #f008;
            transform-origin: 50% 100%;
            transform: rotateX(90deg);
          }
        }
      }

      .rectangle-1 {
        left: 40px;
      }

      .rectangle-2 {
        transform: translateZ(-200px);
      }

      .rectangle-3 {
        transform-origin: 100% 0%;
        transform: rotateY(-90deg) translateX(-40px);
      }
      .rectangle-4 {
        left: 40px;
        transform-origin: 0% 0%;
        transform: rotateY(90deg);
      }
    }

    .second-block {
      bottom: 50%;
      left: -60px;
      transform: rotate(90deg);
    }

    .third-block {
      bottom: -40px;
      transform: rotateX(-90deg) translateY(200px);
    }
  }
}

.centrar.sixlaps {
  .container-six-laps {
    width: 200px;
    height: 200px;
    transform-style: preserve-3d;
    perspective: 10000px;
    animation: rotar6laps 10s linear infinite;
    position: relative;
    top: -300px;
    zoom: 0.3;

    @media (width <= 1111px) {
      top: -330px;
    }

    .block {
      width: 100%;
      height: 100%;
      position: absolute;
      transform-style: preserve-3d;
      perspective: 10000px;

      .rectangle {
        width: 100%;
        height: 40px;
        position: absolute;
        transform-style: preserve-3d;
        perspective: 10000px;

        .side {
          width: 100%;
          height: 100%;
          position: absolute;
          left: 0;
          top: 0;

          &:nth-child(1) {
            background-color: #ff00ff88;
            transform: rotateX(0deg);
          }
          &:nth-child(2) {
            background-color: #00fa9a88;
            transform: rotateX(0deg) translateZ(-40px);
          }

          &:nth-child(3) {
            background-color: #48d1cc88;
            transform-origin: 50% 0;
            transform: rotateX(-90deg);
          }

          &:nth-child(4) {
            background-color: #ffa50088;
            transform-origin: 50% 100%;
            transform: rotateX(90deg);
          }
        }
      }

      .rectangle-1 {
        left: 40px;
      }

      .rectangle-2 {
        transform: translateZ(-200px);
      }

      .rectangle-3 {
        transform-origin: 100% 0%;
        transform: rotateY(-90deg) translateX(-40px);
      }
      .rectangle-4 {
        left: 40px;
        background-color: blue;
        transform-origin: 0% 0%;
        transform: rotateY(90deg);
      }
    }

    .second-block {
      top: 50px;
    }

    .third-block {
      top: 100px;
    }

    .fourth-block {
      top: 150px;
    }

    .fifth-block {
      top: 200px;
    }

    .sixth-block {
      top: 250px;
    }
  }
}

.centrar.tuplas {
  .container-tuplas {
    width: 120px;
    height: 120px;
    transform-style: preserve-3d;
    perspective: 10000px;
    position: relative;
    animation: girartupla 8s linear infinite alternate both;
    zoom: 0.4;
    top: -220px;

    @media (width <= 1111px) {
      zoom: 0.3;
    }

    .cube {
      width: 120px;
      height: 120px;
      position: absolute;
      transform-style: preserve-3d;
      perspective: 10000px;

      .side {
        width: 100%;
        height: 100%;
        position: absolute;
        background-color: #0002;
        transform-style: preserve-3d;
        perspective: 10000px;
        overflow: hidden;
        left: 0;
        top: 0;

        &::before {
          content: '';
          display: block;
          position: absolute;
          inset: 0;
          width: 100%;
          height: 100%;
          background-image: linear-gradient(45deg, #60efff, #00ff87, #e81cff);
          filter: blur(50px);
        }

        &.front {
          transform: none;
        }

        &.behind {
          transform: translateZ(-120px);
        }

        &.right {
          transform-origin: 100% 0%;
          transform: rotateY(-90deg);
        }

        &.left {
          transform-origin: 0% 0%;
          transform: rotateY(90deg);
        }

        &.top {
          transform-origin: 50% 0%;
          transform: rotateX(-90deg);
        }
        &.bottom {
          transform-origin: 50% 100%;
          transform: rotateX(90deg);
        }
      }
    }

    .triangle {
      width: 120px;
      height: 120px;
      position: absolute;
      bottom: 118px;
      transform-style: preserve-3d;
      perspective: 10000px;

      &.triangle-top {
        bottom: -118px;
        transform: scaleY(-1);
      }

      &.triangle-right {
        left: 118px;
        bottom: 0;
        transform: rotate(-90deg) scaleY(-1);
      }

      &.triangle-left {
        left: -118px;
        bottom: 0;
        transform: rotate(-90deg) scaleX(-1);
      }

      &.triangle-frontend {
        bottom: -1px;
        transform: rotate(90deg) rotateX(-90deg) translate(0px, -61px)
          translateZ(-116px);
        left: -175px;
      }

      &.triangle-backend {
        bottom: -36px;
        transform: rotate(90deg) rotateX(-90deg) scaleY(-1)
          translate(-36px, -178px) translateZ(253px);
        left: 194px;
      }

      .side {
        width: 100%;
        height: 100%;
        clip-path: polygon(50% 0, 100% 100%, 0 100%);
        position: absolute;
        transform-style: preserve-3d;
        perspective: 10000px;
        left: 0;
        top: 0;

        &.front,
        &.behind {
          transform-origin: 50% 100%;
        }

        &.front {
          background-color: color-mix(
            in srgb,
            var(--color1) 50%,
            transparent 50%
          );
        }

        &.behind {
          background-color: color-mix(
            in srgb,
            var(--color2) 50%,
            transparent 50%
          );
          transform: translateZ(-120px);
        }

        &.right {
          transform-origin: 100% 100%;
          transform: rotateY(-90deg);
          background-color: color-mix(
            in srgb,
            var(--color3) 50%,
            transparent 50%
          );
        }
        &.left {
          transform-origin: 0% 100%;
          transform: rotateY(90deg);
          background-color: color-mix(in srgb, cyan 50%, transparent 50%);
        }
      }
    }
  }
}

.centrar.vasilisco {
  .container-vasilisco {
    width: 120px;
    height: 120px;
    transform-style: preserve-3d;
    perspective: 10000px;
    position: relative;
    top: -200px;
    z-index: 10;
    animation: girarVasilisco 10s linear infinite both;
    zoom: 0.4;

    @media (width <= 1111px) {
      top: -240px;
    }

    .cube {
      width: 120px;
      height: 120px;
      position: absolute;
      transform-style: preserve-3d;
      perspective: 10000px;

      .side {
        width: 100%;
        height: 100%;
        position: absolute;
        background-color: #0002;
        overflow: hidden;
        left: 0;
        top: 0;

        &::before {
          content: '';
          display: block;
          position: absolute;
          inset: 0;
          width: 100%;
          height: 100%;
          background-image: linear-gradient(45deg, #ff1b6b, #00ff87, #40c9ff);
          background-color: #0f08;
          filter: blur(10px);
        }

        &.front {
          transform: none;
        }

        &.behind {
          transform: translateZ(-120px);
        }

        &.right {
          transform-origin: 100% 0%;
          transform: rotateY(-90deg);
        }

        &.left {
          transform-origin: 0% 0%;
          transform: rotateY(90deg);
        }

        &.top {
          transform-origin: 50% 0%;
          transform: rotateX(-90deg);
        }
        &.bottom {
          transform-origin: 50% 100%;
          transform: rotateX(90deg);
        }
      }
    }

    .triangle {
      width: 120px;
      height: 120px;
      position: absolute;
      bottom: 118px;
      transform-style: preserve-3d;
      perspective: 10000px;

      &.triangle-top {
        bottom: -105px;
      }

      .side {
        width: 100%;
        height: 100%;
        clip-path: polygon(50% 0, 100% 100%, 0 100%);
        position: absolute;
        left: 0;
        top: 0;

        &.front,
        &.behind {
          transform-origin: 50% 100%;
        }

        &.front {
          background-color: #fff8;
          transform: rotateX(30deg);
        }

        &.behind {
          background-color: #f89b2988;
          transform: translateZ(-120px) rotateX(-30deg);
        }

        &.right {
          transform-origin: 100% 100%;
          transform: rotateY(-90deg) rotateX(-30deg);
          background-color: #0f08;
        }
        &.left {
          transform-origin: 0% 100%;
          transform: rotateY(90deg) rotateX(-30deg);
          background-color: #60efff88;
        }
      }
    }
  }
}

.centrar.pentagonal {
  .container-pentagonal {
    --purple: #b429f999;
    width: 170px;
    position: relative;
    height: 170px;
    transform-style: preserve-3d;
    perspective: 10000px;
    animation: rotarPentagonal 12s linear infinite alternate both;
    top: -235px;
    zoom: 0.35;

    @media (width <= 1111px) {
      zoom: 0.33;
    }

    .base {
      width: 100%;
      height: 100%;
      position: absolute;
      background-color: var(--purple);
      transform-origin: 50% 0;
      transform: rotateX(-90deg);
      clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);

      &.top {
        top: 0;
      }

      &.bottom {
        top: 150%;
      }
    }

    .side {
      width: 64%;
      height: 150%;
      position: absolute;
    }

    .side1 {
      background-color: #fff8;
      top: 0%;
      left: 50%;
      transform: translateX(-50%) translateZ(-170px);
    }
    .side2 {
      background-color: #f008;
      top: 0%;
      left: 50%;
      transform-origin: 100% 0%;
      transform: translateX(-50%) translateZ(-170px) rotateY(106deg);
    }
    .side3 {
      background-color: #0f08;
      top: 0%;
      left: 50%;
      transform-origin: 0% 0%;
      transform: translateX(-50%) translateZ(-170px) rotateY(-106deg);
    }
    .side4 {
      background-color: #ff08;
      top: 0%;
      left: 50%;
      width: 63%;
      transform-origin: 0% 0%;
      transform: rotateY(143deg);
    }
    .side5 {
      background-color: #00f8;
      top: 0%;
      left: 50%;
      width: 63%;
      transform-origin: 0% 0%;
      transform: rotateY(398deg);
    }
  }
}

.centrar.hexagonal {
  .container-hexagonal {
    width: 180px;
    height: 150px;
    perspective: 10000px;
    transform-style: preserve-3d;
    position: relative;
    top: -230px;
    zoom: 0.4;
    animation: rotarTetr 30s linear infinite alternate both;

    @media (width <= 1111px) {
      zoom: 0.33;
      top: -240px;
    }

    .base {
      width: 100%;
      height: 100%;
      clip-path: polygon(
        0% 50%,
        25% 0,
        75% 0,
        100% 50%,
        75% 100%,
        25% 100%,
        0% 50%
      );
      position: absolute;
      transform-origin: 50% 0;
      transform: rotateX(-90deg);

      &.base-top {
        background-color: #fff4;
        top: 0;
      }

      &.base-bottom {
        background-color: #f004;
        top: 180%;
      }
    }

    .side {
      position: absolute;
      width: 49.5%;
      left: 50%;
      height: 180%;

      &.side-1 {
        background-color: #0f08;
        transform: translateX(-50%) translateZ(-150px);
      }
      &.side-2 {
        background-color: #00f8;
        width: 49%;
        transform-origin: 100% 0%;
        transform: translateX(-50%) translateZ(-150px) rotateY(-239deg);
      }
      &.side-3 {
        background-color: #f008;
        width: 49%;
        transform-origin: 0% 0%;
        transform: translateX(-50%) translateZ(-150px) rotateY(239deg);
      }
      &.side-4 {
        background-color: #ff08;
        width: 49%;
        transform-origin: 0% 0%;
        transform: translateX(-50%) rotateY(-239deg);
      }
      &.side-5 {
        background-color: #0ff8;
        width: 49%;
        transform-origin: 100% 0%;
        transform: translateX(-50%) rotateY(239deg);
      }

      &.side-6 {
        background-color: #0f04;
        transform: translateX(-50%);
      }
    }
  }
}

.centrar.octagonal {
  .container-octagonal {
    width: 130px;
    height: 130px;
    position: relative;
    perspective: 10000px;
    transform-style: preserve-3d;
    animation: rotarOctagonal 20s linear infinite alternate both;
    top: -220px;
    zoom: 0.4;

    @media (width <= 1111px) {
      zoom: 0.38;
      top: -240px;
    }

    .base {
      width: 100%;
      height: 100%;
      position: absolute;
      clip-path: polygon(
        0% 25%,
        25% 0,
        75% 0,
        100% 25%,
        100% 75%,
        75% 100%,
        25% 100%,
        0% 75%
      );
      transform-origin: 50% 0;
      transform: rotateX(-90deg);
      background-image: repeating-conic-gradient(
        from 0deg at 50% 50%,
        var(--color1) 0 5deg,
        var(--color2) 5deg 10deg
      );

      &.base-top {
        top: 0;
      }
      &.base-bottom {
        top: 180%;
      }
    }

    .side {
      position: absolute;
      width: 50%;
      height: 180%;
      left: 50%;
      top: 0;
      background-image: repeating-conic-gradient(
        from 0deg at 50% 50%,
        var(--color1) 0 5deg,
        var(--color2) 5deg 10deg
      );

      &.side-1 {
        transform: translateX(-50%) translateZ(-130px);
      }

      &.side-2 {
        width: 35%;
        transform-origin: 100% 0%;
        transform: translateX(-28%) translateZ(-130px) rotateY(135deg);
      }

      &.side-3 {
        width: 35%;
        transform-origin: 0% 0%;
        transform: translateX(-71%) translateZ(-130px) rotateY(-135deg);
      }

      &.side-4 {
        transform: translateX(50%) translateZ(-65px) rotateY(90deg);
      }

      &.side-5 {
        transform: translateX(-150%) translateZ(-65px) rotateY(90deg);
      }

      &.side-6 {
        width: 35%;
        transform-origin: 100% 0%;
        transform: translateX(-28%) rotateY(-135deg);
      }

      &.side-7 {
        width: 35%;
        transform-origin: 0% 0%;
        transform: translateX(-71%) rotateY(135deg);
      }

      &.side-8 {
        transform: translateX(-50%);
      }
    }
  }
}

.centrar.pid {
  .container-pid {
    width: 180px;
    height: 150px;
    perspective: 10000px;
    transform-style: preserve-3d;
    position: relative;
    animation: rotarPid 30s linear infinite alternate both;
    top: -200px;
    zoom: 0.4;

    @media (width <= 1111px) {
      top: -220px;
    }

    .base {
      width: 100%;
      height: 100%;
      clip-path: polygon(
        0% 50%,
        25% 0,
        75% 0,
        100% 50%,
        75% 100%,
        25% 100%,
        0% 50%
      );
      position: absolute;
      transform-origin: 50% 0;
      transform: rotateX(-90deg);

      &.base-top {
        background-color: #fff4;
        top: 0;
      }
    }

    .side {
      position: absolute;
      width: 49%;
      left: 50%;
      height: 180%;
      clip-path: polygon(0 0, 100% 0, 50% 100%);
      --rotate-x-general: 16deg;
      --rotate-x-general-negative: calc(-1 * var(--rotate-x-general));

      &.side-1 {
        background-color: #0f08;
        transform-origin: 50% 0;
        transform: translateX(-50%) translateZ(-150px)
          rotateX(var(--rotate-x-general));
      }
      &.side-2 {
        background-color: #00f8;
        width: 48%;
        transform-origin: 100% 0%;
        transform: translateX(-50%) translateZ(-150px) rotateY(-239deg)
          rotateX(var(--rotate-x-general-negative));
      }
      &.side-3 {
        background-color: #f008;
        width: 48%;
        transform-origin: 0% 0%;
        transform: translateX(-50%) translateZ(-150px) rotateY(239deg)
          rotateX(var(--rotate-x-general-negative));
      }
      &.side-4 {
        background-color: #ff08;
        width: 48%;
        transform-origin: 0% 0%;
        transform: translateX(-50%) rotateY(-239deg)
          rotateX(var(--rotate-x-general));
      }
      &.side-5 {
        background-color: #0ff8;
        width: 48%;
        transform-origin: 100% 0%;
        transform: translateX(-50%) rotateY(239deg)
          rotateX(var(--rotate-x-general));
      }

      &.side-6 {
        background-color: #0f04;
        transform-origin: 50% 0;
        transform: translateX(-50%) rotateX(var(--rotate-x-general-negative));
      }
    }
  }
}

.centrar.frutr {
  .container {
    width: 180px;
    height: 150px;
    perspective: 10000px;
    transform-style: preserve-3d;
    position: relative;
    animation: rotarFrut 30s linear infinite alternate both;
    top: -120px;

    @media (width <= 1111px) {
      zoom: 0.7;
    }

    &.container-bottom {
      position: absolute;
      animation: none;
      left: 50%;
      transform: translate(-50%, -50%) rotate(-360deg);
    }

    &.container-2 {
      top: 20px;
      transform: translate(-50%, -50%) rotate(180deg);

      @media (width <= 1111px) {
        zoom: 1;
      }
    }

    &.pause {
      animation-play-state: paused;
    }

    .base {
      width: 100%;
      height: 100%;
      clip-path: polygon(
        0% 50%,
        25% 0,
        75% 0,
        100% 50%,
        75% 100%,
        25% 100%,
        0% 50%
      );
      position: absolute;
      transform-origin: 50% 0;
      transform: rotateX(-90deg);

      &.base-top {
        background-color: #fff4;
        top: 0;
      }
    }

    .side {
      position: absolute;
      width: 49.5%;
      left: 50%;
      height: 180%;
      clip-path: polygon(0 0, 100% 0, 50% 100%);
      --rotate-x-general: 35deg;
      --rotate-x-general-negative: calc(-1 * var(--rotate-x-general));
      background-image: radial-gradient(
        circle at 100% 100%,
        var(--color1),
        var(--color2),
        var(--color3)
      );

      &.side-1 {
        transform-origin: 50% 0;
        transform: translateX(-50%) translateZ(-150px)
          rotateX(var(--rotate-x-general));
      }
      &.side-2 {
        width: 49%;
        transform-origin: 100% 0%;
        transform: translateX(-50%) translateZ(-150px) rotateY(-239deg)
          rotateX(var(--rotate-x-general-negative));
      }
      &.side-3 {
        width: 49%;
        transform-origin: 0% 0%;
        transform: translateX(-50%) translateZ(-150px) rotateY(239deg)
          rotateX(var(--rotate-x-general-negative));
      }
      &.side-4 {
        width: 49%;
        transform-origin: 0% 0%;
        transform: translateX(-50%) rotateY(-239deg)
          rotateX(var(--rotate-x-general));
      }
      &.side-5 {
        width: 49%;
        transform-origin: 100% 0%;
        transform: translateX(-50%) rotateY(239deg)
          rotateX(var(--rotate-x-general));
      }

      &.side-6 {
        transform-origin: 50% 0;
        transform: translateX(-50%) rotateX(var(--rotate-x-general-negative));
      }
    }
  }
}

.centrar.sphere {
  .container-sphere {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    transform-style: preserve-3d;
    perspective: 10000px;
    position: relative;
    top: -80px;
    animation: rotarSphere 10s linear infinite;

    .aro {
      position: absolute;
      top: 0;
      width: 100%;
      height: 100%;
      transform-style: preserve-3d;
      perspective: 10000px;
      border-radius: inherit;
      background-color: #fff1;
      background-image: linear-gradient(
        to bottom right,
        color-mix(in srgb, var(--color1) 20%, transparent 90%),
        color-mix(in srgb, var(--color2) 20%, transparent 90%),
        color-mix(in srgb, var(--color3) 20%, transparent 90%)
      );
      transform: rotateX(90deg) rotateY(calc(-360deg / 36 * var(--r)));
    }
  }
}

.centrar.pentaIn {
  .container-penta-in {
    width: 150px;
    height: 120px;
    position: relative;
    animation: rotarPenta 8s linear infinite alternate;
    transform-style: preserve-3d;
    perspective: 10000px;
    zoom: 0.4;
    top: -230px;

    @media (width <= 1111px) {
      zoom: 0.35;
    }

    .base {
      width: 100%;
      height: 100%;
      position: absolute;
      transform-style: preserve-3d;
      perspective: 10000px;

      .side {
        width: 100%;
        height: 100%;
        clip-path: polygon(0 100%, 50% 0, 100% 100%);
        position: absolute;
        transform-origin: 50% 100%;
        --translate-x: 31deg;
        background-color: transparent;

        &::before {
          content: '';
          position: absolute;
          display: block;
          width: 100%;
          height: 100%;
          inset: 0;
          clip-path: polygon(0 100%, 50% 0, 100% 100%);
          background-image: linear-gradient(
            to bottom,
            var(--color1),
            var(--color2),
            var(--color3)
          );
          filter: blur(5px);
        }

        &.side-1 {
          transform: rotateX(var(--translate-x));
        }

        &.side-2 {
          transform: translate(99px, -71px) rotate(-72deg)
            rotateX(var(--translate-x));
        }
        &.side-3 {
          transform: translate(-99px, -71px) rotate(72deg)
            rotateX(var(--translate-x));
        }
        &.side-4 {
          transform: translate(-61px, -187px) rotate(144deg)
            rotateX(var(--translate-x));
        }
        &.side-5 {
          transform: translate(61px, -187px) rotate(-144deg)
            rotateX(var(--translate-x));
        }
      }

      &.base-bottom {
        bottom: 0;
      }

      &.center {
        .side {
          --translate-x: -90deg;
        }
      }
      &.center-top {
        transform: translateZ(120px) scaleZ(-1);
        .side {
          --translate-x: -90deg;
        }
      }

      &.base-top {
        top: 0px;
        transform: translateZ(120px) scaleZ(-1);
      }
    }
  }
}

.centrar.prismSquare {
  .container {
    width: 150px;
    height: 300px;
    position: relative;
    transform-style: preserve-3d;
    perspective: 10000px;
    animation: rotarPrismSquare 8s linear infinite alternate;
    top: -270px;
    zoom: 0.4;
    pointer-events: none;

    @media (width <= 1111px) {
      zoom: 0.38;
      top: -210px;
    }

    .side {
      top: 0;
      position: absolute;
      width: 100%;
      height: 100%;
      transform-origin: 50% 100%;
      clip-path: polygon(25% 0, 75% 0, 100% 100%, 0 100%, 25% 0);
      --rotateX: -7deg;

      &.side-top,
      &.side-bottom {
        clip-path: none;
      }

      &.side-top {
        top: -73px;
        left: 20px;
        width: 73%;
        height: 25%;
        transform: translate(0px, 0px) translateZ(-37px) scale(0.7)
          rotateX(90deg);
        background-color: #ffa50088;
      }
      &.side-bottom {
        top: 59.4%;
        left: 20px;
        width: 150px;
        height: 150px;
        transform: translate(-20px, -28px) translateZ(0px) rotateX(90deg);
        background-color: #ffa50088;
      }

      &.side-front {
        background-color: #fff8;
        transform: rotateX(calc(-1 * var(--rotateX)));
      }

      &.side-behind {
        background-color: #0f08;
        transform: translateZ(-150px) rotateX(var(--rotateX));
      }

      &.side-right {
        background-color: #f008;
        transform: translateX(75px) translateZ(-75px) rotateY(-90deg)
          rotateX(var(--rotateX));
      }
      &.side-left {
        background-color: #00f8;
        transform: translateX(-75px) translateZ(-75px) rotateY(-90deg)
          rotateX(calc(-1 * var(--rotateX)));
      }
    }
  }
}

.centrar.trom {
  .container-trom {
    --w: 150px;
    --h: 150px;
    --w-negative: calc(var(--w) * -1);
    --w-half-negative: calc(var(--w) / -2);
    --w-half-positive: calc(var(--w) / 2);
    --rotateX: 30deg;
    width: 150px;
    height: 150px;
    position: relative;
    transform-style: preserve-3d;
    animation: tromRotate 16s linear infinite;
    zoom: 0.35;
    top: -240px;
    pointer-events: none;

    @media (width <= 1111px) {
      zoom: 0.3;
      top: -290px;
    }

    &.pause {
      animation-play-state: paused;
    }

    .triangle {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      transform-style: preserve-3d;
      transform: perspective(10000px);

      &.triangle-bottom {
        top: 99.5%;
        transform: rotate(180deg);
      }

      .side {
        position: absolute;
        width: 100%;
        height: 100%;
        clip-path: polygon(0 100%, 50% 0, 100% 100%);
        transform-origin: 50% 100%;

        &.side-front {
          transform: rotateX(var(--rotateX));
          background-color: #fff8;
        }

        &.side-behind {
          transform: translateZ(var(--w-negative))
            rotateX(calc(var(--rotateX) * -1));
          background-color: #fff8;
        }

        &.side-right {
          transform: translateZ(var(--w-half-negative))
            translateX(var(--w-half-positive)) rotateY(-90deg)
            rotateX(calc(var(--rotateX) * -1));
          background-color: #fff8;
        }
        &.side-left {
          transform: translateZ(var(--w-half-negative))
            translateX(var(--w-half-negative)) rotateY(-90deg)
            rotateX(var(--rotateX));
          background-color: #fff8;
        }
      }
    }

    .triangle-three-sides {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0px;
      left: 0px;
      transform-style: preserve-3d;
      transform-origin: 50% 100%;

      &.tts-top-front {
        transform: perspective(10000px) scaleZ(-1) rotateX(-47deg);
      }

      &.tts-top-behind {
        transform: perspective(10000px) translateZ(var(--w-negative))
          rotateX(-47deg);
      }

      &.tts-top-right {
        transform: perspective(10000px) translateZ(var(--w-half-negative))
          translateX(var(--w-half-positive)) rotateY(-90deg) rotateX(-47deg);
      }

      &.tts-top-left {
        transform: perspective(10000px) translateZ(var(--w-half-negative))
          translateX(var(--w-half-negative)) rotateY(90deg) rotateX(-47deg);
      }
      &.tts-bottom-left {
        transform: perspective(10000px) scaleY(-1)
          translateZ(var(--w-half-negative))
          translateX(var(--w-half-negative)) rotateY(90deg) rotateX(-47deg);
      }

      &.tts-bottom-front {
        transform: perspective(10000px) scaleY(-1) scaleZ(-1) rotateX(-47deg);
      }

      &.tts-bottom-behind {
        transform: perspective(10000px) scaleY(-1)
          translateZ(var(--w-negative)) rotateX(-47deg);
      }

      &.tts-bottom-right {
        transform: perspective(10000px) scaleY(-1)
          translateZ(var(--w-half-negative))
          translateX(var(--w-half-positive)) rotateY(-90deg) rotateX(-47deg);
      }

      .side {
        position: absolute;
        width: 100%;
        height: 100%;
        clip-path: polygon(0 100%, 50% 0, 100% 100%);
        --girarX: 17deg;
        --girarX-negative: calc(var(--girarX) * -1);
        transform-origin: 50% 100%;

        &.side-front {
          background-color: #00f8;
          transform: rotateX(var(--girarX));
        }

        &.side-bottom {
          background-color: #0f08;
          transform: rotateX(90deg) scaleY(0.87);
        }

        &.side-right {
          background-color: #ff08;
          transform: translateZ(-66px) translateX(38px) rotateY(-60deg)
            rotateX(var(--girarX-negative));
        }

        &.side-left {
          background-color: #f008;
          transform: translateZ(-66px) translateX(-38px) rotateY(60deg)
            rotateX(var(--girarX-negative));
        }
      }
    }
  }
}

.centrar.miniPent {
  .container-mini-pent {
    width: 150px;
    height: 150px;
    --height-side-pentagon: 90px;
    position: relative;
    transform-style: preserve-3d;
    transform: perspective(10000px);
    animation: rotarPent 10s linear infinite alternate both;
    top: -170px;
    zoom: 0.5;

    @media (width <= 1111px) {
      top: -205px;
    }

    .side {
      width: 100%;
      height: 100%;
      position: absolute;
      clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);

      &.front {
        background-color: #fff8;
      }

      &.behind {
        background-color: #00f8;
        transform: translateZ(calc(var(--height-side-pentagon) * -1));
      }

      &.top-left {
        width: 95px;
        height: var(--height-side-pentagon);
        background-color: #ff08;
        clip-path: none;
        left: -10px;
        bottom: 122px;
        transform-origin: 50% 100%;
        transform: rotate(-37deg) rotateX(90deg);
      }

      &.top-right {
        width: 95px;
        height: var(--height-side-pentagon);
        background-color: #0ff8;
        clip-path: none;
        right: -10px;
        bottom: 122px;
        transform-origin: 50% 100%;
        transform: rotate(37deg) rotateX(90deg);
      }

      &.bottom-right {
        width: 96.5px;
        height: var(--height-side-pentagon);
        background-color: #0f08;
        clip-path: none;
        right: -35px;
        top: 13.5px;
        transform-origin: 50% 100%;
        transform: rotate(106deg) rotateX(90deg);
      }

      &.bottom-left {
        width: 96.5px;
        height: var(--height-side-pentagon);
        background-color: #f008;
        clip-path: none;
        left: -35px;
        top: 13.5px;
        transform-origin: 50% 100%;
        transform: rotate(-106deg) rotateX(90deg);
      }
    }
  }
}

.centrar.pyramiDuplex {
  .pyramid {
    --w: 150px;
    --w-negative: calc(var(--w) * -1);
    --w-half: calc(var(--w) / 2);
    --w-half-negative: calc(var(--w) / 2 * -1);
    --rotate-x: 25deg;
    --rotate-y: -90deg;
    --rotate-x-negative: calc(var(--rotate-x) * -1);
    width: var(--w);
    height: var(--w);
    position: relative;
    transform-style: preserve-3d;
    perspective: 10000px;
    top: -100px;

    @media (width <= 1111px) {
      top: -120px;
    }

    &.pyramid-top {
      animation: rotarDuplex 8s linear infinite alternate both;
    }

    &.pyramid-bottom {
      position: absolute;
      top: 50%;
      transform: translateZ(-100px) rotate(180deg) scaleZ(-1);
    }

    &.pausa {
      animation-play-state: paused;
    }

    .side {
      width: 100%;
      height: 100%;
      position: absolute;
      clip-path: polygon(0 100%, 50% 0, 100% 100%);
      transform-origin: 50% 100%;
      --rotate-x-negative: -16.5deg;

      &.side-front {
        background-color: #00f8;
        transform: scale(1.02, 1.04) rotateX(22deg);
      }

      &.side-bottom {
        background-color: #0f08;
        transform: rotateX(90deg);
      }

      &.side-right {
        background-color: #f008;
        transform: translateZ(-75px) translateX(38px) rotateY(-63deg)
          rotateX(var(--rotate-x-negative)) scaleX(1.12);
      }

      &.side-left {
        background-color: #ff08;
        transform: translateZ(-75px) translateX(-38px) rotateY(63deg)
          rotateX(var(--rotate-x-negative)) scaleX(1.12);
      }
    }
  }
}

/* Piramide */
@keyframes spin {
  100% {
    transform: rotateY(360deg);
  }
}

/* Cubo */
@keyframes rotarY {
  0% {
    transform: rotateZ(0deg) rotateX(-30deg) rotateY(0deg);
  }
  100% {
    transform: rotateZ(360deg) rotateX(-30deg) rotateY(360deg);
  }
}

/* Estrella */
@keyframes rotarStar {
  0% {
    transform: rotateX(0deg) rotateY(0deg);
  }
  100% {
    transform: rotateX(359deg) rotateY(359deg);
  }
}

/* tetra4Pyramid */
@keyframes girar4Piramids {
  0% {
    transform: scale(0.45) rotateX(0deg) rotateY(0deg);
  }
  100% {
    transform: scale(0.45) rotateX(359deg) rotateY(359deg);
  }
}

/* multi */
@keyframes multi {
  0% {
    transform: rotateY(0deg);
  }

  100% {
    transform: rotateY(359deg);
  }
}

/* Triang Pre */
@keyframes rotarTriang {
  0% {
    transform: translate(-50%, -50%) rotateX(0deg) rotateY(0deg) rotate(0deg);
  }

  25% {
    transform: translate(-50%, -50%) rotateX(90deg) rotateY(180deg)
      rotate(90deg);
  }

  50% {
    transform: translate(-50%, -50%) rotateX(180deg) rotateY(360deg)
      rotate(180deg);
  }

  75% {
    transform: translate(-50%, -50%) rotateX(270deg) rotateY(540deg)
      rotate(270deg);
  }

  100% {
    transform: translate(-50%, -50%) rotateX(360deg) rotateY(720deg)
      rotate(360deg);
  }
}

/* rombo3d */
@keyframes rotarRombo {
  0% {
    transform: rotateX(-360deg) rotate(-55deg);
  }

  100% {
    transform: rotateX(360deg) rotate(55deg);
  }
}

/* 8sticks */
@keyframes rotate8sticks {
  0% {
    transform: rotateX(15deg) rotateY(15deg);
  }
  100% {
    transform: rotateX(375deg) rotateY(375deg);
  }
}

/* 6laps */
@keyframes rotar6laps {
  0% {
    transform: rotateX(15deg) rotateY(15deg);
  }
  100% {
    transform: rotateX(375deg) rotateY(375deg);
  }
}

/* tuplas */
@keyframes girartupla {
  0% {
    transform: rotateX(0deg) rotateY(0deg);
  }
  100% {
    transform: rotateX(359deg) rotateY(359deg);
  }
}

/* vasilisco */
@keyframes girarVasilisco {
  0% {
    transform: rotateX(-34deg) rotateY(0deg);
  }
  100% {
    transform: rotateX(-34deg) rotateY(359deg);
  }
}

/* prisma pentagonal */
@keyframes rotarPentagonal {
  0% {
    transform: rotateX(-369deg) rotateY(-369deg);
  }
  100% {
    transform: rotateX(369deg) rotateY(369deg);
  }
}

/* hexagonal */
@keyframes rotarTetr {
  0% {
    transform: rotateX(-738deg) rotateY(-738deg);
  }
  100% {
    transform: rotateX(738deg) rotateY(738deg);
  }
}

/* prisma octagonal */
@keyframes rotarOctagonal {
  0% {
    transform: rotateX(-369deg) rotateY(-369deg);
  }
  100% {
    transform: rotateX(369deg) rotateY(369deg);
  }
}

/* prisma rotarPid */
@keyframes rotarPid {
  0% {
    transform: rotateX(-738deg) rotateY(-738deg);
  }
  100% {
    transform: rotateX(738deg) rotateY(738deg);
  }
}

/* rotarfrut */
@keyframes rotarFrut {
  0% {
    transform: scale(0.55) rotateX(-738deg) rotateY(-738deg);
  }
  100% {
    transform: scale(0.55) rotateX(738deg) rotateY(738deg);
  }
}

/* rotarSphere */
@keyframes rotarSphere {
  0% {
    transform: rotate3d(0, 0, 0, 0deg);
  }
  100% {
    transform: rotate3d(1, 1, 1, 360deg);
  }
}

/* pentaIn */
@keyframes rotarPenta {
  0% {
    transform: rotateX(0deg) rotateY(0deg);
  }
  100% {
    transform: rotateX(359deg) rotateY(359deg);
  }
}

/* prismSquare */
@keyframes rotarPrismSquare {
  0% {
    transform: scale(0.8) rotateX(0deg) rotateY(0deg);
  }
  100% {
    transform: scale(0.8) rotateX(359deg) rotateY(359deg);
  }
}

/* trom */
@keyframes tromRotate {
  0% {
    transform: perspective(10000px) rotateX(-369deg) rotateY(-369deg);
  }
  100% {
    transform: perspective(10000px) rotateX(369deg) rotateY(369deg);
  }
}

/* MiniPent */
@keyframes rotarPent {
  0% {
    transform: rotateX(0deg) rotateY(0deg);
  }
  100% {
    transform: rotateX(359deg) rotateY(359deg);
  }
}

/* rotar duplex */
@keyframes rotarDuplex {
  0% {
    transform: scale(0.59) rotateX(0deg) rotateY(0deg);
  }
  100% {
    transform: scale(0.59) rotateX(359deg) rotateY(359deg);
  }
}

/* ============================COMPONENTES============================*/

.interruptor {
  display: inline-block;
  margin: 0;
  position: absolute;
  z-index: 1000;
  right: 1.2rem;
  bottom: 1.2rem;
  border-radius: 1.75em;
  -webkit-box-shadow: 0 0 0.25em rgba(2, 255, 255, 0.2);
  -moz-box-shadow: 0 0 0.25em rgba(255, 255, 255, 0.2);
  box-shadow: 0 0 0.25em rgba(255, 255, 255, 0.2);

  label {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
  }

  input {
    display: none;
  }

  span {
    display: block;
    transition: top 0.1s;
  }

  .switch-border1 {
    border: 0.05em solid #000;
    border-radius: 1.75em;
    box-shadow: 0 0.1em rgba(255, 255, 255, 0.2);
  }

  .switch-border2 {
    width: 3.3em;
    height: 6.3em;
    position: relative;
    border: 0.05em solid #323232;
    background-image: linear-gradient(to right, #2d2d2d, #4b4b4b, #2d2d2d);
    border-radius: 1.7em;

    &::before,
    &::after {
      content: '';
      display: block;
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 0;
      opacity: 0.3;
      border-radius: 1.7em;
    }

    .switch-top {
      width: 100%;
      height: 42%;
      position: absolute;
      top: 8%;
      left: 0;
      z-index: 1;
      background-image: linear-gradient(to right, #2d2d2d, #4b4b4b, #2d2d2d);
      border-radius: 1.7em;
    }

    .switch-shadow {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 2;
      border-radius: 1.7em;
      -webkit-box-shadow: 0 0 1em black inset;
      -moz-box-shadow: 0 0 1em black inset;
      box-shadow: 0 0 1em black inset;
    }

    .switch-handle-left,
    .switch-handle-right {
      content: '';
      display: block;
      width: 1.8em;
      height: 0;
      position: absolute;
      top: 3.3em;
      z-index: 2;
      border-bottom: 2.25em solid #111;
      border-left: 0.35em solid transparent;
      border-right: 0.35em solid transparent;
    }

    .switch-handle-left {
      left: 0.4em;
    }

    .switch-handle-right {
      right: 0.4em;
    }

    .switch-handle {
      width: 1.8em;
      height: 2.25em;
      position: absolute;
      top: 3.3em;
      left: 0.75em;
      z-index: 3;
      background: #333;
      background-image: linear-gradient(
        to right,
        #111,
        #777 40%,
        #888,
        #777 60%,
        #111
      );
      border-radius: 0;
    }

    .switch-handle-top {
      width: 2.5em;
      height: 2.5em;
      position: absolute;
      top: 4.25em;
      left: 0.4em;
      z-index: 4;
      background-color: #555;
      background-image: linear-gradient(to right, #5f5f5f, #878787);
      border-top: 0.1em solid #aeb2b3;
      border-radius: 1.25em;
    }

    .switch-handle-bottom {
      width: 1.8em;
      height: 1.8em;
      position: absolute;
      top: 2.35em;
      left: 0.75em;
      z-index: 3;
      background: #333;
      background-image: linear-gradient(
        to right,
        #111,
        #777 40%,
        #888,
        #777 60%,
        #111
      );
      border-top: 0.1em solid #141414;
      border-radius: 0.9em;
    }

    .switch-handle-base {
      width: 2.1em;
      height: 2.1em;
      position: absolute;
      top: 1.9em;
      left: 0.6em;
      z-index: 2;
      border-top: 0.1em solid rgba(255, 255, 255, 0.35);
      border-radius: 1.05em;
      box-shadow: 0 0 0.25em rgba(0, 0, 0, 0.4) inset;
    }

    .switch-handle-left,
    .switch-handle-right,
    .switch-handle,
    .switch-handle-top,
    .switch-handle-bottom,
    .switch-handle-base {
      transition: top 0.3s ease, border 0.3s ease;
    }
  }

  & input:checked ~ .switch-handle-left,
  & input:checked ~ .switch-handle-right {
    top: 0.75em;
    border-bottom: 0;
    border-top: 2.25em solid #111;
  }

  & input:checked ~ .switch-handle {
    top: 0.75em;
  }

  & input:checked ~ .switch-handle-top {
    top: -0.5em;
    border-top: 0;
    border-bottom: 0.1em solid #aeb2b3;
  }

  & input:checked ~ .switch-handle-bottom {
    top: 2.1em;
    border-top: 0;
    border-bottom: 0.1em solid #141414;
  }

  & input:checked ~ .switch-handle-base {
    top: 2.25em;
    border-top: 0;
    border-bottom: 0.1em solid rgba(255, 255, 255, 0.35);
  }
}

.gota {
  position: absolute;
  height: 200px;
  background: linear-gradient(transparent, #fff);
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  animation: caer 5s linear infinite;

  &:nth-child(3n + 1) {
    background-image: linear-gradient(transparent, var(--color1, #ff00ff));
  }

  &:nth-child(3n + 2) {
    background-image: linear-gradient(transparent, var(--color2, #00ffff));
  }

  &:nth-child(3n + 3) {
    background-image: linear-gradient(transparent, var(--color3, #00ff9f));
  }
}

.centrar {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  place-content: center;
  width: 100%;
  min-height: 100vh;
  z-index: 800;
  background-color: transparent;
  transform-style: preserve-3d;
  perspective: 10000px;

  .container-loader {
    transform-style: preserve-3d;
    perspective: 10000px;

    @media (width <= 1111px) {
      transform: translateY(-70px);
    }
  }

  @media (width <= 800px) and (orientation: portrait) {
    transform: translateY(-50px);
  }
}

.theForm {
  position: fixed;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 99;
  display: flex;
  padding: 0.5rem;
  flex-wrap: wrap;
  place-content: center;
  border-radius: 999px;
  background-image: linear-gradient(
    143deg,
    color-mix(in srgb, var(--color1, #f004), transparent 50%),
    color-mix(in srgb, var(--color2, #f004), transparent 50%),
    color-mix(in srgb, var(--color3, #f004), transparent 50%)
  );
  background-size: 1000% 100%;
  animation: cambiar 5s ease infinite alternate;

  @media (width <= 800px) and (orientation: portrait) {
    width: 72%;
    margin-inline: auto;
    transform:  translate(-50%, -50%) translateY(-60px);
  }

  .autocomplete {
    position: relative;
    width: 100%;
    display: flex;
    place-content: center;

    .buscar {
      color: #000;
      border-bottom-right-radius: 20px;
      border-top-right-radius: 20px;
      width: 18%;
      display: flex;
      flex-wrap: wrap;
      place-content: center;
      cursor: pointer;
      background-color: #fff4;
      border: none;
      font-size: 0.9rem;
      transition: background-color 0.2s ease;
      -webkit-tap-highlight-color: transparent;

      &.dlt-active {
        background-color: #0004;
      }
    }

    #myInput {
      padding: 0.5rem;
      border-top-left-radius: 20px;
      border-bottom-left-radius: 20px;
      padding-left: 1rem;
      width: 75%;
      outline: none;
      font-size: 1.2rem;
      flex-basis: 85%;
      border: none;
      background-color: #fff4;

      &::placeholder {
        color: black;
        padding: 0;
        width: fit-content;
      }
    }

    .autocomplete-items {
      position: absolute;
      left: 10px;
      top: 48px;
      width: 100%;
      color: #fff;

      a {
        text-decoration: none;
        color: #fff;
        display: block;
        padding: 0.5rem;
        font-weight: 500;
        border-bottom: 1px solid rgba(255, 255, 255, 0.4);
        border-top: 1px solid rgba(255, 255, 255, 0.4);
        font-family: Verdana, Geneva, Tahoma, sans-serif;
        -webkit-tap-highlight-color: #0004;

        &:nth-child(even) {
          background-color: color-mix(
            in srgb,
            var(--color1, #f004),
            transparent 60%
          );
        }

        &:nth-child(odd) {
          background-color: color-mix(
            in srgb,
            var(--color3, #00f4),
            transparent 60%
          );
        }

        &.autocomplete-active {
          background-color: #0005;
          font-style: italic;
        }
      }
    }

    strong {
      color: lime;
    }
  }
}

/* ============================MEDIA============================*/

@media (orientation: landscape) and (width <=1000px) {
  .centrar {
    display: flex;
    flex-direction: row;
    place-content: center;
    column-gap: 2rem;
    height: 100%;

    .container-loader {
      display: none;
    }

    .theForm {
      align-self: center;
      justify-self: center;
      width: 50%;
      background-image: linear-gradient(
        143deg,
        color-mix(in srgb, var(--color1, #f004), transparent 50%),
        color-mix(in srgb, var(--color2, #f004), transparent 50%),
        color-mix(in srgb, var(--color3, #f004), transparent 50%)
      );
      margin-top: -1rem;

      .autocomplete #myInput {
        width: 50%;
      }
    }
  }

  .interruptor {
    scale: 0.8;
  }

  .left {
    display: none;
  }

  .playlist-section {
    width: 100%;
  }
}

/* ============================KEYFRAMES============================*/

/* Gotas de lluvia */
@keyframes caer {
  0% {
    transform: translateY(-200px);
  }

  100% {
    transform: translateY(calc(100vh + 200px));
  }
}

/* Cambio de colores de formulario contorno */
@keyframes cambiar {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

/* Input para crear playList hacia arriba */
@keyframes haciaArriba {
  0% {
    top: 0;
  }

  100% {
    display: none;
    top: -100%;
  }
}

/* Input para crear playList hacia abajo */
@keyframes haciaAbajo {
  0% {
    top: -100%;
  }

  100% {
    display: flex;
    top: 0;
  }
}

@media (height <=280px) {
  .container-loader,
  .interruptor,
  .right,
  .button-playlist {
    display: none;
  }

  .centrar {
    width: 90%;
    margin-inline: auto;

    .theForm {
      width: 50%;
    }
  }
}

@media (width <=200px) {
  html {
    display: none;
  }
}

@media (hover: hover) {
  .theForm {
    .autocomplete {
      .buscar {
        &:hover {
          background-color: #0004;
        }
      }
    }
  }
}

/* ===========================VIEW TRANSITIONS========================= */
html {
  view-transition-name: transitionPage;
}

@view-transition {
  navigation: auto;
}

::view-transition-new(transitionPage) {
  animation: fadeIn 1s ease forwards;
}
::view-transition-old(transitionPage) {
  animation: fadeIn 1s ease reverse forwards;
}

@keyframes fadeIn {
  0% {
    clip-path: circle(0% at 50% 50%);
  }
  100% {
    clip-path: circle(100% at 50% 50%);
  }
}