@font-face {
    font-family: "impact";
    src: url("./assets/fonts/impact.ttf") format("opentype");
}

@font-face {
    font-family: "clearsans";
    src: url("./assets/fonts/ClearSans-Bold.woff") format("woff");
}


#global{
    position: fixed;
    width:1000px;
    height:562.5px;
    top:50px;
    left:0;
    right: 0;
    margin-inline: auto;
	overflow: hidden;
}

header {
	position: relative;
	left: 0;
	right: 0;
	width: 1000px;
	top: 0px;
	height: 70px;
	/* background: #8ba3a2; */
	/* background-image: url("file:///C:/Users/creep/Downloads/fzerobg.png"); */
	/* background-repeat: repeat-x; */
	/* background-blend-mode: color; */
	/* background-size: 103px 100%; */
	background-image: url("./assets/fzerobg.png"), linear-gradient(90deg, rgba(0, 0, 0, 0) 49%, rgb(0, 0, 0) 50%, rgba(0, 0, 0, 0) 51%), linear-gradient(90deg, rgba(0, 0, 0, 0) 49%, rgb(0, 0, 0) 50%, rgba(0, 0, 0, 0) 51%), linear-gradient(to bottom, rgba(139,163,162,1) 32%, rgba(252,255,253,1) 34%, rgba(179,179,179,1) 35%, rgba(179,179,179,1) 40%, rgba(120,120,120,1) 43%, rgba(0,0,0,1) 45%, rgba(5,5,5,1) 85%, rgba(252,255,253,1) 88%, rgba(179,179,179,1) 90%, rgba(179,179,179,1) 95%, rgba(120,120,120,1) 99%, rgba(77,77,77,1) 100%);
	background-size: 10.2% 32%, 13.5% 68%, 20.5% 69%, auto;
	background-position: 0% 0%, 7% 100%, 0% 100%, 0% 0%;
	background-repeat: repeat no-repeat, repeat-x, repeat-x, repeat;
	background-color: rgba(0,0,0,0);
	/* background-blend-mode: difference; */
}

footer {
	position: absolute;
	left: 0;
	right: 0;
	margin-inline: auto;
	width: 1000px;
	bottom: -3px;
	height: 70px;
	background-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 49%, rgb(0, 0, 0) 50%, rgba(0, 0, 0, 0) 51%), linear-gradient(90deg, rgba(0, 0, 0, 0) 49%, rgb(0, 0, 0) 50%, rgba(0, 0, 0, 0) 51%), linear-gradient(90deg, rgba(0, 0, 0, 0) 49%, rgb(0, 0, 0) 50%, rgba(0, 0, 0, 0) 51%), linear-gradient(90deg, rgba(0, 0, 0, 0) 49%, rgb(0, 0, 0) 50%, rgba(0, 0, 0, 0) 51%), linear-gradient(0deg, rgba(139,163,162,0) 24%, rgba(107,108,107,1) 25%, rgba(179,179,179,1) 29%, rgba(179,179,179,1) 39%, rgba(239,239,239,1) 41%, rgba(239,239,239,1) 44%, rgba(0,0,0,0) 45%, rgba(5,5,5,0) 85%, rgba(71,71,71,1) 88%, rgba(179,179,179,1) 90%, rgba(179,179,179,1) 95%, rgba(232,232,232,1) 98%, rgba(232,232,232,1) 99%),url("./assets/fzerobg.png"),url("./assets/fzerobg.png");
	background-size: 20.5% 13%, 25% 13%, 25% 20%, 20.5% 20%, auto , 10.2% 60%, 10.2% 63%;
	background-position: 0% 0%, 0% 0%, 0% 69%, 0% 69%, 0% 0%,0% 19%, 0% 90%;
	background-repeat: repeat-x, repeat-x, repeat-x, repeat-x, repeat, repeat-x, repeat-x;
	background-color: rgba(0,0,0,0);
	z-index: 1;
}

marquee{
	pointer-events: auto;
	margin-top: 3.3%;
	color: #fff;
	width: 51%;
	right: 0;
	position: absolute;
	font-family: "Arial";
	font-weight: lighter;
	letter-spacing: 3px;
}



