*{
	margin: 0;
	padding: 0;
}

body {
	background-color: green;
}

li {
	border: 5px solid black;
	display: inline-block;
	border-radius: 10%;
	border: 5px solid black;
	font-family: impact;
	font-size: 3vw;
	margin: 50px;
	padding: 20px;
	box-shadow: 5px 5px 5px black;
	background-color: white;

}

/* THESE ARE MY PSUEDO STYLES */

li#scale:hover {
	background-color: red;
	cursor: pointer;
	transform: scale(1.2);

}

li#rotate:hover{
	background-color: red;
	cursor: pointer;
	transform: rotate(45deg);
}

li#skew:hover{
	background-color: red;
	cursor: pointer;
	transform: skew(-45deg) skewY(45deg);
}

li#translate:hover{
	background-color: red;
	cursor: pointer;
	transform: translateX(100px) translateY(100px);
}



	li#scale1:hover {
		background-color: orange;
		cursor: pointer;
		transform: scale(2);
	
	}
	
	li#rotate1:hover{
		background-color: orange;
		cursor: pointer;
		transform: rotate(176deg);
	}
	
	li#skew1:hover{
		background-color: orange;
		cursor: pointer;
		transform: skew(-25deg) skewY(25deg);
	}
	
	li#translate1:hover{
		background-color: orange;
		cursor: pointer;
		transform: translateX(-100px) translateY(100px);
	}



		li#scale2:hover {
			background-color: blue;
			cursor: pointer;
			transform: scale(5);
		
		}
		
		li#rotate2:hover{
			background-color: blue;
			cursor: pointer;
			transform: rotate(260deg);
		}
		
		li#skew2:hover{
			background-color: blue;
			cursor: pointer;
			transform: skew(60deg) skewY(-95deg);
		}
		
		li#translate2:hover{
			background-color: blue;
			cursor: pointer;
			transform: translateX(20px) translateY(-80px);
		}


li#scale3:hover {
	background-color: purple;
	cursor: pointer;
	transform: scale(0.5);

}

li#rotate3:hover{
	background-color: purple;
	cursor: pointer;
	transform: rotate(-145deg);
}

li#skew3:hover{
	background-color: purple;
	cursor: pointer;
	transform: skew(-60deg) skewY(5deg);
}

li#translate3:hover{
	background-color: purple;
	cursor: pointer;
	transform: translateX(-50px) translateY(200px);
}

		
		li#scale4:hover {
			background-color: yellow;
			cursor: pointer;
			transform: scale(-7);
		
		}
		
		li#rotate4:hover{
			background-color: yellow;
			cursor: pointer;
			transform: rotate(24deg);
		}
		
		li#skew4:hover{
			background-color: yellow;
			cursor: pointer;
			transform: skew(180deg) skewY(-30deg);
		}
		
		li#translate4:hover{
			background-color: yellow;
			cursor: pointer;
			transform: translateX(30px) translateY(40px);
		}