@charset "UTF-8";

/*FONTS*/

.pacifico-regular {
  font-family: "Pacifico", cursive;
  font-weight: 400;
  font-style: normal;
}

.delius-swash-caps-regular {
  font-family: "Delius Swash Caps", cursive;
  font-weight: 400;
  font-style: normal;
}

.shadows-into-light-two-regular {
  font-family: "Shadows Into Light Two", cursive;
  font-weight: 400;
  font-style: normal;
}


/*GLOBAL STYLES*/

body {
	margin-bottom: 6em;
	background-color: #FBE487;
}

#main {
	width: 100%;
	min-width: 300px;
	max-width: 1500px;
	margin: 0 auto;
}

header {
	width: 95%;
	margin: 1em auto;
}

nav {
	width: 180px;
	margin: 2em auto 1.5em auto;
}

div.back, div.home, div.next {
	width: 40px;
	height: 30px;
	float: left;
	background-size: 95%;
	background-repeat: no-repeat;
	transition: all 3s ease;
}

div.back {
	background-image:
}

div.home {
	background-image:
}

div.next {
	background-image:
}

header img {
	width: 100%;
	align-content: center;
}

#title {
	width: 100%;
	margin: 0 auto;
	text-align: center;
}

h1{
	font-size: 4em;
	color: #F52532;
	margin-bottom: 0.1em;
	font-family: "Pacifico", cursive;
  	font-weight: 10;
  	font-style: normal;
}

h2 {
	font-size: 2em;
	color: #EF7F01;
	margin-top: 1em;
	font-family: "Delius Swash Caps", cursive;
  	font-weight: 400;
  	font-style: normal;
}

h3 {
	font-size: 1.25em;
	color: #EF7F01;
	margin-top: 0.5em;
  	font-family: "Shadows Into Light Two", cursive;
  	font-weight: 400;
  	font-style: normal;
}

blockquote{
	font-size: 2em;
	font-family: "Pacifico", cursive;
  	font-style: normal;	
	width: 85%;
	border: 2px solid #8E41B8;
	border-radius: 5px;
	background-color: #F3AE50;
	color: white;
	text-align: center;
	margin: .5em auto;
	line-height: 1.5;
}


p {
	font-family: "Delius Swash Caps", cursive;
    font-weight: 400;
    font-style: normal;
    text-indent: 50px;
	line-height: 1.8;
	margin-bottom: 10px;

}

article {
	width: 90%;
	margin: 0 auto;
}

img{
	margin: auto;
	display: flex;
}

/*MEDIA QUERIES*/

@media (min-width: 395px){

	div.back, div.home, div.next {
		width: 42px;
		height: 32px;
	}

	nav {
		width: 220px;
		margin: 2em auto 1.5em;
	}
	
	header {
		width: 55%;
		margin: 1em auto;
	}
	
	#title {
		width: 100%;
		margin: 0 auto;
	}
	
	#title h1 {
		font-size: 4.5em;
		margin-top: .5em;
		margin-bottom: .25em;
		text-align: center;
	}
	
	article {
		width: 90%;
		margin: 0.5em auto;
	}
	article p {
		font-size: 1em;
		line-height: 2em;
	}
	

	
}

@media (min-width: 500px){

	header {
		width: 90%;
	}
	
	blockquote {
		width: 75%;
		font-size: 2em;
	}
	
	article {
		width: 90%;
		margin: 0.5em auto
	}
}

@media (min-width: 600px) {
	
	header {
		width: 65%
	}
	
	blockquote{
		width: 70%;
	}
}

@media (min-width: 750px){
	
	header img{
		width: 70%;
	}
	
	#title h1{
		font-size: 6em;
	}
	
	#title h2{
		font-size: 3em;
	}
	
	#title h3{
		font-size: 2em;
	}
	
	article p {
		font-size: 1.5em;
		line-height: 1.75em;
	}
	
	blockquote {
		font-size: 2.5em;
	}
	
	nav {
		width: 240px;
	}
	
	div.back, div.home, div.next {
		width: 44px;
		height: 34px;
	}
}
	
@media (min-width: 1000px){

	nav {
		width: 275px;
		margin: 3em auto 2.5em;
	}
	div.back, div.home, div.next {
		width: 46px;
		height: 37px;
	}
	
	header img{
		width: 80%;
	}
	
	#title{
		width: 100%;
	}
	
	article {
		width: 100%;
	}
	
	
}
	
	
	
@media (min-width: 1250px) {

	article {
		width: 100%;
		margin: auto;
	}
	
	
}