*, *:before, *:after {  box-sizing: border-box; }

// BG Gradient
$color01: #fe1318;
$color02: #fd08ab;
$outside: #fff;
$inside: #000;

html,
body{
  width: 100%;
  height: 100%; 
}

html {
  background: #131b2c;
  font-size: 100%;  
}

body{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 6em;
  height: 6em;
  border-radius: 1em;
  background: linear-gradient(135deg, $color01 0%, $color02 100%);
  box-shadow: 0 0.5em 1em 0 rgba(0,0,0,0.5);
  
  &:after,
  &:before{
    display: block;
    content: '';
    position: absolute;
  }
  
  &:before{
    height: 50%;
    border-radius: 1em;
    width: 0.3em;
    background: rgba(255,255,255,0.5);
    top: 0;
    left: 1em; 
    right: 0;
    bottom: 0;
    margin: auto;
    box-shadow:
    1em 0 0 rgba(255,255,255,0.5),
    -1em 0 0 rgba(255,255,255,0.5),
    -2em 0 0 rgba(255,255,255,0.5);
  }
  
  &:after{
    width: 0.75em;
    height: 0.75em;
    border-radius: 50%;
    overflow:visible;
    left: 1em;
    top: -4em;
    right: 0;
    bottom: 0;
    margin: auto;

    animation: move 5s ease-in-out infinite;
    //animation-fill-mode: forwards;

  }
  
}

@keyframes move {
  0% {
    
  box-shadow:
    // Far Right
    1em 0.8em 0 -0.15em $inside, 
    1em 0.8em 0 $outside,
    
    // Second From Right
    0em 3em 0 -0.15em $inside, 
    0em 3em 0 $outside,
    
    // Second From Left
    -1em 1.4em 0 -0.15em $inside,
    -1em 1.4em 0 $outside,
    
    // Far Left
    -2.05em 2.6em 0 -0.15em $inside, 
    -2.05em 2.6em 0 $outside;
	}
	50% {
    
	box-shadow:
    // Far Right
    1em 2.5em 0 -0.15em $inside, 
    1em 2.5em 0 $outside,
    
    // Second From Right
    0em 1em 0 -0.15em $inside, 
    0em 1em 0 $outside,
    
    // Second From Left
    -1em 2.0em 0 -0.15em $inside,
    -1em 2.0em 0 $outside,
    
    // Far Left
    -2.05em 1.7em 0 -0.15em $inside, 
    -2.05em 1.7em 0 $outside;
	}
  
  100% {
    
  box-shadow:
    // Far Right
    1em 0.8em 0 -0.15em $inside, 
    1em 0.8em 0 $outside,
    
    // Second From Right
    0em 3em 0 -0.15em $inside, 
    0em 3em 0 $outside,
    
    // Second From Left
    -1em 1.4em 0 -0.15em $inside,
    -1em 1.4em 0 $outside,
    
    // Far Left
    -2.05em 2.6em 0 -0.15em $inside, 
    -2.05em 2.6em 0 $outside;
	}
}