/* Body style to to create a grid area layout for the entire page */

body {
	display: grid;
	grid-template-columns: auto;
	grid-template-areas:
	"headergrid"
	"biogrid"
	"footergrid";
	margin: 0;
}

/* Paragraph and heading styles */

.PTitle{
	font-family: effra, sans-serif;
    font-weight: 600;
	color: #6a2bc7;
	grid-area: auto / 2 / auto / 3;
	justify-self: left;
	align-self: center;
	margin: 1vw;
	font-size: calc(1.1rem + .33vw);
}

.PArticle{
	font-family: effra, sans-serif;
	color: #595959;
	text-align: left;
	grid-area: auto / 2 / auto / 3;
	margin: 1vw;
	font-size: calc(0.75rem + 0.30vw);
	max-width: 53rem;
}

/* Adds space to top of content */
h1:first-of-type {
	margin-top: 3vh;
}

/* Bio portrait styles */

.bio-portrait {
	height: 150px;
	justify-self: end;
	align-self: center;
	margin: 1vw;
}

#FHDCPortrait {
	grid-area: 2 / 1 / 3 / 2;
}

#AlicePortrait {
	grid-area: 4 / 1 / 5 / 2;
}

#PhillipPortrait {
	grid-area: 6 / 1 / 7 / 2;
}

#ThomasPortrait {
	grid-area: 8 / 1 / 9 / 2;
}

/* Styling for divs to contain bio content */

.BioDiv{
	grid-area: biogrid;
	background-image: url("/images/about-us-sunset-background-2.jpg");
	background-position: center;
	background-attachment: fixed;
}

.BioPDiv{
	display: grid;
	grid-template-columns: 1fr 3fr 1fr;
	grid-template-rows: auto;
}

.bio-background {
	display: grid;
	grid-template-columns: 1fr 4fr;
	grid-area: 1 / 2 / auto / 3;
	background-color: rgb(250 250 250 / 77%);
	backdrop-filter: brightness(120%) blur(8px);
	box-shadow: 2px 2px 10px 2px rgb(010 005 010 / 10%);
}

/* Media queries for mobile */

@media screen and (max-width: 600px){
	
	body {
		grid-template-areas:
		"headergrid"
		"biogrid"
		"footergrid";
	}

	#FHDCPortrait {
		grid-area: 1 / 1 / 2 / 2;
	}

	#AlicePortrait {
		grid-area: 3 / 1 / 4 / 2;
	}

	#PhillipPortrait {
		grid-area: 5 / 1 / 6 / 2;
	}

	#ThomasPortrait {
		grid-area: 7 / 1 / 8 / 2;
	}

	.BioPDiv{
		display: grid;
		grid-template-columns: 1fr 8fr 1fr;
		grid-template-rows: auto;
	}
	
	.bio-portrait {
		height: 75px;
		justify-self: end;
		align-self: center;
		margin: 1vw;
	}
	
	.PTitle {
		padding-left: 1vw;
		font-size: calc(1rem + 0.33vw);
	}
	
	.PArticle {
		grid-area: auto / 1 / auto / 3;
		font-size: calc(0.70rem + 0.33vw);
	}

	/* Removes the space because it looks bad on mobile */
	h1:first-of-type {
		margin-top: unset;
	}

}