@charset "utf-8";

body {
	background-color: #4d3d71;
	margin-top: 100px;
}


section {
	width: 800px;
	margin: 0 auto;
	padding: 75px;
	background-color: white;
}

h2 {
	font-family: "Source Code Pro", Helvetica, Arial, monospace;
	font-size: 1.75em;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

/*TRANSITIONS*/

h2.ts{
	color:#e2a52a;
	padding-bottom: 50px;
	transition: letter-spacing .5s ease-in-out;
	
}
h2.ts:hover{
	letter-spacing: 1em;
}

#box1 {
	width: 75px;
	height: 75px;
	background-color: #df5153;
	transition: all 2s ease-in-out;
}

#box1:hover {
	width: 800px;
	background-color: #ffde29;
	transition: all .5s ease-in-out;
}


#box2 {
	width: 75px;
	height: 75px;
	background-color: #999;
	border: 15px solid black;
	margin-top: 75px;
	margin-right: 150px;
	float: left;
	transition: all 2s linear;
}

#box2:active{
	background-color: black;
	border-color: #999;
}

#box3{
	width: 250px;
	height: 250px;
	margin-top: 75px;
	background-image: 
	url("images/ghost1.jpg");
	float: left;
	transition: background-image 4s ease-in;
}
#box3:active{
	background-image: url("images/ghost2.jpg");
}

#box4{
	width: 75px;
	height: 75px;
	background-color: #22AAAA;
	margin: 75px 0 0 150px;
	opacity: 1;
	float: left;
	transition: all 2s linear;
}
#box4:active{
	opacity: 0;
}

/*TRANSFORMS*/

#transforms {
	margin-top: 75px;
}

h2.tf {
	color: #4eb98c;
	padding-bottom: 50px;
	display: inline-block;
	transition: all 1s linear;
}
h2.tf:hover{
	transform: rotate(360deg);
}

#box5 img {
	width: 25px;
	transition: transform 1s linear;
	transform-origin: left bottom;
}
#box5 img:hover{
	transform: scale(24);
	
}

#box6{
	width: 75px;
	height: 75px;
	margin-top: 75px;
	background-color: #ffde29;
	transition: all 2s linear; 
}

#box6:active{
	 transform: translate(700px);
	background-color: #04428B;
}