usergalaxy/stylesheets/style.scss

@import "trigonometry";

$circles: 4;
$points: 12;
$angle: pi() / 5;

.imbb_container {
  font-family: 'Gotham SSm A','Gotham SSm B',Helvetica Neue,Helvetica,Arial,sans-serif;
  height: inherit;
  margin: 0;
  padding: 0;
  position: relative;
}

@for $i from 0 through $circles {
  .circle-#{$i} {
    $width: 80% - $i*10%;
    width: $width;
    top: ($i - 1)*5%;
    left: ($i - 1)*5%;
    position: absolute;
    z-index: $i;
    background: darken(#fff, $i*5%);
  }
}

@for $i from 1 through $points {
  #human-#{$i},
  .small-#{$i} {
    @include on-circle($i, $points);
  }
}

.humans {
  &:hover .texts {
    display: block;
  }
  .texts {
    height: auto;
    background: #fff;
    width: 300%;
    top: 0;
    left: 102%;
    position: absolute;
    color: #4d545d;
    border: none;
    display: none;
    border: 1px solid white;
    box-shadow: 5px 6px 5px rgba(51, 51, 51, 0.02);
    .name {
      display: block;
      text-transform: uppercase;
      color: #4164CC;
      font-weight: 900;
      margin-top: 3%;
    }
    z-index: 90;
  }
  position: absolute;
  width: 15%;
  box-shadow: none !important;
  img,
  .texts {
    animation: humanreverse 100s linear infinite;
  }
  img {
    border-radius: 50%;
    max-width: 100%;
    position: relative;
    border: 5px solid white;
    top: -30px;
    left: -30px;
    z-index: 90;
  }
}

.all {
  height: 650px;
  width: 100%;
  text-align: left;
  .avatars {
    display: block;
    animation: rotat 100s linear infinite;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    z-index: -1;
  }
}

@keyframes humanreverse {
  to {
    transform: rotate(-1turn);
  }
}

@keyframes rotat {
  to {
    transform: rotate(1turn);
  }
}

.circle-#{$circles} {
  &, .avatars {
    animation-play-state: paused;
  }
  img {
    margin: 15% 15%;
    max-width: 70%;
    max-height: 70%;
  }
}
.circles {
  border: 1px dashed;
  border-radius: 50%;
}

.all .avatars:hover {
  animation-play-state: paused;
  .humans img,
  .humans .texts{
    animation-play-state: paused;
  }
}

.small-circle {
  width: 2%;
  position: absolute;
  border: 3px solid;
  border-radius: 50%;
  z-index: 10;
}

@font-face{font-family:"Gotham SSm A";src:url(data:application/x-font-woff2;base64,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