@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

:root {
	--transition-time: .7s;
}

* {
	margin: 0 auto;
}

body {
	background: black;
	color: silver;
	display: flex;
	
}

header {
	display: flex;
	justify-content: center;
	flex-direction: column;
}

button {
	position: absolute;
}

aside {
	
	max-width: 350px;
	height: 800px;
	left: 80px;
	top: 40px;
	position: absolute;

}

#aside-container {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	height: 800px;
}

#content-container {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

p {
	text-indent: 30px;
	margin-bottom: 20px;
	line-height: 1.3em;
}

h2 {
	font-size: 64px;
}

h4 {
	margin-bottom: 30px;
}

#header-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}


#main-container {
	margin-top: 40px;
	width: 361px;
	height: 645px;
	position: relative;
	
	

}

#next-text {
	position: absolute;
  top: 8px;
  font-family: 'Press Start 2P', cursive;
  font-size: 20px;
  left: -30px;
  color: red;
}

#level-count-container {
	display: flex;
	position: absolute;
	right: -150px;
	bottom: 0;
	flex-direction: column;
	align-items: center;
}

#level-count {
	background: black;
	right: -120px;
	bottom: 60px;
	font-size: 64px;
}

/*#level-count::after {
	position: absolute;
	content: "999";
	top: 0;
	right: 0;
	color: rgba(0,0,0,0);
	text-decoration: underline darkred;
}*/

#section {
	background: black;
	right: -120px;
	bottom: -30px;
	font-size: 64px;
}

#section::after {
	position: absolute;
	content: "999";
	bottom: 0;
	right: 0;
	color: rgba(0,0,0,0);
	text-decoration: overline darkred;
	
}

span {
	position: absolute;
  z-index: 20;
  word-wrap: ;
	transform: scaleX(0);
  background: transparent;
  color: darkred;
  font-size: 128px;
  font-weight: 900;
  transition: transform 2s ease-in-out;
  white-space: nowrap;
  text-shadow: 8px 8px 7px rgb(25 25 25 / 85%);
}

span::after {
	position: absolute;
  color: rgba(105,0,0,1);
  content: "Game Over";
  left: 0;
  top: 0;
  font-size: 128px;
  font-weight: 900;
  white-space: nowrap;
  text-shadow: -3px -3px 5px rgb(255 250 250 / 35%);
}

section {
	position: absolute;
  z-index: 20;
  word-wrap: ;
	transform: scaleX(0);
  background: transparent;
  color: darkred;
  font-size: 128px;
  font-weight: 900;
  transition: transform 2s ease-in-out;
  white-space: nowrap;
  text-shadow: 8px 8px 7px rgb(25 25 25 / 85%);
}

section::after {
	position: absolute;
  color: rgba(105,0,0,1);
  content: "You Win!";
  left: 0;
  top: 0;
  font-size: 128px;
  font-weight: 900;
  white-space: nowrap;
  text-shadow: -3px -3px 5px rgb(255 250 250 / 35%);
}

.expand-horiz {
	transform: scaleX(100%);
}

#refresh {
	position: absolute;
}

#left-edge {
	position: absolute;
	width: 30px;
	height: 600px;
	left: -5px;
	top: 60px;
	background: linear-gradient(0.75turn, #3f87a6, #ebf8e1, #405060);
}

#left-edge:before {
  background: inherit;
  top: -30px;
  content: '';
  display: block;
  height: 50%;
  left: 0;
  position: absolute;
  right: 0;
  transform: skewY(45deg);
  transform-origin: 0;
  z-index: -1;
}

#left-edge:after {
  background: inherit;
  bottom: 0;
  content: '';
  display: block;
  height: 50%;
  left: 0;
  position: absolute;
  right: 0;
  transform: skewY(-45deg);
  transform-origin: 100%;
  z-index: -1;
}


#right-edge {
	position: absolute;
	width: 30px;
	height: 600px;
	right: -5px;
	top: 60px;
	background: linear-gradient(0.25turn, #3f87a6, #ebf8e1, #405060);
}

#right-edge:before {
  background: inherit;
  top: -30px;
  content: '';
  display: block;
  height: 50%;
  left: 0;
  position: absolute;
  right: 0;
  transform: skewY(-45deg);
  transform-origin: 100%;
  z-index: -1;
}

#right-edge:after {
  background: inherit;
  bottom: 0;
  content: '';
  display: block;
  height: 50%;
  left: 0;
  position: absolute;
  right: 0;
  transform: skewY(45deg);
  transform-origin: 0;
  z-index: -1;
}

#bottom-edge {
	position: absolute;
	width: 371px;
	height: 30px;
	left: -5px;
	bottom: -46px;
	background: linear-gradient(0.50turn, #3f87a6, #ebf8e1, #405060);
	z-index: -10;
}

