/*transitions*/
header {
	text-align:center;
	padding:4vw;
}

	h1 {
		font-size: 4vw;
	}

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

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

section {
	text-align:center;
}

	li {
		display:inline-block;
		background-color:white;
		margin: 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;
		}

#transition-one {
	transition: transform 5s;
		-moz-transition: transform 5s;
		-ms-transition: transform 5s;
		-o-transition: transform 5s;
		-webkit-transition: transform 5s;
}

	#transition-one:hover {
		transform:translateX(100vw);
	}

#transition-two {
	transition: transform 5s;
		-moz-transition: transform 5s;
		-ms-transition: transform 5s;
		-o-transition: transform 5s;
		-webkit-transition: transform 5s;
}

	#transition-two:hover {
		transform: translateY(100vh);
	}

#transition-three {
	transition: transform 5s;
		-moz-transition: transform 5s;
		-ms-transition: transform 5s;
		-o-transition: transform 5s;
		-webkit-transition: transform 5s;
}

#transition-three:hover {
	transform: translate(100vw, 100vh);
}

#transition-four {
	transition: transform 5s;
		-moz-transition: transform 5s;
		-ms-transition: transform 5s;
		-o-transition: transform 5s;
		-webkit-transition: transform 5s;
}

	#transition-four:hover {
		transform: rotate(720deg);
	}

#transition-five {
	transition: transform 5s;
		-moz-transition: transform 5s;
		-ms-transition: transform 5s;
		-o-transition: transform 5s;
		-webkit-transition: transform 5s;
}

	#transition-five:hover {
		transform:scale(10);
	}

#transition-six {
	transition:transform 5s;
		-moz-transition: transform 5s;
		-ms-transition: transform 5s;
		-o-transition: transform 5s;
		-webkit-transition: transform 5s;
}

	#transition-six:hover {
		transform: skew(10deg, 20deg);
	}