/*Nick Boni
Fall 2020*/

/*-------------------------------------*/

html{
	scroll-behavior: smooth;
}

/*-------------------------------------*/
/*-------------------------------------*/
/*General text styling stuff*/
/*-------------------------------------*/
/*-------------------------------------*/

h1{
	margin:0px;
	padding-left: 5px;
	font-family:"Arial",sans-serif;
	background-color:black;
	color:white;
}

h2{
	font-family:"Baskerville Old Face",Times,serif;
	font-size: 18pt;
	margin-top: 5%;
	margin-left: 15%;
	margin-right: 15%;
	margin-bottom: 5%;
	text-align: left;
}

p{
	font-family:"Baskerville Old Face",Times,serif;
	font-size: 14pt;
	margin-top: 5%;
	margin-left: 15%;
	margin-right: 15%;
	margin-bottom: 5%;
	text-align: justify;
}

body{
	margin:0;
}


/*ul li{
	margin-top: 2%;
	margin-left: 15%;
	font-family: "Baskerville Old Face",Times,serif;
	font-size: 14pt;
}*/

nav{
	font-family:"Baskerville Old Face",Times,serif;
	font-size: 14pt;
	margin-left: 15%;
	margin-right: 15%;
	margin-bottom: 5%;
}


/*-------------------------------------*/
/*-------------------------------------*/
/*Sitewide format*/
/*-------------------------------------*/
/*-------------------------------------*/

.back_to_top{
	font-family:"Baskerville Old Face",Times,serif;
	font-size: 14pt;
	position: relative;
	width: max-content;
	bottom: 20%;
	left: 80%;
}

.homeicon{
	position: absolute;
	top: 20px;
	left: 20px;
	width: 50px;
	height: 50px;
	max-width: 100%;
}

.container{
		position: relative;
	}

/*-------------------------------------*/
/*-------------------------------------*/
/*Image styling stuff*/
/*-------------------------------------*/
/*-------------------------------------*/

/*img{
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	/*max-width: 100%;*/
	/*height: auto;
	z-index: 0;
}
*/
/*-------------------------------------*/
/*-------------------------------------*/
/*Index style*/
/*-------------------------------------*/
/*-------------------------------------*/

@media only screen and (max-width: 759px){

	/*.orangesky{
		width: 450px;
		height: 301px;
	}*/

	.orangesky{
		max-width: 100%;
		height: auto;
	}


	.landing_text{
		position: fixed;
		top: 5%;
		/*left: 15%;*/
		text-align: center;
		font-family:'Baskerville Old Face',Times,serif; 
		font-size: xx-large;
		color: white;
		animation-name: fade_out;
		animation-delay: 3s;
		animation-duration: 3s;
		animation-iteration-count: 1;
		animation-fill-mode: forwards;
	}

	.photos_text{
		position: fixed;
		top: 35%;
		/*left: 50%;*/
		text-align: center;
		font-family: 'Baskerville Old Face',Times,serif;
		font-size: xx-large;
		animation-name: fade_in;
		animation-delay: 1.0s;
		animation-duration: 0.5s;
		animation-iteration-count: 1;
		animation-fill-mode: both;
		/*-webkit-backface-visibility: hidden;*/
	}

	.writing_text{
		position: fixed;
		top: 50%;
		/*left: 50%;*/
		text-align: center;
		font-family: 'Baskerville Old Face',Times,serif;
		font-size: xx-large;
		animation-name: fade_in;
		animation-delay: 1.0s;
		animation-duration: 1.0s;
		animation-iteration-count: 1;
		animation-fill-mode: both;
	}

	.about_text{
		position: fixed;
		top: 65%;
		/*left: 50%;*/
		text-align: center;
		font-family: 'Baskerville Old Face',Times,serif;
		font-size: xx-large;
		animation-name: fade_in;
		animation-delay: 1.0s;
		animation-duration: 1.5s;
		animation-iteration-count: 1;
		animation-fill-mode: both;
	}
}

@media only screen and (min-width: 760px){

	.container{
		position: relative;
	}

	.orangesky{
		max-width: 100%;
		height: auto;
	}

	.landing_text{
		position: fixed; /*fix text position on resize*/
		top: 35%;
		left: 55%;
		color: white;
		text-align: center;
		animation-name: fade_out;
		animation-delay: 3s;
		animation-duration: 3s;
		animation-iteration-count: 1;
		animation-fill-mode: forwards;
		font-family:'Baskerville Old Face',Times,serif; 
		font-size: xxx-large;
	}

	.photos_text{
		position: fixed;
		top: 50%;
		left: 10%;
		color: white;
		text-align: center;
		animation-name: fade_in;
		animation-delay: 1.0s;
		animation-duration: 0.5s;
		animation-iteration-count: 1;
		animation-fill-mode: both;
		font-family: 'Baskerville Old Face',Times,serif;
		font-size: xxx-large;
	}

	.writing_text{
		position: fixed;
		top: 60%;
		left: 45%;
		color: white;
		text-align: center;
		animation-name: fade_in;
		animation-delay: 1.0s;
		animation-duration: 1.0s;
		animation-iteration-count: 1;
		animation-fill-mode: both;
		font-family: 'Baskerville Old Face',Times,serif;
		font-size: xxx-large;	
	}

	.about_text{
		position: fixed;
		top: 70%;
		left: 75%;
		color: white;
		text-align: center;
		animation-name: fade_in;
		animation-delay: 1.0s;
		animation-duration: 1.5s;
		animation-iteration-count: 1;
		animation-fill-mode: both;
		font-family: 'Baskerville Old Face',Times,serif;
		font-size: xxx-large;
	}
}

