/*Setting fonts*/
@font-face {
	font-family: AndaleMono;
	src: url(andale_mono.ttf);
}

@font-face {
	font-family: Gabriola;
	src: url(gabriola.ttf);
}

body {
	margin: 0;
	font-family: AndaleMono, sans-serif;
	background-color: #b9b9b9;
	text-align: center;
	position: relative;
}

/*HEADER START*/
header {
	padding-bottom: 30%; 
	background-image: linear-gradient(#420c07 50%, #b9b9b9 80%);
	background-image: -webkit-linear-gradient(#420c07 50%, #b9b9b9 80%);
	background-image: -moz-linear-gradient(#420c07 50%, #b9b9b9 80%);
	background-image: -o-linear-gradient(#420c07 50%, #b9b9b9 80%);
}

#arrowLogo {
	margin: 3% 0 0 0;
	width: 70%;
}

/*Main menu styling*/
#navMenu {
	position: relative;
	padding: 4% 0;
}

#mainMenu {
	transform: translateY(-50%);
	transition: transform 1s ease;
}

.menuItem {
	display: inline-block;
	margin: 0 5%;
	font-family: Gabriola, cursive;
	font-size: 7vw;
	letter-spacing: 2px;
	color: #b9b9b9;
	transition: color 1s ease-in;
	text-decoration: none;
	cursor: pointer;
}

.menuItem:hover {
	color: #5d5d5d;
}

.menuItem.active {
	border-bottom:  1px solid #b9b9b9;
	font-style: italic;
	color: #b9b9b9;
}

/*Submenu styling*/
#subMenu {
	display: block;
	position: absolute;
	bottom: 0;
	width: 100%;
	padding: 2% 0;
}

.subMenuItem {
	display: none;
	opacity: 0;
	font-style: italic;
	font-size: 3vw;
	color: #b9b9b9;
	margin: 0 4% 0 4%;
	text-decoration: none;
	letter-spacing: 1px;
	transition: color 1s ease-in;
}

.subMenuItem.active {
	display: inline;
	animation: subMenuFade 1s ease-in 0s 1 normal forwards;
}

@keyframes subMenuFade {
	from {opacity: 0;}
	to {opacity: 1;}
}

.subMenuItem:hover {
	color: #5d5d5d;
}
/*HEADER END*/

/*MAIN SECTION START*/
.mainSection {
	text-align: center;
	font-size: 5vw;	
	display: none;
}

.mainSection.active {
	display: block;
	margin: -20% 2% 2% 2%;
}

#about img {
	width: 90%;
	border: 5px ridge #420c07;
	border-radius: 50%;
}

#about section {
	padding: 0 5%;
	text-align: left;
}

.mainSection h1 {
	font-family: Gabriola, cursive;
	color: #420c07;
	font-size: 15vw;
	letter-spacing: 15px;
}

.mainSection section {
	margin: 5% 0;
}

.mainSection p {
	margin: 5% 0;
	line-height: 6vw;
}

.mainSection h2 {
	display: inline-block;
	font-family: Gabriola, cursive;
	color: #420c07;
	font-size: 8vw;
	font-style: italic;
	letter-spacing: 3px;
	margin-bottom: 5%;
	border-bottom: 1px solid;
}

.writingArticle {
	position: relative;
}

.articleContents {
	display: inline-block;
	width: 70%;
	vertical-align: top;
	padding: 8% 0;
	margin: 2% 0;
	color: #000000;
}

.pieceTitle {
	font-family: Gabriola, cursive;
	font-size: 6vw;
}

.blurb {
	font-size: 3.5vw;
	letter-spacing: -1px;
}

.linkTo {
	font-size: 3vw;
	letter-spacing: -1px;
}

.linkTo a {
	color: #000000;
	text-decoration: none;
	cursor: pointer;
}

.linkTo a:hover {
	color: #420c07;
	text-decoration: underline;
}

.linkTo a:visited {
	color: #420c07;
}

.contentWarning {
	font-size: 2vw;
	letter-spacing: -1px;
}

.writingArticle img {
	display: inline-block;
	width: 25%;
	position: relative;
	margin: 2% 0;
}

.designArticle {
	position: relative;
	margin: 5% 0;
}

.designArticle img {
	width: 70%;
	text-align: center;
}

.designInfo {
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 9;	
}

.designInfo p {
	display: none;
	width: 70%;
	margin: 0 auto;
	font-size: 3vw;
	background-color: #b9b9b9c4;
}

.designInfo span {
	font-style: italic;
}

.designInfo a {
	color: #000000;
	text-decoration: none;
}

.designInfo a:hover {
	color: #420c07;
	text-decoration: underline;
}

.designInfo a:visited {
	color: #420c07;
}

