@import url("https://fonts.googleapis.com/css?family=Luckiest+Guy&display=swap");
@import url("https://fonts.googleapis.com/css?family=Architects+Daughter&display=swap");
@import url("https://fonts.googleapis.com/css?family=Kalam&display=swap");
html, body {
  padding: 0;
  margin: 0;
  font-family: "Kalam", cursive;
}

*, *::before, *::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.game-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  color: #FFF;
  background-color: #d1ccb4;
  background-image: url("../img/background.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.game-background ::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
.game-background ::-webkit-scrollbar-track {
  background: #fff;
}
.game-background ::-webkit-scrollbar-thumb {
  background: #eee;
}
.game-background ::-webkit-scrollbar-thumb:hover {
  background: #ddd;
}
.game-background .game-board {
  width: 100%;
  height: 100%;
  background-color: #000A;
  padding: 3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-y: auto;
}
.game-background .game-board a {
  text-decoration: none;
  color: #FFF;
}
.game-background .game-board a:hover {
  color: #d9d9d9;
  text-decoration: none;
}
.game-background .game-board .game-title {
  font-family: "Architects Daughter", cursive;
  font-size: 2.8rem;
  margin-bottom: 2.5rem;
}
.game-background .game-board .game-vert-menu {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 1.3rem;
  width: 100%;
  margin-bottom: 2rem;
}
.game-background .game-board .game-vert-menu a {
  display: block;
  background-color: #f0ad4e;
  color: #FFF;
  padding: 0.3rem 0.7rem;
  border-radius: 10px;
}
.game-background .game-board .game-vert-menu a:hover {
  background-color: #df8a13;
  color: #d9d9d9;
}
.game-background .game-board .game-nav-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  z-index: 97;
}
.game-background .game-board .game-nav-menu .game-nav-item {
  background-color: #df8a13;
  padding: 0.1rem 0.7rem;
  border-radius: 10px;
  font-size: 1.4rem;
  cursor: pointer;
}
.game-background .game-board .game-nav-menu .game-nav-item:hover {
  background-color: #c77c11;
}
.game-background .game-board .game-bottom-menu {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 97;
  background-color: #f0ad4e;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.5rem 1rem;
  box-shadow: 0 -5px 5px 0 #00000038;
}
.game-background .game-board .game-bottom-menu .game-players {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1.2rem;
}
.game-background .game-board .game-bottom-menu .game-players .game-player-white {
  color: #FFF;
}
.game-background .game-board .game-bottom-menu .game-players .game-player-black {
  color: #333;
}
.game-background .game-board .game-bottom-menu .game-players .game-player-white i, .game-background .game-board .game-bottom-menu .game-players .game-player-black i {
  visibility: hidden;
}
.game-background .game-board .game-bottom-menu .game-players .game-player-white.active i, .game-background .game-board .game-bottom-menu .game-players .game-player-black.active i {
  visibility: visible;
}
.game-background .game-board .game-bottom-menu .game-vs {
  color: #ffea4d;
  margin: 0 1rem;
}
.game-background .game-board .game-button {
  font-family: "Luckiest Guy", cursive;
  width: 100%;
  background-color: #f0ad4e;
  color: #FFF;
  text-transform: uppercase;
  text-align: center;
  padding: 0.5rem 0;
  font-size: 1.5rem;
  border-radius: 2rem;
}
.game-background .game-board .game-button:hover {
  background-color: #df8a13;
  color: #d9d9d9;
}
.game-background .game-board .game-button i {
  margin-right: 0.5rem;
}
.game-background .game-board .game-buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.game-background .game-board .game-buttons .game-button:not(:first-child) {
  margin-top: 1.5rem;
}
.game-background .game-board .game-users {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: "Kalam", cursive;
  width: 100%;
}
.game-background .game-board .game-users .game-user {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  border-radius: 2rem;
  background-color: #f0ad4e;
}
.game-background .game-board .game-users .game-user:not(:first-child) {
  margin-top: 1rem;
}
.game-background .game-board .game-users .game-user .game-level {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #df8a13;
  border-radius: 50%;
  margin-right: 0.5rem;
  width: 20px;
  height: 20px;
  font-size: 0.8rem;
}
.game-background .game-board .game-users .game-user .game-username {
  flex: 7;
}
.game-background .game-board .game-users .game-user .game-profile, .game-background .game-board .game-users .game-user .game-vs {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  background-color: #df8a13;
  border-radius: 5px;
  font-size: 0.8rem;
  height: 25px;
  width: 27px;
}
.game-background .game-board .game-users .game-user .game-profile:hover, .game-background .game-board .game-users .game-user .game-vs:hover {
  background-color: #c77c11;
}
.game-background .game-board .game-users .game-user .game-vs {
  color: #ffea4d;
}
.game-background .game-board .game-users .game-user .game-profile {
  margin-right: 0.5rem;
}
.game-background .game-board .game-matches {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  font-family: "Kalam", cursive;
}
.game-background .game-board .game-matches .game-match {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  border-radius: 2rem;
  background-color: #f0ad4e;
}
.game-background .game-board .game-matches .game-match:not(:first-child) {
  margin-top: 1rem;
}
.game-background .game-board .game-matches .game-match .game-white {
  color: #FFF;
}
.game-background .game-board .game-matches .game-match .game-black {
  color: #000;
}
.game-background .game-board .game-matches .game-match .game-host i, .game-background .game-board .game-matches .game-match .game-guest i {
  visibility: hidden;
}
.game-background .game-board .game-matches .game-match .game-host.game-turn i, .game-background .game-board .game-matches .game-match .game-guest.game-turn i {
  visibility: visible;
}
.game-background .game-board .game-matches .game-match .game-vs {
  margin: 0 0.5rem;
  color: #ffea4d;
}
.game-background .game-board .game-matches .game-match .game-play {
  margin-left: auto;
}
.game-background .game-board .game-menu {
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000C;
  z-index: 99;
  padding: 3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: all ease 0.5s;
}
.game-background .game-board .game-menu.active {
  top: 0;
}
.game-background .game-board .game-menu .game-close-menu {
  position: absolute;
  top: 0.3rem;
  right: 0.7rem;
  font-size: 2rem;
}
.game-background .game-board .game-message {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 90;
}
.game-background .game-board.chess-board {
  padding: 0;
}
@media (min-width: 600px) {
  .game-background .game-board, .game-background .game-board .game-menu {
    padding: 3rem 30%;
  }
}

