@media only screen and (min-width: 1200px)
{
	:root
	{
		--game-img-width: 275px;
		--game-img-height: calc(510 * var(--game-img-width) / 390);
	}
	#lista_juegos .juego
	{
		position: relative;
		display: inline-block;
		vertical-align: top;
		margin: 10px;
	}
	#lista_juegos .juego .title svg
	{
		width: 15px;
		fill: white;
		transition: fill var(--default-transition-time);
	}
	#lista_juegos .juego .border:hover + .title svg
	{
		fill: var(--primary-color);
		transition: all var(--default-transition-time);
	}
	#lista_juegos .juego .border
	{
		top: 0px;
		position: absolute;
		width: var(--game-img-width);
		height: var(--game-img-height);
		border: 0px solid;
		border-color: transparent;
		transition: all var(--default-transition-time);
	}
	#lista_juegos .juego .border:hover
	{
		cursor: pointer;
		margin-top: -10px;
		margin-left: -10px;
		border: 10px solid;
		border-color: var(--primary-color);
		transition: all var(--default-transition-time);
	}
	#lista_juegos .juego .border:hover ~ .estado svg
	{
		fill: var(--primary-color);
		transition: all var(--default-transition-time);
	}
	#lista_juegos .juego .estado svg
	{
		width: 18px;
		fill: #8b8b8b;
		transition: fill var(--default-transition-time);
	}
	#lista_juegos .juego img
	{
		width: var(--game-img-width);
	}
	#lista_juegos .juego .title
	{
		text-align: left;
		margin-top: 15px;
		font-family: "FuturaBold";
		font-size: 16pt;
		letter-spacing: 2px;
		color: white;
		margin-bottom: 5px;
	}
	#lista_juegos .juego .estado
	{
		text-align: left;
		margin-top: 7px;
		font-family: "FuturaBook";
		font-size: 10.5pt;
		letter-spacing: 1.5px;
		color: #8b8b8b;
	}
}

@media only screen and (max-width: 1199px)
{
	:root
	{
		--game-img-width: 100%;
		--game-img-height: calc(var(--game-img-width));
	}
	#lista_juegos .juego
	{
		position: relative;
		display: inline-block;
		vertical-align: top;
		margin: 10px;
	}
	#lista_juegos .juego .title svg
	{
		width: 15px;
		fill: white;
		transition: fill var(--default-transition-time);
	}
	#lista_juegos .juego .border:hover + .title svg
	{
		fill: var(--primary-color);
		transition: all var(--default-transition-time);
	}
	#lista_juegos .juego .border
	{
		top: 0px;
		position: absolute;
		width: var(--game-img-width);
		height: var(--game-img-height);
		border: 0px solid;
		border-color: transparent;
		transition: all var(--default-transition-time);
	}
	#lista_juegos .juego .border:hover
	{
		cursor: pointer;
		margin-top: -10px;
		margin-left: -10px;
		border: 10px solid;
		border-color: var(--primary-color);
		transition: all var(--default-transition-time);
	}
	#lista_juegos .juego .border:hover ~ .estado svg
	{
		fill: var(--primary-color);
		transition: all var(--default-transition-time);
	}
	#lista_juegos .juego .estado svg
	{
		width: 18px;
		fill: #8b8b8b;
		transition: fill var(--default-transition-time);
	}
	#lista_juegos .juego img
	{
		width: var(--game-img-width);
	}
	#lista_juegos .juego .title
	{
		text-align: left;
		margin-top: 15px;
		font-family: "FuturaBold";
		font-size: max(2.5vh, 2.5vw);
		letter-spacing: 2px;
		color: white;
		margin-bottom: 5px;
	}
	#lista_juegos .juego .estado
	{
		text-align: left;
		margin-top: 7px;
		font-family: "FuturaBook";
		font-size: max(1.5vh, 1.5vw);
		letter-spacing: 1.5px;
		color: #8b8b8b;
	}
}

#main
{
	display: flex;
	justify-content: center;
	align-items: center;
}