/* -------------
---- CSS RESET ------
------------------*/

* {
	margin: 0;
	padding: 0;
}

/* --------------------------
---- HTML5 SEMANTIC TAGS ----
----------------------------*/

header, section {
	width: 100vw;
	height: 100vw;
}

nav {
	position: fixed;
	top: 25vh;
	right: 2vw;
}

ol {
	list-style-type: none;
}

a:link {
	display: inline-block;
	width: 2vw;
	height: 2vw;
	border: 0.2vw solid black;
	border-radius: 50%;
	background-color: rgba(255,255,255,0.2);
	margin-bottom: 1vh;
}

span {
	font-size: 0;
	opacity: 0;
	position: relative;
	top: 0.2vw;
	right: 2vw;
	white-space: nowrap;
}

a:hover span {
	font-size: 1.2vw;
	right: 9vw;
	opacity: 1;
}

h1, h2, h3, h4, h5 {
	font-size: 10vw;
	text-align: center;
}

h1 {
	transition: transform 2s;
 		-moz-transition: transform 2s;		/* MOZILLA FIREFOX */
 		-ms-transition: transform 2s;		/* MICROSOFT INTERNET EXPLORER */
 		-o-transition: transform 2s;		/* OPERA */
 		-webkit-transition: transform 2s;	/* APPLE SAFARI, GOOGLE CHROME */
}

	h1:hover {
		transform: rotate(90deg);
	 		-moz-transform: rotate (90deg);		/* MOZILLA FIREFOX */
	 		-ms-transform: rotate (90deg);		/* MICROSOFT INTERNET EXPLORER */
	 		-o-transform: rotate (90deg);		/* OPERA */
	 		-webkit-transform: rotate (90deg);	/* APPLE SAFARI, GOOGLE CHROME */
	}

h2 {
	transition: transform 5s;
 		-moz-transition: transform 5s;		/* MOZILLA FIREFOX */
 		-ms-transition: transform 5s;		/* MICROSOFT INTERNET EXPLORER */
 		-o-transition: transform 5s;		/* OPERA */
 		-webkit-transition: transform 5s;	/* APPLE SAFARI, GOOGLE CHROME */
}

	h2:hover {
		transform: scale(3);
	 		-moz-transform: scale (3);		/* MOZILLA FIREFOX */
	 		-ms-transform: scale (3);		/* MICROSOFT INTERNET EXPLORER */
	 		-o-transform: scale (3);		/* OPERA */
	 		-webkit-transform: scale (3);	/* APPLE SAFARI, GOOGLE CHROME */
	}

h3 {
	transition: transform 1s;
 		-moz-transition: transform 1s;		/* MOZILLA FIREFOX */
 		-ms-transition: transform 1s;		/* MICROSOFT INTERNET EXPLORER */
 		-o-transition: transform 1s;		/* OPERA */
 		-webkit-transition: transform 1s;	/* APPLE SAFARI, GOOGLE CHROME */
}

	h3:hover {
		transform: skew(20deg, 10deg);
	 		-moz-transform: skew (20deg, 10deg);		/* MOZILLA FIREFOX */
	 		-ms-transform: skew (20deg, 10deg);		/* MICROSOFT INTERNET EXPLORER */
	 		-o-transform: skew (20deg, 10deg);		/* OPERA */
	 		-webkit-transform: skew (20deg, 10deg);	/* APPLE SAFARI, GOOGLE CHROME */
	}

h4 {
	transition: transform 2s;
 		-moz-transition: transform 2s;		/* MOZILLA FIREFOX */
 		-ms-transition: transform 2s;		/* MICROSOFT INTERNET EXPLORER */
 		-o-transition: transform 2s;		/* OPERA */
 		-webkit-transition: transform 2s;	/* APPLE SAFARI, GOOGLE CHROME */
}

	h4:hover {
		transform: translate(10vw,20vh);
	 		-moz-transform: translate (10vw,20vh);		/* MOZILLA FIREFOX */
	 		-ms-transform: translate (10vw,20vh);		/* MICROSOFT INTERNET EXPLORER */
	 		-o-transform: translate (10vw,20vh);		/* OPERA */
	 		-webkit-transform: translate (10vw,20vh);	/* APPLE SAFARI, GOOGLE CHROME */
	}

section#five {
	transition: background-color 1s;
 		-moz-transition: background-color 1s;		/* MOZILLA FIREFOX */
 		-ms-transition: background-color 1s;		/* MICROSOFT INTERNET EXPLORER */
 		-o-transition: background-color 1s;			/* OPERA */
 		-webkit-transition: background-color 1s;	/* APPLE SAFARI, GOOGLE CHROME */
}

section#five:hover {
	background-color: pink;
}

/* --------------------------
---- CSS TRANSITIONS---------
----------------------------*/

