:root {
	--bodyColor: hsl(202, 100%, 5%);
	--tetrisColor: hsl(223, 20%, 18%);
	--linear: radial-gradient(circle,
			red, blueviolet, skyblue, lightcoral,
			darkcyan, orangered, greenyellow, paleturquoise,
			lawngreen, aliceblue, lightgoldenrodyellow, goldenrod,
			skyblue, royalblue, orangered, lightcyan);
	--container: hsl(223, 20%, 8%);
	--shadow: 0 0 0 2px hsl(201, 100%, 24%) inset;
	--minimalShadow: 0 0 0 1px hsl(201, 100%, 24%) inset;
	--blueColor: hsl(201, 100%, 78%);
	--darkBlueColor: hsl(201, 100%, 24%);
	--scoreColor: hsl(39, 78%, 72%);
	--highScoreColor: hsl(122, 76%, 66%);
	--number: hsl(218, 20%, 10%);
	--width: 300px;
}

*,
*::before,
*::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Unispace', monospace;
}

body,
html {
	width: 100%;
	height: 100%;
}

.wrap {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 40px;
	background: var(--bodyColor);
}

.wrap .tetris {
	--padding: 10px;
	background: var(--linear);
	width: auto;
	height: auto;
	padding: 14px;
	border-radius: 8px;
	background-size: calc(100% * 30);
	animation: position 15s ease-in-out infinite alternate;
	/*box-shadow: 0 0 10px rgba(255,255,255,0.4);*/
}

.wrap .tetris .tetris-container {
	--areas: calc(var(--width) / 10);
	--pixel: calc(var(--areas) - 1px);
	width: var(--width);
	height: calc(var(--width) + (var(--areas) * 10));
	background-color: var(--container);
	background-image:
		repeating-linear-gradient(to right,
			hsl(240, 0%, 12%) 0 1px,
			transparent 1px var(--pixel),
			hsl(240, 0%, 12%) var(--pixel) var(--areas)),
		repeating-linear-gradient(to bottom,
			hsl(240, 0%, 12%) 0 1px,
			transparent 1px var(--pixel),
			hsl(240, 0%, 12%) var(--pixel) var(--areas));
	background-size:
		var(--areas) var(--areas),
		var(--areas) var(--areas);
	background-position: 0 0;
	border-radius: 2px;
	display: grid;
	grid-template-columns: repeat(10, 1fr);
	grid-template-rows: repeat(20, 1fr);
	box-shadow: 0 0 0 10px var(--container),
		0 0 20px rgba(255, 255, 255, 0.4);
	overflow: hidden;
}

.wrap .tetris .tetris-container div,
.wrap .sideboard .sideboard-container .blocks .child .children:nth-child(2) div {
	position: relative;
	border-radius: 3px;
	background: var(--background);
	width: calc(100% - 2px);
	aspect-ratio: 1/1;
	place-self: center;
	box-shadow: 2px 2px 3px rgba(255, 255, 255, 0.5) inset,
		-2px -2px 3px rgba(0, 0, 0, 0.5) inset;
	overflow: hidden;
	background-image: radial-gradient(circle, rgba(255, 255, 255, 0.6), transparent);
	background-size: calc(100% / 2) calc(100% / 3);
	background-position: 0px 0px;
	background-repeat: no-repeat;
}

.wrap .tetris .tetris-container div {
	width: calc(100% - 3px);
}

.wrap .sideboard {
	width: auto;
	height: auto;
	background: var(--linear);
	border-radius: 8px;
	background-size: calc(100% * 10);
	animation: position 15s linear infinite alternate;
	padding: 14px;
}

.wrap .sideboard .sideboard-container {
	--height: 300px;
	--addWidth: calc(var(--height) / 10);
	--gap: 40px;
	--padding: 10px;
	width: var(--width);
	height: calc(var(--height) + (var(--addWidth) * 10));
	background-color: var(--container);
	box-shadow: 0 0 0 10px var(--container),
		0 0 20px rgba(255, 255, 255, 0.4);
	border-radius: 2px;
	padding: var(--padding);
	display: grid;
	grid-template-rows: auto 1fr;
	grid-gap: 20px;
}

.wrap .sideboard .sideboard-container .blocks {
	width: 100%;
	height: auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: var(--gap);
}

.wrap .sideboard .sideboard-container .blocks .child {
	overflow: hidden;
	border-radius: 5px;
	width: 100%;
	height: auto;
	display: grid;
	grid-template-rows: auto auto;
	box-shadow: var(--shadow);
}

