html, body {
  height: 100%;
}

.login-background {
  background: linear-gradient(212.38deg, rgba(242, 57, 127, 0.7) 0%, rgba(175, 70, 189, 0.71) 100%), url(https://static.seattletimes.com/wp-content/uploads/2019/01/web-typing-ergonomics-1020x680.jpg);
  overflow: hidden;
}

.atom-art {
  background: transparent;
  transform: scale(1.3, 1.3);
  overflow: hidden;
  width: 100%;
  height: 100%;
}
.atom-art > div {
  border-radius: 50%;
  border: 1px solid #fff;
  transform-style: preserve-3d;
  transform: rotateX(80deg) rotateY(20deg);
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -100px;
  margin-top: -100px;
}
.atom-art > div:first-of-type:after {
  content: "";
  position: absolute;
  height: 40px;
  width: 40px;
  background: #fff;
  border-radius: 50%;
  transform: rotateX(-80deg) rotateY(0);
  box-shadow: 0 0 25px #fff;
  -webkit-animation: nucleus_ 2s infinite linear;
          animation: nucleus_ 2s infinite linear;
  left: 50%;
  top: 50%;
  margin-top: -20px;
  margin-left: -20px;
}
.atom-art > div:nth-of-type(2) {
  transform: rotateX(-80deg) rotateY(20deg);
}
.atom-art > div:nth-of-type(2) > div,
.atom-art > div:nth-of-type(2) > div:after {
  -webkit-animation-delay: -0.5s;
          animation-delay: -0.5s;
}
.atom-art > div:nth-of-type(3) {
  transform: rotateX(-70deg) rotateY(60deg);
}
.atom-art > div:nth-of-type(3) > div,
.atom-art > div:nth-of-type(3) > div:after {
  -webkit-animation-delay: -1s;
          animation-delay: -1s;
}
.atom-art > div:nth-of-type(4) {
  transform: rotateX(70deg) rotateY(60deg);
}
.atom-art > div:nth-of-type(4) > div,
.atom-art > div:nth-of-type(4) > div:after {
  -webkit-animation-delay: -1.5s;
          animation-delay: -1.5s;
}
.atom-art > div > div {
  width: 200px;
  height: 200px;
  position: relative;
  transform-style: preserve-3d;
  -webkit-animation: trail_ 2s infinite linear;
          animation: trail_ 2s infinite linear;
}
.atom-art > div > div:after {
  content: "";
  position: absolute;
  top: -5px;
  box-shadow: 0 0 12px #fff;
  left: 50%;
  margin-left: -5px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #fff;
  -webkit-animation: particle_ 2s infinite linear;
          animation: particle_ 2s infinite linear;
}

@-webkit-keyframes trail_ {
  from {
    transform: rotateZ(0deg);
  }
  to {
    transform: rotateZ(360deg);
  }
}

@keyframes trail_ {
  from {
    transform: rotateZ(0deg);
  }
  to {
    transform: rotateZ(360deg);
  }
}
@-webkit-keyframes particle_ {
  from {
    transform: rotateX(90deg) rotateY(0deg);
  }
  to {
    transform: rotateX(90deg) rotateY(-360deg);
  }
}
@keyframes particle_ {
  from {
    transform: rotateX(90deg) rotateY(0deg);
  }
  to {
    transform: rotateX(90deg) rotateY(-360deg);
  }
}
@-webkit-keyframes nucleus_ {
  0%, 100% {
    box-shadow: 0 0 0 transparent;
  }
  50% {
    box-shadow: 0 0 25px #fff;
  }
}
@keyframes nucleus_ {
  0%, 100% {
    box-shadow: 0 0 0 transparent;
  }
  50% {
    box-shadow: 0 0 25px #fff;
  }
}/*# sourceMappingURL=atom_style.css.map */