A2.css

body{
	margin: 0;
	background-color: #f6f6e2
}

/* The part below is the navigation bar for all pages*/

.logo{
	margin-top: .15%;
	float: left;
	height: 100%;
	width: 10%;
}
nav ul{
	list-style: none;
	margin: 0;
	position: fixed;
	overflow: hidden;
	top: 0;
	background-color: #143352;
	width: 100%;
	height: 7%;
	
}
nav ul li{
	margin-right: 20px;
	float: right;
}
nav ul li a{
	margin-right: 30px;
	display: block;
	text-align: center;
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
	font-size: 20px;
	color: #f6f6e2;
	padding: 12px 20px;
	text-decoration: none;
	border-bottom: 1px solid transparent;
}
nav ul li a:hover{
	padding: 15px 50px;
	border-bottom-width: 1px;
	border-bottom-color: #f6f6e2;
}
.active{
	font-weight: 900; 
	border-bottom-width: 2px;
	border-bottom-color: #f6f6e2;
}







/* The part below is the footer for all pages*/
footer{
	height: auto;
	display: flex;
	background-color: #143352;
	left: 0;
	bottom: 0;
	width: 100%;
	color: #f6f6e2;
}
footer div{
	width: 33%;
	align-content: center;
}
footer div a{
	color: #f6f6e2;
}
footer div a:hover{
	opacity: 0.6;
}










/* The part below is the home page*/
.home{
	background-image: url('images/anas.jpg');
	background-size: 100% 100%;
	height: 900px;
	width: 100%;
	display: flex;
	align-items: center;
}
.intro{
	display: flex;
	flex-direction: column;
	position: absolute;
	left: 17%;
	top: 50%;
	transform: translate(-17%, -50%);
	align-content: center;
}
.intro h1{
	right: 30px;
	align-self: center;
	margin: 0;
	font-family: 'Open Sans', sans-serif;
	font-weight: 600;
	font-size: 40px;
	text-shadow: 2px 2px;
}
.intro h2{
	align-self: center;
	margin: 0;
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
	font-size: 30px;
}
.intro a{
	align-self: center;
}
.intro a:hover{
	opacity: 0.6;
}
.intro button{
	align-self: center;
	width: 150px;
	height: 50px;
	color: #f6f6e2;
	background-color: #143352;
	font-family: 'Open Sans', sans-serif;
	font-weight: 600;
	font-size: 20px;
	border-radius: 20px;
}
.about{
	height: 700px;
	width: 70%;
	display: flex;
	left: 5%;
	transform: translate(-5%);
	border-radius: 20px;
	background-color: #143352;
	margin: -2% auto 50px auto;
	position: relative;
}
.smallanas{
	background-image: url('images/smallanas.png');
	background-size: 100% 100%;
	height: 80%;
	width: 30%;
	border-width: 7px;
	border-style: solid;
	border-color: #f6f6e2;
	display: flex;
	align-self: center;
	margin-left: 5%;
	border-radius: 20px;
}
.aboutsummary{
	height: 80%;
	width: 50%;
	background-color: #f6f6e2;
	display: flex;
	align-self: center;
	margin-left: 8%;
	border-radius: 20px;
	flex-direction: column;
}
.aboutsummary h1{
	font-family: 'Open Sans', sans-serif;
	font-weight: 600;
	font-size: 30px;
	text-decoration: underline;
	margin-left: 5%;
}
.aboutsummary p{	
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
	font-size: 20px;
	margin-left: 5%;
}












