#logo{
-webkit-animation: fade-in 0.6s steps(4, end) 0.2s both, rainbowglow 10s ease-in-out infinite alternate;
	      animation: fade-in 0.6s steps(4, end) 0.2s both, rainbowglow 10s ease-in-out infinite alternate;
}

.intune{
-webkit-animation: fade-in 0.6s steps(4, end) 0.4s both, rainbowglow 10s ease-in-out infinite alternate, highlight 10s ease-in-out infinite alternate;
	      animation: fade-in 0.6s steps(4, end) 0.4s both, rainbowglow 10s ease-in-out infinite alternate, highlight 10s ease-in-out infinite alternate;
}

.blur{
-webkit-animation: fade-in-blur 0.6s steps(4, end) 0.6s both, rainbowglow 11s ease-in-out infinite alternate, highlight 11s ease-in-out infinite alternate;
	      animation: fade-in-blur 0.6s steps(4, end) 0.6s both, rainbowglow 11s ease-in-out infinite alternate, highlight 11s ease-in-out infinite alternate;
}

.units{
-webkit-animation: fade-in 0.6s steps(6, end) 1.8s both;
	      animation: fade-in 0.6s steps(6, end) 1.8s both;
}

#leftdiv {
	--webkit-animation: fade-in 0.3s steps(10, end) 2.4s both;
	        animation: fade-in 0.3s steps(10, end) 2.4s both;
}

#albumsdiv {
	--webkit-animation: fade-in 0.3s steps(10, end) 2.5s both;
	        animation: fade-in 0.3s steps(10, end) 2.5s both;
}

#rightdiv {
	--webkit-animation: fade-in 0.3s steps(10, end) 2.6s both;
	        animation: fade-in 0.3s steps(10, end) 2.6s both;
}

#playingdiv {
	--webkit-animation: fade-in 0.3s steps(10, end) 2.7s both;
	        animation: fade-in 0.3s steps(10, end) 2.7s both;
}


/*

#leftdiv {
	--webkit-animation: scale-in-left 0.3s steps(10, end) 2s both;
	        animation: scale-in-left 0.3s steps(10, end) 2s both;
}

#albumsdiv {
	--webkit-animation: scale-in-left 0.3s steps(10, end) 2.2s both;
	        animation: scale-in-left 0.3s steps(10, end) 2.2s both;
}

#rightdiv {
	--webkit-animation: scale-in-right 0.3s steps(10, end) 2.4s both;
	        animation: scale-in-right 0.3s steps(10, end) 2.4s both;
}

#playingdiv {
	--webkit-animation: scale-in-right 0.3s steps(10, end) 2.6s both;
	        animation: scale-in-right 0.3s steps(10, end) 2.6s both;
}

*/

@-webkit-keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes fade-in-blur {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0.6;
  }
}
@keyframes fade-in-blur {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0.6;
  }
}


@-webkit-keyframes scale-in-left {
  0% {
    -webkit-transform: scale(0) rotateX(0deg) rotateY(12deg);
            transform: scale(0) rotateX(0deg) rotateY(12deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1) rotateX(0deg) rotateY(12deg);
            transform: scale(1) rotateX(0deg) rotateY(12deg);
    opacity: 1;
  }
}
@keyframes scale-in-left {
  0% {
    -webkit-transform: scale(0) rotateX(0deg) rotateY(12deg);
            transform: scale(0) rotateX(0deg) rotateY(12deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1) rotateX(0deg) rotateY(12deg);
            transform: scale(1) rotateX(0deg) rotateY(12deg);
    opacity: 1;
  }
}




@-webkit-keyframes scale-in-right {
  0% {
    -webkit-transform: scale(0) rotateX(0deg) rotateY(348deg);
            transform: scale(0) rotateX(0deg) rotateY(348deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1) rotateX(0deg) rotateY(348deg);
            transform: scale(1) rotateX(0deg) rotateY(348deg);
    opacity: 1;
  }
}
@keyframes scale-in-right {
  0% {
    -webkit-transform: scale(0) rotateX(0deg) rotateY(348deg);
            transform: scale(0) rotateX(0deg) rotateY(348deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1) rotateX(0deg) rotateY(348deg);
            transform: scale(1) rotateX(0deg) rotateY(348deg);
    opacity: 1;
  }
}








@keyframes rainbowglow{
  0%{
      text-shadow: 0 0 5px #fff, 0 0 10px #f30d69, 0 0 20px #f30d69, 0 0 30px #f30d69, 0 0 30px #f30d69;
    }
    
    25%{
      text-shadow: 0 0 10px #fff, 0 0 20px #8CCA06, 0 0 30px #8CCA06, 0 0 40px #8CCA06, 0 0 40px #8CCA06;
    }
    
    50%{
      text-shadow: 0 0 10px #fff, 0 0 20px #00B1E7, 0 0 30px #00B1E7, 0 0 40px #00B1E7, 0 0 40px #00B1E7;
    }
    
    75%{
      text-shadow: 0 0 10px #fff, 0 0 20px #8814C2, 0 0 30px #8814C2, 0 0 40px #8814C2, 0 0 40px #8814C2;
    }
    
   100%{
      text-shadow: 0 0 10px #fff, 0 0 20px #FF4AA1, 0 0 30px #FF4AA1, 0 0 40px #FF4AA1, 0 0 40px #FF4AA1;
    }
}

@keyframes highlight{
  0%{
      color: #f30d69;
    }
    
    25%{
      color: #8CCA06;
    }
    
    50%{
      color: #00B1E7;
    }
    
    75%{
      color: #8814C2;
    }
    
   100%{
      color: #FF4AA1;
    }
}