body {
  margin: 0;
}

#number {
  justify-content: center;
  text-align: center;
  font-family: "Bebas Neue", cursive;
  font-weight: 800;
  font-size: 20vmin;
  color: #202020;
  display: flex;
  padding-top: 3vmin;
}

#clear,
#TKFP {
  justify-content: center;
  text-align: center;
  font-family: "Foldit", cursive;
  font-weight: 600;
  color: #fff;
  display: none;
  z-index: 100;
  position: fixed;
}

#clear {
  padding-bottom: 20vmin;
  font-size: 20vmin;
}

#TKFP {
  padding-top: 20vmin;
  font-size: 10vmin;
}

.middle {
  height: 10vmin;
  width: 100vw;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}

.top {
  height: 10vmin;
  width: 100vw;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bottom {
  height: 10vmin;
  width: 100vw;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}

.left {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5vmin 5vmin 5vmin 0;
  border-color: transparent #202020 transparent transparent;
  margin-right: 10vmin;
  cursor: pointer;
}

.right {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5vmin 0 5vmin 5vmin;
  border-color: transparent transparent transparent #202020;
  margin-left: 10vmin;
  cursor: pointer;
}

.up {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 5vmin 5vmin 5vmin;
  border-color: transparent transparent #202020 transparent;
  margin-bottom: 10vmin;
  cursor: pointer;
}

.down {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5vmin 5vmin 0 5vmin;
  border-color: #202020 transparent transparent transparent;
  margin-top: 10vmin;
  cursor: pointer;
}

.main {
  height: 100vh;
  width: 100vw;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}

.black {
  height: 0vh;
  width: 100vw;
  background-color: #202020;
  position: fixed;
  z-index: 100;
}

.loadingscreen {
  height: 100vh;
  width: 100vw;
  background-color: #202020;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
  flex-flow: column;
  position: fixed;
}

.base {
  height: 2vmin;
  width: 20vmin;
  background-color: white;
}

.wrap {
  width: 20vmin;
  background-color: #202020;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-around;
  justify-content: space-around;
}

.stick {
  height: 10vmin;
  width: 1vmin;
  background-color: white;
}

.piece-big {
  height: 2vmin;
  width: 5vmin;
  background-color: white;
  transform: translate(0vmin, 10vmin);
}

.piece-small {
  height: 2vmin;
  width: 3vmin;
  background-color: white;
  transform: translate(0vmin, 10vmin);
}

.vertical {
  width: 5vmin;
  height: 14vmin;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
  -webkit-align-items: center;
  align-items: center;
  flex-flow: column;
}