* {
	margin: 0;
}

body {
	background: rgba(138, 134, 134, 0.593);
	height: 100vh;
	user-select: none;
	display: flex;
	justify-content: center;
	align-items: center;
}

.container {
	display: flex;
	gap: 50px;
}

.tetris {
	background-color: rgb(26, 15, 55);
	padding: 0.5vh;
	border-radius: 0.5vh;
	display: grid;
	grid-template-columns: repeat(10, auto);
	grid-template-rows: repeat(20, auto);
}

.tetris div {
	height: min(4vh, 7vw);
	width: min(4vh, 7vw);
	background-color: rgb(24, 31, 62);
	border-radius: 0.3vh;
	box-shadow: inset 2px 2px 2px rgba(113, 112, 112, 0.291);
}

.data{
	display: flex;
	flex-direction: column;
	gap: 20px;
	font-family: 'Montserrat', sans-serif;
}

.score {
	font-weight: 500;
}

.highScore {
	font-weight: 300;
}

.restart {
	display: block;
	padding: 10px;
	border: none;
	border-radius: 10px;
	background-color: rgba(32, 185, 65, 0.818);
	color: white;
	cursor: pointer;
}

.restart:hover {
	background-color: rgba(31, 145, 56, 0.818);	
}

#game-over-text {
	color: rgba(215, 44, 44, 0.91);
}

div.O,
div.L,
div.J,
div.I,
div.S,
div.Z,
div.T {
	box-shadow: inset 2px 2px 2px rgba(0, 0, 0, 0.372);
}

.tetris .O {
	background-color: rgba(195, 187, 39, 0.818);
}

.tetris .L {
	background-color: rgba(204, 94, 61, 0.818);
}

.tetris .J {
	background-color: rgba(32, 145, 190, 0.818);
}

.tetris .I {
	background-color: rgba(33, 58, 214, 0.818);
}

.tetris .S {
	background-color: rgba(32, 185, 65, 0.818);
}

.tetris .Z {
	background-color: rgba(191, 35, 35, 0.818);
}

.tetris .T {
	background-color: rgba(179, 56, 229, 0.818);
}