:root {
    --cprimary: rgba(2, 254, 255, 1);
    --cshadow: rgba(2,254,255,0.8);
    --ctransparent: rgba(2,254,255,0.2);
    --colour1: rgba(2, 255, 255, 0.15);
  --colour2: rgba(2, 255, 255, 0.2);
  --colour3: rgba(2, 255, 255, 0.3);
  --colour4: rgba(2, 255, 255, 0.4);
  --colour5: rgba(2, 255, 255, 0.5);
  --colour6: rgba(2, 255, 255, 0.6);
  --colour7: rgba(2, 255, 255, 0.7);
  --colour8: rgba(2, 255, 255, 0.8);
  --colour9: rgba(2, 255, 255, 0.9);

  --size8: 18px;
  --size7: 16px;
  --size6: 14px;
  --size5: 12px;
  --size4: 10px;
  --size3_5: 8px;
  --size3: 6px;
  --size2: 5px;
  --size1: 4px;
  --size0_3: 3px;
  --size0_2: 2px;
  --size0_1: 1px;
}

.jarvis-element {
  transform: scale(0.3); /* Уменьшаем размер */
  margin-left: -45px;
  display: inline-block;
}

.core {
  background: #cedce0;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 10px var(--colour1) solid;
  animation: flicker 0.2s infinite;
  margin-left: auto;
  margin-right: auto;
  margin-top: 40px;
}

.core2 {
  background: #cedce0;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 10px var(--colour1) solid;
  animation: flicker2 0.2s infinite;
  margin-left: auto;
  margin-right: auto;
  margin-top: 40px;
}

.big_core {
  background: #cedce0;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 10px var(--colour1) solid;
  animation: big_flicker 0.2s infinite;
}

.c_ease {
  animation: colour_ease 3s infinite ease-in-out;
}

.counterspin5 { animation: rotate_anti 5s linear infinite; }
.counterspin4 { animation: rotate_anti 4s linear infinite; }

.semi_arc {
  width: 100px;
  height: 100px;
  border: var(--size3) solid var(--cprimary);
  background: var(--ctransparent);
  border-radius: 50%;
  transform: rotateZ(0deg);
  transition: box-shadow 3s ease;
  text-align: center;
  line-height: 100px;
}

.semi_arc:hover {
  box-shadow: 0px 0px 30px var(--cshadow);
  transition: 0.3s;
}

.semi_arc_2 {
  content: "";
  position: absolute;
  width: 94%;
  height: 94%;
  left: 3%;
  top: 3%;
  border: var(--size2) solid var(--cprimary);
  border-radius: 50%;
  box-sizing: border-box;
  animation: rotate 4s linear infinite;
  text-align: center;
  line-height: 129px;
}

.semi_arc_2:after {
  content: "";
  position: absolute;
  width: 94%;
  height: 94%;
  left: 3%;
  top: 3%;
  border: var(--size1) solid var(--cprimary);
  border-radius: 50%;
box-sizing: border-box;
  animation: rotate_anti 2s linear infinite;
}

.semi_arc_3 {
  content: "";
  position: absolute;
  width: 94%;
  height: 94%;
  left: 3%;
  top: 3%;
  border: var(--size2) solid var(--cprimary);
  border-radius: 50%;
  box-sizing: border-box;
  animation: rotate 4s linear infinite;
  text-align: center;
  line-height: 129px;
}

.arc {
  width: 100px;
  height: 100px;
  border: var(--size3) solid var(--cprimary);
  background: var(--ctransparent);
  border-radius: 50%;
   transform: rotateY(-30deg) translateZ(-200px) rotateZ(0deg);
  transition: box-shadow 3s ease;
  text-align: center;
  line-height: 100px;
}

.arc:hover {
  box-shadow: 0px 0px 30px var(--cshadow);
  transition: 0.3s;
}

.arc:after {
  content: "";
  position: absolute;
  width: 94%;
  height: 94%;
  left: 3%;
  top: 3%;
  border: var(--size1) solid var(--cprimary);
  border-radius: 50%;
  box-sizing: border-box;
  animation: rotate 4s linear infinite;
}

.e1:after {
  border-color: var(--colour6);
  border-left: var(--size2) solid transparent;
  border-right: var(--size2) solid transparent;
}

.e2:after {
  border-color: var(--colour6);
  border-left: var(--size2) solid transparent;
  border-right: var(--size2) solid transparent;
  border-bottom: var(--size2) solid transparent;
}

.e3 {
  border-left: var(--size3) solid transparent;
  border-right: var(--size3) solid transparent;
  animation: rotate 5s linear infinite;
}

.e3:after {
  border-color: var(--colour6);
  border-top: var(--size2) solid transparent;
  border-bottom: var(--size2) solid transparent;
}

.e4 {
  width: 150px;
  height: 150px;
}