@keyframes fade_out{
	from {opacity:100%}
	to {opacity:0%}
}

@keyframes fade_in{
	from {opacity: 0%}
	to {opacity: 100%}
}

/*-------------------------------------*/
/*-------------------------------------*/
/*Responsive style*/
/*-------------------------------------*/
/*-------------------------------------*/


@media only screen and (min-width: 873px){
	.photo_series_links{
		position: absolute;
		top: 5%;
		left: 0%;
		text-align: center;
		font-family: "Baskerville Old Face",Times,serif;
		font-size: xxx-large;
	}

	.trashworld{
		position: relative;
		width: 100%;
		max-width: 100%;
		height: auto;
		margin-left: auto;
		margin-right: auto;
	}

	.poetry{
		font-family:"Baskerville Old Face",Times,serif;
		font-size: 14pt;
		margin-top: 0px;
		margin-left: 15%;
		margin-right: 2%;
		margin-bottom: 0px;
		text-align: left;
		white-space: pre;	
	}

	.poem-title{
		font-family:"Baskerville Old Face",Times,serif;
		font-size: 18pt;
		margin-top: 5%;
		margin-left: 15%;
		margin-right: 5%;
		margin-bottom: 5%;
		text-align: left;
	}
}

@media only screen and (max-width: 872px){
	/*body{
		background-color: black;
	}*/

	.photo_series_links{
		position: fixed;
		top: 5%;
		left: 0%;
		text-align: center;
		font-family: "Baskerville Old Face",Times,serif;
		font-size: x-large;
	}

	.trashworld{
		position: relative;
		height: 100vh;
	}

	.poetry{
		font-family:"Baskerville Old Face",Times,serif;
		font-size: 14pt;
		margin-top: 0px;
		margin-left: 5%;
		margin-right: 2%;
		margin-bottom: 0px;
		text-align: left;
		white-space: pre;	
	}

	.poem-title{
		font-family:"Baskerville Old Face",Times,serif;
		font-size: 18pt;
		margin-top: 5%;
		margin-left: 5%;
		margin-right: 5%;
		margin-bottom: 5%;
		text-align: left;
	}
}

/*-------------------------------------*/
/*-------------------------------------*/
/*Portrait page style*/
/*-------------------------------------*/
/*-------------------------------------*/

.photo{
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	max-width: 100%;
	height: auto;
	z-index: 0;
}


/*-------------------------------------*/
/*-------------------------------------*/
/*Writing page style*/
/*-------------------------------------*/
/*-------------------------------------*/

.writing_links{
	margin-top: 2%;
	margin-bottom: 2%;
	margin-left: 15%;
	font-family: "Baskerville Old Face",Times,serif;
	font-size: 14pt;
}


/*-------------------------------------*/
/*-------------------------------------*/
/*Poetry style*/
/*-------------------------------------*/
/*-------------------------------------

.poetry{
	font-family:"Baskerville Old Face",Times,serif;
	font-size: 14pt;
	margin-top: 0px;
	margin-left: 5%;
	margin-right: 2%;
	margin-bottom: 0px;
	text-align: left;
	white-space: pre;	
}

.poem-title{
	font-family:"Baskerville Old Face",Times,serif;
	font-size: 18pt;
	margin-top: 5%;
	margin-left: 15%;
	margin-right: 5%;
	margin-bottom: 5%;
	text-align: left;
}

-------------------------------------*/
/*-------------------------------------*/
/*Menu icon styling*/
/*-------------------------------------*/
/*-------------------------------------

.menu_icon{
	display: inline-block;
	position: absolute; /* absolute 
	cursor: pointer;
	top: 5%;
	left: 5%;
	z-index: 999;
}

.bar1, .bar2, .bar3{
	width: 35px;
	height: 5px;
	background-color: #333;
	margin: 6px 0;
	transition: 0.2s;
}

.change .bar1{
	-webkit-transform: rotate(-45deg) translate(-9px, 6px); /*compat?
	transform: rotate(-45deg) translate(-9px, 6px);
}

.change .bar2{
	opacity: 0;
}

.change .bar3{
	-webkit-transform: rotate(45deg) translate(-8px, -8px);
	transform: rotate(45deg) translate(-8px, -8px);
}

/*-------------------------------------*/
/*-------------------------------------*/
/*Sidebar styling*/
/*-------------------------------------*/
/*-------------------------------------

.sidebar{
	height: 100%;
	width: 0;
	position: fixed;
	z-index: 1;
	top: 0;
	left: 0;
	background-color: #111;
	overflow-x: hidden;
	padding-top: 60px;
	transition: 0.5s;
}

.sidebar a{
	padding-top: 500px;
	padding: 25px 8px 8px 32px;
	text-decoration: none;
	font-family: "Arial",sans-serif;
	font-size: 25px;
	color: #818181;
	display: block;
	transition: 0.3s;
}

.sidebar a:hover{
	color: #f1f1f1;
}

/*Anything with the 'main' tag will be
pushed to the right when the menu opens.
#main{
	transition: margin-left 0.5s;
}


/*-------------------------------------*/
/*-------------------------------------*/
/*-------------------------------------*/
/*-------------------------------------*/