/* Approximate breakpoints

Advanced

Mobile devices:  320px-600px
Tablets:  481px-768px
Laptops: 769px-1024px
Desktop: 1025px-1200px
Larger Desktop & TV: 1201px and up

Beginner

Mobile devices: 320-600px;
Tablets: 601-900px;
Desktop: 901px +;

Mobile first!*/

h1 {
	font-size: 3em;
	text-align: center;
}

h2 {
	font-size: 2em;
	text-align: center;
}

h3 {
	font-size: 2em;
	color: orange;
	text-decoration: underline;
	text-decoration-color: black;
}

p {
	font-family: sans-serif;
	color: white;
	font-size: 1.5em;
	margin-right: 35%;
	line-height: 1.5em;
}

header {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	padding: 10px;
	border: solid black;
	background-color: rgba(0, 0, 0, .8);
}

li, a {
	font-family: "Playfair Display SC", serif;
	font-weight: 500px;
	font-size: 1.3em;
	color: #edf0f1;
	text-decoration: none;
	text-align: center;
	margin-left: auto;
}

.nav_links {
	list-style: none;
}

.nav_links li {
	display: inline-block;
	padding: 0px 20px;
}

.nav_links img {
	display: block;
	margin: 0 auto;
	width: 180px;
}

.nav_links li a {
	transition: .5s;
}

.nav_links li a:hover {
	color: orange;
}

body#index{
	background-image: url(images/firstflame.jpg);
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
}

body#abyss{
	background-image: url(images/abyss.jpg);
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
}

body#yhorm{
	background-image: url(images/yhorm3.jpg);
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
}

body#aldrich{
	background-image: url(images/aldrich2.jpg);
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
}

body#princes{
	background-image: url(images/twinprinces.jpg);
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
}

 #wrapper {
    	background-color: rgba(40, 40, 40, .9);
    	width:  80%;
    	margin: 2% auto;
    	padding: 2%;
}

section {

}

aside {
	width: 30%;
	background-color: rgba(0, 0, 0, .8);
	float: right;
	clear: right;
	color: #E7E7E7;
	border: solid darkorange;
}

.container {
	display: inline-table;
	place-items: center;
	height: 60vh;
	grid-template-columns: 1fr;
	grid-template-rows: .7fr 1fr .7fr 1fr;
	grid-template-areas: 
		"name"
		"portrait"
		"location"
		"locationpic";
}

#name {
	grid-area: name;
}

#portrait {
	grid-area: portrait;
}

#portrait img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

#location {
	grid-area: location;
}

#locationpic {
	grid-area: locationpic;
}

#locationpic img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}