/* The part below is the contact page*/
.contact{
	width: 80%;
	height: 800px;
	margin: 100px auto;
	display: flex;
	align-self: center;
	border-width: 2px;
	border-style: solid;
	border-color: #143352;
}
.contact h1{
	align-self: center;
}
.contact p{
	align-self: center;
}
.contactleft{
	height: 80%;
	width: 35%;
	margin-left: 2%;
	margin-top: 5%;
	background-color: #143352;
	border-width: 2px;
	border-style: solid;
	border-top-right-radius: 10%;
	border-bottom-right-radius: 10%;
	display: flex;
	flex-direction: column;
}
.contactleft h1{
	align-self: center;
	font-family: 'Open Sans', sans-serif;
	font-weight: 600;
	font-size: 30px;
	color: #f6f6e2;
	text-decoration: underline;
}
.contactleftlinks{
	margin-left: 5%;
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
	font-size: 25px;
	color: #f6f6e2;
	display: flex;
	flex-direction: column;
}
.contactleftlinks a{
	color: #f6f6e2;
}
.contactleft h2{
	margin-left: 5%;
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
	font-size: 25px;
	color: #f6f6e2;
}
.contactleftlinks a:hover{
	opacity: 0.6;
}
.smed{
	align-self: center;
	display: flex;
	transform: translate(-5%, 100px);
}
.fa {
    display: inline-block;
    padding: 20px 20px;
    font-size: 30px;
    margin-left: auto; 
    margin-top: auto;
    width: 19px;
    text-align: center;
    text-decoration: none;
    border-radius: 50%;
    transition: opacity 0.25s ease-in;
  }
  .fa:hover {
    opacity: 0.6;
  }

  .fa-instagram {
    background: #125688;
    color: white;
  }

  .fa-twitter {
    margin-left: 10px;
    background: #55ACEE;
    color: white;
  }

  .fa-youtube {
    margin-left: 10px;
    background: #bb0000;
    color: white;
  }

  .fa-facebook {
    margin-left: 10px;
    background: #3B5998;
    color: white;
  }
  .contactright{
  	height: 80%;
	width: 58%;
	margin-left: 2%;
	margin-top: 5%;
	border-width: 2px;
	border-style: solid;
	border-color: #143352;
	display: flex;
	flex-direction: column;
  }
  .contactright h1{
  	align-self: center;
	font-family: 'Open Sans', sans-serif;
	font-weight: 600;
	font-size: 30px;
	color: black;
	text-decoration: underline;
  }
  .form{
  	margin-top: -5%;
  }
  .input{
  	width: 40%;
  	height: 18%;
  	margin-top: 5%;
  	margin-left: 30%;
  	border-width: 2px;
  	border-color: #143352;
  	border-style: solid;
  	border-radius: 20px;
  }
  .textarea{
  	height: 65%
  }
  .msgbutton{
  	height: 15%;
  	width: 20%;
  	color: #f6f6e2;
  	margin-top: 5%;
  	background-color: #143352; 
  	font-family: 'Open Sans', sans-serif;
	font-weight: 600;
	font-size: 15px;
	border-radius: 20px;
  }















/* The part below is the programs page*/
.programstitle{
	margin-top: 10%;
	margin-left: 25%;
	height: 30%;
	width: 50%;
	background-color: #143352;
	color: #f6f6e2;
	text-align: center;
	font-family: 'Open Sans', sans-serif;
	font-weight: 600;
	font-size: 40px;
	border-radius: 20px;
}
.foodpic{
	display: flex;
	margin-left: 30%;
	margin-top: 5%;
	height: 400px;
	width: 40%;
	border-width: 3px;
	border-style: solid;
	border-color: #143352;
}
.food{
	height: 100%;
	width: 100%;
}
.programsbox{
	display: flex;
	flex-direction: column;
	width: 80%;
	height: auto;
	margin-top: 5%;
	margin-left: 10%;
	border-width: 2px;
	border-style: solid;
	border-color: #143352;
}
.programsbox h1{
	align-self: center;	
	font-family: 'Open Sans', sans-serif;
	font-weight: 600;
	font-size: 25px;
	text-decoration: underline;
}
.programsbox h2{
	align-self: center;	
	font-family: 'Open Sans', sans-serif;
	font-weight: 600;
	font-size: 20px;
	text-decoration: underline;
}
.programsbox ul{
	align-self: center;
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
	font-size: 20px;
}
.programsbox p{
	align-self: center;
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
	font-size: 20px;
	width: 80%;
	text-align: center;
}
.programsbox a{
	align-self: center;
	font-family: 'Open Sans', sans-serif;
	font-weight: 600;
	font-size: 20px;
	color: #143352;
	width: 80%;
	padding-bottom: 10px;
}
.programsbox a:hover{
	opacity: 0.6;
}
.fitnessvideo{
	display: flex;
	margin-left: 25%;
	margin-top: 5%;
	height: 500px;
	width: 50%;
	border-width: 3px;
	border-style: solid;
	border-color: #143352;
}












/* The part below is the testimonial page*/
.testimonialtitle{
	margin-top: 10%;
	margin-left: 25%;
	height: 30%;
	width: 50%;
	background-color: #143352;
	color: #f6f6e2;
	text-align: center;
	font-family: 'Open Sans', sans-serif;
	font-weight: 600;
	font-size: 40px;
	border-radius: 20px;
}

.testimonialbox{
	display: flex;
	flex-direction: column;
	width: 80%;
	height: auto;
	margin-top: 5%;
	margin-left: 10%;
	border-width: 2px;
	border-style: solid;
	border-color: #143352;
}
.picframes{
	display: flex;
	width: 100%;
	height: 700px;
}
.picframe{
	width: 30%;
	height: 90%;
	align-self: center;
	border-width: 3px;
	border-style: solid;
	border-color: #143352;
	margin-left: 14%;
}
.pic{
	width: 100%;
	height: 100%
}
.testimonialbox h1{
	align-self: center;	
	font-family: 'Open Sans', sans-serif;
	font-weight: 600;
	font-size: 25px;
	text-decoration: underline;
}
.testimonialbox p{
	align-self: center;
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
	font-size: 20px;
	width: 80%;
}
.testimonialbox a{
	align-self: center;
	font-family: 'Open Sans', sans-serif;
	font-weight: 600;
	font-size: 20px;
	color: #143352;
	width: 80%;
	padding-bottom: 10px;
}
.testimonialbox a:hover{
	opacity: 0.6;
}