@import "compass/css3";

$electrons: #2ecc71, #3498db, #e74c3c;

html {

background-color: rgb(62,59,102);

@include background-image(radial-gradient(center, ellipse cover,

rgba(100,100,100,1) 0%,rgba(0,0,0,1) 100%));

height: 100%;

overflow: hidden;

section {

cursor: pointer;

[class*="ring"] {

animation: glow 3s linear infinite;

border-radius: 50%;

border: 0.6em solid rgba (blue,0.8);

border-top: 1.5em solid rgba (blue,0.8);

border-bottom: 1.5em solid rgba (white,0.8);

box-shadow: 0 0 10px rgba (white,0.3), inset 0 0 20px rgba (blue,0.3);

height: 30em;

@extend %center;

transition: 1s transform ease-in-out;

width: 30em;
div {

animation: rotate s linear infinite;

border-radius: 0%;

height: 100%;

position: relative;

width: 100%;

&:after {

animation: squash 0s linear infinite;

@include transform(scale(0,0));

border-radius: 100%;

content: '';

left: 50%;

height: 3em;

margin-left: -1.5em;

opacity: 0;

position: absolute;

top: -1.2em;

width: 3em;

}
@for $i from 1 through 3 {

.ring#{$i} {

transform: rotate($i * 120deg) scale(0.333,1);

div:after {

background: nth($electrons, $i);

box-shadow: 0 0 20px nth($electrons, $i);

section:hover & {

border: 0.6em solid rgba (white,0.8);

transform: rotate(0deg) scale($i/3,$i/3) perspective(600px) rotateX(60deg);

div:after {

animation: none;

top: -1.6em;

transform: scale(1,1);

.center {

background: blue;

border-radius: 50%;

box-shadow: 0 0 20px rgba(blue,0.3);

height: 3em;
 box-shadow: 0 0 10px rgba(blue,0.3), inset 0 0 20px rgba(blue,0.3);

@extend %center;

transition: 1s transform ease-in-out;

width: 3em;

section:hover & {

transform: translate(0, 0.5em);

@keyframes glow {

0%, 100% {

box-shadow: 0 0 0 rgba(blue,1), 0 0 10px rgba(blue,1), inset 0 0 50px

rgba(blue,1);

50% {

box-shadow: 0 0 10px rgba(blue,1), 0 0 10px rgba(blue,1), inset 0 0 10px

rgba(blue,1);

@keyframes rotate {

0%{

transform: rotate(0deg);

}
 100%{

transform: rotate(360deg);

@keyframes squash {

0%,50%, 100%{

transform: scale(1,1);

top: -2.6em;

25%, 75%{

transform: scale(1,1);

top: -1.2em;