@charset "UTF-8";
/* -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
-=-=-= THESE STYLES DESIGNED AND BUILT WITH LOVING CARE -=-=-=
=-=-=-=- ENTIRELY BY HAND JUST FOR YOU BY IAN BESLER -=-=-=-=-
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- */

* {
	margin: 0;
	padding: 0;
}

	a:link {
		color: #00f;
	}

	a:hover {
		background-color: #ff0;
	}

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

/* =-=-=-=-=-=-=-=-=
=-=-=- HEADER =-=-=-
-=-=-=-=-=-=-=-=- */

header {
	background-color: lightgray;
	padding: 2%;
	border-bottom: 0.1em solid #000;
	font-size: 1.5em;
}

	h1,h2,h3,h6 {
		font-family: sans-serif;
		font-weight: normal;
	}

			code {
				font-family: monospace;
				font-weight: normal;
				background-color: #272822;
				color: #fff;
				font-style: normal;
			}

				code.css-property {
					font-style: italic;
					color: #66d9ef;
				}

/* =-=-=-=-=-=-=-=-=-
=-=-=- SECTION -=-=-=
-=-=-=-=-=-=-=-=-= */

	main {
		padding: 2% 0;
	}

		h3 {
			padding: 0 0 2% 2%;
		}

	section {
		text-align: center;
	}

		ul {
			list-style-type: none;
		}

		li {
			font-family: sans-serif;
			display: inline-block;
			background-color: white;
			margin: 1vw 0.5vw;
			padding: 0.5vw 1vw;
			border: 5px solid black;
			font-size: 3vw;
			font-weight: bold;
			color: black;
			transition: transform 1s;
		}

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

/* -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
-=-=-= CSS TRANSFORM PROPERTY ROTATE =-=-=-
=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- */
		
		.rotate-forty-five:hover {
			transform: rotate(45deg);
				-ms-transform: rotate(45deg);
				-webkit-transform: rotate(45deg);
		}

		.rotate-ninety:hover {
			transform: rotate(90deg);
				-ms-transform: rotate(90deg);
				-webkit-transform: rotate(90deg);
		}

		.rotate-one-eighty:hover {
			transform: rotate(180deg);
				-ms-transform: rotate(180deg);
				-webkit-transform: rotate(180deg);
		}

		.rotate-three-sixty:hover {
			transform: rotate(360deg);
				-ms-transform: rotate(360deg);
				-webkit-transform: rotate(360deg);
		}

/* -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
-=-=-= CSS TRANSFORM PROPERTY SCALE -=-=-=
=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= */
		
		.scale-times-quarter:hover {
			transform: scale(0.25);
				-ms-transform: scale(0.25);
				-webkit-transform: scale(0.25);
		}

		.scale-times-half:hover {
			transform: scale(0.5);
				-ms-transform: scale(0.5);
				-webkit-transform: scale(0.5);
		}

		.scale-times-one:hover {
			transform: scale(1);
				-ms-transform: scale(1);
				-webkit-transform: scale(1);
		}

		.scale-times-two:hover {
			transform: scale(2);
				-ms-transform: scale(2);
				-webkit-transform: scale(2);
		}

/* -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
-=-=-= CSS TRANSFORM PROPERTY SKEW =-=-=-
=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- */

		.skew-x-fifteen:hover {
			transform: skewX(15deg);
				-ms-transform: skewX(15deg);
				-webkit-transform: skewX(15deg);
		}

		.skew-y-fifteen:hover {
			transform: skewY(30deg);
				-ms-transform: skewY(30deg);
				-webkit-transform: skewY(30deg);
		}

		.skew-x-and-y-fifteen:hover {
			transform: skewX(15deg)skewY(15deg);
				-ms-transform: skewX(15deg)skewY(15deg);
				-webkit-transform: skewX(15deg)skewY(15deg);
		}

		.skew-x-and-y-thirty:hover {
			transform: skewX(30deg)skewY(30deg);
				-ms-transform: skewX(30deg)skewY(30deg);
				-webkit-transform: skewX(30deg)skewY(30deg);
		}

/* -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
-=-=-= CSS TRANSFORM PROPERTY TRANSLATE -=-=-=
=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= */

		.translate-up:hover {
			transform: translateY(-50px);
				-ms-transform: translateY(-50px);
				-webkit-transform: translateY(-50px);
		}

		.translate-right:hover {
			transform: translateX(50px);
				-ms-transform: translateX(50px);
				-webkit-transform: translateX(50px);
		}

		.translate-down:hover {
			transform: translateY(50px);
				-ms-transform: translateY(50px);
				-webkit-transform: translateY(50px);
		}

		.translate-left:hover {
			transform: translateX(-50px);
				-ms-transform: translateX(-50px);
				-webkit-transform: translateX(-50px);
		}

/* =-=-=-=-=-=-=-=-=
=-=-=- FOOTER =-=-=-
-=-=-=-=-=-=-=-=- */

footer {
	background-color: lightgray;
	padding: 2%;
	font-size: 2em;
	border-top: 0.1em solid #000;
}

	footer img {
		width: 1em;
	}