 body {
  font-family: 'Open Sans', sans-serif; 
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  display: grid;
  height: 100%;
  grid-template-columns: repeat(4, 1fr);
  grid-template-areas:
  "main main main aside"
  "main main main aside";
  background: #4D469F url('https://thumbs.gfycat.com/EvenScaryKitfox-size_restricted.gif');
}

.pop-up-screen {
  z-index: 1; 
  width: 1500px;
  height: 900px;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.background-opacity {
  background-color: #3E4347;
  opacity: 0.8;
  z-index: 0;
  width: 1780px;
  height: 950px;
  position: absolute;
}

.game-title {
  z-index: 2;
  font-size: 7rem;
  background: linear-gradient(330deg, #FEB545 0%, #F4DF61 100%), #fff;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 200px;
}

.input-container {
  z-index: 2;
  margin-bottom: 200px;
}

.player-inputs {
  font-size: 1.6rem;
  margin: 0 20px;
}

.start-game-btn {
  font-size: 1.5rem;
  background: rgba(241,231,103,1);
  background: -moz-linear-gradient(45deg, rgba(241,231,103,1) 7%, rgba(241,230,102,1) 9%, rgba(254,182,69,1) 86%, rgba(254,182,69,1) 100%);
  background: -webkit-gradient(left bottom, right top, color-stop(7%, rgba(241,231,103,1)), color-stop(9%, rgba(241,230,102,1)), color-stop(86%, rgba(254,182,69,1)), color-stop(100%, rgba(254,182,69,1)));
  background: -webkit-linear-gradient(45deg, rgba(241,231,103,1) 7%, rgba(241,230,102,1) 9%, rgba(254,182,69,1) 86%, rgba(254,182,69,1) 100%);
  background: -o-linear-gradient(45deg, rgba(241,231,103,1) 7%, rgba(241,230,102,1) 9%, rgba(254,182,69,1) 86%, rgba(254,182,69,1) 100%);
  background: -ms-linear-gradient(45deg, rgba(241,231,103,1) 7%, rgba(241,230,102,1) 9%, rgba(254,182,69,1) 86%, rgba(254,182,69,1) 100%);
  background: linear-gradient(45deg, rgba(241,231,103,1) 7%, rgba(241,230,102,1) 9%, rgba(254,182,69,1) 86%, rgba(254,182,69,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1e767', endColorstr='#feb645', GradientType=1 ); 
  border-radius: 16px;
  color: #3E4347;
  outline: none;
}

.left-section {
  grid-area: main;
}

.right-section {
  grid-area: aside;
}

.board-container {
  width: 950px;
  height: 400px;
}
.row1,
.row2,
.row3,
.row4 {
  display: flex;
}

.box-styles {
  width: 68px;
  height: 97.9px;
  border: solid black 1px;
  background-color: #33BF60;
}

.not-box {
  background-color: transparent;
  border: solid transparent 1px;
}

.label-container {
  display: flex;
  align-items: center;
}

.vowel-label,
.consonants-label {
  color: #ffffff;
  margin: 5px 70px;
  font-size: 1.5rem;
}

.consonants-label {
  margin-left: 272px;
}

.keyboard-container {
  width: 950px;
  height: 100px;
  border: solid 1px black;
  display: flex;
}

.letters {
  width: 100px;
  font-size: 1.5rem;
  border-color: #7190BC;
  outline: none;
}

.cons {
  background-color: #B3CEF3;
}

.cons:disabled {
  color: #7f7f7f;
}

.cons:disabled:hover {
  cursor: not-allowed;
  font-weight: 400;
  background-color: #B3CEF3;
  color: #7f7f7f;
}

.letters:hover {
  background-color: #869BB6;
  font-weight: bold;
  color: #ffffff;
}

.vowels:disabled {
  background-color: #F3D9B3;
  color: #7f7f7f;
  font-weight: 400;
}

.vowels {
  background-color: #F3D9B3;
}

.round-container {
  margin: 15px 20px;
  width: 250px;
}

.round-text {
  color: #fff;
  font-size: 2.2rem;
}

.tile {
  background: #fff;
  color: #fff;
  font-size: .01px;
}

.correct-letter {
  color: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 4.7em;
  background: #fff;
}

.catergory-container {
  display: flex;
  justify-content: space-between;
}

.catergory-text {
  color: #fff;
  font-size: 2.2rem;
  margin: 15px 20px;
}

.spinner-score-text {
  margin-right: 24px;
  margin-top: 17px;
  font-size: 2rem;
  color: #ffffff;
}

.board-container,
.keyboard-container {
  margin-left: 20px;
}

.right-section {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.player-one-container,
.player-two-container,
.player-three-container,
.btn-styles {
  display: flex;
  border: solid black 1px;
  border-radius: 40px;
  margin: 15px 20px;
  width: 400px
}

.player-one-container {
  background-color: #ED6E6F;
}

.player-two-container {
  background-color: #FADF53;
}

.player-three-container {
  background-color: #627DE7;
}

.player-font {
  margin-left: 30px;
  font-size: 1.2rem;
}

.spinner {
  width: 300px;
  margin: auto;
}

.spin {
  -webkit-animation: rotation .7s infinite linear;
}

@-webkit-keyframes rotation {
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(359deg);
    }
}

.spin-btn {
  background-color: #EB89F9;
  outline: none;
}

.spin-btn:hover {
  background-color: #CE78DA;
  color: #ffffff;
}

.solve-btn {
  background-color: #97E96E;
  outline: none;
}

.solve-btn:hover {
  background-color: #84CC60;
  color: #ffffff;
}

.buy-btn {
  background-color: #F5B768;
  outline: none;
}

.buy-btn:hover {
  background-color: #D6A05B;
  color: #ffffff;
}

.btn-styles {
  justify-content: center;
  height: 67.40px;
  font-size: 1.2rem;
  font-weight: 800;
}

.pop-up-solve {
  z-index: 1;
  position: absolute;
  background-color: #5A91D6;
  width: 950px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.solve-prompt {
  font-size: 2rem;
  margin: 3px;
  color: #ffffff;
}

.solve-input {
  width: 400px;
  outline: none;
  height: 40px;
  border: none;
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
  font-size: 1.5rem;
}

.sovle-puzzle-btn {
  height: 43.5px;
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
  font-size: 1.5rem;
  margin-left: -5px;
  padding-bottom: 1.9px;
}

.hide {
  visibility: hidden;
}