/*

d888888b db   db d88888b 
`~~88~~' 88   88 88'     
   88    88ooo88 88ooooo 
   88    88~~~88 88~~~~~ 
   88    88   88 88.     
   YP    YP   YP Y88888P 
                         
                         
db      db    db  .o88b. db   dD db    db .d8888. d888888b  .d8b.  d8888b. 
88      88    88 d8P  Y8 88 ,8P' `8b  d8' 88'  YP `~~88~~' d8' `8b 88  `8D 
88      88    88 8P      88,8P    `8bd8'  `8bo.      88    88ooo88 88oobY' 
88      88    88 8b      88`8b      88      `Y8b.    88    88~~~88 88`8b   
88booo. 88b  d88 Y8b  d8 88 `88.    88    db   8D    88    88   88 88 `88. 
Y88888P ~Y8888P'  `Y88P' YP   YD    YP    `8888Y'    YP    YP   YP 88   YD 
                                                                           
                                                                           
 .d8b.  d8888b. d888888b d888888b .d8888. d888888b 
d8' `8b 88  `8D `~~88~~'   `88'   88'  YP `~~88~~' 
88ooo88 88oobY'    88       88    `8bo.      88    
88~~~88 88`8b      88       88      `Y8b.    88    
88   88 88 `88.    88      .88.   db   8D    88    
YP   YP 88   YD    YP    Y888888P `8888Y'    YP 

  */



body {
	background-color: #6666cc;
}

p {
	font-size: 18pt;
	color: black;
}

h1 {
	font-family: "Futura", cursive;
	color: #6633cc;
	font-size: 40pt;
	text-align: center; 
}

h1#c-p-w {
	margin: 10px;
	border: 2px solid #6633cc;
	padding: 10px;
	background-color: #9999ff;
}

h2 {
	font-family: "Helvetica", Arial, sans-serif;
	color: #ccccff;
	font-size: 18pt;
	text-align: center;
}

.nav {
	font-family: "Futura", Arial, sans-serif;
	display: inline-block;
	width: 80px;
	margin: 10px;
	border: 2px solid #6633cc;
	padding: 25px;
	background-color: #9966cc;
	text-align: center;
}

.capitalize {
	text-transform: uppercase;
}

div#box1 {
	display: inline-block;
	width: 150px;
	margin: 10px;
	border: 6px dotted #cc33ff;
	padding: 40px;
	background-color: #ccccff;
}

div#box2 {
	display: inline-block;
	width: 150px;
	margin: 10px;
	border: 6px dotted #990099;
	padding: 40px;
	background-color: #ccccff;
}

div#box3 {
	display: inline-block;
	width: 150px;
	margin: 10px;
	border: 6px dotted #6600ff;
	padding: 40px;
	background-color: #ccccff;
}

div#box4 {
	display: inline-block;
	width: 150px;
	margin: 10px;
	border: 6px dotted #cc33ff;
	padding: 40px;
	background-color: #ccccff;
}

div#box5 {
	display: inline-block;
	width: 150px;
	margin: 10px;
	border: 6px dotted #cc33ff;
	padding: 40px;
	background-color: #ccccff;
}

div#box6 {
	display: inline-block;
	width: 150px;
	margin: 10px;
	border: 6px dotted #990099;
	padding: 40px;
	background-color: #ccccff;
}

div#box7 {
	display: inline-block;
	width: 150px;
	margin: 10px;
	border: 6px dotted #6600ff;
	padding: 40px;
	background-color: #ccccff;
}

div#box8 {
	display: inline-block;
	width: 150px;
	margin: 10px;
	border: 6px dotted #cc33ff;
	padding: 40px;
	background-color: #ccccff;
}

div#box9 {
	display: inline-block;
	width: 150px;
	margin: 10px;
	border: 6px dotted #990099;
	padding: 40px;
	background-color: #ccccff;
}

div#box10 {
	display: inline-block;
	width: 150px;
	margin: 10px;
	border: 6px dotted #6600ff;
	padding: 40px;
	background-color: #ccccff;
}

div#box11 {
	display: inline-block;
	width: 150px;
	margin: 10px;
	border: 6px dotted #cc33ff;
	padding: 40px;
	background-color: #ccccff;
}

div#box12 {
	display: inline-block;
	width: 150px;
	margin: 10px;
	border: 6px dotted #990099;
	padding: 40px;
	background-color: #ccccff;
}

div#box13 {
	display: inline-block;
	width: 150px;
	margin: 10px;
	border: 6px dotted #6600ff;
	padding: 40px;
	background-color: #ccccff;
}

div#box14 {
	display: inline-block;
	width: 150px;
	margin: 10px;
	border: 6px dotted #cc33ff;
	padding: 40px;
	background-color: #ccccff;
}

a:link {
	color: blue;
}

a:visited {
	color: purple;
}

a:hover {
	color: #ff66ff;
}

a:active {
	color: red;
}

h1#my-name {
	margin: 10px;
	border: 2px solid #6633cc;
	padding: 10px;
	background-color: #9999ff;
}

* {
	margin: 0;
	padding: 0;
}

main#canvas {
	width: 68.4vw;
	height: 45.5vw;
}

section {
	width: 16.66666666666667%
	height: 100%;
	float: left;
}

article {
	width: 60%;
	height: 80%;
	margin-top: 41%;
	margin-left: 20%;
	float: left;
}

figure {
	width: 18%;
	height: 97%;
	margin-top: 8%;
	margin-left: 7%;
	float: left;
}

.red {
	background-color: tomato;
}

.orange {
	background-color: orange;
}

.yellow {
	background-color: yellow;
}

.green {
	background-color: limegreen;
}

.cyan {
	background-color: powderblue;
}

.blue {
	background-color: blue;
}

.purple {
	background-color: darkorchid;
}

.pink {
	background-color: peachpuff;
}

.black {
	background-color: black;
}

.red:hover {
	background-color: black;
}

.orange:hover {
	background-color: peachpuff;
}

.yellow:hover {
	background-color: darkorchid;
}

.green:hover {
	background-color: blue;
}

.cyan:hover {
	background-color: peachpuff;
}

.blue:hover {
	background-color: green;
}

.purple:hover {
	background-color: yellow;
}

.pink:hover {
	background-color: orange;
}

.black:hover {
	background-color: tomato;
}

.center {
	display: block;
	margin-left: auto;
	margin-right: auto;
}