/*Nicholas Boni
15 May 2023*/

/*-------------------------------------*/
/*-------------------------------------*/
/*Sitewide style*/
/*-------------------------------------*/
/*-------------------------------------*/

html{
	scroll-behavior: smooth;
}

a{
	color: #5c72ff;
}

/* h1{
	margin-top: 0;
	margin-bottom: 0;
} */

/* 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: 1em;
	margin-left: 15%;
	margin-right: 15%;
	margin-bottom: 1em;
	text-align: justify;
}

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

body{
	margin:0;
}

ul{
	font-family: "Baskerville Old Face",Times,serif;
	font-size: 14pt;
}

.indent{
	margin-left: 15%;
}

.no-indent{
	margin-left: 0;
}

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

/* footer{
	font-family: "Baskerville Old Face",Times,serif;
	font-size: 14pt;
	margin-top: 1em;
	margin-left: 15%;
	margin-right: 15%;
	margin-bottom: 1em;
} */

.bw-header{
	margin:0px;
	padding-left: 10%;
	font-family:"Arial",sans-serif;
	font-size: xx-large;
	background-color:black;
	color:white;
}

.header-no-bg{
	margin: 0px;
	padding-top: 35px;
	padding-left: 10%;
	font-family: Arial, sans-serif;
	font-size: xxx-large;
	color: black;
}

.block-photo{
	width: 100%;
	height: auto;
	margin: 0;
	display: block;
}

/*-------------------------------------*/
/*-------------------------------------*/
/*Icons*/
/*-------------------------------------*/
/*-------------------------------------*/

.nav-icon{
	position: absolute;
	top: 35px;
	left: 15px;
	width: 50px;
	height: 50px;
}

/*-------------------------------------*/
/*-------------------------------------*/
/*Animations*/
/*-------------------------------------*/
/*-------------------------------------*/

@keyframes fade-out{
	from{opacity: 100%}
	to{opacity: 0%}
}

@keyframes fade-in{
	from{opacity: 0%}
	to{opacity: 100%}
}

@keyframes title-slide{
	from{left: -400px}
	to{left: 500px}
}

@keyframes dance {
	0% {transform: translate(10px, 10px);}
	17% {transform: translate(-10px, -10px);}
	33% {transform: translate(10px, 10px);}
	50% {transform: translate(-10px, -10px);}
	67% {transform: translate(10px, 10px);}
	83% {transform: translate(-10px, -10px);}
	100% {transform: translate(0px, 0px);}
}

@keyframes rainbow {
	0% {color: aqua;}
	20% {color: darkorchid;}
	40% {color:antiquewhite}
	60% {color:chocolate}
	80% {color:aquamarine }
}

/*-------------------------------------*/
/*-------------------------------------*/
/*Index style*/
/*-------------------------------------*/
/*-------------------------------------*/

.index-body{
    background-image: url(https://nicholasboni.com/images/index/sand.jpg);
	background-repeat: repeat;
}

.landing-img{
	display: block;
	content: url(https://nicholasboni.com/images/index/orangesky.jpg);
	width: 100%;
	height: auto;
}

.orange-sky{
	width: 100%;
	height: auto;
}

.drop-shadow{
	text-shadow: 2px 2px 3px black,
	-2px -2px 3px black,
	2px -2px 3px black,
	-2px 2px 3px black;
}

.landing-text{
	color:aqua;
	position: absolute;
	text-align: center;
	animation-iteration-count: 1;
	font-family:'Baskerville Old Face',Times,serif; 
	font-size: xxx-large;
}

.landing-text:hover{
	color: yellow;
}

.landing-text:active{
	color: black;
}

.landing-link{
	animation-name: fade-in;
	animation-delay: 1.0s;
	animation-fill-mode: both;
}

#site-name{
	font-weight: normal;
	color: black;
	text-shadow: 2px 2px 3px white,
				-2px -2px 3px white,
				2px -2px 3px white,
				-2px 2px 3px white;
	top: 150px;
	left: 600px;
	margin: 0;
	animation-name: dance; 
	animation-timing-function: step-end;
	animation-iteration-count: 1;
	animation-duration: 4s;
	animation-fill-mode: both;
}

#writing-link{
	top: 100px;
	left: 10px;
	animation-name: fade-in;
	animation-duration: 0.5s;
}

