
@font-face {
  font-family:Brand;
	src: url(metaor-aftershift-font/MetaorAftershift-8OnAz.ttf)
}

/*-------------------------------------------------------------------------*/
#nav{ 
	font-family: Brand;
	font-size:1.5em;
	position: sticky;
	top: 0;
	
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color:#484848;
  display: flex;
  justify-content: center;
}

ul li a {
  display: block;
  color: white;
  padding: 14px 16px;
  text-decoration: none;
}

ul li a:hover {
	font-family: Brand;
  background-color: #00ffae;
  color:#f85c24;
}


a:link{
	font-family: Brand;
	color:#FFFFFF;
	text-decoration:none;
}
a:visited{
	font-family: Brand;
	Color:#FFFFFF;
}
a:hover{
	font-family: Brand;
	opacity:1;
	Color:#f85c24;
	text-decoration:none;
}
/*-------------------------------------------------------------------------*/

body{
	background-color:#303030;
	
}

#BIT{
	display: flex;
  justify-content: center; 
  align-items: center;     
  height: 100vh;           }

.center-body{
	display:center;
	justify-content:center;
	width:97%;
	Background-color:f85c24;
	border-radius: 20px;
}
.container-body{
	Background-color:f85c24;
	border-radius: 20px;
	display:grid;
	margin: auto;
	grid-template-columns:15em 15em 15em 15em 15em 15em;
	grid-template-rows:500px 500px 500px 500px;
	gap:1em;
	margin:3em;
	padding-left:5em;
	padding-top:5em;
	padding-bottom:5em;
	grid-template-areas:
	"box-1 box-1 box-1 box-1 box-1i box-1i"
	"box-2 box-2 box-2 box-2 box-2i box-2i"
	"box-3 box-3 box-3 box-3 box-3i box-3i"
	"box-4 box-4 box-4 box-4 box-4i box-4i";
}
/*-------------------------------------------------------------------------*/

.menu-display{
	border-radius: 20px;
	display:grid;
	justify-content: center; 
	align-items: center;
	text-align:center;
	margin: auto;
	grid-template-columns:30em 30em 30em ;
	grid-template-rows:100px 400px;
	gap:1em;
	margin:3em;
	padding-left:5em;
	padding-top:5em;
	padding-bottom:5em;
	grid-template-areas:
	"box-1 box-2 box-3 "
	"box-1 box-2 box-3 ";
	
}

.link_box{
	color:white;
	text-decoration: none;
	font-size:60px;

}

.title-chamon{
  display: flex;
  justify-content: center; 
  align-items: center;    
  Margin-top:1em;
  Font-size:3em;
  color:#f85c24;
  background-image:;
}
.center-chamon{
	display: flex;
	justify-content: center;

}
.container-chamon{
	margin-left: auto;
	margin-right: auto;
	display:grid;
	grid-template-columns:25em 25em 25em;
	grid-template-rows:400px 500px 200px 300px;
	gap:1.3em;
	grid-template-areas:
	"box-1 box-1 box-3"
	"box-2 box-2 box-3";
}

.description-chamon{
	border-radius: 20px;
	display:grid;
	margin: auto;
	padding:15px;
	grid-template-columns:200px 200px
	grid-template-rows: 100px 100px 100px 100px;
	gap:1em;
	grid-template-areas:
	"box-1t box-1 box-1"
	"box-1p box-1p box-1i";
	background-color:#f85c24;
	 padding-left: 15px;
}

.god-chamon{
	border-radius: 20px;
	display:grid;
	margin: auto;
	padding:15px;
	grid-template-columns:200px 200px
	grid-template-rows: 100px 100px 100px 100px;
	gap:1em;
	grid-template-areas:
	"box-2t box-2 box-3"
	"box-2p box-2i box-2i";
	background-color:#f85c24;
	 padding-left: 15px;
}

.magicdescription-chamon{
	border-radius: 20px;
	background-color:#f85c24;
	padding-top: 30px;
	text-align: center;
}

.p-chamon{
	border-radius: 20px;
	margin:auto;
	width:20em;
	font-size:24;
	color:white;
}
h2{
	color:white;
}
h1{
	color:white;
	font-family:Brand;
	letter-spacing: 2px;
}

p{
	color:white;
	font-size:24;
	
}


.mission{
	display: grid;
	grid-template-columns:auto 23%; 
	align-items: center; 
	gap: 6%;
	position:flex;
	background-color:#f85c24;
	width:93%;    
	height: 400px;
	border-top-left-radius:15px;
	border-bottom-left-radius:15px;
	margin-left: auto;
    margin-right: 0px;
	margin-top:5%;
	padding:15px;
	font-size:24;
}
.mission2{
	display: grid;
	grid-template-columns:auto 23%; 
	align-items: center; 
	gap: 6%;
	position:flex;
	background-color:#00ffae;
	width:93%;    
	height: 400px;
	border-top-left-radius:15px;
	border-bottom-left-radius:15px;
	margin-left: auto;
    margin-right: 0px;
	margin-top:5%;
	padding:15px;
	font-size:24;
}