html {
	/* height:100%; */
}
p {
	margin:8px;
}
body {
	background-color: #e2e2e2;
	min-height:100%;
	height:100%;
	width:100%;
	margin:0px;
}
html body main.home {
	height:100%;
	width:100%;
	display:grid;
	grid-template-areas:"header header header header"
	"gutter portrait overview sidebar"
	"gutter aboutme aboutme sidebar"
	"gutter projects projects sidebar"
	"footer footer footer footer";
	grid-template-columns:5% 30% 60% 5%;
	grid-template-rows:60px 280px auto auto 70px;
	gap: 0 0px;
	background-color: #ffffff;
	/* align-items:center; */
	/* justify-items:center; */
}
@media screen and (max-width: 800px) {
	html body main.home {
		grid-template-areas:"header header header header"
		"gutter portrait portrait sidebar"
		"gutter overview overview sidebar"
		"gutter aboutme aboutme sidebar"
		"gutter projects projects sidebar"
		"footer footer footer footer";
		grid-template-rows:60px 200px 280px auto auto 70px;
	}
}
html body main {
	height:100%;
	width:100%;
	display:grid;
	grid-template-areas:"header header header header"
	"gutter content content sidebar"
	"footer footer footer footer";
	grid-template-columns:5% 30% 60% 5%;
	grid-template-rows:60px auto 70px;
	gap: 0 0px;
	background-color: darkgrey;
	/* align-items:center; */
	/* justify-items:center; */
}
header {
	grid-area:header;
	background-color: white;
}

overview {
	grid-area:overview;
	background-color: darkgrey;
	padding-top:30px;
}
gutter {grid-area:gutter;background-color: darkgrey;}
aboutme {grid-area:aboutme;background-color: darkgrey;padding-top:40px;}
projects {grid-area:projects;background-color: darkgrey;}
sidebar {grid-area:sidebar;background-color: darkgrey;}
footer {
	grid-area:footer;
	background-color: white;
	background-image:url(./site-footer-image.jpg);
	background-repeat:no-repeat;
	background-position: center;
	background-size:cover;
	height:200px;
}
content { grid-area:content; background-color:darkgrey;}
.dropdown-menu li{
	position: relative;
}
.dropdown-menu .submenu{ 
	display: none;
	position: absolute;
	left:100%; top:-7px;
}
.dropdown-menu .submenu-left{ 
	right:100%; left:auto;
}

.dropdown-menu > li:hover{ background-color: #f1f1f1 }
.dropdown-menu > li:hover > .submenu{
	display: block;
}

.project-card {
	cursor:pointer;
}
.nav-item.dropdown:hover .primary-menu.dropdown-menu {
    display: block;
    margin-top: 0; /* remove the gap so it doesn't close */
}