/* ---------------------------------------- 
Rachel J. Lee
---------------------------------------- */

/* 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.

*/

/* so we can tell that our file is loading */
body {
	background-color: white;
}

div {
	border: none;
}

/*___________________________________________________________________________________*/


.rl.blue {
	background-color: lightcyan;
}

.rl.blue:hover {
	background-color: lemonchiffon;
	cursor: pointer;
	
}

.rl.blue:active {
	background: url(../images/yellow-stripes.png);
	background-size:100%;
}

.rl.blue div {
    background-size: 100%;
    background-color: lightcyan;
    animation-name: bluechange-rl;
    animation-duration: 6s;
    animation-iteration-count: infinite;
    left:0px;
    top:0px;
   	transform:rotate(0deg);
   	border-style: none;

}

@keyframes bluechange-rl {
    0% {background-color: lightcyan;}
    50% {background-color: lemonchiffon;}
    100% {background-color: lightcyan;}
}


/*______________________________________________________________________________________*/


.rl.yellow {
	background-color: lemonchiffon;
	background-size:100%;
}

.rl.yellow div{
 	background-size:100%;
 	background-color: lemonchiffon;
 	animation-name: yellowchange-rl;
 	animation-duration: 4s;
 	animation-iteration-count: infinite;
 	border-style: none;
 	animation-delay: 1s;
 	left: 25%;
}

@keyframes yellowchange-rl {
		0% {background-color: peachpuff;}
		50% {background-color: lemonchiffon;}
		100% {background-color: peachpuff;}
}

.rl.yellow:hover {
	background-color: peachpuff;
	cursor: pointer;
}

.rl.yellow:active {
	background: url(../images/pink-stripes.png);
	background-size:100%;
}


/*_______________________________________________________________________________________*/

.rl.pink {
	background-color: seashell;
}

.rl.pink div{
 	background-size: 100%;
 	background-color: peachpuff;
 	animation-name: pinkchange-rl;
 	animation-duration: 4s;
 	animation-iteration-count: infinite;
 	position: absolute;
 	border-style: none;
 	left: 0px;
 	top: 0px;
 	animation-delay: 2s;
}

@keyframes pinkchange-rl {
		0% {background-color: peachpuff;}
		50% {background-color: seashell;}
		100% {background-color: peachpuff;}
}

.rl.pink:hover {
	background-color: lightcyan;
	cursor: pointer;
}

.rl.pink:active {
	background: url(../images/blue-stripes.png);
	background-size:100%;
}