body {
  background: #202028;
  color: #fff;
  font-family: sans-serif;
  font-size: 2em;
}

canvas {
  border: solid 0.2em #fff;
}

.player {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

#tetris {
  height: 90vh;
  margin: 3vh 0;
}

#overlay {
  display: none;
  position: absolute;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  text-align: center;
}

#overlayText {
  margin: 40px 0;
  font-size: 2.5rem;
  text-transform: uppercase;
}

#preview {
  border: 3px solid #fff;
  padding: 50px;
}

.gameStuffWrapper {
  margin: 20px 20px 20px 40px;
}

.scoreWrapper {
  margin-bottom: 40px;
  text-align: center;
}
.scoreWrapper h2 {
  margin-bottom: 10px;
}

#score {
  font-size: 3rem;
}

.canvasWrapper {
  position: relative;
}

.button {
  display: inline-block;
  font-weight: bold;
  letter-spacing: 2px;
  padding: 15px 30px;
  text-decoration: none;
  text-transform: uppercase;
  -webkit-transition: background 300ms;
  transition: background 300ms;
}
.button.outline {
  color: white;
  overflow: hidden;
  position: relative;
}
.button.outline:before, .button.outline:after {
  background-color: white;
  content: "";
  height: 2px;
  left: 0;
  position: absolute;
  top: 0;
  -webkit-transition: -webkit-transform 300ms;
  transition: -webkit-transform 300ms;
  transition: transform 300ms;
  transition: transform 300ms, -webkit-transform 300ms;
  width: 100%;
}
.button.outline .lines:before, .button.outline .lines:after {
  background-color: white;
  content: "";
  height: 2px;
  left: 0;
  position: absolute;
  top: 0;
  -webkit-transition: -webkit-transform 300ms;
  transition: -webkit-transform 300ms;
  transition: transform 300ms;
  transition: transform 300ms, -webkit-transform 300ms;
  width: 100%;
}
.button.outline:before {
  bottom: 0;
  top: auto;
}
.button.outline .lines {
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 0;
}
.button.outline .lines:before {
  height: 100%;
  width: 2px;
}
.button.outline .lines:after {
  height: 100%;
  width: 2px;
  left: auto;
  right: 0;
}
.button:hover:before {
  -webkit-transform: translateX(-101%);
          transform: translateX(-101%);
}
.button:hover:after {
  -webkit-transform: translateX(101%);
          transform: translateX(101%);
}
.button:hover .lines:before {
  -webkit-transform: translateY(-101%);
          transform: translateY(-101%);
}
.button:hover .lines:after {
  -webkit-transform: translateY(101%);
          transform: translateY(101%);
}