html{
	height: 45vh;
	width: 80vw;
	background-color: ghostwhite;
}

h1{
	font-size: 4.5em;
	font-family: Courier New;
	color: steelblue;
	/*margin-left: 5%;*/
}

h2{
	font-size: 2em;
	font-family: Courier New;
	color: lightblue;
	margin-top: -3%;
	/*margin-left: 13%;*/
}

h3{
	font-size: 2.2em;
	font-family: Courier New;
	color: blue;
	
}


section{
	display: inline-block;
	margin:  1.5em;
	line-height: 0;
	padding: 0.1em 2em ;
	border: 0.5em dotted white;
	transition: transform 0.2s;

}

section:hover{
	box-shadow: 10px 10px 10px lightgrey;
	cursor: url("../img/emoji"), auto;
}


.rotations{
	margin-left: 10%;
}

section#rotations:hover{
	transform: rotateZ(45deg);
	
}


section#scales:hover{
	transform: scale(1.5);

}


section#skews:hover{
	transform: skew(20deg);
}


section#translations:hover{
	transform: translateY(-15px);
}
/* group 1 */
section#rotate1:hover{
	transform: rotateZ(90deg);
	
}


section#scale1:hover{
	transform: scale(0.5);

}


section#skew1:hover{
	transform: skew(-45deg);
}


section#translation1:hover{
	transform: translateY(1000px);
}

/* group 2 */
section#rotate2:hover{
	transform: rotateZ(180deg);
	
}


section#scale2:hover{
	transform: scale(-0.5);

}


section#skew2:hover{
	transform: skewY(45deg);
}


section#translation2:hover{
	transform: translateX(-1000px);
}

/* group 3 */
section#rotate3:hover{
	transform: rotateY(45deg);
	
}


section#scale3:hover{
	transform: scale3d(1.5, -1.5, 0.5);

}


section#skew3:hover{
	transform: skewY(100deg);

}


section#translation3:hover{
	transform: translateX(1000px);
}

/* group 4 */
section#rotate4:hover{
	transform: rotateX(45deg);
	
}


section#scale4:hover{
	transform: scale3d(-1.5, 1.5, 2);

}


section#skew4:hover{
	transform: skew(-100deg);
}


section#translation4:hover{

	transform: translate3d(100px, -100px, 100px);
}