@keyframes animSaaga {
	0%,
	100% {
		top: 20px;
	}
	50% {
		top: 30px;
	}
}

@keyframes animClouds {
	0% {
		transform: translate3d(0, 0, 0);
	}
	100% {
		transform: translate3d(-840px, 0, 0);
	}
}

.game {
	display: block;
	height: 250px;
	overflow: hidden;
	color: inherit;
	text-decoration: inherit;
}

.game .title-card {
	position: absolute;
	bottom: 0;
	left: 0;
	font-family: 'Dead Genre';
	font-size: 1.4em;
}

.game .title-card h2, .game .title-card p {
	display: inline-block;
	backdrop-filter: blur(5px);
	transition: background-color 0.1s ease;
}

.game .title-card h2 {
	font-size: 2em;
	padding: 0.5rem;
	background-color: #332e36;
}

.game .title-card p {
	padding: 0.5rem;
	background-color: #28232b;
}

.game:hover .title-card h2 {
	background-color: #3e3940;
}

.game:hover .title-card p {
	background-color: #332e36;
}

.game.game-featured {
	height: 500px;
}

.game.game-ogam {
	background-color: #80ccd2;
}

.game.game-ogam:hover .ogam-logo {
	transform: scale(1.05);
}

.game.game-ogam .ogam-grass,
.game.game-ogam .ogam-logo,
.game.game-ogam .ogam-saaga {
	position: absolute;
}

.game.game-ogam .ogam-grass {
	bottom: 0;
	width: 100%;
	height: 200px;
	background-image: url('../images/ogam/grass.png');
}

.game.game-ogam .ogam-saaga {
	right: -80px;
	animation: animSaaga 10s ease infinite;
}

.game.game-ogam .ogam-logo {
	left: 75px;
	top: 111px;
	image-rendering: pixelated;
	transition: transform 0.1s ease;
}

.game.game-ogam .ogam-clouds {
	background: url('../images/ogam/clouds.png') repeat-x;
	height: 300px;
	width: 2520px;
	animation: animClouds 60s linear infinite;
	opacity: 0.5;
}

.game.game-stuph {
	background-image: url('../images/stuph/background.png');
	background-position: center center;
	background-size: cover;
}

.game.game-echo {
	background-color: #acaded;
	background-image: url('../images/echoroyale/blue-sky.png');
	background-size: cover;
	background-repeat: no-repeat;
	display: flex;
	align-items: center;
	justify-content: center;
}

.game.game-echo:hover .echo-logo {
	transform: scale(1.2) rotate(-10deg);
	filter: drop-shadow(0 0 5em #7602fe);
}

.game.game-echo .echo-logo {
	width: 40vw;
	height: auto;
	transition: transform 0.1s linear, filter 0.1s ease;
}

.game.game-ndft {
	background-color: #181818;
}

.game.game-ndft .ndft-cave, .game.game-ndft .ndft-hero, .game.game-ndft .ndft-moon {
	position: absolute;
}

.game.game-ndft .ndft-hero {
	right: 20px;
	bottom: -20px;
}