@keyframes rise {
  0% {
    transform:scale(1,1.1);
  }
  
  30% {
    transform:scale(.9,1.2);
  }
  
  60% {
    transform:scale(1.1,1);
  }
  
  90% {
    transform:scale(.9,1.1);
  }
  
  100% {
    transform:scale(1,1);
  }
}

html {
  color:#fff;
  filter:contrast(4);
  overflow:hidden;
  background:black;
  height:100%;
}

body {
  box-shadow:inset 0 0 2.5em .5em black, inset 0 0 3em .5em orange, inset 0 0 2em .25em yellow;
  height:100%;
}

div {
  
  position:absolute;
  width:4em;
  height:4em;
  margin-left:-2em;
  transition:all 25s ease-out;
  
  &::after {
    display:block;
    background:white;
    width:100%;
    height:100%;
    border-radius:50%;
    box-shadow:0 0 2.5em 1em white, 0 0 4em .5em orange, 0 0 2em .25em yellow;
    animation-name:rise;
    animation-duration:11s;
    animation-direction:alternate;
    animation-iteration-count:infinite;
    animation-timing-function:ease-in-out;
    content:'';
  }
  
}