.e4_1 {
  border-color: var(--colour3);
  border-left: var(--size2) solid transparent;
  border-right: var(--size2) solid transparent;
}

.e4_1:after {
  border-color: var(--colour6);
  border-top: var(--size1) solid transparent;
  border-bottom: var(--size1) solid transparent;
}

.e5 {
  width: 200px;
  height: 200px;
}

.e5_1 {
  color: var(--colour1);
  border: var(--size0_2) solid;
  border-left: var(--size0_2) solid transparent;
  animation: rotate 5s linear infinite;
}

.e5_2 {
  color: var(--colour7);
  border: var(--size1) solid;
  border-left: var(--size1) solid transparent;
  border-right: var(--size1) solid transparent;
  animation: rotate_anti 4s linear infinite;
}

.e5_3 {
  color: var(--colour5);
  border: var(--size0_2) solid;
  border-left: var(--size0_2) solid transparent;
  border-right: var(--size0_2) solid transparent;
  animation: rotate 3s linear infinite;
}

.e5_4 {
  color: var(--colour1);
  border: var(--size1) solid;
  border-left: var(--size1) solid transparent;
  border-right: var(--size1) solid transparent;
  border-bottom: var(--size1) solid transparent;
  animation: rotate_anti 2s linear infinite;
}

.e6 {
  border-color: transparent;
  background: rgba(255,255,255,0);
  width: 200px;
  height: 200px;
}

@keyframes rotate {
  0% { transform: rotateZ(0deg) }
100% { transform: rotateZ(360deg) }
}

@keyframes rotate_anti {
  0% { transform: rotateZ(360deg) }
100% { transform: rotateZ(0deg) }
}

@keyframes colour_ease {
  0% { border-color: rgba(2,254,255,1); }
50% { border-color: rgba(2,254,255,0.5); }
100% { border-color: rgba(2,254,255,1); }
}

@keyframes flicker {
  0% {
    box-shadow: 0px 0px 16px 8px rgba(150, 255, 255, 0.5),
    inset 0px 1px 4px 2px rgba(21, 211, 233, 0.3);
  }
40% {
  box-shadow: 0px 0px 16px 8px rgba(150, 255, 255, 0.5),
  inset 0px 1px 4px 2px rgba(21, 211, 233, 0.3);
}
50% {
  box-shadow: 0px 0px 16px 6px rgba(150, 255, 255, 0.5),
  inset 0px 1px 100px 2px rgba(21, 211, 233, 0.3);
}
60% {
  box-shadow: 0px 0px 16px 8px rgba(150, 255, 255, 0.5),
  inset 0px 1px 4px 2px rgba(21, 211, 233, 0.3);
}
100% {
  box-shadow: 0px 0px 16px 8px rgba(150, 255, 255, 0.5),
  inset 0px 1px 4px 2px rgba(21, 211, 233, 0.3);
}
}

@keyframes flicker2 {
  0% {
    box-shadow: 0px 0px 60px 25px rgba(150, 255, 255, 0.5),
    inset 0px 1px 4px 2px rgba(21, 211, 233, 0.3);
  }
40% {
  box-shadow: 0px 0px 60px 25px rgba(150, 255, 255, 0.5),
  inset 0px 1px 4px 2px rgba(21, 211, 233, 0.3);
}
50% {
  box-shadow: 0px 0px 50px 17px rgba(150, 255, 255, 0.5),
  inset 0px 1px 100px 2px rgba(21, 211, 233, 0.3);
}
60% {
  box-shadow: 0px 0px 60px 25px rgba(150, 255, 255, 0.5),
  inset 0px 1px 4px 2px rgba(21, 211, 233, 0.3);
}
100% {
  box-shadow: 0px 0px 60px 25px rgba(150, 255, 255, 0.5),
  inset 0px 1px 4px 2px rgba(21, 211, 233, 0.3);
}
}

@keyframes big_flicker {
  0% {
    box-shadow: 0px 0px 40px 20px rgba(150, 255, 255, 0.5),
    inset 0px 1px 30px 15px rgba(21, 211, 233, 0.3);
  }
40% {
  box-shadow: 0px 0px 40px 20px rgba(150, 255, 255, 0.5),
  inset 0px 1px 30px 15px rgba(21, 211, 233, 0.3);
}
50% {
  box-shadow: 0px 0px 35px 17px rgba(150, 255, 255, 0.5),
  inset 0px 1px 50px 40px rgba(21, 211, 233, 0.3);
}
60% {
  box-shadow: 0px 0px 40px 20px rgba(150, 255, 255, 0.5),
  inset 0px 1px 30px 15px rgba(21, 211, 233, 0.3);
}
100% {
  box-shadow: 0px 0px 40px 20px rgba(150, 255, 255, 0.5),
  inset 0px 1px 30px 15px rgba(21, 211, 233, 0.3);
}
}