@charset "utf-8";

body, html {
	height: 100%;
	margin: 0 auto; 
}

h1 {
	text-align: center;
	font-size: 40px;
	font-family: "Lucida Console", Courier, monospace;
	font-weight: bold;
	background-color: #df03fc; 
	color: white; 
	padding: 20px;
}

h2 { 
	text-align: center; 
	font-size: 30px;
	font-family: "Lucida Console", Courier, monospace;
}

.parallax-head {
	animation: parallax-head 5s;
}
@keyframes parallax-head {
	0% { color: #fa1c14; font-size: 8px; } 
	25% { color: #000000; font-size: 16px; }
	50% { color: #4287f5; font-size: 24px;}
	75% { color: #fa143e; font-size: 32px;}
	100% { color: #fa9a14; font-size: 40px; }
}

.parallax { 
	height: 100%;
	background-image: url('background.gif');
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	animation-name: parallax;
	animation-duration: 5s;
}
@keyframes parallax {
	0% { margin: 1000px; }
	25% { margin: 500px; } 
	50% { margin: 100px; }
	75% { margin: 50px; }
	100% { margin: 0; }
}

#p1 {
	height: 220px;
	font-size: 25px;
	font-family: "Times New Roman", Times, serif;
	margin: 40px;
}

#p2 {
	background-color: white; 
	height: 150px;
	font-size: 25px;
	font-family: "Times New Roman", Times, serif;
	margin: 40px;
}

#p2 a {
	font-weight: bold;
	text-decoration: none;
	color: blue;
}

#p3 {
	background-color: white; 
	height: 350px;
	font-size: 25px;
	font-family: "Times New Roman", Times, serif;
	margin: 40px;
}

#p4 {
	background-color: white; 
	height: 600px;
	font-size: 25px;
	font-family: "Times New Roman", Times, serif;
	text-align: center;
	margin: 40px;
}

#p4 a { 
	text-decoration: none;
	color: blue; 
}

nav {
	text-align: center;
}

nav a { 
	display: inline-block;
    padding: 15px;
}

.fa {
	text-align: center; 
	font-size: 25px; 
	text-decoration: none;
	margin: 15px;
	animation-name: social;
	animation-duration: 5s;
}
@keyframes social {
	0% { font-size: 5px; } 
	25% { font-size: 10px; }
	50% { font-size: 15px;}
	75% { font-size: 20px;}
	100% { font-size: 25px; }
}

.fa-facebook {
	border: 1px; 
	border-radius: 15px;
	background: #3B5998;
	color: white;
}

.fa-instagram { 
	border: 1px; 
	border-radius: 15px;
	background-color: #bc2a8d;
	color: white;
}

.fa-twitter {
	border: 1px; 
	border-radius: 15px;
	background-color: #1da1f2;
	color: white;
}

.fa-pinterest {
	border: 1px; 
	border-radius: 15px;
	background-color: #E60023;
	color: white;
}

.fa:hover { 
	font-size: 25px; 
	text-decoration: none;
	transition: 1.0s;
}
.fa-facebook:hover {
	border: 1px; 
	border-radius: 15px;
	background: white;
	color: #3B5998;
}
.fa-instagram:hover { 
	border: 1px; 
	border-radius: 15px;
	background-color: white;
	color: #bc2a8d;
}
.fa-twitter:hover {
	border: 1px; 
	border-radius: 15px;
	background-color: white;
	color: #1da1f2;
}
.fa-pinterest:hover {
	border: 1px; 
	border-radius: 15px;
	background-color: white;
	color: #E60023;
}

#lp1 {
	border-radius: 2px;
	background-color: #0384fc;
	padding: 12px;
	color: #ffffff;
	text-decoration: none;
	font-size: 25px;
	font-family: "Lucida Console", Courier, monospace;
	font-weight: bold;
}

footer {
	text-align: center; 
	padding: 20px; 
	background-color: #df03fc; 
	color: white; 
	font-size: 25px;
	font-family: "Lucida Console", Courier, monospace;
	font-weight: bold;
}

/* mobile */ 
@media screen and (max-width: 360px) { 
	#p1 {
	height: 1300px;
	}

	#p2 {
	height: 700px;
	}

	#p3 {
	height: 1980px;
	}

	#p4 {
	height: 950px;
	} 
}