/* 

Assignment 3
Demo

*/

body {
	background-color:rgb(232,255,255);
	overflow: auto;
	/*animation-name: redchange;
    background-color:red;
    animation-iteration-count: infinite;
    animation-duration: 4s;
    animation-timing-function: ease-in-out;*/
}






.square, div.square {
    position: relative; 
    float: left;
    width: 10%;
    /*max-width: 12.5%;*/
    height: 10vh;
   /* max-height: 12.5vh;*/
   
}



.mz.pool { 

	

	animation-name: redchange;
    background-color:red;
    animation-iteration-count: infinite;
    animation-duration: 4s;
    animation-timing-function: ease-in-out;
    
  /*  width:150px;
    height:150px;*/

    

	/*
	/*margin-left:20px;
	margin-top:0px;*/

}

.mz.pool:hover{
	background-image: url(../images/water.gif);
	background-size:cover;
	background-position: center;
	cursor:cell;

}
@keyframes redchange{
	0%{ background-color :#ace1e3; }
	25%{background-color:#a3c6cc;}
	50%{background-color:#77b7bf;}
	75%{background-color:#a3c6cc;}
	100%{ background-color :#ace1e3; }
/*	0%{transform:rotate(360deg);}
   100%{transform:rotate(0deg);}*/
	}
/*.mz.pool:hover{
	
	transform:rotate(90deg);
	opacity: 2px;
	border-radius: 100%;


}*/
.mz.rotate{
	
    border:solid black 2px;
    -webkit-transition: width 1s; /* Safari */
    transition: width 1s;
}
.mz.rotate:hover{
	 width: 150px;
}
.mz.still{
	border:ridge rgb(255,176,161) 30px;
/*	border-top: ridge red 30px;
	border-left: ridge red 30px;*/
	
}
.mz.still:hover{
	border-radius: 50%;
	border-color:black;
}
.mz.swimring {
	/*width: 150px;
    height: 150px;*/
   
	background: none;
	
	
	animation-name:rotatee;
	animation-duration: 4s;
	animation-iteration-count: infinite;
	cursor:crosshair;
	animation-timing-function: ease;
	background-image: url(../images/swim.png) ;

	background-size: 70px;
	background-repeat: no-repeat;
	background-position: center;


	
	

}
.mz.swimring:active{
	background-color: rgb(232,255,255);
/*	background-image: url(../images/water.gif);
	background-size: cover;
	background-position: center;*/

}
@keyframes rotatee{
   0%{transform:rotate(0deg);}
   50%{transform:rotate(180deg);}
   100%{transform:rotate(360deg);}


}