* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.design-relative {
position: relative;
width: 100%;
height: 100%;
background-color: transparent;
}
#homeAnimate {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
display: grid;
transform: translate(0%, 0%);
overflow: hidden;
place-items: center;
}
#homeAnimate > div > img {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
display: block;
width: 4rem;
aspect-ratio: 1;
animation: rotirajUnapred 20s linear reverse infinite;
border: 4px solid white;
border-radius: 50%;
z-index: 999;
}
.parent1 {
width: 4rem;
aspect-ratio: 1;
background-color: transparent;
border-radius: 50%;
animation: rotirajUnapred 20s linear infinite;
position: relative;
}
.circle1 {
--size:5rem;
--offset:8rem;
width: var(--size);
aspect-ratio: 1;
border-radius: 50%;
position: absolute;
top: calc(var(--size) / 2);
left: calc(var(--size) / 2);
transform: translate(calc(cos(var(--degrees)) * var(--offset)), calc(sin(var(--degrees)) * var(--offset)));
}
.circle1 img {
position: absolute;
top: -3rem;
left: -3rem;
width: 5rem;
aspect-ratio: 1;
border-radius: 50%;
animation: rotirajUnapred 20s linear reverse infinite;
}
.circle1:nth-of-type(1) {
--degrees: 0 * 360deg / 8;
}
.circle1:nth-of-type(2) {
--degrees: 1 * 360deg / 8;
}
.circle1:nth-of-type(3) {
--degrees: 2 * 360deg / 8;
}
.circle1:nth-of-type(4) {
--degrees: 3 * 360deg / 8;
}
.circle1:nth-of-type(5) {
--degrees: 4 * 360deg / 8;
}
.circle1:nth-of-type(6) {
--degrees: 5 * 360deg / 8;
}
.circle1:nth-of-type(7) {
--degrees: 6 * 360deg / 8;
}
.circle1:nth-of-type(8) {
--degrees: 7 * 360deg / 8;
}
@keyframes rotirajUnapred {
  0% {
    transform: rotate(0deg);
  }
  10% {
    transform: rotate(36deg);
  }
  20% {
    transform: rotate(72deg);
  }
  30% {
    transform: rotate(108deg);
  }
  40% {
    transform: rotate(144deg);
  }
  50% {
    transform: rotate(180deg);
  }
  60% {
    transform: rotate(216deg);
  }
  70% {
    transform: rotate(252deg);
  }
  80% {
    transform: rotate(288deg);
  }
  90% {
    transform: rotate(324deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@media screen and (min-width: 100px) {
  #homeAnimate {
    background: radial-gradient(circle, rgb(120, 120, 158) 0%, rgb(120, 120, 158) 100%);
  }
  #homeAnimate > div > img {
    width: 3.5rem;
    aspect-ratio: 1;
  }
  .parent1 {
    width: 3.5rem;
    aspect-ratio: 1;
  }
  .circle1 {
    --size:3.5rem;
    --offset:5rem;
    width: var(--size);
    aspect-ratio: 1;
    border-radius: 50%;
    position: absolute;
    top: calc(var(--size) / 2);
    left: calc(var(--size) / 2);
    transform: translate(calc(cos(var(--degrees)) * var(--offset)), calc(sin(var(--degrees)) * var(--offset)));
  }
  .circle1 img {
    position: absolute;
    top: -1.7rem;
    left: -1.7rem;
    width: 3.5rem;
    aspect-ratio: 1;
    border-radius: 50%;
    animation: rotirajUnapred 20s linear reverse infinite;
  }
}
@media screen and (max-height: 100px) {
  #homeAnimate {
    background: radial-gradient(circle, rgb(120, 120, 158) 0%, rgb(120, 120, 158) 100%);
  }
  #homeAnimate > div > img {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    display: block;
    width: 3rem;
    aspect-ratio: 1;
    animation: rotirajUnapred 20s linear reverse infinite;
    border: 4px solid white;
    border-radius: 50%;
    z-index: 999;
  }
  .parent1 {
    width: 3rem;
    aspect-ratio: 1;
    background-color: transparent;
    border-radius: 50%;
    animation: rotirajUnapred 20s linear infinite;
    position: relative;
  }
  .circle1 {
    --size:3rem;
    --offset:5rem;
    width: var(--size);
    aspect-ratio: 1;
    border-radius: 50%;
    position: absolute;
    top: calc(var(--size) / 2);
    left: calc(var(--size) / 2);
    transform: translate(calc(cos(var(--degrees)) * var(--offset)), calc(sin(var(--degrees)) * var(--offset)));
  }
  .circle1 img {
    position: absolute;
    top: -1.7rem;
    left: -1.7rem;
    width: 3rem;
    aspect-ratio: 1;
    border-radius: 50%;
    animation: rotirajUnapred 20s linear reverse infinite;
  }
}