/* 

Assignment 3
Demo

*/

/*body {

	font-size: 40px;
}

.square {
	background: aqua; 
}


.demo-circle { 
	background: blue;
	border-radius: 50%;
}

.demo-square {
	background: red;
	border: inset 10px yellow;
}*/




/* ---------------------------------------- 
Celine 
---------------------------------------- */

/* NOTES:

1. DO NOT use width or height properties for any parent-level divs (these are divs you will be adding classes to).
2. Use % over px for sizing interior divs
3. Remember: if you do not give dimention and style to interior divs, we will not see them. By default, divs are invisible.

*/



body {
	background-color: white ;
}

div { border: none; }

.ck2 { 
	background: rgb(255,255,255);
	opacity: 1;
 }

.example div {
		width: 50%;
	height: 100%;
	background-color: white;
	animation-duration: 6s;
	animation-iteration-count: infinite;
	position: center;
	left: 0px;
	top: 0px;
		transform: rotate(0deg);
		border-style: none;
	animation-name: corner-color-change ;
}

@keyframes corner-color-change {
	0% {background-color: white;}
	25% { background-color: grey ; }
	50% {background-color: black ;}
	75% {background-color: grey;}
	100% {background-color: white;}
}


.example { 
	background-color: white;
}



.example:hover div  { 
/*	background-color: red;*/
	cursor: crosshair;

	width: 50%;
	height: 100%;
	background-color: rgb(254, 18, 1);
	animation-duration: 3s;
	animation-iteration-count: infinite;

	top: 0px;
		transform: rotate(0deg);
		border-style: none;
	animation-name: red-yellow ;
}

@keyframes red-yellow {
	0% {background-color: rgb(254, 18, 1);}
	25% { background-color: rgb(254, 102, 1);}
	50% {background-color: rgb(254, 229, 1);}
	75% {background-color: rgb(254, 102, 1)}
	100% {background-color: rgb(254, 18, 1);}
}



.second {
	background-color: black;

	
}

.second:hover{
	box-shadow: 0px 15px 25px -5px;
	/*box-shadow: 0px 37px 20px -20px;*/
	transform: translate(0px, -20px);
	cursor: pointer;
}

.second:active{
	cursor: pointer;
	background: url(../images/diagonal.jpg);

}

.second div{
	
	width: 50%;
	height: 100%;
	background-color: black;
	animation-duration: 6s;
	animation-iteration-count: infinite;
	position: center;
	left: 0px;
	top: 0px;
		transform: rotate(0deg);
		border-style: none;
	animation-name: opposite-middle ;
}

@keyframes opposite-middle {
	0% {background-color: black;}
	25% { background-color: grey ; }
	50% {background-color: white ;}
	75% {background-color: grey;}
	100% {background-color: black;}
}
	
}



	
		 
box-shadow: 0px 17px 10px -10px rgb (0,0,0);






*/




}


}