*,
*::after,
*::before {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  flex-wrap: wrap;
  place-content: center;
  min-height: 100dvh;
  background-color: #f3f3f3;
  background-image: url('assets/n1.png');
  background-size: 300px;

  .container-circle {
    width: 120px;
    height: 120px;
    background-color: #000;
    background-color: transparent;
    border-radius: 50%;
    position: relative;
    overflow: hidden;

    &:hover {
      animation: girar 2s ease alternate infinite;
    }

    .circle {
      border-radius: inherit;
      position: absolute;
      width: 100%;
      height: 100%;
      left: 50%;
      transform-origin: left;
      background-color: var(--c);

      &.yellow {
        transform: rotate(0deg);
        z-index: 2;
      }

      &.red {
        transform: rotate(60deg);
        z-index: 3;
      }

      &.orange {
        transform: rotate(120deg);
        z-index: 4;
      }

      &.green {
        transform: rotate(180deg);
        z-index: 5;
      }

      &.blue {
        transform: rotate(240deg);
        z-index: 6;


      }

      &.purple {
        transform: rotate(300deg);
        z-index: 7;
        overflow: hidden;

        &::before {
          content: '';
          position: absolute;
          width: 100%;
          height: 100%;
          left: -32px;
          top: 53px;
          background-color: #FFCC00;
          z-index: -1;
          border-radius: inherit;
        }

        &::after {
          content: '';
          position: absolute;
          width: 100%;
          height: 100%;
          left: -89px;
          top: 53px;
          background-color: #FF3B30;
          z-index: -1;
          border-radius: inherit;
        }
      }
    }
  }
}

@keyframes girar {
  0% {
    transform: rotate(-720deg) scale(1);

  }

  100% {
    transform: rotate(720deg) scale(1.5);
  }
}