.frame
  .center
    .ball
    - for i in (1..8)
      div class="blubb-#{ i }"
    - for i in (1..10)
      div class="sparkle-#{ i }"

// delete the following line if no text is used
// edit the line if you wanna use other fonts
@import url(https://fonts.googleapis.com/css?family=Open+Sans:700,300);

*{
  padding:0;
  margin:0;
  box-sizing: border-box;
}

body{
  background-color: cyan;
  filter: hue-rotate(90deg);
  transition:all .5s ease-in-out;
  &:hover {
  filter: hue-rotate((random(30)+deg))
  }
}

// use only the available space inside the 400x400 frame
.frame {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 400px;
  margin-top: -200px;
  margin-left: -200px;
  border-radius: 5px;
  box-shadow: 4px 8px 16px 0 rgba(0,0,0,0.1);
  overflow: hidden;
  font-family: 'Open Sans', Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: royalblue;
  // background-image: linear-gradient(120deg, royalblue, red, gold);
  padding:2rem;
  filter: contrast(10);
  
}

.center {
  display: flex;
  justify-content: center;
  align-items:center;
  height:100%;
  width: 100%;
  border: 35px dotted yellowgreen;
  border-radius: 50%;
  background-color: lightcyan;
  filter: blur(10px);
  transition: all 5s ease-in-out;
  animation: spine 20s linear infinite;
  &:hover {
  transition: all 5s ease-in-out;
  animation: zoom 2s ease-in-out infinite;
  }
}
.ball {
  position: relative;
  height:20%;
  width:20%;
  border-radius: 50%;
  // background-color: lightcoral;
  filter: blur(15px);
}

@for $i from 1 through 8 {
  .blubb-#{$i} {
    position: absolute;
    height: 25%;
    width: 25%;
    background-color: yellowgreen;
    transform: rotate((random(360)+deg));
    
    &::after {
      content:'';
      position: absolute;
      display: block;
      height: 100%;
      width: 100%;
      top: 0;
      right:0;
      border-radius: 50%;
      background-color: blue;
      transform-origin: 20%+$i 20%-$i;
      animation: spine (7+$i/5)+s ease-in-out $i+s infinite;
      filter: blur(15px);
    }
  } 
}

@for $i from 1 through 10 {
  .sparkle-#{$i} {
    position: absolute;
    height: $i+ 5%;
    width: $i+ 5%;
    transform: rotate((random(360)+deg));
  
    &::after {
      content: '';
      position: absolute;
      height: 10% * $i;
      width: 10% * $i;
      border-radius: 50%;
      background-color: yellowgreen;
      transform-origin: 500%+$i 500%+$i;
      animation: spine (7+$i/5)+s ease-in-out $i/3+s infinite;
      filter: blur(5px)
    }
  }
}

@keyframes spine {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes zoom {
  0%, 100%{
    transform: scale(1);
  }
  50% {
    transform: rotate((random(360)+deg))
  }
}