#photos-link{
	top: 200px;
	left: 110px;
	animation-name: fade-in;
	animation-duration: 1s;
}

#music-link{
	top: 300px;
	left: 210px;
	animation-name: fade-in;
	animation-duration: 1.5s;
}

#about-link{
	top: 400px;
	left: 310px;
	animation-name: fade-in;
	animation-duration: 2s;
}

#latest-letter-link{
	animation-name: rainbow;
	animation-fill-mode: forwards;
	animation-delay: 3s;
	animation-iteration-count: 3;
	animation-duration: 3s;
	top: 400px;
	left: 600px
}

.index-link{
	color: white;
}

/*-------------------------------------*/
/*-------------------------------------*/
/*Photo page style*/
/*-------------------------------------*/
/*-------------------------------------*/

.trash-world{
	display: block;
	width: 100%;
	max-height: 100vh;
}

.photo-page-link{
	position: absolute;
	font-family: "Baskerville Old Face",Times,serif;
	font-size: xxx-large;
	color: white;
}

.photo-page-link:hover{
	color: yellow;
}

.photo-page-link:active{
	color: black;
}

#portrait-link{
	top: 10%;
	left: 10%;
}

#erin-link{
	top:22%;
	left:10%;
}

#snatch-the-bag-link{
	top: 34%;
	left: 10%;
}

#gridlock-link{
	top: 46%;
	left: 10%;
}

#rebels-link{
	top: 58%;
	left: 10%;
}

#biden-link{
	top: 70%;
	left: 10%;
}

#asunder-link{
	top: 82%;
	left: 10%;
}

/*-------------------------------------*/
/*-------------------------------------*/
/*Writing and Letters page style*/
/*-------------------------------------*/
/*-------------------------------------*/

.writing-h1{
	padding-top: 35px;
	padding-left: 10%;
	font-family: Arial, sans-serif;
	font-size: xxx-large;
}

.writing-body{
	background-image: url(https://nicholasboni.com/images/writing/paper2.jpg);
}

/* .writing-links{
	margin-top: 1%;
	margin-bottom: 1%;
	margin-left: 15%;
	font-family: "Baskerville Old Face",Times,serif;
	font-size: 14pt;
} */

.check-my-phone-meme{
	display: block;
	max-width: 40%;
	max-height: auto;
	width: 50%;
	margin-left: auto;
	margin-right: auto;
}

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

.poetry{
	font-family:"Baskerville Old Face",Times,serif;
	font-size: 14pt;
	margin-left: 15%;
	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;
}

/*-------------------------------------*/
/*-------------------------------------*/
/*Music style*/
/*-------------------------------------*/
/*-------------------------------------*/

.embedded-player{
	position: absolute; 
	border: 0; 
	width: 382px; 
	height: 500px; 
}

.music-toc{
	width: 500px; 
	border: 1px solid black;
}

.album-container{
	position: relative;
	height: 500px; 
	width: 1000px;
}

.album-notes{
	position: relative;
	margin: 0;
	top: 0;
	margin-left: 400px;
}

.sound-credit{
	position: static;
	width: 500px;
	margin: 0;
	/* margin-left: 500px; */
}

.studio-img{
	position: absolute;
	margin-top: 0px;
	margin-left: 500px;
}

#hum{
	top: 0;
	background-color: aliceblue;
}

#work{
	top: 245px;
	background-color: burlywood;
}

#people-house{
	top: 445px;
	background-color: hotpink;
}


.lfla-player-notes{
	position: relative; height: 500px;
}

/*-------------------------------------*/
/*-------------------------------------*/
/*About style*/
/*-------------------------------------*/
/*-------------------------------------*/

.about-header{
	position: absolute; 
	top: 20%;
	font-size: xxx-large;
}

.about-p{
	position: absolute; 
	top: 30%; 
	color: white;
	text-shadow: 2px 2px 3px black,
	-2px -2px 3px black,
	2px -2px 3px black,
	-2px 2px 3px black;
}

/*-------------------------------------*/
/*-------------------------------------*/
/*404 style*/
/*-------------------------------------*/
/*-------------------------------------*/

.fourohfour-p{
	position: absolute; 
	top: 30%; 
	color: white;
	text-shadow: 2px 2px 3px black,
	-2px -2px 3px black,
	2px -2px 3px black,
	-2px 2px 3px black;
}