*,
*::after,
*::before {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: sans-serif, Geneva, Tahoma;
  font-weight: 600;
  user-select: none;
  cursor: auto;
}

html {
  min-width: 350px;
  max-width: 1600px;
  display: block;
  margin-inline: auto;
  background-color: black;
  align-content: center;
  height: 100vh;
}

html,
body {
  scroll-behavior: smooth;
}

body {
  --sb-track-color: transparent;
  --sb-thumb-color: linear-gradient(
    to bottom,
    var(--color1),
    var(--color2),
    var(--color3)
  );
  --sb-size: 10px;
}

body::-webkit-scrollbar {
  width: var(--sb-size);
}

body::-webkit-scrollbar-track {
  background: var(--sb-track-color);
}

body::-webkit-scrollbar-thumb {
  background: var(--sb-thumb-color);
}

@supports not selector(::-webkit-scrollbar) {
  body {
    scrollbar-color: var(--sb-thumb-color) var(--sb-track-color);
  }
}

.am-modal {
  margin: auto;
  border: none;
  width: 100%;
  max-width: 275px;
  height: max-content;
  padding: 1rem;
  padding-top: 2rem;
  background-color: #111;
  box-shadow: 0 0 1px #0008;
  border-radius: 20px;
  color: gray;
  overflow: hidden;
  scale: 0;
  transition: scale 0.25s ease, display 0.25s allow-discrete,
    overlay 0.25s allow-discrete;

  &[open] {
    scale: 1;
    transition: scale 0.25s;

    @starting-style {
      scale: 0;
    }
  }

  .tituto-modal {
    text-wrap: balance;
    width: 80%;
    margin-bottom: 0.7rem;
  }

  h3 {
    font-size: 0.85rem;
  }

  .cerrar {
    position: absolute;
    top: 0.8rem;
    right: 0.8rem;
    padding: 0.4rem;
    border: none;
    transform: scale(0.9);
    border-radius: 50%;
    background-color: #000;
    box-shadow: 0 0 9px 0 #fff inset;
    overflow: hidden;
    font-size: 0.8rem;
    transition: box-shadow 0.5s ease;

    &:hover {
      background-color: #000;
      box-shadow: 0 0 28px 0 #fff2 inset;
    }
  }

  .nav-of-options-of-the-modal {
    width: 100%;
    height: 24px;
    display: flex;
    padding: 3px;
    gap: 6px;

    .am-button-nav-modal {
      width: 20%;
      height: 100%;
      margin: 0;
      border-radius: 4px;
      border: 0;
      display: flex;
      flex-wrap: wrap;
      place-content: center;
      background-color: #e9e9e9;

      &.button-nav-selected {
        background-color: #333;

        svg {
          color: #fff;
        }
      }

      svg {
        width: 100%;
        height: 90%;
        pointer-events: none;
      }
    }
  }

  .container-modal {
    display: flex;
    flex-direction: column;
    margin-top: 0.5rem;
    min-height: 90px;
    height: 100%;
    max-height: 300px;
    padding-bottom: 0.9rem;
    scroll-behavior: smooth;
    scrollbar-gutter: both-edges;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: white transparent;
    overscroll-behavior: contain;

    @media (width <= 1111px) and (orientation: landscape) {
      max-height: 150px;
    }

    .fila {
      display: flex;
      column-gap: 0.2rem;
      padding: 0.5rem;

      input {
        accent-color: lime;
      }
    }

    label {
      color: white;
      font-size: 0.8rem;
      background-color: transparent;
      width: 100%;
      align-content: center;
    }

    abbr {
      font-size: 0.8rem;
    }
  }

  &::backdrop {
    background-image: linear-gradient(to top, #2228 20%, #4448 40%);
  }

  input[type='checkbox'] {
    margin-right: 0.5rem;
  }

  .container-add-playlist {
    --validate-color: #00ff7f;
    --invalid-color: #f00f;
    position: relative;
    width: 100%;
    height: 100%;
    left: 0;
    bottom: 0;
    color: #fff;
    display: flex;
    align-items: center;
    padding: 12px 18px;
    border-top: 2px solid #fff2;
    transition: background-color 0.3s ease, padding 0.3s linear;
    z-index: 1000;

    &::after {
      content: '';
      display: block;
      position: absolute;
      opacity: 0;
      left: -50%;
      transform-origin: left;
      transform: scaleX(0);
      transition: transform 0.5s;
    }

    &.mode-active {
      h3 {
        pointer-events: none;
        opacity: 0;
        display: none;
      }

      .container-inputs {
        display: flex;
        opacity: 1;
      }
    }

    h3 {
      z-index: 99999;
      font-family: Arial, Helvetica, sans-serif;
      pointer-events: none;
      transform: translateY(5px);
      align-content: center;
      text-transform: capitalize;
      font-size: 0.9rem;
      opacity: 1;
      visibility: visible;
      transition: opacity 0.7s ease;

      &::before {
        content: '+';
        font-size: 24px;
        margin-right: 8px;
        vertical-align: -3px;
      }
    }

    .container-inputs {
      opacity: 0;
      display: none;
      z-index: 99999;
      width: 100%;
      position: relative;
      padding-bottom: 10px;
      transition: opacity 0.5s ease, display 0.5s ease allow-discrete;
    }

    span {
      position: absolute;
      left: 80%;
      font-size: 0.7rem;
      color: #fff8;
      position: relative;
      font-style: italic;
      top: 26px;
    }

    input {
      border: none;
      outline: none;
      font-family: Arial, Helvetica, sans-serif;
      color: var(--validate-color);

      &[type='text'] {
        width: 88%;
        background-color: transparent;
        height: 20px;
        position: absolute;
        top: 0%;
        border-bottom: 2px solid #fff8;

        &::placeholder {
          color: #fff8;
        }

        &.valid {
          color: var(--validate-color);
          border-bottom: 2px solid var(--validate-color);
          caret-color: var(--validate-color);
        }

        &.invalid {
          color: var(--invalid-color);
          border-bottom: 2px solid var(--invalid-color);
          caret-color: var(--invalid-color);
        }
      }

      &[type='submit'] {
        width: 17%;
        background-color: transparent;
        aspect-ratio: 1;
        transform: scale(0.8);
        border-radius: 999px;
        box-shadow: inset 0 0 0 8px #0003;
        position: absolute;
        background-color: #0f08;
        right: -12px;
        top: -20%;
        display: flex;
        flex-wrap: wrap;
        place-content: center;
        line-height: 1rem;
        font-size: 1em;
        transition: box-shadow 0.4s ease;

        &:hover {
          box-shadow: inset 0 0 0 0 #0003;
        }
      }
    }
  }
}

.myHeader {
  display: block;
  height: 5.5rem;
  position: relative;
  z-index: 5;
  background-image: linear-gradient(
    45deg,
    var(--color1, #ee82ee),
    var(--color2, #87ceeb),
    var(--color3, #00ff7f)
  );
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  row-gap: 0.5rem;
  padding-block: 0.6rem;
  --black: #0003;

  img {
    inline-size: 2.5rem;
    block-size: 2.5rem;
    filter: drop-shadow(1px 0px 0px var(--black))
      drop-shadow(-1px 0px 0px var(--black)) drop-shadow(0px 1px 0px var(--black))
      drop-shadow(0px -1px 0px var(--black));
  }

  .namePlaylist {
    text-transform: uppercase;
    color: #fff;
    font-size: clamp(0.6rem, 0.4794rem + 0.2072vw, 0.69rem);
  }
}

.myNav {
  display: flex;
  width: 100%;
  height: 2rem;
  background-color: #222;
  flex-wrap: wrap;
  justify-content: center;
  top: -1px;
  align-items: center;
  position: sticky;
  z-index: 99999;
  box-shadow: 2px 2px 3px #2228;

  a,
  button {
    border: none;
    outline: none;
    min-height: 100%;
    margin-inline: 6px;
    background-color: transparent;
    align-content: center;
    padding: 0.2rem;

    @media (width >= 1000px) {
      &:hover,
      &.nav-btn-active {
        svg {
          fill: #fff;
        }
      }
    }

    @media (width <= 999px) {
      &.nav-btn-active,
      &.home:hover,
      &.recarga:hover {
        svg {
          fill: #fff;
        }
      }
    }

    * {
      pointer-events: none;
    }

    svg {
      transition: 0s;
      display: flex;
      flex-wrap: wrap;
      place-content: center;
      align-content: center;
    }
  }

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

  .nav-playbutton {
    svg {
      scale: 0.9;
    }
  }

  .nav-list-momentary {
    position: relative;

    .btn-tooltip {
      --duration: 7s;
      --easing: linear;
      --c-color-1: rgba(26, 163, 255, 0.7);
      /* Changed color */
      --c-color-2: #1aff1a;
      /* Changed color */
      --c-color-3: #ff1a75;
      /* Changed color */
      --c-color-4: rgba(26, 232, 255, 0.7);
      /* Changed color */
      --c-shadow: rgba(87, 223, 255, 0.5);
      /* Changed color */
      --c-shadow-inset-top: rgba(52, 223, 255, 0.9);
      /* Changed color */
      --c-shadow-inset-bottom: rgba(215, 250, 255, 0.8);
      /* Changed color */
      --c-radial-inner: #15d2ff;
      /* Changed color */
      --c-radial-outer: #72faff;
      /* Changed color */
      --c-color: #fff;
      appearance: none;
      outline: none;
      -webkit-tap-highlight-color: transparent;
      position: absolute;
      cursor: pointer;
      border: none;
      display: flex;
      border-radius: 24px;
      padding: 0;
      margin: 0;
      text-align: center;
      font-weight: 600;
      font-size: 16px;
      letter-spacing: 0.02em;
      line-height: 1.5;
      color: var(--c-color);
      background: radial-gradient(
        circle,
        var(--c-radial-inner),
        var(--c-radial-outer) 80%
      );
      transform: scale(0);
      z-index: 200;
      box-shadow: 0 0 14px var(--c-shadow);
      pointer-events: auto;
      top: 150%;
      right: -36px;
      min-width: 250px;
      transition: transform 0.3s ease-in-out;

      &.tooltip-active {
        transform: scale(0.8);
      }

      svg {
        width: 25px;
        height: 40px;
        zoom: 0.4;
        align-content: center;
        pointer-events: none;
        position: relative;
        transform: translateY(10px);
        z-index: 50;
      }

      .triangle {
        width: 40px;
        height: 20px;
        background-color: #6ef7ff;
        position: absolute;
        right: 10px;
        top: -12px;
        z-index: -1;
        clip-path: polygon(0% 100%, 50% 0, 100% 100%);
      }
    }

    .btn-tooltip:before {
      content: '';
      pointer-events: none;
      position: absolute;
      z-index: 3;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      border-radius: 24px;
      box-shadow: inset 0 3px 12px var(--c-shadow-inset-top),
        inset 0 -3px 4px var(--c-shadow-inset-bottom);
    }

    .btn-tooltip .wrapper {
      mask-image: radial-gradient(white, black);
      overflow: hidden;
      border-radius: 24px;
      padding: 8px 0;
      display: flex;
      text-align: center;
      justify-content: center;
      align-content: center;
      width: 100%;
    }

    .btn-tooltip .wrapper span {
      display: inline-block;
      position: relative;
      z-index: 200;
    }

    .btn-tooltip .wrapper .circle {
      position: absolute;
      left: 0;
      top: 0;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      filter: blur(var(--blur, 8px));
      background: var(--background, transparent);
      transform: translate(var(--x, 0), var(--y, 0)) translateZ(0);
      animation: var(--animation, none) var(--duration) alternate var(--easing)
        infinite;
    }

    .btn-tooltip .wrapper .circle.circle-1,
    .btn-tooltip .wrapper .circle.circle-9,
    .btn-tooltip .wrapper .circle.circle-10 {
      --background: var(--c-color-4);
    }

    .btn-tooltip .wrapper .circle.circle-3,
    .btn-tooltip .wrapper .circle.circle-4 {
      --background: var(--c-color-2);
      --blur: 14px;
    }

    .btn-tooltip .wrapper .circle.circle-5,
    .btn-tooltip .wrapper .circle.circle-6 {
      --background: var(--c-color-3);
      --blur: 16px;
    }

    .btn-tooltip .wrapper .circle.circle-2,
    .btn-tooltip .wrapper .circle.circle-7,
    .btn-tooltip .wrapper .circle.circle-8,
    .btn-tooltip .wrapper .circle.circle-11,
    .btn-tooltip .wrapper .circle.circle-12 {
      --background: var(--c-color-1);
      --blur: 12px;
    }

    .btn-tooltip .wrapper .circle.circle-1 {
      --x: 50px;
      --y: -40px;
      --animation: circle-1;
    }

    .btn-tooltip .wrapper .circle.circle-2 {
      --x: 180px;
      --y: 8px;
      --animation: circle-2;
    }

    .btn-tooltip .wrapper .circle.circle-3 {
      --x: 200px;
      --y: -12px;
      --animation: circle-3;
    }

    .btn-tooltip .wrapper .circle.circle-4 {
      --x: 80px;
      --y: -12px;
      --animation: circle-4;
    }

    .btn-tooltip .wrapper .circle.circle-5 {
      --x: 12px;
      --y: -4px;
      --animation: circle-5;
    }

    .btn-tooltip .wrapper .circle.circle-6 {
      --x: 120px;
      --y: 16px;
      --animation: circle-6;
    }

    .btn-tooltip .wrapper .circle.circle-7 {
      --x: 180px;
      --y: 28px;
      --animation: circle-7;
    }

    .btn-tooltip .wrapper .circle.circle-8 {
      --x: 200px;
      --y: -4px;
      --animation: circle-8;
    }

    .btn-tooltip .wrapper .circle.circle-9 {
      --x: 100px;
      --y: -12px;
      --animation: circle-9;
    }

    .btn-tooltip .wrapper .circle.circle-10 {
      --x: 150px;
      --y: 16px;
      --animation: circle-10;
    }

    .btn-tooltip .wrapper .circle.circle-11 {
      --x: 200px;
      --y: 4px;
      --animation: circle-11;
    }

    .btn-tooltip .wrapper .circle.circle-12 {
      --blur: 190px;
      --x: 52px;
      --y: 4px;
      --animation: circle-12;
    }
  }

  svg {
    fill: #999;
    width: 18px;
    height: 18px;
    transition: 0.3s;
  }

  .nav-arrow-down {
    display: none;
  }

  @media (width <=1080px) {
    .nav-arrow-down {
      display: block;
    }
  }
}

.background-container {
  position: fixed;
  inset: 0;
  z-index: -1;

  .star-1 {
    width: var(--size);
    height: var(--size);
    background-color: #fff;
    border-radius: 50%;
    box-shadow: var(--shadow-layer);
    position: absolute;
    z-index: -1;
    animation: risingStars var(--duration) linear infinite;
  }
}

@keyframes moveLuz {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

main {
  width: 100%;
  max-width: 1600px;
  min-height: max-content;
  padding: 1rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-template-rows: repeat(auto-fit, auto);
  align-content: start;
  gap: 1rem;

  .card {
    height: 150px;
    min-height: max-content;
    height: auto;
    display: flex;
    border-radius: 1rem;
    color: var(--color3, #00ff7f);
    animation: boxShadowMove 5s alternate ease infinite;

    .img {
      width: 90%;
      height: 90%;
      border-radius: 16px;
      background-position: center;
      background-size: cover;
      aspect-ratio: 1;
      background-image: var(--image-bg);
      position: relative;
      overflow: hidden;
      box-shadow: 0 0 10px 0 #0005, inset 0 0 20px 5px #0003;

      .input-range {
        width: 100%;
        position: absolute;
        left: 50%;
        transform: translateX(-50%) scale(0.7);
        bottom: 3px;
        accent-color: chartreuse;
        display: none;
      }

      &:hover {
        &::after {
          animation: moveLuz 0.5s linear forwards;
        }
      }

      &::after {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        left: -100%;
        top: 0;
        background: linear-gradient(90deg, transparent, #fff2, transparent);
      }
    }

    .card-left {
      width: 55%;
      display: flex;
      flex-wrap: wrap;
      place-content: center;
    }

    .card-right {
      width: 45%;
      overflow: hidden;
      border-radius: 1rem;
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
      display: flex;
      flex-direction: column;

      .card-right-top {
        font-size: clamp(0.5208rem, 0.4794rem + 0.2072vw, 0.64rem);
        height: 50%;
        margin-top: 0.7rem;
        margin-inline: auto;
        margin-bottom: 0.5rem;
        max-width: 90%;
        text-align: center;
        text-wrap: balance;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        overflow-wrap: anywhere;

        @media (width <= 1400px) {
          font-size: clamp(0.6508rem, 0.4794rem + 0.2072vw, 0.54rem);
        }
      }

      .card-right-down {
        height: 50%;
        display: flex;
        justify-content: center;
        align-items: end;
        margin-bottom: 0.7rem;

        .card-right-buttons {
          display: grid;
          margin-inline: auto;
          grid-template-columns: repeat(3, auto);
          justify-content: center;
          gap: 0.7rem;

          button {
            background-color: black;
            width: 1.4rem;
            height: 1.4rem;
            border-radius: 50%;
            align-content: center;
            outline: none;
            border: none;
            transition: background-color 0.3s linear;
            pointer-events: auto;

            * {
              pointer-events: none !important;
            }

            &.card-btn-active {
              background-color: #fff;

              svg {
                filter: invert(1);
              }
            }

            &.blocked {
              pointer-events: none;
            }

            svg {
              all: initial;
              display: block;
              margin-inline: auto;
              fill: #fff;
              width: 0.8rem;
              height: 0.8rem;
              transition: 0.3s ease filter;
            }
          }

          @media (hover: hover) {
            button {
              &:hover,
              &.card-btn-active {
                background-color: #fff;

                svg {
                  filter: invert(1);
                }
              }
            }
          }

          .card-playbutton,
          .card-downloadbutton {
            svg {
              scale: 0.8;
            }
          }

          .card-downloadbutton {
            pointer-events: none;
            -webkit-tap-highlight-color: transparent;

            a {
              display: block;
              width: 100%;
              height: 100%;
              background-color: transparent;
              border-radius: inherit;
              align-content: center;
            }

            a.pointerEventsActivo {
              pointer-events: auto !important;
            }
          }

          .card-downloadbutton,
          .card-playlistbutton {
            &.card-btn-active,
            &:hover {
              background-color: #fff;

              svg {
                filter: invert(1);
              }
            }
          }

          .card-playlistbutton {
            &.buttonConPointerEvents {
              pointer-events: auto !important;
            }
          }

          .playlistbutton {
            svg {
              scale: 1.2;
            }
          }
        }
      }
    }
  }

  .card:nth-child(even) {
    color: var(--color1, #ee82ee);
    animation: boxShadowMove 5s alternate-reverse ease infinite;
  }

  .card.targeado:target {
    color: #fff !important;
    scroll-margin-top: 3rem;
  }
}

@keyframes boxShadowMove {
  0% {
    box-shadow: 0 0 10px currentColor inset;
  }

  100% {
    box-shadow: 0 0 300px currentColor inset;
  }
}

@keyframes recorrer {
  0% {
    transform: translate(0, 0);
  }

  50% {
    transform: translate(-90%, 0);
  }

  100% {
    transform: translate(15%, 0);
  }
}

@keyframes risingStars {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-100vh);
  }
}

@keyframes change {
  from {
    scale: 0;
    translate: 50px;
  }

  to {
    scale: 1;
    translate: 0;
  }
}

@media (width <= 546px) {
  main {
    .card {
      transition: transform 0.3s ease, scale 0.3s ease;

      .card-right {
        .card-right-top {
          font-size: clamp(0.75rem, 0.6538rem + 0.44vw, 1.0938rem);
        }

        .card-right-down {
          .card-right-buttons {
            .card-infinitybutton {
              &:hover {
                background-color: black;

                svg {
                  filter: invert(0);
                }
              }

              &.card-btn-active {
                background-color: #fff;

                svg {
                  filter: invert(1);
                }
              }
            }
          }
        }
      }
    }

    .card:nth-child(even) {
      animation: boxShadowMove 5s ease alternate infinite,
        change auto linear forwards;
      animation-timeline: auto, view();
      animation-composition: add;
      animation-range: cover -50% cover 5%;
    }

    .card:nth-child(odd) {
      animation: boxShadowMove 5s ease alternate-reverse infinite,
        change auto linear forwards;
      animation-timeline: auto, view();
      animation-composition: add;
      animation-range: cover -50% cover 5%;
    }

    .card:nth-child(even).stopped-animation {
      animation: boxShadowMove 5s ease alternate infinite;
    }

    .card:nth-child(odd).stopped-animation {
      animation: boxShadowMove 5s ease alternate-reverse infinite;
    }

    .card:nth-child(4n + 1) {
      color: var(--color1, #ee82ee);
    }
    .card:nth-child(4n + 2) {
      color: var(--color2, #00ff7f);
    }
    .card:nth-child(4n + 3) {
      color: var(--color3, #0099ff);
    }
    .card:nth-child(4n + 4) {
      color: var(--color4, #ff0000);
    }
  }
}

/* 2 columnas */
@media (548px <= width < 824px) {
  main {
    .card:nth-child(2),
    .card:nth-child(3),
    .card:nth-child(6),
    .card:nth-child(7),
    .card:nth-child(10),
    .card:nth-child(11),
    .card:nth-child(14),
    .card:nth-child(15),
    .card:nth-child(18),
    .card:nth-child(19) {
      color: var(--color1, #ee82ee);
      animation: boxShadowMove 5s ease alternate infinite;
    }

    .card:nth-child(1),
    .card:nth-child(4),
    .card:nth-child(5),
    .card:nth-child(8),
    .card:nth-child(9),
    .card:nth-child(12),
    .card:nth-child(13),
    .card:nth-child(16),
    .card:nth-child(17),
    .card:nth-child(20) {
      color: var(--color3, #00ff7f);
      animation: boxShadowMove 5s ease alternate-reverse infinite;
    }
  }
}

@media (1080px <=width < 1346px) {
  main {
    .card:nth-child(2),
    .card:nth-child(4),
    .card:nth-child(5),
    .card:nth-child(7),
    .card:nth-child(10),
    .card:nth-child(12),
    .card:nth-child(13),
    .card:nth-child(15),
    .card:nth-child(18),
    .card:nth-child(20) {
      color: var(--color1, #ee82ee);
      animation: boxShadowMove 5s ease alternate infinite;
    }

    .card:nth-child(1),
    .card:nth-child(3),
    .card:nth-child(6),
    .card:nth-child(8),
    .card:nth-child(9),
    .card:nth-child(11),
    .card:nth-child(14),
    .card:nth-child(16),
    .card:nth-child(17),
    .card:nth-child(19) {
      color: var(--color3, #00ff7f);
      animation: boxShadowMove 5s ease alternate-reverse infinite;
    }
  }
}
/* ===========================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%);
  }
}

/* ===========================TOOLTIP========================= */
@keyframes circle-1 {
  33% {
    transform: translate(0px, 16px) translateZ(0);
  }

  66% {
    transform: translate(12px, 64px) translateZ(0);
  }
}

@keyframes circle-2 {
  33% {
    transform: translate(80px, -10px) translateZ(0);
  }

  66% {
    transform: translate(72px, -48px) translateZ(0);
  }
}

@keyframes circle-3 {
  33% {
    transform: translate(20px, 12px) translateZ(0);
  }

  66% {
    transform: translate(12px, 4px) translateZ(0);
  }
}

@keyframes circle-4 {
  33% {
    transform: translate(76px, -12px) translateZ(0);
  }

  66% {
    transform: translate(112px, -8px) translateZ(0);
  }
}

@keyframes circle-5 {
  33% {
    transform: translate(84px, 28px) translateZ(0);
  }

  66% {
    transform: translate(40px, -32px) translateZ(0);
  }
}

@keyframes circle-6 {
  33% {
    transform: translate(28px, -16px) translateZ(0);
  }

  66% {
    transform: translate(76px, -56px) translateZ(0);
  }
}

@keyframes circle-7 {
  33% {
    transform: translate(8px, 28px) translateZ(0);
  }

  66% {
    transform: translate(20px, -60px) translateZ(0);
  }
}

@keyframes circle-8 {
  33% {
    transform: translate(32px, -4px) translateZ(0);
  }

  66% {
    transform: translate(56px, -20px) translateZ(0);
  }
}

@keyframes circle-9 {
  33% {
    transform: translate(20px, -12px) translateZ(0);
  }

  66% {
    transform: translate(80px, -8px) translateZ(0);
  }
}

@keyframes circle-10 {
  33% {
    transform: translate(68px, 20px) translateZ(0);
  }

  66% {
    transform: translate(100px, 28px) translateZ(0);
  }
}

@keyframes circle-11 {
  33% {
    transform: translate(4px, 4px) translateZ(0);
  }

  66% {
    transform: translate(68px, 20px) translateZ(0);
  }
}

@keyframes circle-12 {
  33% {
    transform: translate(56px, 0px) translateZ(0);
  }

  66% {
    transform: translate(60px, -32px) translateZ(0);
  }
}
