body{
	background-color:#f3f4ef;
}
.heading{
	font-size: 4rem;
	color: var(--black);
	text-align: center;
	text-transform: uppercase;
	font-weight: bolder;
	margin-bottom: 6rem;
  }
  
  .heading span{
	color: var(--orange);
	text-transform: uppercase;
  }
  
  .btn{
	font-size: 1.7rem;
	margin-top: 1rem;
	display: inline-block;
	padding: .8rem 3rem;
	border-radius: .5rem;
	border: .2rem solid var(--orange);
	color: var(--orange);
	background: none;
	cursor: pointer;
  }
  
  .btn:hover{
	background: var(--orange);
	color: var(--white);
  }
  
  /* header */
  
  .header{
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 2rem 9%;
	background: var(--white);
	box-shadow: var(--box-shadow);
  }
  
  .header .logo{
	font-size: 2.5rem;
	font-weight: bolder;
	color: var(--black);
  }
  
  .header .logo i{
	color: var(--orange);
  }
  
  .header .navbar a{
	font-size: 1.7rem;
	margin: 0 1rem;
	color: var(--black);
  }
  
  .header .navbar a:hover,
  .header .icons div:hover{
	color: var(--orange);
  }
  
  .header .icons div{
	font-size: 2.5rem;
	margin-left: 1.7rem;
	color: var(--black);
	cursor: pointer;
  }
  
  #menu-btn{
	display: none;
  }
  
  .header .login-form{
	position: absolute;
	top: 110%; right: -110%;
	width: 35rem;
	box-shadow: var(--box-shadow);
	padding: 2rem;
	border-radius: .5rem;
	background: var(--white);
	text-align: center;
  }
  
  .header .login-form.active{
	right: 2rem;
	transition: .4s linear;
  }
  
  .header .login-form h3{
	font-size: 2.5rem;
	text-transform: uppercase;
	color: var(--black);
  }
  
  .header .login-form .box{
	width: 100%;
	margin: .7rem 0;
	background: #eee;
	border-radius: .5rem;
	padding: 1rem;
	font-size: 1.6rem;
	color: var(--black);
	text-transform: capitalize;
  }
  
  .header .login-form p{
	font-size: 1.4rem;
	padding: .5rem 0;
	color: var(--light-color);
  }
  
  .header .login-form p a{
	color: var(--orange);
	text-decoration: underline;
  }
.body{
	justify-content: center;
	align-content: center;
	background-color: rgb(239, 209, 145);
}
.h3{
	font-size: xx-large;
}
  

.header{
	position:absolute;
	top:0;
    text-align: center;
    font-size: xx-large;
	background-color:#e9768f;
	color:white;
	border-bottom:2px solid white;
	width: 100%

}

#square{	
	position:absolute;
	top:10%;
	left:25%;
	right:25%;
	height:85%;
	width:50%;
	background-color:#232a36;
	border:5px solid black;
}

.infoTitle{
	display:block;
	margin-left:auto;
	margin-right:auto;
	margin-top:2%;
	border: 2.4px solid black;
	background-color:white;
	Width: 95%;
	font-size:1.5em;
	font-weight:bold;
}

.info{
	display:block;
	overflow:scroll;
	margin-left:auto;
	margin-right:auto;
	margin-top: 5px;
	border: 2.4px solid black;
	background-color:white;
	Width: 95%;
	height:90%;
	font-size:1.2em;
}
h3{
    color: rgb(160, 139, 52);
}
h1{
    color: rgb(222, 145, 22);
    font-size: xx-large;
}

p{
	padding:02%;
    color: rgb(11, 11, 11);
    font-size: larger;
}

#footer{
	position:absolute;
	bottom:0;
	right:36%;
	background-color:white;
	border: 2.5px solid black;
	
}

.link{
	color:black;
	font-family:Avenir Book;	
	float:left;
	margin-left:2px;
	margin-right:2px;
;}
.inbetween{
	color:black;
	float:left;
	margin-left:2px;
	margin-right:2px;
}
body, html {
	height: 100%;
  }
  
  * {
	box-sizing: border-box;
  }
  
  .bg-image {
	
	background-image: url("images/background.jpg");
  
	

  
	
	height: 100%;
  
	
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
  }