body {
	background-color: #281B1D;
	color: white;
	font-family: "Akatab", sans-serif;
	margin: 0;
	font-size: 16px;
	line-height: 22px;
}
#bio-page-container {
	background-image: url("images/banners/bio.png");
	background-repeat: no-repeat;
	background-size: 100%;
}
#dev-page-container {
	background-image: url("images/banners/dev.png");
	background-repeat: no-repeat;
	background-size: 100%;
}
#art-page-container {
	background-image: url("images/banners/art.png");
	background-repeat: no-repeat;
	background-size: 100%;
}
#commercial-games, #free-web-games, #other-projects, #characters, #environments, #animated-videos, #graphic-design {
	scroll-margin-top: 100px;
}
p {
	text-align: justify;
}
a {
	color: #FFE3E3;
}
a.source-link {
	margin-left: 1rem;
	margin-top: -0.5rem;
	line-height: 2rem;
	float: right;
}
.navigation-header {
	display: flex;
	justify-content: space-evenly;
	background-color: #3B0009;
	position: sticky;
	position: -webkit-sticky;
	top: 0;
	z-index: 2;
	max-height: 20px;
}
@media (min-width: 1000px) {
	.navigation-header {
		padding: 2rem 20% 2rem 20%;
	}
	.navigation-header a {
		font-size: 2rem;
	}
}
@media (max-width: 1000px) {
	.navigation-header {
		padding: 3vw 10vw 3vw 10vw;
		gap: 10%;
	}
	@media (min-width: 500px) {
		.navigation-header a {
			font-size: 4vw;
		}
	}
}
@media (max-width: 500px) {
	.navigation-header a {
		font-size: 1rem;
	}
}
.navigation-header a {
	color: white;
	text-decoration: none;
}
.navigation-header a:hover {
	text-decoration: underline;
}
.navigation-header a#current-page {
	text-decoration: underline;
	color: #FFE3E3;
}
@keyframes expand-dev {
	0% {
		height: 0px;
	}
	100% {
		height: 160px;
		padding-left: 80px;
		margin-left: -80px;
		padding-right: 80px;
		margin-right: -80px;
	}
}
@keyframes expand-art {
	0% {
		height: 0px;
	}
	100% {
		height: 200px;
		padding-left: 80px;
		margin-left: -80px;
		padding-right: 80px;
		margin-right: -80px;
	}
}
.bio-nav {
	width: 50px;
	text-align: center;
	z-index: 1;
}
.expandable-page-nav :nth-child(2) {
	display: none;
	font-size: 1rem;
	margin-top: 10px;
}
.expandable-page-nav :nth-child(3) {
	display: none;
	font-size: 1rem;
}
.expandable-page-nav :nth-child(4) {
	display: none;
	font-size: 1rem;
}
.expandable-page-nav :nth-child(5) {
	display: none;
	font-size: 1rem;
}
.expandable-page-nav:hover :nth-child(2) {
	display: inline;
	white-space: nowrap;
	overflow-y: hidden;
}
.expandable-page-nav:hover :nth-child(3) {
	display: inline;
	white-space: nowrap;
	overflow-y: hidden;
}
.expandable-page-nav:hover :nth-child(4) {
	display: inline;
	white-space: nowrap;
	overflow-y: hidden;
}
.expandable-page-nav:hover :nth-child(5) {
	display: inline;
	white-space: nowrap;
	overflow-y: hidden;
}
.expandable-page-nav {
	width: 50px;
	animation-duration: 0.3s;
	animation-fill-mode: forwards;
	display: flex;
	align-items: center;
	flex-direction: column;
	gap: 1rem;
	padding-left: 20px;
	margin-left: -20px;
	padding-top: 10px;
	margin-top: -10px;
	padding-right: 20px;
	margin-right: -20px;
	border-radius: 10px;
}
.expandable-page-nav:hover {
	animation-timing-function: ease;
	background-color: #4B1019;
	z-index: 2;
}
.expandable-page-nav.dev-nav:hover {
	animation-name: expand-dev;
}
.expandable-page-nav.art-nav:hover {
	animation-name: expand-art;
}
@media (min-width: 1060px) {
	h1 {
		font-size: 10rem;
		padding-top: 7rem;
	}
}
@media (max-width: 1060px) {
	h1 {
		font-size: 15vw;
		padding-top: 10vw;
	}
}
h1 {
	text-align: center;
	line-height: 3rem;
	color: white;
	font-family: "Abril Fatface", serif;
	margin-top: 0rem;
}
@media (min-width: 630px) {
	h2 {
		font-size: 4rem;
		line-height: 3rem;
	}
}
@media (max-width: 630px) {
	h2 {
		font-size: 10vw;
		line-height: 8vw;
	}
}
h2 {
	margin-top: 1rem;
	color: #FFE3E3;
	font-family: "Abril Fatface", serif;
}
h3 {
	font-size: 2rem;
	line-height: 1rem;
	margin-top: 0;
	color: #FFE3E3;
	font-family: "Abril Fatface", serif;
}
h3.commercial-header {
	font-family: "Akatab", sans-serif;
	line-height: 2rem;
	margin-top: 1rem;
	font-weight: 900;
}
h3.free-header {
	font-family: "Akatab", sans-serif;
	line-height: 1rem;
	margin-top: 1rem;
	font-weight: 900;
}
@media (min-width: 1400px) {
	h3.free-header {
		font-size: 1.5rem;
	}
	h3.commercial-header {
		font-size: 2.5rem;
	}
}
@media (max-width: 1400px) {
	h3.free-header {
		font-size: 1rem;
	}
	@media (min-width: 400px) {
		h3.commercial-header {
			font-size: 2rem;
		}
	}
}
@media (min-width: 250px) and (max-width: 400px) {
	h3.commercial-header {
		font-size: 6vw;
	}
}
@media (max-width: 250px) {
	h3.commercial-header {
		font-size: 1rem;
		line-height: 1rem;
	}
}
h2.center {
	text-align: center;
}
.top-buffer-large {
	margin-top: 10rem;
}
.top-buffer {
	margin-top: 5rem;
}
.top-buffer-small {
	margin-top: 1rem;
}
.top-buffer-small-medium {
	margin-top: 2rem;
}
@media (max-width: 1000px) {
	div.central-content {
		margin: 0 1rem 0 1rem;
	}
}
@media (min-width: 1000px) and (max-width: 1300px) {
	div.central-content {
		margin: auto;
		width: 80%;
	}
}
@media (min-width: 1300px) {
	div.central-content {
		margin: auto;
		width: 1000px;
	}
}
#main-bio-container {
	display: flex;
	gap: 3%;
}
#main-bio-container .text-container {
	width: 60%;
}
#main-bio-container .selfie-container {
	width: 40%;
}
@media (max-resolution: 0.9dppx) {
	#main-bio-container .text-container {
		width: 70%;
	}
	#main-bio-container .selfie-container {
		width: 30%;
	}
}
@media (max-resolution: 0.7dppx) {
	#main-bio-container .text-container {
		width: 80%;
	}
	#main-bio-container .selfie-container {
		width: 20%;
	}
}
@media (max-width: 599px) {
	#main-bio-container {
		flex-direction: column-reverse;
		align-items: flex-end;
	}
	#main-bio-container .text-container {
		width: 100%;
		margin-top: -20%;
	}
	#main-bio-container .selfie-container {
		width: 20%;
		margin-right: 15%;
	}
	#main-bio-container .selfie-container h2 {
		display: none;
	}
}
@media (max-width: 250px) {
	#main-bio-container .text-container h2 {
		font-size: 11vw;
	}
	h3 {
		font-size: 11vw;
	}
	#main-bio-container .selfie-container {
		display: none;
	}
}
@media (min-width: 1400px) {
	#main-bio-container .selfie-container h2 {
		font-size: 3rem;
	}
}
@media (min-width: 1000px) and (max-width: 1400px) {
	#main-bio-container .selfie-container h2 {
		font-size: 3rem;
	}
}
@media (max-width: 999px) {
	#main-bio-container .selfie-container h2 {
		font-size: 5vw;
	}
}
#main-bio-container .selfie-container h2 {
	text-align: center;
	margin-bottom: 1rem;
}
#main-bio-container .selfie-container img {
	width: 100%;
}
.central-column-container {
	display: flex;
	gap: 3%;
}
@media (min-width: 1000px) {
	#bio-page-container .central-column-container .left-column {
		width: 60%;
	}
	#bio-page-container .central-column-container .right-column {
		width: 40%;
	}
}
@media (max-width: 1000px) {
	#bio-page-container .central-column-container .left-column {
		width: 50%;
	}
	#bio-page-container .central-column-container .right-column {
		width: 50%;
	}
}
#dev-page-container .central-column-container .left-column {
	width: 50%;
}
#dev-page-container .central-column-container .right-column {
	width: 50%;
}
@media (min-width: 700px) {
	.art-info-image-combo-container {
		display: flex;
		gap: 2rem;
	}
	#art-page-container #graphic-design .art-info-image-combo-container .left-column {
		width: 60%;
	}
	#art-page-container #graphic-design .art-info-image-combo-container .right-column {
		width: 40%;
	}
	img {
		filter: drop-shadow(0.5rem 0.5rem 1rem black);
	}
}
@media (max-width: 699px) {
	.art-info-image-combo-container.reverse {
		display: flex;
		flex-direction: column-reverse;
	}
	.art-info-image-combo-container p {
		margin: 0 0 1.5rem 0;
	}
}
@media (max-width: 500px) {
	#education .central-column-container {
		flex-direction: column;
		gap: 1rem;
	}
	#education  .central-column-container .left-column {
		width: 100%;
	}
	#education .central-column-container .right-column {
		width: 100%;
	}
}
.commercial-game-video, .large-video {
	width: 100%;
}
#social-icon-links {
	display: flex;
	justify-content: center;
	gap: 2.5vw;
}
@media (min-width: 1301px) {
	#social-icon-links {
		margin: -4rem 40% 0 0;
		gap: 4rem;
	}
}
@media (min-width: 870px) and (max-width: 1300px) {
	#social-icon-links {
		margin: 0 20% 0 20%;
	}
}
@media (min-width: 800px) and (max-width: 870px) {
	#social-icon-links {
		margin: -8vw 0 0 60%;
	}
}
@media (min-width: 600px) and (max-width: 800px) {
	#social-icon-links {
		margin: -12vw 0 0 60%;
	}
}
#social-icon-links img {
	margin-top: 1rem;
	margin-bottom: 2rem;
}
@media (min-width: 700px) {
	#social-icon-links img {
		width: 3rem;
		height: 3rem;
	}
}
@media (min-width: 600px) and (max-width: 700px) {
	#social-icon-links img {
		width: 7vw;
		height: 7vw;
	}
}
@media (max-width: 599px) {
	#social-icon-links img {
		width: 15vw;
		height: 15vw;
	}
}
@media (min-width: 600px) and (max-width: 700px) {
	#selfie {
		margin-top: 7rem;
	}
}
@media (min-width: 1000px ) and (max-width: 1120px) {
	#selfie {
		margin-top: 7rem;
	}
}
#selfie {
	border-radius: 7%;
}
ul {
	margin: 0;
}
#career-goals {
	margin-top: 2rem;
}
div.free-game-content {
	display: flex;
	align-items: start;
	gap: 1rem;
	margin-top: 3rem;
}
@media (max-width: 1400px) {
	video.free-game-video {
		width: 30vw;
	}
}
@media (min-width: 800px) and (max-width: 1000px) {
	video.free-game-video {
		width: 40vw;
	}
}
@media (min-width: 650px) and (max-width: 800px) {
	video.free-game-video {
		width: 45vw;
	}
}
@media (min-width: 651px) {
	video.free-game-video {
		margin-top: 2.5rem;
	}
}
@media (max-width: 650px) {
	video.free-game-video {
		width: 100%;
	}
	div.free-game-content {
		flex-direction: column;
	}
	div.free-game-content.column-reverse-flex {
		flex-direction: column-reverse;
	}
}
#graphic-design img {
	filter: none;
}
div#other-projects {
	display: flex;
}
div#other-projects iframe {
	aspect-ratio: 2542/1695;/* The exact dimensions of the portfolio image */
}
img {
	width: 100%;
}
div#other-projects iframe {
	filter: drop-shadow(0.5rem 0.5rem 1rem black);
	width: 100%;
}
@media (min-width: 501px) {
	div#other-projects {
		gap: 2rem;
	}
	#ui-project-info {
		width: 50%;
	}
	#portfolio-project-info {
		width: 50%;
	}
}
@media (max-width: 500px) {
	div#other-projects {
		flex-direction: column;
		gap: 3rem;
	}
}
p.game-description {
	margin-top: -0.5rem;
}
div.centered-art-info {
	margin: auto;
}
@media (min-width: 700px){
	div.narrow-info-column {
		width: 30%;
	}
	div.environment-image-column {
		width: 70%;
	}
}
div.sprite-animation-container {
	aspect-ratio: 4/1;
	display: flex;
	justify-content: space-between;
	column-gap: 1rem;
}
@media (min-width: 1000px) {
	div.sprite-animation-container {
		width: 120%;
		margin-left: -10%;
	}
	div.sprite-animation-info {
		width: 80%;
	}
}
div.sprite-animation-container video {
	width: 23%;
}
@media (max-width: 600px) and (min-width: 300px) {
	div.sprite-animation-container {
		flex-wrap: wrap;
		row-gap: 25%;
	}
	div.sprite-animation-container video {
		width: 47%;
	}
}
@media (max-width: 300px) {
	div.sprite-animation-container {
		flex-wrap: wrap;
		row-gap: 10%;
	}
}
#turntable-posing-and-wip {
	margin: 2rem auto auto auto;
}
#turntable-posing-and-wip img {
	width: 42%;
}
#turntable-posing-and-wip video {
	width: 56%;
	float: right;
}
#dr-shelley-sprite-wip {
	display: flex;
	gap: 1rem;
	margin-top: 2rem;
}
#dr-shelley-sprite-wip > div {
	display: flex;
	flex-direction: column;
	width: 50%;
	justify-content: space-between;
}
#dr-shelley-sprite-wip > img {
	width: 50%;
}
@media (max-width: 600px) {
	#dr-shelley-sprite-wip {
		flex-direction: column;
	}
	#dr-shelley-sprite-wip > div {
		width: 100%;
	}
	#dr-shelley-sprite-wip > img {
		width: 100%;
	}
}
div.environment-image-container {
	width: 200%;
}
#footer {
	text-align: center;
	margin-top: 2rem;
	padding: 1rem;
	background-color: #111111;
	font-size: 12px;
}