@import 'accordion.css';

#main-header nav {
	border-bottom: 1px solid #ddd;
}

#content {
	padding-top: 9%;
}
#content > section h1 {
	border-bottom: 1px solid #ddd;
}
#content > header,
#content > section {
	margin-bottom: 9%;
}

#profile {
	display: grid;
	grid-gap: 2em;
	justify-items: center;
	margin: auto;
}
#profile h1 {
	margin: 0 0 0.6em;
	line-height: 1.2;
	white-space: nowrap;
}
#profile img {
	margin-top: 0.3em;
	border: 4px solid gray;
	width: 192px;
	height: 192px;
	border-radius: 50%;
	object-fit: cover;
	object-position: center bottom;
}

#profile .info {
	position: relative;
	text-align: center;
}
#profile .info > main {
	display: flex;
	margin-bottom: 2em;
	flex-direction: column;
	align-items: center;
}
#profile .info > aside {
	font-size: 1.35em;
}
#profile .info > footer {
	font-size: 1.25em;
}
#profile .info p,
#profile .info h2 {
	margin: 0;
	font-size: 1em;
}

#profile .listings {
	align-self: start;
	padding: 0 1em;
	max-width: 320px;
	padding: 1.2em 1em 0.8em 1em;
	border-left: 1px solid #ddd;
}
#content .listings h2 {
	text-align: center;
	margin: 0 0 0.3em;
}
#profile .listings,
#profile .listings article {
	background-color: #e6e6fa;
}
#profile .listings article {
	margin: auto;
	padding: 0.6em 1em;
	transition: background-color 0.2s;
}
#profile .listings article:hover,
#profile .listings article.open {
	background-color: #f2f2fc;
}
#profile .listings article li:first-child {
	margin-top: 0.3em;
}
#profile .listings h3 {
	position: relative;
	margin: 0;
	white-space: nowrap;
	padding-right: 1.5em;
}
#profile .listings h3::after {
	position: absolute;
	right: 0;
}
#profile .listings ul {
	font-size: 1.2em;
	margin: 0;
	padding: 0 0 0 1em;
	list-style-type: square;
	list-style-position: inside;
}
/*
#profile .listings h3::after {
	content: ' > ';
	float: right;
}
*/

#content > section {
	font-size: 1.2em;
}
#content > section article {
	padding: 0 0.5em;
}
#content > section article > h2 {
	grid-column: 1 / span 2;
	margin-bottom: 0;
}
#content > section article > h2:first-child {
	margin-top: 0;
}

#bio h1 {
	margin: 1em 0;
}
#bio h2 {
	font-size: 1.25em;
	margin: 1.5em 0;
}
#bio p {
	line-height: 1.5;
}
#tilt {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 10px;
}

@media (min-width: 560px) {
	#profile {
		grid-template-columns: 1fr 267px;
		grid-auto-flow: row;
		grid-gap: 2em 10px;
		grid-template-rows: none;
		max-width: 588px;
	}
	#profile .info {
		padding: 0;
	}
	#tilt {
		grid-template-columns: repeat(3, 1fr);
	}
}
@media (min-width: 768px) {
	#tilt {
		grid-template-columns: repeat(6, 1fr);
	}
}
@media (min-width: 800px) {
	#content > section article {
		display: grid;
		grid-gap: 0 40px;
		grid-template-columns: 1fr 1fr;
	}
	#profile span[itemprop="jobTitle"] {
		white-space: normal;
	}
	#profile {
		max-width: 778px;
		grid-gap: 40px;
	}
	#profile .info {
		text-align: left;
	}
	#profile .info > main {
		align-items: flex-start;
		flex-direction: row;
	}
	#profile .info h1 {
		order: 2;
		margin-bottom: 0;
		padding-left: 0.7em;
	}
	#profile .info > aside,
	#profile .info > footer {
		position: absolute;
	}
	#profile .info > aside {
		top: 100px;
		right: 0;
	}
	#profile .info > footer {
		top: 174px;
		left: 202px;
	}
}
@media (min-width: 960px) {
	#profile span[itemprop="jobTitle"] {
		white-space: nowrap;
	}
}