#transition-one {
 	transition: transform 5s;
 		-moz-transition: transform 5s;	/* MOZILLA FIREFOX */
 		-ms-transition: transform 5s;	/* MICROSOFT INTERNET EXPLORER */
 		-o-transition: transform 5s;	/* OPERA */
 		-webkit-transition: transform 5s;	/* APPLE SAFARI, GOOGLE CHROME */
 }
	#transition-one:hover {
 		transform: translateX(100vw);
 			-moz-transform: translateX(100vw);	/* MOZILLA FIREFOX */
 			-ms-transform: translateX(100vw);	/* MICROSOFT INTERNET EXPLORER */
 			-o-transform: translateX(100vw);	/* OPERA */
 			-webkit-transform: translateX(100vw);	/* APPLE SAFARI, GOOGLE CHROME */
 	}

#transition-two {
 	transition: transform 5s;
 		-moz-transition: transform 5s;	/* MOZILLA FIREFOX */
 		-ms-transition: transform 5s;	/* MICROSOFT INTERNET EXPLORER */
 		-o-transition: transform 5s;	/* OPERA */
 		-webkit-transition: transform 5s;	/* APPLE SAFARI, GOOGLE CHROME */
 }
 	#transition-two:hover {
 		transform: translateY(100vw);
 			-moz-transform: translateY(100vw);	/* MOZILLA FIREFOX */
 			-ms-transform: translateY(100vw);	/* MICROSOFT INTERNET EXPLORER */
 			-o-transform: translateY(100vw);	/* OPERA */
 			-webkit-transform: translateY(100vw);	/* APPLE SAFARI, GOOGLE CHROME */
 	}

#transition-three {
 	transition: transform 5s;
 		-moz-transition: transform 5s;	/* MOZILLA FIREFOX */
 		-ms-transition: transform 5s;	/* MICROSOFT INTERNET EXPLORER */
 		-o-transition: transform 5s;	/* OPERA */
 		-webkit-transition: transform 5s;	/* APPLE SAFARI, GOOGLE CHROME */
 }
 	#transition-three:hover {
 		transform: translate(100vw, 100vh);
 			-moz-transform: translate(100vw);	/* MOZILLA FIREFOX */
 			-ms-transform: translate(100vw);	/* MICROSOFT INTERNET EXPLORER */
 			-o-transform: translate(100vw);	/* OPERA */
 			-webkit-transform: translate(100vw);	/* APPLE SAFARI, GOOGLE CHROME */
 	}

#transition-four {
 	transition: transform 5s;
 		-moz-transition: transform 5s;	/* MOZILLA FIREFOX */
 		-ms-transition: transform 5s;	/* MICROSOFT INTERNET EXPLORER */
 		-o-transition: transform 5s;	/* OPERA */
 		-webkit-transition: transform 5s;	/* APPLE SAFARI, GOOGLE CHROME */
 }
 	#transition-four:hover {
 		transform: rotate(720deg);
 			-moz-transform: rotate(100vw);	/* MOZILLA FIREFOX */
 			-ms-transform: rotate(100vw);	/* MICROSOFT INTERNET EXPLORER */
 			-o-transform: rotate(100vw);	/* OPERA */
 			-webkit-transform: rotate(100vw);	/* APPLE SAFARI, GOOGLE CHROME */
 	}

#transition-five {
 	transition: transform 5s;
 		-moz-transition: transform 5s;	/* MOZILLA FIREFOX */
 		-ms-transition: transform 5s;	/* MICROSOFT INTERNET EXPLORER */
 		-o-transition: transform 5s;	/* OPERA */
 		-webkit-transition: transform 5s;	/* APPLE SAFARI, GOOGLE CHROME */
 }
 	#transition-five:hover {
 		transform: scale(10);
 			-moz-transform: scale(10);	/* MOZILLA FIREFOX */
 			-ms-transform: scale(10);	/* MICROSOFT INTERNET EXPLORER */
 			-o-transform: scale(10);	/* OPERA */
 			-webkit-transform: scale(10);	/* APPLE SAFARI, GOOGLE CHROME */
 	}

#transition-six {
 	transition: transform 5s;
 		-moz-transition: transform 5s;	/* MOZILLA FIREFOX */
 		-ms-transition: transform 5s;	/* MICROSOFT INTERNET EXPLORER */
 		-o-transition: transform 5s;	/* OPERA */
 		-webkit-transition: transform 5s;	/* APPLE SAFARI, GOOGLE CHROME */
 }
 	#transition-six:hover {
 		transform: skew(10deg,20deg);
 			-moz-transform: skew(10deg,20deg);	/* MOZILLA FIREFOX */
 			-ms-transform: skew(10deg,20deg);	/* MICROSOFT INTERNET EXPLORER */
 			-o-transform: skew(10deg,20deg);	/* OPERA */
 			-webkit-transform: skew(10deg,20deg);	/* APPLE SAFARI, GOOGLE CHROME */
 	}

/* --------------------------
---- CSS COLOR CLASSES ------
----------------------------*/

.red {
	background-color: red;
}

.orange {
	background-color: orange;
}

.yellow {
	background-color: yellow;
}

.green {
	background-color: green;
}

.cyan {
	background-color: cyan;
}

.blue {
	background-color: blue;
}

.purple {
	background-color: purple;
}

.magenta {
	background-color: magenta;
}