@font-face 
{
	font-family: "Nexa";
	src: url("../fonts/nex.ttf") format("truetype");
}
	
*
{
	background-color: transparent;
	color: #000000;
	text-decoration: none;
	font-size: 110%;
	font-family: "Nexa", Sans-Serif;
	box-sizing: border-box; /**/
}

body
{
	min-width: 880px;
	background-color: #000000;
	/*background: linear-gradient(315deg, #00CCFF, #D400D4);*/
	background-size: 200% 200%;
	min-height: 100vh; /**/
	/*animation: bg 14s ease infinite; */
}

div
{
	margin-top: 2%;
	width: 66%;
	margin-left: auto;
	margin-right: auto;
	display: flex; /**/
	justify-content: center; /**/
	align-items: center; /**/
}

h1
{
	position: absolute;
	top: 20px;
	left: 45%;
	padding-left: 20px;
	padding-right: 20px;
	background: linear-gradient(315deg, #00CCFF, #D400D4);
	background-clip: text;
	color: transparent;
	text-align: center;
	box-shadow: 2px 2px 20px #00CCFF, 8px 8px 20px #D400D4;
	animation: moveCircleShadow 4s ease infinite;
	margin-bottom: 30px;
}

h2
{
	width: 10%;
	background: linear-gradient(315deg, #00CCFF, #D400D4);
	background-clip: text;
	color: transparent;
	text-align: center;
	box-shadow: 2px 2px 20px #00CCFF, 8px 8px 20px #D400D4;
	animation: moveCircleShadow 4s ease infinite;
	margin-bottom: 30px;
}

h3
{
	margin-top: 140px;
}

#game
{
	width: 80%;
	padding: 20px;
	background: linear-gradient(315deg, #00CCFF, #D400D4);
	background-clip: text;
	color: transparent;
	text-align: center;
	box-shadow: 2px 2px 20px #000000, 8px 8px 20px #000000;
}

a
{
	background: linear-gradient(315deg, #00CCFF, #D400D4);
	background-clip: text;
	color: transparent;
}

img
{
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	filter: saturate(0);
	background: transparent;
	transition: transform .2s ease-in-out;
}

ul
{
	list-style-type: none;
	width: 50%;
	margin-left: auto;
	margin-right: auto;
}

#game:hover
{
	animation-name: bg;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	animation-iteration-count: 1;
	transform: scale(1.02);
}

.Item img:hover
{
	animation-name: animateImg;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	transform: scale(1.01);
}

.Item:hover > .Logo
{
	animation-name: animateLogo;
	animation-duration: 1s;
	animation-fill-mode: forwards;
}

.Item
{
	position: relative;
	width: 100%;
}

.Logo
{
	pointer-events: none;
	opacity: 1;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	filter: saturate(1);
}

@keyframes animateImg 
{
	0% {filter: saturate(0%);}
	100% {filter: saturate(100%);}
}

@keyframes animateLogo
{
	0% {opacity: 100;}
	100% {opacity: 0;}
}

@keyframes bg
{
		0%
		{
			box-shadow: 2px 2px 20px #000000, 8px 8px 20px #000000;
			background-position: 0% 50%;
			filter: saturate(0%);
		}
		50%
		{
			background-position: 100% 50%;
			filter: saturate(50%);
		}
		100%
		{
			box-shadow: 2px 2px 20px #00CCFF, 8px 8px 20px #D400D4;
			background-position: 0% 50%;
			filter: saturate(100%);
		}
}

@keyframes moveCircleShadow
{
	0%
	{
		box-shadow: 2px 2px 20px #00CCFF, 8px 8px 20px #D400D4;		
	}
	25%
	{
		box-shadow: -2px 2px 15px #00CCFF, -8px 8px 15px #D400D4;		
	}
	50%
	{
		box-shadow: -8px -8px 10px #00CCFF, -2px -2px 10px #D400D4;		
	}
	75%
	{
		box-shadow: 2px -2px 25px #00CCFF, 8px -8px 25px #D400D4;		
	}
	100%
	{
		box-shadow: 2px 2px 20px #00CCFF, 8px 8px 20px #D400D4;	
	}
}