@charset "UTF-8";
/* CSS Document */
*{
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
}
body {
	background-color: white;
	background-repeat: no-repeat;
	background-size: cover;
    margin-left: auto;
}
	 
header{
	width:960px;
	display:block;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	text-align: center;
	background-color: aliceblue;
	

}

li{
	border: 2px solid black;
	border-radius: 10%;
	display: inline-block;
	padding: 20px;
	margin: 20px;
	box-shadow: 5px 5px 5px black;
}

li:hover{
	background-color: yellow;
	cursor: pointer;
}

li#scale-01:hover{

     transform: scale(2);

}
li#scale-02:hover{

     transform: scale(3);

}
li#scale-03:hover{

     transform: scale(4);

}

li#scale-04:hover{

     transform: scale(5);

}

li#scale-05:hover{

     transform: scale(6);

}

li#scale-06:hover{

     transform: scale(7);

}

li#rotate-1:hover{

	transition: transform 2s;
	transform: rotate(45deg);

}
li#rotate-2:hover{

	transition: transform 2s;
	transform: rotate(90deg);

}
li#rotate-3:hover{

	transition: transform 2s;
	transform: rotate(180deg);

}
li#rotate-4:hover{

	transition: transform 2s;
	transform: rotate(360deg);

}


li#rotate-05:hover{

	transition: transform 2s;
	transform: rotate(25deg);

}

li#rotate-06:hover{

	transition: transform 2s;
	transform: rotate(160deg);

}

li#skew-1:hover{

	transition: transform 2s;
	transform: skewX(15deg);

}

li#skew-2:hover{

	transition: transform 2s;
	transform: skewY(15deg);

}


li#skew-3:hover{

	transition: transform 2s;
	transform: skewX(15deg) skewY(15deg);

}


li#skew-4:hover{

	transition: transform 2s;
	transform: skewX(30deg) skewY(30deg);

}

li#skew-05:hover{

	transition: transform 2s;
	transform: skewX(45deg);

}

li#skew-06:hover{

	transition: transform 2s;
	transform: skewX(25deg) skewY(25deg);

}



li#translate-1:hover{

	transition: transform 2s;
	transform: translateX(100px) translateY(0px);

}


li#translate-2:hover{

	transition: transform 2s;
	transform: translateX(-100px) translateY(0px);

}


li#translate-3:hover{

	transition: transform 2s;
	transform: translateX(0px) translateY(-100px);

}



li#translate-4:hover{

	transition: transform 2s;
	transform: translateX(0px) translateY(100px);

}


li#translate-05:hover{

	transition: transform 2s;
	transform: translateX(70px) translateY(70px);

}


li#translate-06:hover{

	transition: transform 2s;
	transform: translateX(100px) translateY(100px);

}

@font-face{
	font-family:enlighten-your-destiny;
	src: url('../fonts/enlighten-your-destiny.ttf');
}

@font-face{
	font-family:fish;
	src: url('../fonts/fish.ttf');
}
@font-face{
	font-family:hello--stranger;
	src: url('../fonts/hello--stranger.otf');
}
h1{
	font-family:fish; 
}
h2{
	font-family:hello--stranger; 
}