html {
  height: 100%;
}

body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  background-image: url("../../Img/draBg75.svg");
  background-repeat: repeat;
  background-size: 130px;
}

.stretcher {
  flex: 1 1 auto;
}

.footer {
  height: 38px;
}

.wrapboard, .wrapboardSrv {
  width: auto;
  min-width: 320px;
  max-width: 750px;
  box-sizing: content-box;
  background-color: #8cb8fa;
  border: 0.85rem solid;
  position: relative;
  box-shadow: 1px 1px 12px wheat, -1px -1px 12px wheat;
}

.wrapboardSrv::after {
  content: "";
  display: block;
  padding-bottom: 20%;
}

.wrapboard::after {
  content: "";
  display: block;
  padding-bottom: 100%;
}

.board, .boardSrv {
  position: absolute;
  width: 100%;
  height: 100%;
}

.squareSrv {
  float: left;
  width: 10%;
  height: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.square {
  float: left;
  width: 10%;
  height: 10%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.black {
  background-color: #bead9e;
}

.white {
  background-color: #ffffff;
}

@media (min-width: 768px) {
  .figure {
    font-size: 70px;
  }
}

@media (max-width: 767px) {
  .figure {
    font-size: 55px;
  }
}

@media (max-width: 500px) {
  .figure {
    font-size: 45px;
  }
}

@media (min-width: 858px) {
  .titleMob {
    font-size: 1.25rem;
  }
}

@media (max-width: 857px) {
  .titleMob {
    font-size: 1.25rem;
  }
}

@media (max-width: 793px) {
  .titleMob {
    font-size: 1.25rem;
  }
}

.figure {
  cursor: pointer;
  font-family: 'Times New Roman', Times, serif;
  color: black;
  z-index: 100;
}

.dropdown-menu, .menuBar {
  box-shadow: 0px 2px 12px wheat;
}

.footer {
  box-shadow: 0px 0px 8px wheat;
}

.game {
  box-shadow: 1px 1px 8px wheat;
}