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

body {
  overflow: hidden;
  background: #141414;
  background: url(https://shots.codepen.io/username/pen/BaGqXY-1280.jpg?version=1411352597);
}
.text {
  font-size: 25px;
  font-family: "Press Start 2P";
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
#tetris {
  width: 360px;
  border: 1px solid rgb(255, 255, 255);
  padding: 20px;
  border-radius: 36px;
  background: #141414;
}
.tetris {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 68vh;
}
#canvas {
  width: 200px;
  height: 440px;
  position: relative;
  color: #fff;
  border: 1px #ffffff solid;
  background: linear-gradient(#ffffff40 1px, transparent 1px) 0 0,
    linear-gradient(90deg, #ffffff40 1px, transparent 1px) 0 0;
  background-size: 20px 20px;
  margin: 0;
}
#canvas h1 {
  margin: 0;
  padding: 0;
  text-align: center;
  font-size: 30px;
  padding-top: 200px;
}
.piece {
  border: 1px solid white;
  position: absolute;
}

#start {
  position: relative;
  padding: 10px 22px;
  border-radius: 6px;
  border: none;
  color: #fff;
  cursor: pointer;
  background-color: #a000f0;
  transition: all 0.2s ease;
  font-family: "Press Start 2P";
}
#start:active {
  transform: scale(0.96);
}
@keyframes blink {
  to {
    outline: #e1ff5f solid 1px;
  }
}

.red {
  color: #f00000;
}

.square {
  position: absolute;
  width: 19px;
  height: 19px;
  border: 1px solid white;
}
.type0 {
  background-color: #a000f0;
}
.type1 {
  background-color: #00f0f0;
}
.type2 {
  background-color: #f0a000;
}
.type3 {
  background-color: #0000f0;
}
.type4 {
  background-color: #00f000;
}
.type5 {
  background-color: #f00000;
}
.type6 {
  background-color: #f0f000;
}
#next_shape {
  position: relative;
  border: 1px solid white;
  width: 110px;
  height: 110px;
  border-radius: 20px;
}
#info {
  color: #00f000;
  float: right;
  width: 110px;
  height: 420px;
  padding: 10px;
}
p {
  font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
    "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
}
#keyboard {
  display: grid;
  grid-template-columns: repeat(2, 50px);
  grid-gap: 10px;
}

button {
  padding: 10px;
}
.info {
  font-family: "Press Start 2P";
  font-size: 13px;
}