@import url(https://weloveiconfonts.com/api/?family=entypo);

.atom {
  position: absolute;
  //top: 50%;
  left: 50%;
  margin-top: -100px;
  margin-left: -100px;
  width: 200px;
  height: 200px;
  display: block;
}

.nucleus {
  position: relative;
  top: 90px;
  left: 90px;
  margin-top: 0px;
  margin-left: 0px;
  width: 20px;
  height: 20px;
}

.neutron {
  position: relative;
    width: 15px;
	height: 15px;
  top: -10px;
  left: 25px;
  background: #fff;
	border-radius: 100%;
  animation: ne 1.5s linear infinite;
}

.elipsis {
  position: absolute;
  top: 0px;
  left: 65px;
	width: 65px;
  height: 200px;
  border: 2px solid;
  border-radius: 80px / 240px;
  color: rgba(250,250,250,0.3);
}
.e2 {
  -moz-transform: rotate(125deg);
  -wekbit-transform: rotate(125deg);
  transform: rotate(125deg);
}
.e3 {
  -moz-transform: rotate(-125deg);
  -weknit-transform: rotate(-125deg);
  transform: rotate(-125deg);
}

.n1 {  
  -webkit-animation-duration: 5s; /* Chrome, Safari, Opera */
  animation-duration: 1.5s;
}

.n2 {
  -webkit-animation-duration: 5s; /* Chrome, Safari, Opera */
  animation-duration: 1.5s;
}

.n3{  
  -webkit-animation-duration: 5s; /* Chrome, Safari, Opera */
    animation-duration: 1.5s;
}

@keyframes ne {
  0% { top: -10px; left:  25px; }
  5% { top: -5.14px; left:  35px; }
  10% { top: 11.17px; left:  45px; }
  15% { top: 26.10px; left:  50px; }
  20% { top: 51.53px; left:  55px; }
  25% { top: 90px; left:  57.5px; width: 20px; height: 20px;}
  30% { top: 128.46px; left:  55px; }
  35% { top: 153.89px; left:  50px; }
  40% { top: 168.82px; left:  45px; }
  45% { top: 185.14px; left:  35px; }
  50% { top: 190px; left:  25px; }
  55% { top: 185.14px; left:  15px; }
  60% { top: 168.82px; left:  5px; }
  65% { top: 153.89px; left:  0px; }
  70% { top: 128.46px; left:  -5px; }
  75% { top: 90px; left:  -7.5px; width: 7.5px; height: 7.5px;}
  80% { top: 51.53px; left:  -5px; }
  85% { top: 26.1px; left:  0px; }
  90% { top: 11.17px; left:  5px; }
  95% { top: -5.14px; left:  15px; }
  100% { top: -10px; left:  25px; }
}

.entypo-cog {
  position: relative;
  display: block;
  padding: 0;
  margin: 0;
  font-size: 20px;
  font-family: "entypo";
  color: white;
}

.nucleus{
  animation: rotate1 6s linear infinite;
}
.c1 {
  animation: rotate1 2s linear infinite;
  color: rgba(200,200,200,0.8);
}
.c2 {
  top: -3.5px;
  transform: rotate(-22.5deg);
  animation: rotate2 2s linear infinite;
}
.c3 {
  top: -53px;
  left: -16px;
  transform: rotate(-10deg);
  animation: rotate3 2s linear infinite;
  --color: blue;
}
.c4 {
  top: -75px;
  left: 16px;
  transform: rotate(-30deg);
  animation: rotate4 2s linear infinite;
  --color: green;
}

@keyframes rotate1 {
  to { transform: rotate(360deg); }
}
@keyframes rotate2 {
  from { transform: rotate(-22.5deg); }
  to { transform: rotate(-382.5deg); }
}
@keyframes rotate3 {
  from { transform: rotate(-10deg); }
  to { transform: rotate(-370deg); }
}
@keyframes rotate4 {
  from { transform: rotate(-30deg); }
  to { transform: rotate(-390deg); }
}