#top-edge {
	position: absolute;
	width: 371px;
	height: 30px;
	left:  -5px;
	top: 30px;
	background: linear-gradient(0turn, #3f87a6, #ebf8e1, #405060);
	z-index: -10;
}

#play-area {
	width: 310px;
	height: 620px;
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	position: relative;

}

#preview-container {
	width: 361px;
	height: 62px;
	position: absolute;
	display: flex;
	justify-content: center;


}

#preview-area {
	width: 124px;
	height: 62px;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	position: absolute;
	top: -32px;
}

.cell {
	width: 30px;
	height: 30px;
	border-radius: 3px;
	z-index: -11;
}

.has-block {
	box-shadow: inset 2px 2px 2px rgba(255, 255, 255, .4), inset -2px -2px 2px rgba(0, 0, 0, .4);
}

.i-piece {
	background: red;
}

.t-piece {
	background: teal;
}

.s-piece {
	background: purple;
}

.z-piece {
	background: green;
}

.j-piece {
	background: blue;
}

.l-piece {
	background: darkorange;
}

.o-piece {
	background: yellow;
}

.game-over {
	background: slategray;
}

.break0 {
	animation: break0 var(--transition-time) ease forwards;
	opacity: 1;
	z-index: 20;
}
.break1 {
	animation: break1 var(--transition-time) ease forwards;
	opacity: 1;
	z-index: 20;
}
.break2 {
	animation: break2 var(--transition-time) ease forwards;
	opacity: 1;
	z-index: 20;
}
.break3 {
	animation: break3 var(--transition-time) ease forwards;
	opacity: 1;
	z-index: 20;
}
.break4 {
	animation: break4 var(--transition-time) ease forwards;
	opacity: 1;
	z-index: 20;
}
.break5 {
	animation: break5 var(--transition-time) ease forwards;
	opacity: 1;
	z-index: 20;
}
.break6 {
	animation: break6 var(--transition-time) ease forwards;
	opacity: 1;
	z-index: 20;
}
.break7 {
	animation: break7 var(--transition-time) ease forwards;
	opacity: 1;
	z-index: 20;
}
.break8 {
	animation: break8 var(--transition-time) ease forwards;
	opacity: 1;
	z-index: 20;
}
.break9 {
	animation: break9 var(--transition-time) ease forwards;
	opacity: 1;
	z-index: 20;
}


@keyframes break0 {
	25% {transform: translate(-25px, -15px) rotate(-150deg); opacity: 1}
	50% {opacity: .4}
	100% {transform: translate(-100px, 150px) rotate(-450deg); opacity: 0;}
}
@keyframes break1 {
	25% {transform: translate(-20px, -15px) rotate(-120deg); opacity: 1}
	50% {opacity: .4}
	100% {transform: translate(-80px, 150px) rotate(-360deg); opacity: 0;}
}
@keyframes break2 {
	25% {transform: translate(-15px, -15px) rotate(-90deg); opacity: 1}
	50% {opacity: .4}
	100% {transform: translate(-60px, 150px) rotate(-270deg); opacity: 0;}
}
@keyframes break3 {
	25% {transform: translate(-10px, -15px) rotate(-60deg); opacity: 1}
	50% {opacity: .4}
	100% {transform: translate(-40px, 150px) rotate(-180deg); opacity: 0;}
}
@keyframes break4 {
	25% {transform: translate(-5px, -15px) rotate(-30deg); opacity: 1}
	50% {opacity: .4}
	100% {transform: translate(-20px, 150px) rotate(-90deg); opacity: 0;}
}
@keyframes break5 {
	25% {transform: translate(5px, -15px) rotate(30deg); opacity: 1}
	50% {opacity: .4}
	100% {transform: translate(20px, 150px) rotate(90deg); opacity: 0;}
}
@keyframes break6 {
	25% {transform: translate(10px, -15px) rotate(60deg); opacity: 1}
	50% {opacity: .4}
	100% {transform: translate(40px, 150px) rotate(180deg); opacity: 0;}
}
@keyframes break7 {
	25% {transform: translate(15px, -15px) rotate(90deg); opacity: 1}
	50% {opacity: .4}
	100% {transform: translate(60px, 150px) rotate(270deg); opacity: 0;}
}
@keyframes break8 {
	25% {transform: translate(20px, -15px) rotate(120deg); opacity: 1}
	50% {opacity: .4}
	100% {transform: translate(80px, 150px) rotate(360deg); opacity: 0;}
}
@keyframes break9 {
	25% {transform: translate(25px, -15px) rotate(150deg); opacity: 1}
	50% {opacity: .4}
	100% {transform: translate(100px, 150px) rotate(450deg); opacity: 0;}
}