.selectmode {
	font-family: "impact";
	background-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 49%, rgb(0, 0, 0) 50%, rgba(0, 0, 0, 0) 51%), linear-gradient(90deg, rgba(0, 0, 0, 0) 49%, rgb(0, 0, 0) 50%, rgba(0, 0, 0, 0) 51%), linear-gradient(90deg, rgba(0, 0, 0, 0) 49%, rgb(0, 0, 0) 50%, rgba(0, 0, 0, 0) 51%), linear-gradient(90deg, rgba(0, 0, 0, 0) 49%, rgb(0, 0, 0) 50%, rgba(0, 0, 0, 0) 51%), linear-gradient(90deg, rgba(0,0,0,0) 49%, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 51%), linear-gradient(90deg, rgba(0,0,0,0) 49%, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 51%), linear-gradient(to right, rgba(0, 165, 223, 0) 41%, rgba(36, 36, 36, 0.5) 43%, rgb(181, 181, 181) 44%, rgb(181, 181, 181) 54%, rgba(0, 0, 0, 0.52) 54%, rgba(0, 0, 0, 0) 56%), linear-gradient(to right, rgba(0, 165, 223, 0) 41%, rgba(36, 36, 36, 0.5) 43%, rgb(181, 181, 181) 44%, rgb(181, 181, 181) 54%, rgba(0, 0, 0, 0.52) 54%, rgba(0, 0, 0, 0) 56%), linear-gradient(0deg, rgba(107,108,107,1) 2%, rgba(179,179,179,1) 5%, rgba(179,179,179,1) 18%, rgba(239,239,239,1) 21%, rgba(239,239,239,1) 23%, rgba(0,0,0,0) 25%, rgba(5,5,5,0) 77%, rgba(71,71,71,1) 80%, rgba(112,112,112,1) 85%, rgba(179,179,179,1) 88%, rgba(179,179,179,1) 94%, rgba(232,232,232,1) 97%, rgba(232,232,232,1) 99%), url("./assets/fzerobg.png");
	background-size: 32%, 32% auto, 32% 20%, 32% 20%, 32% 25%, 32% 25%, 47% 70%, 47% 70%, auto, 10% 20%;
	background-position: -16% 0%, 116% 0%, -63% 0%, -10% 0%, -63% 101%, -10% 101%, 141% 40%, -39% 40%, 0% 0%, 0% 0%;
	background-repeat: no-repeat, no-repeat, repeat-x, repeat-x, repeat-x, repeat-x, no-repeat, no-repeat, repeat, repeat-x;
	background-color: rgba(0,0,0,0);
	position: absolute;
	left: 171px;
    width: 36.25%;
    height: 79%;
	top: 27%;
	background-color: black;
}

#descfoot {
	background-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 49%, rgb(0, 0, 0) 50%, rgba(0, 0, 0, 0) 51%), linear-gradient(90deg, rgba(0, 0, 0, 0) 49%, rgb(0, 0, 0) 50%, rgba(0, 0, 0, 0) 51%), linear-gradient(90deg, rgba(0, 0, 0, 0) 49%, rgb(0, 0, 0) 50%, rgba(0, 0, 0, 0) 51%), linear-gradient(90deg, rgba(0, 0, 0, 0) 49%, rgb(0, 0, 0) 50%, rgba(0, 0, 0, 0) 51%), linear-gradient(90deg, rgba(0,0,0,0) 49%, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 51%), linear-gradient(90deg, rgba(0,0,0,0) 49%, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 51%), linear-gradient(to right, rgba(0, 165, 223, 0) 41%, rgba(36, 36, 36, 0.5) 43%, rgb(181, 181, 181) 44%, rgb(181, 181, 181) 54%, rgba(0, 0, 0, 0.52) 54%, rgba(0, 0, 0, 0) 56%), linear-gradient(to right, rgba(0, 165, 223, 0) 41%, rgba(36, 36, 36, 0.5) 43%, rgb(181, 181, 181) 44%, rgb(181, 181, 181) 54%, rgba(0, 0, 0, 0.52) 54%, rgba(0, 0, 0, 0) 56%), linear-gradient(0deg, rgba(107,108,107,1) 2%, rgba(179,179,179,1) 5%, rgba(179,179,179,1) 18%, rgba(239,239,239,1) 21%, rgba(239,239,239,1) 23%, rgba(0,0,0,0) 25%, rgba(5,5,5,0) 77%, rgba(71,71,71,1) 80%, rgba(112,112,112,1) 85%, rgba(179,179,179,1) 88%, rgba(179,179,179,1) 94%, rgba(232,232,232,1) 97%, rgba(232,232,232,1) 99%), url("./assets/fzerobg.png");
	background-size: 29%, 32% auto, 32% 20%, 32% 20%, 32% 25%, 32% 25%, 47% 70%, 47% 70%, auto, 10% 20%;
	background-position: -17% 0%, 101% 0%, -63% 0%, -10% 0%, -63% 101%, -10% 101%, 145% 40%, -43% 40%, 0% 0%, 0% 0%;
	background-repeat: no-repeat, no-repeat, repeat-x, repeat-x, repeat-x, repeat-x, no-repeat, no-repeat, repeat, repeat-x;
	/* background-color: rgba(0,0,0,0); */
	position: absolute;
	left: 227px;
	width: 54%;
	height: 11%;
	top: 86.5%;
	background-color: black;
	border-radius: 20px;
	z-index: 2;
	align-content: center;
}

