* {
		margin: 0;
		padding: 0;
	}

	section {
			width: 100%;
			height: 60vh;
			padding-top: 40vh;
			text-align: center;
		}

			section h1 {
				font-size: 10vw;
				text-align: center;
				display: inline-block;
			}

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

			nav ul {
				list-style-type: none;
			}

			nav ul li {
				display: block;
				
			}

				nav ul li a:link figure {
					width: 2.5vh;
					height: 2.5vh;
					border-radius: 50%;
					background-color: black;
					margin-bottom: 1vh;
				}

					nav ul li a:hover figure {
						background-color: white;
					}

			nav ul li a:link figure div {
				display: none;
			}

				nav ul li a:hover figure div {
					position: relative;
					display: inline-block;
					width: 10vw;
					height: 1vw;
					top: 0.1vw;
					right: 10.5vw;
					text-align: right;
				}

					nav ul li a:hover figure div h2 {
						font-family: Arial, sans-serif;
						font-size: 1vw;
						color: black;
						white-space: nowrap;
					}



	/* =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
=-=-=- CSS NAMED COLOR CLASSES -=-=-=
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= */

	.red {
		background-color: red;
	}

	.orange {
		background-color: orange;
	}

	.yellow {
		background-color: yellow;
	}

	.green {
		background-color: green;
	}

	.blue {
		background-color: blue;
	}

	.purple {
		background-color: purple;
	}