@charset "UTF-8";

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

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

h2{
	font-family: "Pirata One", system-ui,Gotham, Helvetica, Arial, monospace;
	font-size: 1.7em;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

/*TRANSITIONS*/

h2.ts {
    color: #271D0A;
    padding-bottom: 50px;
    transition: letter-spacing .5s ease-in-out;
}

h2.ts:hover {
	letter-spacing: 1em;
}

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

#box1:hover {
    width: 800px;
    background-color: #760048;
}

#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: #69003E;
    margin: 75px 0 0 150px;
    opacity: 1;
    float: left;
    transition-duration: 5s;
}

#box4:hover {
	background-color: white;
}

/*TRANSFORMS*/

#transforms {
	margin-top: 75px;
}

h2.tf {
    color: #4E77B9;
    padding-bottom: 50px;
    display: inline-block;
    transition-duration: 2s;
}

h2.tf:hover {
	transform: rotate(360deg);
}

#box5 img {
	width: 25px;
	transition: transform 1.5s linear;
	transform-origin: left bottom;
}

#box5 img:hover {
	transform: scale(24);
}

#box6 {
	width: 75px;
	height: 75px;
	margin-top: 75px;
	background-color:#000000;
	transition-duration: 3s;
}

#box6:active{
    background-color: #66349C;
    transform: translateX(800px);
}