/* 

Assignment 3
Natasha

*/

body {
	font-size: 40px;
}


div  {
    width: 200px;
    height: 200px;
    position: relative;
    background-color: pink;
    animation-name: example;
    animation-duration: 5s;
    animation-iteration-count: infinite;
}

@-webkit-keyframes example {
    0%   { left:0px; top:0px;}
    25%  { left:0px; top:100px;}
    50%  {left:100px; top:100px;}
    75%  { left:100px; top:0px;}
    100% { left:0px; top:0px;}
}

.square.xx { background: pink; }

.xx.demo-circle { 
	background: lightblue;
	border-radius: 90%;
}

div:hover {
	box-shadow: 2px 2px 30px 8px rgb(110, 25, 100);
	opacity: 10% ; 
	transition: 1s;
}
.xx.demo-square {
	background: lime;
	border-color: orange;
	border-radius: 80%;
	
}