

body{
	
	background: no-repeat fixed center; 
	background-image: linear-gradient(#891CFF, #00C4FF);
	color: #FFFFFF;
	font-family: 'Montserrat', Helvetica, Arial, sans-serif;
	width: 100%;
	height: 100%;
	font-size: 16px;
}


a{
	color: #ffffff;
	text-decoration: none;
}

main{
	margin: 0 auto; 
}

header{
	margin: 80px 0 80px 0;
	line-height: 160%;
}


h1{
	margin: 64px 0 32px 0;
}

h2{
	line-height: 160%;
}

p{
	font-size: 1.2rem;
	line-height: 160%;
}


section{
	background: rgb(0, 0, 0, 0.5);
	padding: 16px 32px;
	margin: 24px 0;
	border-radius: 8px;
}

a:hover section{
	background-color: #000000;
	opacity: 0.6;
}

section p{
	color: #FFFFFF;
}

section img{
	margin: 16px 32px 32px 0;
}

section ul{
	list-style: none;
	margin: 0;
	padding: 16px 0 16px 0;
	line-height: 160%;
}

section ul li{
	font-size: 1rem;
	line-height: 160%;
	padding: 0 24px 0 0;
}

.smallH1 h4{
	font-size: 42px;
	margin:  32px 0 32px 0;
	}


nav{
	background: rgb(0, 0, 0, 0.5);
	padding: 24px 32px;
	margin: 24px 0;
	border-radius: 8px;
}

nav div{
	margin:  0 auto;
	width: 520px;
}

nav img{
	margin: 0 24px 0 0;
}



/*RESPONSIVE WEB FROM W3C*/
/*@media only screen and (max-width: 320px) {

	main{
		width:90%;
	}
	header{
		margin: 0;
	}
	h1{
		font-size: 5rem;
	}
	h2{
		font-size: 3.5rem;
	}
	section ul li{
		font-size: 2.2rem;
	}
	#Laquote{
		font-size: 2.5rem;
		font-weight: 500;
		padding: 0 24px 24px 0;
		opacity: 0.4;
	}

	main #backButton{
		font-size: 2.2rem;
	}

}*/


/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
	
	*{
	line-height: 140%;
	}
	
	main{
		width:90%;

	}
	header{
		margin: 0;
	}
	h1{
		font-size: 2.5rem;
	}
	h2{
		font-size: 1.5rem;
	}
	h3{
		font-size: 1.3rem;
	}
	h4{
		font-size: 1.3rem;
	}
	p{
		font-size: 1.0rem;
	}
	section ul li{
		font-size: 1.0rem;
	}
	#Laquote{
		font-size: 1.2rem;
		font-weight: 500;
		padding: 0 24px 24px 0;
		opacity: 0.4;
	}
	main #backButton{
		font-size: 1.2rem;
	}

}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {

	main{
		width:80%;
	}

	header{
		margin: 0;
	}

	h1{
		font-size: 2.5rem;
	}

	h2{
		font-size: 1.5rem;
	} 
	h3{
		font-size: 1.3rem;
	}
	h4{
		font-size: 1.3rem;
	}
	section ul li{
		font-size: 1.2rem;
	}

	#Laquote{
		font-size: 1.5rem;
		font-weight: 500;
		padding: 0 24px 24px 0;
		opacity: 0.4;
	}

	main #backButton{
		font-size: 1.2em;;
	}

} 
 

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
	main{
		width:80%;
	}
	header{
		margin: 0;
	}
	h1{
		font-size: 3rem;
	}
	h2{
		font-size: 2rem;
	} 
	section ul li{
		font-size: 1.2rem;
	}

	#Laquote{
		font-size: 1.5rem;
		font-weight: 500;
		padding: 0 24px 24px 0;
		opacity: 0.4;
	}

	main #backButton{
		font-size: 1.5em;;
	}

} 

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
	main{
		width:50%;
	}
	header{
		margin: 0;
	}
	h1{
		font-size: 4rem;
	}
	h2{
		font-size: 2rem;
	} 

	section ul li{
		font-size: 1.2rem;
	}

	#Laquote{
		font-size: 1.5rem;
		font-weight: 500;
		padding: 0 24px 24px 0;
		opacity: 0.4;
	}
	
	main #backButton{
		font-size: 1.5em;;
	}


} 


/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {...}







p { 
	margin-top: -16px;
}