.wrap .sideboard .sideboard-container .blocks .child .children:first-child {
	color: hsl(240, 0%, 82%);
	min-height: 30px;
	color: var(--blueColor);
	font-size: 14px;
	padding: 5px 10px;
	letter-spacing: 1px;
	font-weight: 600;
	display: flex;
	align-items: center;
	line-height: 1;
}

.wrap .sideboard .sideboard-container .blocks .child .children:last-child {
	--childWidth: calc((var(--width) - (var(--gap) + (var(--padding) * 2))) / 2);
	--areas: calc((var(--childWidth) / 6));
	width: var(--childWidth);
	aspect-ratio: 1/1;
	background-image:
		repeating-linear-gradient(to right,
			hsl(240, 0%, 15%) 0 1px,
			transparent 1px var(--areas),
			hsl(240, 0%, 15%) var(--areas) 100%),
		repeating-linear-gradient(to bottom,
			hsl(240, 0%, 15%) 0 1px,
			transparent 1px var(--areas),
			hsl(240, 0%, 15%) var(--areas) 100%);
	background-size: var(--areas) var(--areas);
	background-position: 0 0;
	box-shadow: var(--shadow);
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	grid-template-rows: repeat(6, 1fr);
}

.wrap .sideboard .sideboard-container .scoreboard {
	width: 100%;
	height: 100%;
	box-shadow: var(--shadow);
	border-radius: 5px;
	overflow: hidden;
	display: grid;
	grid-template-rows: auto auto 1fr;
}

.wrap .sideboard .sideboard-container .scoreboard header {
	width: 100%;
	height: auto;
	padding: 10px;
	color: var(--blueColor);
	font-size: 20px;
	font-weight: 600;
	box-shadow: var(--shadow);
	display: flex;
	align-items: center;
	justify-content: center;
	letter-spacing: 1px;
}

.wrap .sideboard .sideboard-container .scoreboard .board {
	width: 100%;
	height: auto;
	display: grid;
	grid-template-rows: repeat(4, 1fr);
}


.wrap .sideboard .sideboard-container .scoreboard .board .board-children {
	display: grid;
	/*flex-direction: column;*/
	width: 100%;
	grid-template-rows: 1fr 1fr;
	border-left: 2px solid var(--darkBlueColor);
	border-right: 2px solid var(--darkBlueColor);
	padding: 10px;
	font-size: 14px;
	border-radius: 5px;

}

.wrap .sideboard .sideboard-container .scoreboard .board .board-children div {
	color: var(--blueColor);
	padding: 6px 20px;
	font-weight: 600;
	letter-spacing: 1px;
}

.wrap .sideboard .sideboard-container .scoreboard .board .board-children div:first-child {
	background-color: var(--blueColor);
	color: var(--bodyColor);
	border-radius: 5px 5px 0 0;
}

.wrap .sideboard .sideboard-container .scoreboard .board .board-children .numbers {
	display: flex;
	justify-content: flex-end;
	background-color: var(--number);
	border-radius: 0 0 5px 5px;
}

.wrap .sideboard .sideboard-container .scoreboard .board .board-children .numbers#score {
	color: var(--scoreColor);
}

.wrap .sideboard .sideboard-container .scoreboard .board .board-children .numbers#highscore {
	color: var(--highScoreColor);
}

.wrap .sideboard .sideboard-container .scoreboard .reset {
	width: 100%;
	height: 100%;
	box-shadow: var(--shadow);
	display: grid;
	place-items: center;
	height: 100%;
}

.wrap .sideboard .sideboard-container .scoreboard .reset button {
	padding: 10px 40px;
	border-radius: 30px;
	background-color: var(--bodyColor);
	color: var(--blueColor);
	box-shadow: var(--shadow);
	transition: .1s linear;
	cursor: pointer;
	font-weight: 600;
	letter-spacing: 1px;
}

.wrap .sideboard .sideboard-container .scoreboard .reset button:hover {
	background-color: var(--blueColor);
	color: var(--bodyColor);
}

.remove {
	/*transition: .5s;*/
	animation: scaled .5s linear forwards !important;
}

/*Animation Keyframes Here*/

@keyframes position {
	100% {
		background-position: 100% 100%;
	}
}

@keyframes scaled {
	100% {
		filter: brightness(5);
		scale: 0;
	}
}