/* fanworks containers */

.game-container {
	display: grid;
	grid-template-areas:
		"img header"
		"img desc";
	grid-template-columns: 25% 75%;
	grid-template-rows: auto auto;
	border: solid 5px darkblue;
	margin-bottom: 10px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); /* yoinking a box-shadow from w3schools lol */
}

.game-container div.game-img {
	grid-area: img;
	background-color: black;
}

.game-container img {
	max-width: 100%;
	height: 100%;
	border-right: solid 5px black;
	object-fit: cover;
}

.game-container h2, h3 {
	color: white;
	margin-top: 0;
	padding-left: 8px;
}

.game-container p {
	margin: 0;
}

.game-header a {
	color: #FCFC00 !important;
}

.game-header a:hover {
	color: #FFA536 !important;
	filter: brightness(100%);
}

.game-container div.game-header {
	grid-area: header;
	background-color: black;
	background-image: linear-gradient(to right, black, darkblue);
	color: white;
}

.game-container div.game-desc {
	grid-area: desc;
	background-color: white;
	padding: 8px;
}

.reverse {
	grid-template-areas:
		"header img"
		"desc img";
	grid-template-columns: 75% 25%;
}

.reverse img {
	border-right: none;
	border-left: solid 5px black;
}

/* ring racers animation */

@keyframes ringyRace { /* I wanted an animation where they race back and forth, so like the image flips partway through... but god. I don't know how css animations work. */
from {transform: translateX(-250px);}
to {transform: translateX(150%);}
}

@keyframes ringyRace2 {
from {transform: translateX(-500px);}
to {transform: translateX(150%);}
}

.ringed-racing {
	width: 100%;
	overflow: hidden;
}

.racers {
	width: 100%;
	animation: ringyRace 4.5s linear infinite;
}

.racers-reverse {
	animation: ringyRace2 4.5s linear infinite;
	animation-direction: reverse;
}

@media only screen and (max-width: 1000px) {

.game-container {
	grid-template-areas:
		"img header"
		"desc desc";
	grid-template-columns: 25% 75%;
	grid-template-rows: auto auto;
}

.game-container img {
	width: 100%;
	border-left: none;
	border-right: none;
	border-bottom: solid 5px black;
	object-fit: cover;
}

.game-container div.game-header {
	border-bottom: solid 5px black;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

.game-container div.game-desc {
	padding: 8px 10px;
}

.straggler { /* a temporary solution... hiding the overflow SHOULD make it so putting everything on one line isn't an issue, but for whatever reason it keeps expanding the parent anyway... */
	display: none;
}

/* you know, I wouldn't be having these issues to begin with if I just used a marquee... I know they're deprecated and css can do the same thing, but they were simpler at least :( */

}