body{
  background: white;
  font-size: 23px;
  color: black;
  font-family: arial;
  text-align:center;
  margin: 50px auto;
  width: 300px;
}

#box{
  width: 300px;
  
}


.style{
  margin: 50px 0 10px 0;
}

.code{
  margin: 0px 0 100px 0;
}

pre {
    display: block;
    background: #eee;
    padding: 10px;
    text-shadow: 0 1px #fff;
    overflow: auto;
    font-size: 15px;
}

@keyframes rainbow {
 0%   { 
 color: red;		
 }
 
 25%   { 
 color: yellow;		
 }
 
 50%{
   color: green;		
 }
 
 75%   { 
 color: blue;		
 }
 
  100% { 
 color: orange;	
 }
}

@keyframes glow {

 50%{
     text-shadow: 0 0 5px black;	
 }
}

@keyframes bounce{
    
    25%{
        margin: 30px 0 0 60px;
    }
    
    50%{
        margin: 60px 0 0 0px;  
    }
    
    75%{
        margin: 30px 0 0 -60px; 
    }
    
    
    100%{
       margin: 0 0;     
    }
    

}

@keyframes widen{
    
    25%{
        letter-spacing: 1px;
    }
    
    50%{
        letter-spacing: 3px; 
    }
    
    75%{
        letter-spacing: 1px;
    }
    
    
    100%{
       margin: 0 0;     
    }
    

}

@keyframes teeter{
    
    25%{
      transform: rotate(4deg);  
    }
    
    50%{
      transform: rotate(0deg);  
    }
    
    75%{
     transform: rotate(-4deg);  
    }
    
    
    100%{
            
    }
    

}

#glow {
    animation: glow 2s infinite;
    text-shadow: 0 0 1px black;
}

#change{
    animation: rainbow 2s infinite;
}

#bounce{
    animation: bounce 2s infinite;
}

#breathe{
    animation: widen 2s infinite;
}

#teeter{
    animation: teeter 1s infinite;
}