.TheGameScreen
{
	position:absolute;
	width:100%;
	height:100%;
	top:0%;
	left:0%;
	border:3px solid rgba(255, 255, 255, 0.5);
	padding:10pt;
	overflow:hidden;
	opacity:1;
	
}

.active-brick {
  filter: brightness(1.5);
  transform: scale(1.0);
}

.quatrisBrick {

  filter: brightness(1.0);
  transition: background-color 0.6s ease, transform 0.6s ease;
}
.quatrisBrick.clearing {
  animation: clearLine 0.3s ease-out forwards;
}

@keyframes clearLine {
  0% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.1); }
  100% { opacity: 0; transform: scale(0); }
}


.quatrisNextBrick
{
	position:absolute;
	display:inline-block;
	width:20%;
	height:100%;
	overflow:hidden;	
}



.quatrisBrickRed
{
	background-color:rgba(250, 0, 0, 1);
	box-shadow: inset 5px 10px 20px 5px rgba(40, 0, 0, 1);
}
.quatrisBrickBlue
{
	background-color:rgba(0, 0, 250, 1);
	box-shadow: inset 5px 10px 20px 5px rgba(0, 0, 40, 1);
}
.quatrisBrickGreen
{
	background-color:rgba(0, 250, 0, 1);
	box-shadow: inset 5px 10px 20px 5px rgba(0, 40, 0, 1);
}


.quatrisBrickPurple
{
	background-color:rgba(250, 0, 250, 1);
	box-shadow: inset 5px 10px 20px 5px rgba(40, 0, 40, 1);
}
.quatrisBrickLightBlue
{
	background-color:rgba(100, 100, 250, 1);
	box-shadow: inset 5px 10px 20px 5px rgba(40, 40, 80, 1);
}
.quatrisBrickYellow
{
	background-color:rgba(255, 255, 0, 1);
	box-shadow: inset 5px 10px 20px 5px rgba(40, 40, 0, 1);
}
.quatrisBrickSome
{
	background-color:rgba(255, 255, 255, 1);
	box-shadow: inset 5px 10px 20px 5px rgba(40, 40, 40, 1);
}


.quatrisBrickEmpty
{
	background-color:rgba(0, 0, 0, 1);
	box-shadow: inset 5px 10px 20px 5px rgba(10, 10, 10, 1);
}


.quatrisNextRow
{
	position:absolute;
	width:100%;
	height:20%;	
}



.quatrisBrickFieldClass {
	position:absolute;
	top:13%;
	left:10%;
  display: grid;
  grid-template-columns: repeat(10, 1fr); /* 10 columns */
  grid-template-rows: repeat(20, 1fr);   /* 20 rows */
  width: 80%;
  height: 85%;
  margin: auto;
  background-color: rgba(0, 0, 0, 1);
  border: 1px solid rgba(90, 90, 90, 0.7);
  border-top-style: none;
  box-sizing: border-box;
}

.quatrisNextPieceClass
{
	position:absolute;
	width:20%;
	height:10%;
	top:2.5%;
	left:40%;
	background-color:rgba(210, 210, 210, 1);
	border:2px solid rgba(90, 90, 90, 1);
	border-bottom-style:none;
}


.quatrisNextPieceClass::after {
  /* Tail styling */
  content: "";
  position: absolute;
  left:46%;
  bottom:-15%;
  width:5pt;
  height:5pt;
  border: 1px solid #ccc;
  border-top-style:none;
  border-left-style:none;
  background-color: #000;
  rotate:45deg;
}


.quatrisGhostBrick {
  opacity: 0.3;
  filter: brightness(150%);
  pointer-events: none;
  transition: none;
}



.LevelKeep, .ScoreKeep
{
	position:absolute;
	font-size:16pt;
	font-family: 'Courier New', monospace;
	text-align:center;
	opacity:0.3;
}


.ScoreKeep
{
	left:65%;
	top:5%;
}


.ScoreKeep::after
{
position: absolute;
  left:25%;
  content: "SCORE";
  font-size:10pt;
	text-align:center;
  top:-100%;
  font-family: 'Courier New', monospace;
}





.LevelKeep
{
	left:15%;
	top:5%;
}


.LevelKeep::after
{
position: absolute;
  left:0%;
  content: "LvL";
  font-size:10pt;
	text-align:center;
  top:-100%;
  font-family: 'Courier New', monospace;
}