.fa-info-circle {
	display: block;
	font-size: 6vw;
	color: #420c07;
	position: absolute;
	top: 0;
	right: 7%;
	cursor: pointer;
}
/*MAIN SECTION END*/

/*WEB DESIGN IFRAME SECTION*/
#responsiveContainer {
	width: 70%;
	margin: 0 auto;
}

.iframeContainer  {
	max-height: 80vw;
	overflow: hidden;
}

.iframeContainer img {
	border: none;
	border-radius: initial;
	width: 100%;
	display: block;
	position: relative;
}

.iframeContainer div {
	position: relative;
}

.desktop {
	position: relative;
	width: 100%;
}

.desktop img, .tablet img, .mobile img, .laptop img {
	position: relative;
	transform: scale(.8);	
}

.tablet img {
	z-index: 9;
} 

.mobile img {
	z-index: 40;
} 

.laptop img {
	z-index: 50;
}

#desktopiframe, #tabletiframe, #mobileiframe, #laptopiframe {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}

.desktop iframe {
	width: 361%;
	height: 267%;
	transform: scale(.2);
	position: relative;
	top: -92%;
	left: -130.5%;
}

.tablet {
	position: relative;
	width: 40%;
	transform: translateY(-70%);
}

.tablet iframe {
	width: 308%;
	height: 318%;
	transform: scale(.2);
	position: relative;
	top: -109.5%;
	left: -104%;
}

.mobile {
	position: relative;
	width: 20%;
	transform: translate(150%, -195%);
}

.mobile iframe {
	width: 342%;
	height: 265%;
	transform: scale(.2);
	position: relative;
	top: -82%;
	left: -121%;
}

.laptop {
	position: relative;
	width: 70%;
	transform: translate(60%, -285%);
}

.laptop iframe {
	width: 602%;
	height: 645%;
	transform: scale(.1);
	position: relative;
	top: -275%;
	left: -251.25%;
}

/*POPUP SECTIONS START*/
.popUp {
	display: none;
	position: absolute;
	top: 0;
	background-color: #b9b9b9;
	width: 100%;
	z-index: 99;
	padding: 10% 2%;
	background-image: linear-gradient(#420c07,#b9b9b9 5%,#b9b9b9 95%,#420c07);
}

.fa-times {
	position: absolute;
	top: 1%;
	right: 3%;
	cursor: pointer;
	font-size: 5vw;
}

.popUp h1 {
	font-size: 7vw;
	letter-spacing: 2px;
}

.popUp p {
	text-align: left;
	font-size: 4vw;
}

#passingBy p {
	font-size: 3vw;
}

#mirror p {
	text-align: center;
}

#countdown p::first-line {
	text-indent: 10%;
}

.popUp span {
	float: right;
}

/*ASIDE START*/
#socialLinks {
	width: 100%;
	padding: 2% 0;
	margin: 2% 0;
	z-index: 9;
}

#socialLinks a {
	display: inline-block;
	margin: 0% 5%;
	font-size: 8vw;
	transition: all 1s ease;
	opacity: .5;
}

.fa-twitter {
	color: #1DA1F2;
}

.fa-linkedin {
	color: #0072b1;
}

.fa-envelope {
	color: #D44638;
}

.upWorkBackground {
	width: 7vw;
	height: 7vw;
	visibility: visible;
	background-color: #32cd32;
	background-image: url("../images/upWorkWhite.png");
	background-size: contain;
	border-radius: 5%;
	transition: all 1s ease;
}

#socialLinks a:hover, .upWorkBackground:hover {
	opacity: 1;
}
/*ASIDE END*/

