@font-face {
  font-family: grobold;
  src: url(font/GROBOLD.ttf);
}

@font-face {
  font-family: verdana;
  src: url(font/Verdana.ttf);
}

@font-face {
  font-family: arial;
  src: url(font/arial.ttf);
}




#wrapper {
  position: absolute;
  width: 1920px;
  height: 1080px;
  -webkit-user-select: none;
  /* Safari */
  -khtml-user-select: none;
  /* Konqueror HTML */
  -moz-user-select: none;
  /* Old versions of Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently
                                  supported by Chrome, Opera and Firefox */
}


div#wrapper::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
  width: 2880px;
  height: 1620px;
  background-image: url(../bground.jpg);
  background-size: 100% 100%;
  background-repeat: repeat-x;
}

.gameStartBG {
  position: absolute;
  width: 1920px;
  height: 1080px;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url(../assets/SlicedElements/GameScreen/Background.jpg);
  background-size: cover;
  user-select: none;
  z-index: 3;

}

.chrsps1 {
  position: absolute;
  right: 29px;

}

.chrsps2 {
  position: absolute;
  right: 215px;

}


#startPanel {
  position: absolute;
  top: 28px;
  left: 175px;
  width: 1564px;
  height: 1050px;
  user-select: none;
  background-image: url(../assets/image/startscreen/panel.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 3;
}

#centerBox {
  position: absolute;
  top: 228px;
  right: 312px;
  width: 928px;
  height: 370px;
  background-image: url(../assets/image/startscreen/centerboxempty.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  user-select: none;
  z-index: 3;
}

#startButton {
  position: absolute;
  width: 428px;
  height: 149px;
  bottom: 243px;
  right: 569px;
  user-select: none;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(../assets/image/startscreen/startbutton.png);
  background-size: cover;
  cursor: pointer;
  z-index: 3;
  transform: scale(1, 1);
}

#startButton:hover {
  transform: scale(0.9, 0.9);
}

textarea:focus, input:focus {
  outline: none;
}

#gamePanel {
  position: absolute;
  top: 28px;
  left: 175px;
  width: 1564px;
  height: 1050px;
  user-select: none;
  background-image: url(../assets/image/gamescreen/Panel.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 3;
}

#gameCenterBox {
  position: absolute;
  top: 239px;
  right: 312px;
  width: 928px;
  height: 280px;
  background-image: url(../assets/image/gamescreen/wordboxempty.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  user-select: none;
  z-index: 3;
}

#baseWordAns {
  position: absolute;
  bottom: 304px;
  width: 277px;
  left: 646px;
  background-color: transparent;
  text-decoration: none;
  display: inline-block;
  font-size: 81px;
  color: black;
  text-align: center;
  border-color: transparent;
  z-index: 3;
  font-family: arial;
}

#base {
  position: absolute;
  top: 562px;
  left: 717px;
  width: 134px;
  height: 63px;
  background-image: url(../assets/image/gamescreen/base.png);
  background-size: cover;
  user-select: none;
  z-index: 3;

}

#wordButton {
  position: absolute;
  width: 428px;
  height: 149px;
  bottom: 271px;
  right: 565px;
  user-select: none;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(../assets/image/gamescreen/wordbutton.png);
  background-size: cover;
  z-index: 3;
}

#redButton {
  position: absolute;
  width: 428px;
  height: 149px;
  bottom: 271px;
  right: 565px;
  user-select: none;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(../assets/image/gamescreen/redbutton.png);
  background-size: cover;
  z-index: 3;
}

#greenButton {
  position: absolute;
  width: 428px;
  height: 149px;
  bottom: 271px;
  right: 565px;
  user-select: none;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(../assets/image/gamescreen/greenbutton.png);
  background-size: cover;
  z-index: 3;
}

#back {
  position: absolute;
  bottom: 211px;
  left: 224px;
  width: 89px;
  height: 123px;
  background-image: url(../assets/image/gamescreen/back.png);
  background-size: cover;
  user-select: none;
  z-index: 4;
  transform: scale(1, 1);
}

#back:hover {
  transform: scale(0.9, 0.9);
}

#forward {
  position: absolute;
  bottom: 211px;
  right: 224px;
  width: 89px;
  height: 123px;
  background-image: url(../assets/image/gamescreen/forward.png);
  background-size: cover;
  user-select: none;
  z-index: 4;

  transform: scale(1, 1);
}

#forward:hover {
  transform: scale(0.9, 0.9);
}

#scorePanel {
  position: absolute;
  top: 28px;
  left: 175px;
  width: 1564px;
  height: 1050px;
  user-select: none;
  background-image: url(../assets/image/scorescreen/panel.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 3;
}

.scoreNum {
  position: absolute;
  font-family: grobold;
  width: 125px;
  right: 334px;
  top: 68px;
  font-size: 63px;
  color: black;
  text-align: center;
}

#startWord {
  position: absolute;
  top: 137px;
  right: 0px;
  width: 923px;
  color: black;
  font-size: 92px;
  text-align: center;
  font-family: grobold;
}

.gameQus {
  color: black;
    font-size: 116px;
    line-height: 256px;
    text-align: center;
    font-family: arial !important;
}

#scorecenterBox {
  position: absolute;
  top: 251px;
  right: 332px;
  width: 928px;
  height: 280px;
  user-select: none;
  background-image: url(../assets/image/scorescreen/ScoreBox.png);
  background-size: cover;
  z-index: 3;
}

.scoreColor {
  color: #ff7900;
}

#replayButton {
  position: absolute;
  width: 428px;
  height: 149px;
  bottom: 267px;
  right: 567px;
  user-select: none;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(../assets/image/scorescreen/replaybutton.png);
  background-size: cover;
  cursor: pointer;
  z-index: 3;
  transform: scale(1, 1);
}

#replayButton:hover {
  transform: scale(0.9, 0.9);
}