.container  
  -var num = 20
    while num--
      .petal
  .logo W
.tagline W is for wubba lubba dub dub

$radius: 90%;

@import url(//fonts.googleapis.com/css?family=Bungee);

body {
  margin: 0;
  background: #222;
  overflow: hidden;
}

.container {
  position: fixed;
  left: 45vw;
  top: calc(50vh - 5vw);
  width: 140vw;
  height: 10vw;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
    filter: hue-rotate(360deg);
  }
  50% {
    transform: rotate(360deg);
    filter: hue-rotate(0deg);
  }
  100%{
    transform: rotate(360deg);
    filter: hue-rotate(0deg);
  }
}
@keyframes logoan {
  0% {
    filter: hue-rotate(360deg);
  }
  /* 50% {
    filter: hue-rotate(0deg);
  } */
  100%{
    filter: hue-rotate(0deg);
  }
}

.petal {
  width: 10vw;
  height: 10vw;
  position:absolute;
  background: hsla(92, 50%, 50%, 0.36);
  border-style: solid;
  border-color: hsla(92, 50%, 50%, 0.5) ;
  animation-name: rotate;
  animation-duration: 4s; 
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-timing-function: ease-in-out;
  mix-blend-mode: screen;
  border-radius: $radius $radius $radius 0;
}

.tagline{
  width:50vw;
  left:-5vw;
  text-align:center;
  position: fixed;
  line-height: 100vh;
  font-size: 2vw;
  font-family: 'Bungee';
  color: rgba(123, 191, 63, 0.6);
  animation-name: logoan;
  animation-duration: 4s; 
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-timing-function: ease-in-out;
}

.logo{
  width: 10vw;
  height: 10vw;
  position:absolute;
  vertical-align: middle;
  line-height: 10vw;
  align-items: center;
  font-size: 6vw;
  font-family: 'Bungee';
  text-align: center;
  border-radius: $radius $radius $radius $radius ;
  border-style: solid;
  border-color: rgba(123, 191, 63, 0.0);
  color: rgba(123, 191, 63, 0.6);
  animation-name: logoan;
  animation-duration: 4s; 
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-timing-function: ease-in-out;
}

@for $i from 0 to 20 {
  .petal:nth-child(#{$i}) {
    animation-delay: $i * 100ms;
  }
}