/*FOOTER START*/
footer {
	background-image: linear-gradient(#b9b9b9, #420c07);
	background-image: -webkit-linear-gradient(#b9b9b9, #420c07);
	background-image: -moz-linear-gradient(#b9b9b9, #420c07);
	background-image: -o-linear-gradient(#b9b9b9, #420c07);
}

footer img {
	display: block;
	width: 100%;
}

#copyright {
	position: absolute;
	bottom: .5%;
	color: #b9b9b9;
	opacity: .3;
	font-size: 1.5vw;
	right: .5%;
	line-height: 2vw;
}
/*FOOTER END*/




/*DESKTOP VIEW START*/
@media screen and (min-width: 780px) {

	body {
		text-align: left;
		background-image: linear-gradient(to right, #420c07 13vw, #b9b9b9 20vw);
		background-image: -webkit-linear-gradient(to right, #420c07 13vw, #b9b9b9 20vw);
		background-image: -moz-linear-gradient(to right, #420c07 13vw, #b9b9b9 20vw);
		background-image: -o-linear-gradient(to right, #420c07 13vw, #b9b9b9 20vw);
	}

	header {
		padding-bottom: 0;
		background-image: none;
		display: inline-block;
		width: 20%;
		position: fixed;
	}

	#arrowLogo {
		width: 100%;
	}

	#mainMenu {
		transform: initial;
		transition: initial;
	}

	.menuItem {
		margin: 5% 5% 5% 20%;
		font-size: 3vw;
		transition: all 1s ease-in;
	}

	.menuItem.active {
		border-bottom: none;
		font-size: 5vw;
		letter-spacing: 2vw;
		color: #420c07;
		font-style: normal;
		margin-bottom: 25%;
		transition: all 1s ease-in;
	}

	.menuItem.active span {
		color: #b9b9b9;
	}

	#subMenu {
		width: 70%;
		margin-left: 20%;
		bottom: 45%;
		padding: 0;
	}

	.subMenuItem {
		font-size: 1vw;
		margin: 6% 0;
	}

	.subMenuItem.active {
		display: block;
	}

	/*MAIN SECTION START*/

	main {
		display: inline-block;
		width: 72%;
		margin: 0 0 0 27%;
		vertical-align: top;
	}

	.mainSection.active {
		margin: 0;
	}

	.mainSection h1 {
		display: none;
	}

	.mainSection section {
		display: block;
	}

	.mainSection h2 {
		display: inline-block;
		width: 51%;
		font-size: 4vw;
	}

	.mainSection article {
		display: inline-block;
		width: 45%;
		vertical-align: top;
		margin: 3% 1%;
	}

	.mainSection p {
		line-height: 2vw;
	}

	.articleContents {
		padding: 4% 0;
	}

	.pieceTitle {
		font-size: 3vw;
	}

	.blurb {
		font-size: 1.5vw;
	}

	.linkTo {
		font-size: 1.35vw;
		margin-bottom: 0 !important;
	}

	.contentWarning {
		display: inline-block;
		font-size: 1vw; 
	}

	.writingArticle img {
		float: right;
	}

	.writingArticle:nth-of-type(3) img, .writingArticle:nth-of-type(4) img {
		float: left;
	}

	.fa-info-circle {
		font-size: 2vw;
		right: 5%;
	}

	.designInfo p {
		font-size: 1.5vw;
	}

	#graphicDesign {
		width: 90%;
	}

	#grpahicDesign .designArticle {
		width: 45%;
	}
	
	#webDesign {
		width: 90%;
	}

	#webDesign .designArticle {
		width: 100%;
	}

	#responsiveContainer {
		width: 100%;
	}


	.writingArticle {
		position: static;
	}

	#shortStories, #poetry, #plays {
		position: relative;
	}

	.popUp {
		position: absolute;
		right: 1%;
		width: 98%;
	}

	.fa-times {
		font-size: 2vw;
		right: 1%;
	}

	.popUp h1 {
		display: block;
		font-size: 4vw;
	}

	.popUp p {
		padding: 0 10%;
		font-size: 1.5vw;
	}

	.popUp span {
		transform: translateX(-125%);
	}

	#passingBy p {
		font-size: 1.5vw;
	}

	.iframeContainer  {
		max-height: 62vw;
	}

	/*SOCIAL LINKS START*/

	#socialLinks {
		position: fixed;
		width: 10%;
		top: 45%;
		margin: 0;
		padding: 0;
	}

	#socialLinks a {
		display: block;
		margin: 20% 0 20% 40%;
		font-size: 3vw;
	}

	.upWorkBackground {
		width: 3vw;
		height: 3vw;
	}

	.fa-envelope {
		color: #b9b9b9;
	}

	#about h1 {
		display: inline-block;
		font-size: 4vw;
		font-style: italic;
		letter-spacing: 3px;
		margin-bottom: 5%;
		border-bottom: 1px solid;
		width: 51%
	}

	#about section {
		width: 90%;
	}

	#about p {
		font-size: 1.5vw;
		line-height: 2vw;
		padding: 0 10%;
		text-align: left;
	}

	#about img {
		width: 50%;
	}

	footer {
		background-image: none;
		position: sticky;
		bottom: -10%;
	}

	
}

@media screen and (max-height: 500px) {

	#socialLinks {
		top: 50%;
	}

}

@media screen and (max-height: 450px) {

	#socialLinks {
		top: 55%;
	}

}

@media screen and (max-height: 400px) {

	#socialLinks {
		top: 60%;
	}

}

@media screen and (max-height: 350px) {

	#socialLinks {
		top: 70%;
	}

}

@media screen and (max-height: 300px) {

	#socialLinks {
		top: 80%;
	}

}

@media screen and (max-height: 250px) {

	#socialLinks {
		top: 90%;
	}

}


/*DESKTOP VIEW END*/