avatar.css

/*
Resources:
Learn more about colors here:
- https://developer.mozilla.org/en-US/docs/Web/CSS/color_value
Having trouble with overriding rules? Learn about CSS specificity:
- http://specificity.keegan.st/
- https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
For more challenge, try using gradients!
- https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_gradients
Want to change more about how it looks? See the full list of
SVG Presentation Attributes:
- https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute#Presentation_attributes
*/
body {
    background:url(http://kingofwallpapers.com/ocean/ocean-004.jpg)
}
@keyframes slidein {
    from{
        transform:rotate(0deg);
        fill:#aa1387
    }
    to{
        transform:rotate(360deg);
        fill:#aa1387
    }
}
.avatar{
    /* this sets default styles for everything in the avatar group */
    stroke-width: 3;
    fill: white;
    stroke: black;
}

.body {
    /* Your code here! 
	 * Examples of how to set colors:
	fill: red;
	fill: rgb(243, 191, 189);
	fill: rgba(243, 191, 189, 0.5);
    fill: hsl(180, 70%, 50%);
    
    * You can even change the color and style of the line! Examples:
	stroke: #FFF000;
    stroke-width: 1;
	*/
    fill: #FFFFFF;
}

.eye {
     stroke: black;
    fill:#f227f2
        
}

.arm {
}

.shoe {
    fill: #aa1387;
    animation-duration: .5s;
    animation-name: slidein;
    animation-iteration-count: infinite;
        
}

.left {
}

.right {
}

#head {
    fill:#aa1387

}

#right-eye {
}

#left-eye {
}

#neck {
    fill: brown
}

#shirt {
    fill:rgba(179, 249, 255, 0.99)
}

#cape {
   fill:#f227f2
}

#mouth {
}

#pants {
    fill:rgba(179, 249, 255, 0.99)
}

#left-arm {
    fill:#76eac6
}

#right-arm {
    fill:brown
}

#left-shoe {
}

#right-shoe {
}