body {
	background: conic-gradient(at 0 0, blue, red);
	margin: 0;
	padding: 0;
}

#h-main {
	position: sticky; /* this is to postion the header at the top of the site and have it stay there.*/
	top: 0;
	left: 0;
	width: 100vw;
}

header nav ul {
	margin: 0;
	padding: 50px;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	list-style: none;
	background: black;
}
main {
	padding-bottom: 20vh; /* this makes sure the content is not hidden by the footer */
  
}
main * {

	display: flex;
	flex-direction: column;
	align-items: center;
}

#hero {
	width: 50vw;
	display: flex;
	justify-self: self-end;
}

#hero header {
	position: relative; /* this makes it so I can postion the image using absolute */
}

#hero header figure { /* this section positions the image on top of everything else and locates it abnoxously in the middle of the screen (my creative skill failed me here so I gave up trying to find a nice place for it).*/
	position: absolute;
	top: 10px;
	right: 40vw;
	z-index: 100;
	box-shadow: 15px 20px 50px gray;
}

#featured-projects-cards,
#skills-overview-body-skillList { /* I used grid to do the main work of positioning my cards and skills */
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 20px;
}

#m-footer { /* I used fixed to position the footer so it is always visable at the bottom of the page. */
	position: fixed;
	bottom: 0vh;
	width: 100vw;
	background-color: black;
	color: white;
	padding: 20px;
}

.brand {
	transform: translate(50%, -50%); /* I used transform translate to postion my name in the center of the element with using any special positioning schema */
	color: white;
}