body {
	margin: 7px;
	color: #000;
	background-color: #cbcbcb;
	color: #000000;
	background-repeat: repeat-x;
	background-image: url(../img/peachtex.png);
	background-attachment: fixed;
	margin: 0px;
	padding: 0px;
	font-family: Bahnschrift, 'DIN Alternate', 'Franklin Gothic Medium', 'Nimbus Sans Narrow', sans-serif-condensed, sans-serif;
	font-weight: 400;
}

#banner {
	display: grid;
	grid-template-areas: "leftbanner bwmug rightbanner";
	grid-template-rows:
		auto
		auto
		auto;
	grid-template-columns: 9fr 20vw 10fr;
  font-weight: normal;
}

#rightbanner {
	display: rightbanner;
}

#leftbanner {
	display: leftbanner;
}


ul.thumbnail_list {
  	list-style-type: none;
  	padding: 0;
}

ul.thumbnail_list li {
  display: flex;
  align-items: flex-start;
}

ul.thumbnail_list li img {
  float: left;
  margin-bottom: 1em;
  margin-right: 1vw; /* Adjust the margin as needed */
  width: 10vw;   /* Adjust the max-width as needed for your thumbnail */
  height: auto;      /* Maintain aspect ratio */
}


.menubutton {
	background-color: white;
	border-radius: 1em;
	padding: .25em .5em .1em .5em;
}

a.menubutton {
	text-decoration: none;
	font-size: 3cqw;
}

.menuselected a.menubutton {
	outline: 2px solid black;
}

#fname {
	grid-area: fname;
	font-size: 9cqw;
	height: 9cqw;
	text-align: right;
	margin: 0;
	padding: .2em 0 0 0;
}

#lname {
	grid-area: lname;
	font-size: 9cqw;
	height: 9cqw;
	text-align: left;
	margin: 0;
	padding: .2em 0 0 0;
}

#bwmug {
	grid-area: bwmug;
	width: 20vw;
	height: auto;
}

#tech {
	grid-area: tech;
	text-align: left;
	width: 100%;
	margin: 0;
	font-size: 2cqw;
	height: 3cqw;
}

#design {
	grid-area: design;
	text-align: right;
	width: 100%;
	margin: 0;
	font-size: 2cqw;
	height: 3cqw;
}

#port {
	grid-area: port;
	text-align: right;
	width: 100%;
	height: 2cqw;
	margin: .5cqw;
	font-size: 1.5cqw;
	position: relative;
	left: .5em;
}

#res {
	grid-area: res;
	text-align: left;
	width: 100%;
	height: 2cqw;
	margin: .5cqw;
	font-size: 1.5cqw;
	position: relative;
	left: -1em;
}

.page {
	background-color: #ffffff;
	border-radius: 12px;
	margin: 1em;
	padding: 1em;
	box-shadow: 1px 1px 4px #000;
	column-width: 30em;
	column-fill: balance;
}	
.page_onecol {
	background-color: #ffffff;
	border-radius: 12px;
	margin: 1em;
	padding: 1em;
	box-shadow: 1px 1px 4px #000;
}	

.requirements, .deliverables, .pageChunk {
	break-inside: avoid-column;
	margin: 1em 0 1em 0;
}

.pageChunk {
	padding: .25em 1em .25em 1em;
	border: 1px solid #cbcbcb;
	border-radius: .5em;
	background-color: #ffffff;
}

.pageChunk ul li {
	margin: 0 0 0 -1.75em;
	padding: 0;
}

.deliverables ul {
	list-style: none;
}

.deliverables ul li {
	font-size: .9em;
	font-weight: 400;
	margin: 0 0 0 -2em;
	padding: 0;
	position: relative;
	padding-left: .75em; /* Indentation for the checkmark and text */
	text-indent: -.8em; /* Adjusts the first line indentation */
}

.deliverables ul li:before {
	content: '✓';
	color: #884420;
	font-weight: bold;
	position: relative;
	left: -.25em;
}

.caption {
	font-weight: bold;
	color: #884420;
}

.portfolioImage {
	display: inline;
	border-style: none;
	max-width: 99%;
}

.portfolioSample {
	display: block;
	text-align: center;
	margin-bottom: 12px;
	break-inside: avoid-column;
}

.portfolioSample p {
	font-weight: 200;
	font-size: .8em;
	margin: .3em 0em 2em 0em;
}

div.contactInfo {
	width: 100%;
	text-align: center;
	margin-top: 12px;
	margin-bottom: 30px;
}

h1 {
  font-weight: normal;
  font-weight: normal;
	font-size: 1.2em;
	padding: 0px;
	margin: 0px;
	margin-bottom: 7px;
}

h2 {
  font-weight: normal;
  font-weight: normal;
	font-size: 1.1em;
	padding: 0px;
	margin: 0px;
	margin-bottom: 7px;
}