* {
  font-family: sans-serif;
  font-size: large;
  padding: 0px;
  margin: 0px;
}

body {
  background-color: rgb(28, 29, 32);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.gameContainer {
  /* background-color: green; */
  display: flex;
  flex-direction: column;
  align-items: center;
}

.gameBoardContainer {
  /* background-color: blue; */
}

.buttonContainer {
  /* background-color: red; */
  display: flex;
  margin-bottom: 2px;
  margin-top: 5px;
  justify-content: space-around;
  background-color: rgb(162, 163, 151);
  padding: 5px;
  border-radius: 10px;
}

.btn {
  border: none;
  height: 80px;
  padding: 5px;
  background-color: rgb(255, 255, 244);
  border: 2px solid rgb(0, 0, 0);
}

.btn:hover {
  background-color: rgb(48, 48, 48);
}

#timer {
  /* background-color: red; */
  /* border: 1px solid black; */
  padding-left: 10px;
  padding-right: 10px;
  line-height: 80px;
  font-size: 25px;
}
.icon {
  height: 100%;
}

#boardContainer {
  /* background-color: gold; */
}

.wordContainer {
  /* background-color: blue; */
  display: flex;
  flex-direction: row;
}

.letterContainer {
  position: relative;
  width: 60px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  color: white;
  /* border: 2px solid rgb(106, 102, 112); */
  border: 2px solid rgb(120, 93, 160);
  background-color: transparent;
  /* border-radius: 10%; */
  margin: 3px;
  transition: all 0.8s ease;
  transform-style: preserve-3d;
  perspective: 1000px;
}

.front {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  background-color: rgb(31, 32, 36);
  line-height: 60px;
  /* background-color: green; */
}

.back {
  backface-visibility: hidden;
  position: absolute;
  width: 100%;
  height: 100%;
  line-height: 60px;
  background-color: rgb(64, 66, 73);
  transform: rotateX(-180deg);
}

.animation {
  -webkit-animation-name: shake;
  -webkit-animation-duration: 0.5s;
  -webkit-transform-origin: 50% 50%;
}

.puls {
  animation-name: pulsing;
  animation-duration: 0.8s;
  animation-iteration-count: infinite;
}

.flip {
  transform: rotateX(-180deg);
}

#keyboardContainer {
  /* background-color: rgb(121, 121, 105); */
  /* padding: 5px; */
  border-radius: 10px;
  /* padding: 10px; */
  display: flex;
  flex-direction: column;
  align-items: center;
}

.keyRowContainer {
  background-color: skyblue;
  display: flex;
  flex-direction: row;
  background-color: rgb(162, 163, 151);
  /* padding-left: 4px;
  padding-right: 4px;
  padding-bottom: 2px;
  padding-top: 2px; */
  border-radius: 10px;
}

.keyContainer {
  position: relative;
  width: 60px;
  height: 60px;
  border-radius: 10px;
  border: 1px solid rgb(0, 0, 0);
  text-align: center;
  line-height: 60px;

  background-color: transparent;
  margin: 3px;
  transition: all 0.8s ease;
  transform-style: preserve-3d;
  perspective: 1000px;
  /* overflow: hidden; */

  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.keyFront {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  /* background-color: rgb(90, 119, 238); */
  background-color: rgb(255, 255, 244);
  border-radius: 10px;
}

.keyBack {
  backface-visibility: hidden;
  position: absolute;
  width: 100%;
  height: 100%;
  line-height: 60px;
  background-color: rgb(70, 182, 107);
  transform: rotateX(-180deg);
  border-radius: 10px;
}

.longKeyContainer {
  width: 100px;
  height: 60px;
  border-radius: 10px;
  border: 1px solid rgb(0, 0, 0);
  /* background-color: rgb(146, 140, 153); */
  background-color: rgb(255, 255, 244);
  text-align: center;
  line-height: 60px;
}

@keyframes pulsing {
  0% {
    border: 2px solid rgb(202, 186, 226);
  }
  50% {
    border: 2px solid rgb(120, 93, 160);
  }
  100% {
    border: 2px solid rgb(202, 186, 226);
  }
}

@-webkit-keyframes shake {
  0% {
    -webkit-transform: translate(2px, 1px) rotate(0deg);
  }
  10% {
    -webkit-transform: translate(-1px, -2px) rotate(-1deg);
  }
  20% {
    -webkit-transform: translate(-3px, 0px) rotate(1deg);
  }
  30% {
    -webkit-transform: translate(0px, 2px) rotate(0deg);
  }
  40% {
    -webkit-transform: translate(1px, -1px) rotate(1deg);
  }
  50% {
    -webkit-transform: translate(-1px, 2px) rotate(-1deg);
  }
  60% {
    -webkit-transform: translate(-3px, 1px) rotate(0deg);
  }
  70% {
    -webkit-transform: translate(2px, 1px) rotate(-1deg);
  }
  80% {
    -webkit-transform: translate(-1px, -1px) rotate(1deg);
  }
  90% {
    -webkit-transform: translate(2px, 2px) rotate(0deg);
  }
  100% {
    -webkit-transform: translate(1px, -2px) rotate(-1deg);
  }
}