style.css

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body {
	background-color:#000000;
	height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.wrapper {
	max-width: 100%;
	max-height: 100%;
	padding: 10px;
}

.score-wrapper {
	color:#ffffff;
	width: 475px;
	max-width: 100%;
	padding:10px;
	margin: 0 auto 10px;

	background-image: linear-gradient(to bottom,  #04009d 0%,#06004d 100%);
	border-radius:4px;
	border: solid 1px #424542;
	box-shadow: 1px 1px #e7dfe7, -1px -1px #e7dfe7, 1px -1px #e7dfe7, -1px 1px #e7dfe7, 0 -2px #9c9a9c, -2px 0 #7b757b, 0 2px #424542;

	display:flex;
	justify-content:space-between;
}

.grid {
	display:flex;
	flex-wrap:wrap;
	align-items: center;
	justify-content: center;

	position: relative;

	width:475px;
	max-width: 100%;
	min-height:375px;
	margin:0 auto;

	padding: 10px;

	background-image: linear-gradient(to bottom,  #04009d 0%,#06004d 100%);
	border-radius:4px;
	border: solid 1px #424542;
	box-shadow: 1px 1px #e7dfe7, -1px -1px #e7dfe7, 1px -1px #e7dfe7, -1px 1px #e7dfe7, 0 -2px #9c9a9c, -2px 0 #7b757b, 0 2px #424542;
}

.grid img {
	margin: 5px;
}

.grid .back { 
	cursor: pointer;
	transition: .3s;
	position: relative;
}

.grid .back:hover {
	opacity: .9;
}

.grid img:nth-child(4n) {
	margin: 5px;
}

.grid img:first-child, .grid img:nth-child(4n+1) {
	margin: 5px;
}

#retry {
	font-weight:bold;
	color:#ffffff;
	align-items: center;
	text-decoration:none;
	cursor: pointer;
	display:none;
}

#retry.new-game {
	display:flex;
}

#retry:before {
	content:'';
	background-image: url('images/cursor.png');
	display:block;
	width:37px;
	height:18px;
	margin-right:10px;
}

@media (min-width: 680px) {
	.grid:after {
		content: url('images/cloud-field.webp');
		position: absolute;
		right: -100px;
		bottom: -50px;
	}
}