/* ---------------------------------------- 
Cyril Gordon
---------------------------------------- */

/* 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: #effcf8;
	background-image: url(../images/stars.gif)
}



div {border: solid 0px white}

.cg {
	
}

.moon { background-image: url(../images/moon.png)

}

.moon:hover {
	transform: rotate(360deg);
	transition: 3.5s;
}

.alien {
	background-image: url(../images/stars.gif);
}

.alien:hover{
	background-image: url(../images/saucer.png);
	transition: 1s
}

.alien:active{
	background-image: url(../images/alien.png);
}
.star{
	background-image: url(../images/star.png);

}

.star:hover{
	transform: rotate(360deg);
	transition: 1s;
}

.star:active{
	background-image: url(../images/star1.png);
}

.example {
	background-color: red;
	transition: background 1s;
}

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

.example:active {
	background: url(../images/pattern.jpg);
}

.example div { 
	background: url(../images/pattern.jpg);
	border-radius: 50%;
	width: 75%;
	height: 75%;
	margin: 10%
}

.corners {
	background: green;
	border-style: ridge;
	border-width: 20px;
	border-top-color: orange;
	border-bottom-color: blue;
	border-left-color: indigo;
	border-right-color: red;
	transform: rotate(10deg);
	transition: background 0.5s;
}

.corners:hover { 
	background-color: #eeffff;
	background: url(../images/sloth.png);
	cursor: pointer;
	cursor: crosshair;
	background-attachment: contain;
}

.corners:active {
	background: url(../images/IMG_0061-2.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}