h1 {
	background-image: url("./assets/metal.png");
	-webkit-background-clip: text;
	color: #E4E5E9;
	margin-top: -4px;
	font-size: 49px;
	letter-spacing: -1px;
	margin-left: -66px;
	-webkit-text-fill-color: transparent;
	-webkit-background-clip: text;
	-moz-background-clip: text;
	background-clip: text;
	background-origin: 0% 0%;
	background-size: 17% 15%;
	z-index: 1;
	position: absolute;
	width: 140%;
	text-align: center;
    filter: drop-shadow(2px 2px 1px black);
}

h1 + h1 {
	background-image: url("./assets/metalfonce.png");
	-webkit-background-clip: text;
	color: #e4e5e900;
	-webkit-text-stroke: 13px transparent;
	margin-top: -4px;
	font-size: 49px;
	letter-spacing: -1px;
	margin-left: 22px;
	-webkit-text-fill-color: transparent;
	-webkit-background-clip: text;
	-moz-background-clip: text;
	background-clip: text;
	/* background-origin: 0% 0%; */
	background-size: 26% 63%;
	position: absolute;
	width: 92%;
	z-index: 0;
}

p {
    color: white;
    text-align: center;
	font-family: "Arial";
  font-weight: lighter;
  letter-spacing: 3px;  font-size: 17px;

  }

  em {
	background-image: linear-gradient(120deg, rgba(255,255,255,0) 14%, rgba(249,249,249,1) 47%, rgba(255,255,255,0) 75%), conic-gradient(from 0deg at center center, rgba(255,0,0,1) 27%, rgba(209,0,0,1) 43%, rgba(255,0,0,1) 64%);
	background-size: 201% 100%, auto;
	background-position: 302% -632%, 0% 0%;
	background-repeat: repeat-x, repeat;
	background-color: rgba(0,0,0,0);
	background-size: 201% 100%, auto;
	background-position: 302% -632%, 0% 0%;
	background-repeat: repeat-x, repeat;
	background-color: rgba(0,0,0,0);
	padding: 3px 7px;
	font-style: normal;
	font-family: sans-serif;
	color: black;
	font-size:14px;
	border-radius: 17px;
	margin: 0px 3px 0px 14px;
	/* width: 55px; */
}

#greenA{
    background-image: linear-gradient(120deg, rgba(255,255,255,0) 14%, rgba(249,249,249,1) 47%, rgba(255,255,255,0) 75%), conic-gradient(from 0deg at center center, rgb(30, 234, 16) 27%, rgb(48, 191, 5) 43%, rgb(30, 234, 16) 64%);

}




#background{
	width: 100%;
	height: 100%;
	top: 0px;
	bottom: 0px;
	position: absolute;
	background-image: url("./assets/background.png");
	z-index: -1;
	background-position: -363px -42px;
	background-size: 177%;
}

.element{
	background-image: url("./assets/element.svg");
	position: absolute;
	left: 0;
	right: 0;
	width: 959px;
	height: 526px;
	margin-inline: auto;
	z-index: -1;
	transform-style: preserve-3d;
	transform-origin: center;
	top: 0;
	bottom: 0;
	filter:blur(4px);
	animation: 2s linear infinite running translate3d;
	translate: 0px 0px 0px;
	will-change: translate;
	transition: translate;	opacity: 45%;

}
.circle{
	background-image: url("./assets/circle.svg");
	position: absolute;
	left: 0;
	right: 0;
	width: 959px;
	height: 526px;
	margin-inline: auto;
	z-index: -1;
	transform-style: preserve-3d;
	transform-origin: center;
	top: 0;
	bottom: 0;
	filter:blur(4px);
	animation: 3.2s linear infinite running translate3dcircle;
	translate: 0px 0px 0px;
	will-change: translate;
	transition: translate;	opacity: 45%;
}
#svgcont{
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	position: absolute;
	transform-style: preserve-3d;
	perspective: 669px;
	perspective-origin: 50% 55%;
	z-index: -1;
}


@keyframes translate3dcircle {
	0%{
		translate: 0px 0px 20px;
	}
	100%{
		translate: 0px 0px 340px;
	}
	
}