.top-menu {
  z-index: 99;
  position: absolute;
  top: 1rem;
  left: 1rem;
  font-size: 2rem;
  width: auto;
  cursor: pointer;
}

.top-menu i {
  -webkit-transition: -webkit-transform 0.8s ease-in-out;
  transition: transform 0.8s ease-in-out;
  border-radius: 50%;
  box-shadow: 0 0 10px #00000055;
}
.top-menu i:hover i {
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
}

.chessboard {
  background-color: #d1ccb4;
  /*background-image: url('https://image.freepik.com/free-photo/top-view-wooden-background_23-2148234292.jpg');*/
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
}

#chessboard {
  max-height: 450px;
}

.chess {
  width: 100%;
  max-width: 450px;
  padding: 0 1rem;
  flex: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.menu {
  font-family: "Luckiest Guy", cursive;
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 -5px 5px 0 #00000088;
  padding: 0.5rem 1rem;
  background-color: #c07335;
  color: #fefefe;
}
.menu .btn {
  margin: 0 0.5rem;
}

[data-turn=w] {
  color: #FFF;
}

[data-turn=b] {
  color: #000;
}

.board-b72b1 {
  margin: 0 auto;
}

#modal-menu .modal-content {
  background-color: transparent;
  font-family: "Luckiest Guy", cursive;
  color: #f7f1e3;
}
#modal-menu .modal-content .menu-row {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 400px;
}
#modal-menu .modal-content .menu-row:not(:last-child) {
  margin-bottom: 1rem;
}

[data-square-highlight=available] {
  box-shadow: inset 0 0 10px 3px #888;
}

[data-square-highlight=current] {
  box-shadow: inset 0 0 10px 3px #555;
}

[data-square-highlight=enemy] {
  box-shadow: inset 0 0 3px 3px #e23434;
}

[data-square-highlight=check] {
  box-shadow: inset 0 0 10px 7px #e09c35;
}

[data-square-highlight=checkmate] {
  box-shadow: inset 0 0 10px 7px #e23434;
}

[class*=square-].highlight {
  background-color: #bca98f;
}

[class*=square-].highlight-red {
  box-shadow: inset 0 0 3px 3px #e23434;
}

[class*=square-].highlight-checkmate {
  box-shadow: inset 0 0 10px 7px #e23434;
}

[class*=square-].highlight-check {
  box-shadow: inset 0 0 10px 7px #e09c35;
}

[class*=square-].highlight-current {
  box-shadow: inset 0 0 30px 3px #555;
}

[class*=square-][class*=black-].highlight {
  background-color: #7f5e46;
}

.button,
.button:active,
.button.button-toggle.active {
  background-color: #ff5252;
  color: #FEFEFE;
  border: 3px solid #b33939;
  border-radius: 10px;
  width: 100%;
  margin: 0 auto;
  padding: 0.5rem 1rem;
  text-transform: uppercase;
  font-size: 1.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.button:hover,
.button:active:hover,
.button.button-toggle.active:hover {
  color: #FEFEFE;
  text-decoration: none;
}

.button.button-half, .button.button-toggle.active.button-half {
  width: 50%;
}

.button.button-toggle {
  background-color: #ffbaba;
  color: #FEFEFE;
  border: 3px solid #b28080;
}

@media (min-width: 599px) {
  .button:hover {
    background-color: #cc4343;
    border: 2px solid #7f2828;
  }
}
.button:focus {
  box-shadow: none;
  outline: none;
}

.button i {
  margin-right: 1rem;
}

.main-message {
  font-family: "Luckiest Guy", cursive;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 3rem;
  background-color: #00000088;
  color: #FFF;
  transform: scale(0);
  opacity: 0;
  transition: all ease 0.5s;
}

/*# sourceMappingURL=style.css.map */