@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,600&display=swap');
@font-face{font-family:'Montserrat';font-style:normal;font-weight:normal;src:local('Montserrat Regular'),local('Montserrat-Regular'),url('../../game-boy/Montserrat-Regular.woff2') format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:bold;src:local('Montserrat Bold'),local('Montserrat-Bold'),url('../../game-boy/Montserrat-Bold.woff2') format('woff2')}



body{
	background-color: #2a2f2b;
	background-color: #2e2e32;
	font-size:15px;
	font-family: 'Open Sans', sans-serif;
	margin:24px 0;
	color:white;
}




header{
	padding: 16px;
	color: #695cff;
}
header h1{
	text-align:center;
	margin:0;
	line-height:1;
	font-size:225%;
	font-family:'Montserrat', sans-serif;
	text-transform:uppercase;
}


nav{text-align:center}







.wrapper{
	max-width:960px;
	margin:0 auto;
	box-sizing:border-box;
}
hr{
	border:none;
	border-bottom:1px dotted white;
}
p{
	line-height:1.6;
	text-align:justify;
}

#game-grid{
	display: grid;
	list-style:none;
	margin:0;
	padding:0;
	grid-template-columns: repeat(4, 1fr);
	grid-gap: 24px;
	max-width:100%;
}
#game-grid li{text-align:center}
#game-grid a{
	display:inline-block;
	line-height:0;
}

#game-grid a img{
	box-shadow: #1e211f 0 0 16px;
	transition: all .2s;
	border-radius:6px;
	max-width:100%;
}
#game-grid a:not(.selected) img{
	filter: brightness(50%) saturate(50%);
}
#game-grid a:not(.selected) img:hover{
	box-shadow: #5f6a61 0 0 12px 4px;
	filter: brightness(85%) saturate(85%);
}
#game-grid a.selected img{
	box-shadow: rgb(83, 94, 85) 0 0 12px 4px;
	filter: brightness(100%);
}



h2{
	font-family: 'Montserrat', sans-serif;
	line-height:1;
}
h2 span{
	border-bottom: 3px solid #695cff;
}

section.game{
	display:none;
}
section.game.show{
	display:block;
}


.download-link{text-align:center; margin:16px 0; font-size:110%; font-weight:bold}
.download-link a{background-color:#a692ec; color: black; text-decoration:none; padding: 4px 16px; border-radius: 32px; transition: all .1s;}
.download-link a:hover{background-color: #ccc0f5; color:#130c2e}
.download-link svg{width:16px; height:16px; vertical-align:middle; margin-right:4px}



table.comparison{
	margin:0 auto;
	line-height:1
}
table.comparison img{
	width:480px;
	max-width:100%;
	-ms-interpolation-mode: nearest-neighbor;
	image-rendering: -webkit-optimize-contrast;
	image-rendering: -moz-crisp-edges;
	image-rendering: -o-crisp-edges;
	image-rendering: pixelated;
}

footer{
	margin-top:32px;
	color: #515752;
	font-size: 85%;
}
footer a{color: #757d76}
footer a:hover{color: #fff}

@media only screen and (max-width:1023px){
	.wrapper{
		max-width:auto;
		margin:0 20px;
	}
}

@media only screen and (max-width:871px){
	body{font-size: 14px}
	#game-grid{grid-template-columns: repeat(3, 1fr)}
}
@media only screen and (max-width:639px){
	body{font-size: 13px}
	#game-grid{grid-template-columns: repeat(2, 1fr)}
}
@media only screen and (max-width:599px){
	header{padding: 8px}

	header h1{font-size:200%}
}
@media only screen and (max-width:479px){
	header h1{font-size:175%}
}