@charset "UTF-8";

body {
	background-color: #43F868;
	margin-top: 100px;
}

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

h2 {font-family: 'Gowun Batang', serif;
	font-size: 1.75em;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	}

/*Transitions*/

h2.ts {
	color: #EA4346;
	padding-bottom: 50px;
	transition: letter-spacing .7s ease-in-out;
}
h2.ts:hover {
	letter-spacing: 1em;
	
}
#box1 {
	width: 75px;
	height: 75px;
	background-color: #0C6C66;
	transition: all 2s ease-out;
}
#box1:hover {
	width: 800px;
	background-color: #F782DC;
}

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

#box2:hover {
	background-color: #EFA742;
	border-color: #ffde29;
}
#box3 {
	width: 250px;
	height: 250px;
	margin-top: 75px;
	background-image: url("../images/ghost1.jpg");
	float: left;
	transition: all 1s ease-in;
}
#box3:active {
	background-image: url("../images/ghost2.jpg");
}

#box4 {
	width: 75px;
	height: 75px;
	background-color: #2245fe;
	float: left;
	margin: 75px 0 0 150px;
	opacity: 1;
	transition: all .5s ease-in-out;
}
#box4:hover {
	opacity: 0; 
}
/*TRANSFORMS*/
#transform {
	margin-top: 75px;
}

h2.tf {
	color: #0C545E;
	padding-bottom: 50px;
	display: inline-block;
	transition: all 1s linear;
	
	
	
}

h2.tf:hover {
	transform: rotate(-360deg);
	
}
#box5 img {
	width: 25px;
	transition: all .75s linear;
	float: left;
	
}

#box5 img:hover {
	transform: translate(350px,-300px)scale(24) ;
	tranform-origin: left bottom;
}
#box6 {
	width: 75px;
	height: 75px;
	margin-top: 75px;
	background-color: #E2BEF8;
	transition: all 3s ease-in-out;
	
}

#box6:active {
	transform: translateX(750px) translateY(50px);
	background-color: #B648FA
}