@keyframes translate3d {
	0%{
		translate: 0px 0px 0px;
	}
	100%{
		translate: 0px 0px 320px;
	}
	
}

@keyframes selection{
	0%{
		background-color: #00000091;
	}
	50%{
		background-color: #95f5fa66
	}
	100%{
		background-color: #00000091;
	}
}

main{
	display: grid;
	grid-template-columns: 1fr 20% 20% 20% 1fr;
	grid-template-rows: calc(316px / 3) calc(316px / 3) calc(316px / 3)auto;
	gap: 16px 12px;
	padding-top: 3.5%;
}


h2 {
	text-align: center;
	height: 104px;
	font-family: "clearsans";
	font-weight: bolder;
	color: #fff;
	background-image: repeating-linear-gradient(to right, #f6f6f6 0%, #b3b3b3 2%, #b3b3b3 3%, #3c3c3c 5%, #fff0 6%, #f6f6f600 93%, #f6f6f6 94%, #b3b3b3 96%, #b3b3b3 98%, #3c3c3c 100%), repeating-linear-gradient(#f6f6f6 0%, #b3b3b3 4%, #b3b3b3 9%, #3c3c3c 13%, #fff0 15%, #f6f6f600 85%, #f6f6f6 87%, #b3b3b3 90%, #b3b3b3 95%, #3c3c3c 99%);
	background-size: auto, auto;
	background-position: 0% 0%, 0% 0%;
	background-repeat: repeat, repeat;
	font-size: 29px;
	line-height: 100%;
	align-content: center;
	background-color: #00000091;
	border-radius: 13px;
	margin: 0;
	padding: 0px 0px 6px;
}
h2:hover{
	animation: linear infinite running selection 1.5s ;
	cursor:default;
}
h2 a{
	filter: drop-shadow(3px 4px 1px #000) drop-shadow(0px 0px 4px #91faff) drop-shadow(0px 0px 4px #91faff);
}

#gp{
	grid-row: 1;
	grid-column: 2;
}
h2::before{
	background-image: radial-gradient(circle farthest-corner at center center, #cacaca 3%, #353535 6%, #cacaca00 9%, #f6f6f600 14%), linear-gradient(to bottom, #ededed 12%, #b3b3b3 19%, #b3b3b3 81%, #5a5a5a 90%);
	background-size: 33% 279%, auto auto;
	background-position: 0% 50%, 0% 0%;
	background-repeat: repeat, repeat;
	background-color: #0000;
	position: absolute;
	top: 20px;
	width: 3%;
	height: 3%;	
	content: "";
}
h2::after{
	background-image: radial-gradient(circle farthest-corner at center center, #cacaca 3%, #353535 6%, #cacaca00 9%, #f6f6f600 14%), linear-gradient(to bottom, #ededed 12%, #b3b3b3 19%, #b3b3b3 81%, #5a5a5a 90%);
  background-size: 33% 279%, auto auto;
  background-position: 0% 50%, 0% 0%;
  background-repeat: repeat, repeat;
  background-color: #0000;
  position: absolute;

  width: 2%;
  height: 3%;
  content: "";
  transform: rotate(90deg);

}
#gp::after, #vs::after, #atk::after{
	top: 211px;
}
#practice::after, #story::after, #replay::after{
	top: 332px;
}

#gp::after, #practice::after{
	left: 279px;
}
#vs::after, #story::after{
	left: 490px;

}

#atk::after, #replay::after{
	left: 701px;

}

#custom::after, #options::after, #pilots::after{
	display: none;
}

#gp::before, #vs::before, #atk::before {
	top: 155px;
}
#practice::before, #story::before, #replay::before{
	top: 274px;
}
#custom::before, #options::before, #pilots::before{
	top: 394px;
}

#gp::before, #practice::before, #custom::before{
	left: 375px;
}

#vs::before, #story::before, #options::before{
	left: 587px;
}
#atk::before, #replay::before, #pilots::before{
	left: 587px;

}


#vs{
	grid-row: 1;
	grid-column: 3;
}

#atk{
	grid-row: 1;
	grid-column: 4;
}

#practice{
	grid-row: 2;
	grid-column: 2;
}

#story{
	grid-row: 2;
	grid-column: 3;
}


#replay{
	grid-row: 2;
	grid-column: 4;
}


#custom{
	grid-row: 3;
	grid-column: 2;
}

#options{
	grid-row: 3;
	grid-column: 3;
}

#pilots{
	grid-row: 3;
	grid-column: 4;
}