* {
 -webkit-tap-highlight-color: transparent;
}
html, body {
  scale: 1.05;
  font-family: Arial;
  padding: 0;
  margin: 0;
  overflow: hidden;
  overscroll-behavior-x: none;
  -webkit-touch-callout: none; /* iOS Safari */
    -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, Edge, Opera and Firefox */
}
body {

}
:root {
  --bg: #404040;
  --fg: #a0a0a0;
  --mills: #4a2507;
  --max-coord: 7;
  --ystretch: 1;
  --xoff: 0vh;
  --yoff: 0vh;
  --yoffx: 0vh;
  --vw: 1vw;
  --vh: 1vh;
  --vm: 1vw;
  --username: "Gast";
}
#info2 div.heading {
  color: white;
  height: calc(7 * var(--vm));
  padding-top: calc(1 * var(--vw));
}
.salutation:after {
  content: var(--username);
}
a {
  color: var(--fg);
}
.capital {
  color: green;
}
.capital:nth-child(2) {
  color: red;
}
.para {
  display: block;
  position: relative;
  transition: max-height 0.6s;
  max-height: calc(6 * var(--vm));
  overflow: hidden;
  padding: calc(3 * var(--vm));
}
.para.active {
  max-height: 110vh;
}
.para div:nth-child(2) {
  padding: calc(3 * var(--vw));
}
#info2 div {
  position: relative;
  color: #d0d0d0;
  font-size: calc(5 * var(--vm));
}
#info2 div.legend {
  position: inline-block;
  float: left;
  position: relative;
  width: calc(8 * var(--vm));
  height: calc(8 * var(--vm));
  fill: var(--fg);
  stroke: var(--fg);
  padding: 0%;
  margin-top: calc(-1 * var(--vw));
  margin-right: calc(2 * var(--vw));
}
#info2 .hand.legend{
  fill:none;
  width: calc(7 * var(--vm));
}
#info2 .academy.legend {
  stroke:none;
}
#info2 .actions.legend {
  margin-top: calc(0.5 * var(--vm));
}
button[type="submit"] {
  border: none;
  padding: 0;
}
#screen {
  width: 100%;
  height: 100%;
  background: var(--bg);
  background-image: url(bg.svg);
  background-size: 100vw 100vh;
  background-repeat: no-repeat;
}
#screen.loading {
  background: var(--bg);
  content: "<p>loading</p>";
}
#screen.loading:after {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: White;
  font-size: calc(10 * var(--vw));
  content: "Loading...";
}
#screen.loading * {
  display: none;
}
#notification {
  display: none;
  position: absolute;
  z-index: 50;
  width: 100%;
  height: 100%;
  background: rgba(128, 128, 128, 0.3);
  font-size: calc(7 * var(--vm));
  border-radius: 0;
  margin: 0;
  padding: 0;
}
.notificationbox {
  position: relative;
  z-index: 50;
  max-width: calc(80 * var(--vm));
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
  background: var(--bg);
  color: #d0d0d0;
  text-align: center;
  padding: calc(5 * var(--vm));
  border-radius: calc(5 * var(--vm));
  border: calc(1 * var(--vm)) solid #d0d0d0;
}
#notification.active {
  display: block;
}
#notification .text {
  width: 100%;
}
.yes, .no, .ok, .cancel {
  display: none;
  background: var(--fg);
  color: #202020;
  padding: calc(2 * var(--vm));
  margin: calc(2 * var(--vm));
  min-width: calc(18 * var(--vm));
  border-radius: calc(1 * var(--vm));
}
#notification.ok .ok {
  display: inline-block;
}
#notification.yesno .yes, #notification.yesno .no {
  display: inline-block;
}
#notification.cancel .cancel {
  display: inline-block;
}
#content {
  max-width: 6000px;
  max-height: 6000px;
  position: absolute;
  /*background: var(--bg);*/
  overflow: hidden;
  width: 100vw;
  height: 180vw;
}
#board {
  position: absolute;
  width: calc(100 * var(--vw));
  height: calc(100 * var(--vw));
  top: calc(30 * var(--vw));
}
#board * {
  -webkit-touch-callout: none; /* iOS Safari */
    -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, Edge, Opera and Firefox */
}
#board2 {
  position: absolute;
  width: 87%;
  left: 6.6%;
  top: 6.7%;
  height: calc(87% * var(--ystretch));
  transition: all ease 0.2s;
  background-image: url(board.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: calc(7 * var(--vw));
  pointer-events: none;
}
#mills {
  position: absolute;
  width: 100%;
  left: 0%;
  top: 0%;
  height: 100%;
  background: none;
}
#board.switch #mills {
  transform:rotate(180deg);
  top: calc(100% * (var(--ystretch) - 1));
}
span.white {
  color: white;
}
span.black {
  color: black;
}
#whitecomment, #board.switch #blackcomment {
  top: calc(100 * var(--vw) * var(--ystretch));
}
#blackcomment, #board.switch #whitecomment {
  top: calc(-25 * var(--vw));
}
.comment {
  position: absolute;
  left: 20%;
  width: 60%;
  min-height: 15%;
  padding: 1% 3% 1% 3%;
  background: var(--fg);
  color: var(--bg);
  z-index: 31;
  opacity: 0.9;
  border-radius: calc(5 * var(--vw));
  font-size: calc(5 * var(--vw));
}
.comment:after {
  content: '';
  position: absolute;
  left: 0;
  top: calc(8 * var(--vw));
  width: 0;
  height: 0;
  border: calc(3 * var(--vw)) solid transparent;
  border-right-color: var(--fg);
  border-left: 0;
  margin-top: calc(-3 * var(--vw));
  margin-left: calc(-2 * var(--vw));
  text-align: center;
}
.comment:empty {
  opacity: 0;
  pointer-events: none;
}
#chatinput2 {
  position: absolute;
  left: 1%;
  top: 141%;
  width: 20%;
  height: 5%;
  z-index: 30;
}
.piece, .piece div, .field, .field div,  .mill, .player, .player div, #comments, .hint {
  position: absolute;
  transition: all ease 0.3s;
  transform: translate(-50%, -50%);
  text-align: center;
}
.field {
  width: calc(90 * var(--vw) / var(--max-coord));
  height: calc(90 * var(--vw) / var(--max-coord));
  z-index: 1;
  transition: none;
}
.field div {
  transition: all 0s;
  width: 15%;
  height: 15%;
  left: 50%;
  top: 50%;
  background: var(--mills);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  z-index: 1;
  pointer-events: none;
}
.variantmensch .field div {
  width: 50%;
  height: 50%;
  border: 2px solid;
  border-widthx: calc(0% / var(--max-coord));
  border-color: var(--mills);
  background: #e1b267;
}
.variantcheckers .field div, .variantspringer .field div, .variantspringer2 .field div {
  width: calc(90%);
  height: calc(90% * var(--ystretch));
  border-radius: 0%;
  opacity: 0.8;

}
.variantcheckers .field.even div, .variantspringer .field.even div, .variantspringer2 .field.even div {
  background: white;
  opacity: 0.1;
}
.field div.white, .field div.black {
  width: 70%;
  height: 70%;
  background: none;
  background-size: calc(7 * var(--vw));
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 0;
}
@keyframes hintBlink {
  0% {
    opacity: 0.8;
  }
  50% {
    opacity: 0.1;
  }
  100% {
    opacity: 0.8;
  }
}
.hint {
  height: 3%;
  border-radius: none;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  background: white;
  border-left-color: white;
}
.hint div {
  font-size: calc(5.5 * var(--vw));
   font-weight: bold;
  color: white;
  float: right;
  display: none;
}
.hint.best {
  height: 4.5%;
}
.hint.active {
  opacity: 0.6;
}
.hint.black {
  background: black;
  border-left-color: black;
}
.hint.l {
  background: red;
  border-left-color: red;
}
.hint.w {
  background: green;
  border-left-color: green;
}
.hint.played {
  animation-name: hintBlink;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}
.hint.arrow:after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  width: 0;
  height: 0;
  border: calc(3 * var(--vw)) solid transparent;
  border-left-color: inherit;
  border-right: 0;
  margin-top: calc(-3 * var(--vw));
  margin-right: calc(-2 * var(--vw));
  text-align: center;
}
.hint.best.arrow:after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  width: 0;
  height: 0;
  border: calc(4 * var(--vw)) solid transparent;
  border-left-color: inherit;
  border-right: 0;
  margin-top: calc(-4 * var(--vw));
  margin-right: calc(-3 * var(--vw));
  text-align: center;
}


.hint.target {
  width: 7%;
  height: 7%;
  border-radius: 50%;
}
.hint.target.best {
  width: 7%;
  height: 7%;

}
.hint.take {
  z-index: 20;
}
.piece {
/*  border-radius: 50%;*/

  width: calc(105 * var(--vw) / var(--max-coord));
  height: calc(105 * var(--vw) / var(--max-coord));
  z-index: 2;
}
.piece div {
  width: 140%;
  height: 140%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.85, 0.85);
  font-size: var(--vw);
  background-size: 100%;
  background-position: center;
  pointer-events: none;
}
.black.piece div {
  background-image: url(black.png);
}
.white.piece div {
  background-image: url(white.png);
}
.dummy {
  transition: none;
}
.dummy[pos^='off'] {
  display: none;
}
.dummy.piece div {
  border-radius: 50%;
  background-color: red;
  background-image: none;
  opacity: 0.6;
  width: 70%;
  height: 70%;
}
.variantspringer2 .white.dummy.piece div {
  background-color: green;
}
@keyframes size {
  0% {
    transform: translate(-50%, -50%) scale(0.8, 0.8);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.05, 1.05);
  }
  100% {
    transform: translate(-50%, -50%) scale(0.8, 0.8);
  }
}
.canBeTaken div {
  animation-name: size;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}
.piece:not(.selected)[pos^='off'] div {
  transform: translate(-50%, -50%) scale(0.4, 0.4);
}
.piece.selected div {
  transform: translate(-50%, -50%) scale(1.05, 1.05);
  z-index: 20 !important;
}
#board .white.piece.selected[pos^='off'], #board.switch .black.piece.selected[pos^='off'] {
  transform: translate(calc(var(--xoff) + 64 * var(--vw)), calc(var(--yoff) + (100 * var(--ystretch) + 6) * var(--vw))) translate(-50%, -50%);
}
#board .black.piece.selected[pos^='off'], #board.switch .white.piece.selected[pos^='off'] {
  transform: translate(calc(var(--xoff) + 64 * var(--vw)), calc(var(--yoffx) + -6 * var(--vw))) translate(-50%, -50%);
}
.mill {
  background: var(--mills);
  border-radius: 10000px;
  z-index: 0;
  height: calc(4 * var(--vw) / var(--max-coord));
  min-height: 1px;
  pointer-events: none;
}
.mill.white, .mill.black {
  z-index: 0;
}
.variantcheckers .mill, .variantspringer .mill, .variantspringer2 .mill {
  display: none;
}
.player {
  width: 100%;
  height: 50%;
  left: 50%;
  font-size: calc(5 * var(--vw));
  color: var(--fg);
  text-align: left;
}
#player1, #board.switch #player2 {
  top: calc(100% * var(--ystretch) + 15%);
}
#player2, #board.switch #player1 {
  top: -15%;
}
.player .result {
  display: none;
  position: absolute;
  width: 20%;
  height: 20%;
  left: 25%;
  top: 28%;
  font-size: calc(16 * var(--vw));
}
.player .score {
  transform: none;
  position: absolute;
  width: 20%;
  height: 20%;
  left: 18%;
  top: 28%;
  font-size: calc(10 * var(--vw));
}
.player .time {
  transform: none;
  position: absolute;
  width: 10%;
  height: 20%;
  left: 18%;
  top: 70%;
  font-size: calc(5 * var(--vw));
}
.player .time.critical {
  color: red;
}
.player .drawOffer {
  display: none;
  position: absolute;
  width: 10%;
  height: 10%;
  left: 10%;
  top: 65%;
  fill: green;
  font-size: calc(16 * var(--vw));
}
.player .drawOffer.active {
  display: block;
}
.player .evaluation {
  position: absolute;
  width: 10%;
  height: 18%;
  left: 10.5%;
  top: 81%;
  font-size: calc(5 * var(--vw));
  background: var(--fg);
  display: none;
  opacity: 0.8;
  z-index: 10;
}
.player.active .evaluation.hidden {
  display: block;
}
.player.active .evaluation {
  display: block;
}
.white.player .evaluation {
  color: white;
}
.evaluation.losing {
  background: red;
}
.evaluation.winning {
  background: green;
}
.player.active .evaluation.hidden {
  display: none;
}
.player.white .errors, .player.black .errors {
  position: absolute;
  width: 70%;
  height: calc(5 * var(--vw));
  left: 53%;
  top: 85%;
  font-size: calc(4 * var(--vw));
  color: red;
  text-align: left;
  padding: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
}
.errors div {
  position: relative;
  transform: none;
  display: inline-block;
  text-align: center;
  vertical-align: bottom;
  width: calc(5.5 * var(--vw));
  height: 100%;
  margin-left: 1%;
  border-radius: 50%;
  opacity: 0.7;
  color: black;
  padding-top: calc(0.5 * var(--vw));
}
.errors .lostequal {
  background: red;
}
.white .errors .nolongerwinning {
  background: black;
  color: white;
}
.black .errors .nolongerwinning {
  background: white;
  color: black;
}
.errors .lostwinning {
  background: green;
}
.player .name, .player .avatar {
  position: absolute;
  left: 1%;
  font-size: calc(5 * var(--vw));
  top: 5%;
  text-align: left;
  transform: none;
}
.player .avatar {
  top: 30%;
  height: 20%;
  width: 20%;
  fill: var(--fg);
  left: 0%;
  opacity: 0.8;
}
.player.white.active .avatar {
  fill: white;
}
.player.black.active .avatar {
  fill: black;
}
.player.white div {
  color: white;
}
.player.black div {
  color: black;
}
.cup, .lid {
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
  height: 87%;
  top: 50%;
  position: absolute;
  border-radius: 50%;
  box-shadow: 0px 0px 2vmin black;
}
.cup {
  background-image: url(cup.jpg);
  width: 27%;
  left: 50%;
}
.lid {
  background-image: url(lid.png);
  width: 22%;
  left: 75%;
  height: 70%;
}
.navigation {
  position: absolute;
  width: 12%;
  height: 8%;
  top: 139%;
  overflow: hidden;
  z-index: 20;
  fill: var(--fg);
  stroke: var(--fg);
}
#togglegamemenu {
  left: 1%;
  z-index: 40; 
}
#togglechatmenu {
  left: 86%;
  z-index: 29; 
  height: 12%;
  top: 137%;
}
#gamemenu, #chatmenu {
  overflow: hidden;
  position: absolute;
  transition: all ease 0.2s;
  top: 136.5%;
  width: 0%;
  height: 13%;
  z-index: 30;
  opacity: 0.98;
}
#gamemenu {
  left: 1%;
}
#chatmenu {
  right: 1%;
  z-Index: 28;
}
#gamemenu.open {
  width: 98%;
  background: var(--bg);
}
#chatmenu.open {
  width: 85%;
  background: var(--bg);
}
#gamemenu div {
  display: block;
  position: absolute;
  background: var(--bg);
  width: 11%;
  height: 40%;
  top: 0%;
  fill: var(--fg);
  stroke: var(--fg);
}
#gamemenu div:first-child {
  left: 18%;
}
#gamemenu div:nth-child(2) {
  left: 35%;
}
#gamemenu div:nth-child(3) {
  left: 52%;
}
#gamemenu div:nth-child(4) {
  left: 69%;
}
#gamemenu div:nth-child(5) {
  left: 86%;
}
#chatmenu #chatinput {
  position: absolute;
  right: 40%;
  width: 60%;
}
#gamemenu .drawOffer.active, #gamemenu .rematch.active {
  fill: green;
  stroke: green;
}
#gamemenu .drawOffer.pending, #gamemenu.rematch.pending {
  fill: yellow;
  stroke: yellow;
  animation-name: size;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}
#rewind {
  left: 20%;
}
#back {
  left: 37%
}
#forward {
  left: 53%;
}
#fastforward {
  left: 70%;
}
#fastforward.solved {
  stroke: green;
  fill: green;
}
#board .puzzle {
  position: absolute;
  width: 12%;
  height: 12%;
  top: -12%;
  left: 86%;
  overflow: hidden;
  z-index: 50;
  fill: var(--fg);
  background-size: cover;
  background-repeat: no-repeat;
}
.savex, .load {
  position: absolute;
  width: 11%;
  height: 11%;
  top: -15%;
  left: 90%;
  overflow: hidden;
  z-index: 50;
  fill: var(--fg);
  background-size: cover;
  background-repeat: no-repeat;
}
#board .analysis {
  display: none;
}
.save {
  top: 102%;
  fill: var(--fg);
}
.load {
  top: 115%;
  fill: var(--fg);
}
.togglehints.off svg {
  fill: var(--fg);
}
.togglehints.on svg {
  fill: green;
  stroke: darkgreen;
  opacity: 0.8;
}
#menu {
  position: absolute;
  padding: 0;
  margin: 0;
  width: 100%;
  height: calc(100 * var(--vh));
  top: 0%;
  left: 0%;
  z-index: 5;
/*  transform: translate(-50%, -50%);*/
}
@media (min-aspect-ratio: 5/7) {
  #menu {
    width: calc(100vh * 5 / 7);
    height: 100vh;
    left: calc((100vw - 100vh * 5 / 7) / 2);
  }
  :root {
    --vm: calc(1vh * 5 / 7);
  }
}
#navigationbar {
  position: absolute;
  bottom: 0vh;
  width: 100%;
  height: calc(15 * var(--vm));
  background: var(--bg);
  text-align: center;
  padding: none;
  margin: none;
}
#navigationbar div {
  position: absolute;
  height: calc(15 * var(--vm));
  width: 20%;
  background-color: none;
  background-size: 70%;
  background-position: center;
  background-repeat: no-repeat;
  padding: none;
  margin: none;
}
#navigationbar div.active {
  background-color: var(--fg);
}
#navigationbar div:nth-child(2) {
  left: 20%;
}
#navigationbar div:nth-child(3) {
  left: 40%;
}
#navigationbar div:nth-child(4) {
  left: 60%;
}
#navigationbar div:nth-child(5) {
  left: 80%;
}
#navigationbar svg {
  fill: var(--fg);
  stroke: var(--fg);
  height: 100%;
}
#navigationbar .active svg {
  fill: #333;
  stroke: #333;
}
.tab {
  height: calc(100% - 15 * var(--vm));
  width: 100%;
  display: none;
  background: var(--fg);
}
.tab.active {
  display: block;
}
.tab div {
  background-color: var(--bg);
  position: absolute;
}
.title {
  width: 96%;
  left: 2%;
  font-size: calc(10 * var(--vm));
  color: white;
  height: calc(11 * var(--vm));
  text-align: center;
  top: calc(2 * var(--vm));
}
.buttons {
  height: calc(12 * var(--vm));
  width: 96%;
  left: 2%;
  top: calc(13 * var(--vm));
}
.buttons div {
  position: relative;
  display: inline-block;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  width: 10%;
  height: 90%;
  top: 5%;
  margin-left: 10%;
  fill: white;
  opacity: 0.8;
}
#offline .buttons div:first-child {
  margin-left: 25%;
}
.buttons div.inactive {
  display: none;
}
.games2 {
  width: 96%;
  height: calc(100% - 54 * var(--vm));
  top: calc(37 * var(--vm));
  left: calc(2 * var(--vm));
  overflow: auto;
  background: var(--bg);
}
.games {
  display: table;
  table-layout: auto;
  width: 100%;
  overflow: hidden;
  background: var(--bg);
}
.tablehead {
  top: calc(27 * var(--vm));
  left: calc(2 * var(--vm));
  width: calc(96 * var(--vm));
  height: calc(8 * var(--vm));
  color: white;
  font-size: calc(5 * var(--vm));
}
.tablehead div {
  top: calc(1 * var(--vm));
}
.tablehead div:first-child {
  left: 1%;
}
.tablehead div:nth-child(2) {
  right: 47%;
}
.tablehead div:nth-child(3) {
  left: 55%;
}
.tablehead div:nth-child(4) {
  right: 1%;
}
.games .row {
  display: table-row;
  position: relative;
  color: white;
  background: #808080;
  width: 100%;
  transition: all ease 0.3s;
  height: calc(14 * var(--vm));
}
.row:nth-child(2n) {
  background: #606060;
}
.row div {
  display: table-cell;
  position: absolute;
  top: 0%;
  font-size: calc(5 * var(--vm));
  margin-right: 1%;
  margin-bottom: 1%;
  transform: none;
  padding: 1%;
  background: none;
}
.games div div:nth-child(1) {
  width: 38%;
  left: 0%;
}
.games div div:nth-child(2) {
  width: 12%;
  left: 40%;
  text-align: center;
}
.games div div:nth-child(3) {
  width: 30%;
  left: 54%;
}
.games div div:nth-child(4) {
  width: 12%;
  left: 86%;
  text-align: center;
}
.games div div:nth-child(5) {
  width: 78%;
  left: 0%;
  top: calc(13 * var(--vm));
  overflow: hidden;
  height: calc(14 * var(--vm));
}
.games div div:nth-child(6) {
  width: 20%;
  left: 80%;
  top: calc(14 * var(--vm));
}
.games div div:nth-child(7) {
  width: 100%;
  left: 0%;
  top: calc(26 * var(--vm));
  overflow: hidden;
  height: auto;/*calc(24 * var(--vm));*/
}
.games div.selected div {
}
.games div.selected div:nth-child(5) {
}
.games div.selected {
  height: calc(50 * var(--vm));
}
.games div div.play {
  display: inline-block;
  width: 15%;
  fill: white;
  float: right;
}
.games .lost {
  color: red;
}
.games .won {
  color: green;
}
#online .games .row div {
  text-align: left;
}
#online .row div:first-child {
  color: white;
  left: 0%;
}
#online .row div:nth-child(2) {
  color: black;
  left: 45%;
}
#online .row div:nth-child(3) {
  width: 10%;
  left: 87%;
  top: calc(2 * var(--vm));
  fill: white;
}
#online .tablehead div:nth-child(2) {
  left: 46%;
}
#info2, #robot2, #home2 {
  width: 96%;
  height: calc(100% - 19 * var(--vm));
  left: calc(2 * var(--vm));
  top: calc(2 * var(--vm));
  background: var(--bg);
}
#info2 {
  height: calc(100% - 32 * var(--vm));
  top: calc(15 * var(--vm));
}
#home2 .title {
  color: white;
  top: calc(4 * var(--vm));
  left: 0%;
  font-size: calc(12 * var(--vm));
  width: 100%;
  text-align: center;
}
.version {
  color: white;
  bottom: calc(0.5 * var(--vm));
  font-size: calc(2.5 * var(--vm));
  width: 100%;
  text-align: center;
}
.titleimage {
  top: calc(22 * var(--vm));
  left: 50%;
  width: calc(40 * var(--vm));
  height: calc(40 * 15 / 14 * var(--vm));
  transform: translate(-50%, 0);
  background-image: url(home.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: calc(4 * var(--vm));
}
#home2 .menu {
  left: 6%;
}
#home2 .button {
  background: var(--fg);
  color: #333;
  font-size: calc(6 * var(--vm));
  text-align: center;
  vertical-align: middle;
  padding: calc(1.5 * var(--vm));
  transform: translate(-50%, 0);
  top: calc(72 * var(--vm));
  left: 50%;
  width: calc(75 * var(--vm));
  border-radius: calc(3 * var(--vm));
}
#home2 .button:nth-child(4) {
  top: calc(84 * var(--vm));
}
#home2 .button:nth-child(5) {
  top: calc(96 * var(--vm));
}
.button div {
  position: relative;
  color: var(--fg);
  font-size: calc(5 * var(--vm));
  margin-top: calc(1 * var(--vm));
  border-radius: calc(2 * var(--vm));
  padding: calc(1 * var(--vm));
  display: inline-block;
}
#info2 {
  overflow: auto;
}
#creategame {
  left: 6%;
}
#findgames {
  right: 6%;
}
.menu {
  fill: #d0d0d0;
  stroke: #d0d0d0;
  width: calc(15 * var(--vm));
  height: calc(15 * var(--vm));
  top: calc(35 * var(--vm));
  border-radius: calc(4 * var(--vm));
  border: calc(1 * var(--vm)) solid #d0d0d0;
  transition: width ease 0.3s, height ease 0.3s;
  overflow: hidden;
  color: white;
  font-size: calc(6 * var(--vm));
  z-index: 1;
}
.menu div {
  width: calc(74 * var(--vm));
  height: calc(8 * var(--vm));
  left: calc(5 * var(--vm));
}
.menu.open {
  width: calc(84 * var(--vm));
  height: calc(51 * var(--vm));
  z-index: 2;
}
.menu div:first-child {
  width: calc(15 * var(--vm));
  left: 0;
}
.menu div:nth-child(2) {
  color: white;
  font-size: calc(8 * var(--vm));
  left: calc(17 * var(--vm));
  top: calc(3 * var(--vm));
}
.menu div:nth-child(3) {
  top: calc(20 * var(--vm));
}
.menu div:nth-child(4) {
  top: calc(30 * var(--vm));
}
.menu div:nth-child(5) {
  top: calc(40 * var(--vm));
}
.menu div.language {
  left: 43%;
  top: 0%;
}
.menu div.language div {
  width: 18%;
  top: 0%;
  background-size: contain;
  background-repeat: no-repeat;
}
.language div.de {
  background-image: url(de.svg);
  left: 0%;
}
.language div.hu {
  background-image: url(hu.svg);
  left: 21%;
  top: 0%;
}
.language div.en {
  background-image: url(en.svg);
  left: 42%;
}
.menu div.language div.selected {
  border: calc(0.5 * var(--vm)) solid white;
  top: calc(-0.5 * var(--vm));
}
#offline .menu {
  top: calc(12 * var(--vm));
  width: calc(10 * var(--vm));
  height: calc(10 * var(--vm));
}
#offline .menu.open {
  width: calc(87 * var(--vm));
  height: calc(104 * var(--vm));
}
#findgames.menu.open {
  width: calc(87 * var(--vm));
  height: calc(65 * var(--vm));
}
#offline .menu div:first-child {
  width: calc(10 * var(--vm));
}
#offline .menu div:nth-child(2) {
  top: calc(1 * var(--vm));
  left: calc(12 * var(--vm));
}
#offline .menu div:nth-child(3) {
  top: calc(13 * var(--vm));
}
#offline .menu div:nth-child(4) {
  top: calc(26 * var(--vm));
}
#offline .menu div:nth-child(5) {
  top: calc(39 * var(--vm));
}
#offline .menu div:nth-child(6) {
  top: calc(52 * var(--vm));
}
#offline .menu div:nth-child(7) {
  top: calc(65 * var(--vm));
}
#offline .menu div:nth-child(8) {
  top: calc(78 * var(--vm));
}
#offline .menu div:nth-child(9) {
  top: calc(91 * var(--vm));
}
#offline .menu div:last-child {
  top: calc(3 * var(--vm));
  left: calc(70 * var(--vm));
  width: calc(10 * var(--vm));
}
#offline .menu input {
  position: absolute;
  left: 40%;
  background: var(--fg);
  width: calc(40 * var(--vm));
  color: #202020;
}
#home2 #formlogin {
  position: absolute;
  width: calc(36 * var(--vm));
  left: calc(33 * var(--vm));
  top: calc(0 * var(--vm));
  height: 100%;
  background: var(--fg);
  padding: 0;
}
#formlogin input {
  width: 100%;
  height: 100%;
  background: none;
  text-align: center;
  font-size: calc(5 * var(--vm));
  color: #333;
  margin: 0;
}
#home2 div.user {
  background: none;
  fill: white;
  opacity: 0.8;
  width: 20%;
  left: 85%;
  top: calc(30 * var(--vm));
  transform: translate(-50%, 0);
}
#home2 #formusername, .elo {
  position: absolute;
  width: 30%;
  left: 85%;
  top: calc(50 * var(--vm));
  transform: translate(-50%, 0);
  background: none;
  font-size: calc(5 * var(--vm));
  color: var(--fg);
  text-align: center;
}
#home2 #formusername.user {
  color: green;
}
.elo {
  width: 25%;
  top: calc(56 * var(--vm));
}
#robot2 div {
  position: absolute;
  text-align: center;
  margin: calc(4 * var(--vm));
  background: var(--fg);
}
#robot2 .puzzle {
  width: 20%;
  height: calc(17 * var(--vm));
  left: 8%;
  fill: white;
  top: calc(50 * var(--vm));
  padding: calc(5 * var(--vm));
}
#robot2 .black.puzzle {
  left: 54%;
  fill: black;
}
#robot2 .puzzle svg {
  width: 95%;
}
.white.robot {
  width: 30%;
  left: 7%;
  fill: white;
}
.black.robot {
  width: 30%;
  opacity: 0.8;
  left: 55%;
  fill: black;
}
#robotlevel {
  position: absolute;
  top: calc(40 * var(--vm));
  width: 70%;
  left: 10%;
  transform: translate(0, -50%);
}
#robot2 #robotleveldisplay {
  top: calc(36 * var(--vm));
  left: 80%;
  font-size: calc(10 * var(--vw));
  background: none;
  color: white;
  transform: translate(0, -50%);
}
#chat button {
  background: none;
  height: 100%;
  width: 12%;
  padding: 0;
  stroke: var(--fg);
}
#messages {
  position: absolute;
  width: 96%;
  height: calc(100% - 44 * var(--vm));
  left: calc(2 * var(--vm));
  top: calc(15 * var(--vm));
  overflow: auto;
  background: var(--bg);
}
#messages p {
  margin: 0;
  padding: 0;
  color: white;
  font-size: calc(5 * var(--vm));
  overflow: hidden;
}
#messages p.joined {
  color: green;
}
#messages p.left {
  color: red;
}
#bla {
  width: 96%;
  height: calc(10 * var(--vm));
  left: 2%;
  top: calc(100% - 27 * var(--vm));
}
input {
  width: 100%;
  height: calc(10 * var(--vm));
  color: white;
  border: none;
  background: var(--bg);
  font-size: calc(5 * var(--vm));
}
#chatinput input {
  position: absolute;
  width: calc(55 * var(--vw));
  height: calc(10 * var(--vw));
  left: calc(1 * var(--vw));
  top: calc(1 * var(--vw));
  color: var(--bg);
  border: calc(2 * var(--vw)) solid var(--fg);
  border: none;
  border-top: none;
  background: var(--fg);
  font-size: calc(5 * var(--vw));
  padding-left: 2%;
}
#sendbutton {
  position: absolute;
  width: calc(12 * var(--vw));
  height: calc(8 * var(--vw));
  left: calc(59 * var(--vw));
  top: calc(2 * var(--vw));
  stroke: var(--fg);
  background: none;
}
.send {
  position: absolute;
  right: 0px;
  width: 20px;
  height: 20px;
}
input[type='text'] {
  width: 80%;
}
input[type='submit'] {
  width: 10%;
}
#close, #free {
  position: absolute;
  width: 9%;
  height: 9%;
  top: -29%;
  left: 89%;
  z-index: 10;
  stroke: var(--fg);
  fill: none;
}
#free {
  top: -15%;
}
#free.active {
  stroke: green;
}


/*@media (min-aspect-ratio: 10/10) {
  #content {
    width: 100vw;
    height: calc(100vw * 20 / 27);
    top: 0vh;
    left: 0;
  }
  #board {
    top: calc(0 * var(--vw));
  }
  .player {
    left: calc(150 * var(--vw));
  }
  #player1, #board.switch #player2 {
    top: calc(70 * var(--vw) * var(--ystretch));
  }
  #player2, #board.switch #player1 {
    top: calc(42 * var(--vw));
  }
  .cup {
    left: 15%;
  }
  .lid {
    left: 40%;
  }
  #player2 .cup, #player2 .lid, #board.switch #player1 .cup, #board.switch #player1 .lid {
    top: -40%;
  }
  #player1 .cup, #player1 .lid, #board.switch #player2 .cup, #board.switch #player2 .lid {
    top: 145%;
  }
  .navigation {
    top: 107%;
  }
  #gamemenu, #chatmenu {
    top: 105%;
  }
  #togglechatmenu {
    top: 105%;
  }
  .comment {
    left: 120%;
    width: 30%;
  }
  #whitecomment, #board.switch #blackcomment {
    top: calc(65% * var(--ystretch));
  }
  #blackcomment, #board.switch #whitecomment {
    top: 30%;
  }
  #close, #free {
    top: 0.5%;
    left: 149.5%;
  }
  #free {
    top: 12%;
  }
  #board .puzzle {
    top: 18%;
    left: 146%;
  }
}
@media (min-aspect-ratio: 27/20) {
  #content {
    width: calc(135 * var(--vw) / 0.85);
    height: calc(100 * var(--vw) / 0.85);
    top: 0vh;
    left: calc((100vw - 100 / 0.85 * var(--vw) * 27 / 20) / 2);
  }
}*/

 /* The switch - the box around the slider */
label.switch {
  position: absolute;
  width: calc(10 * var(--vm));
  height: calc(6 * var(--vm));
  left: calc(33 * var(--vm));
  top: calc(1 * var(--vm));
}

/* Hide default HTML checkbox */
label.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--fg);
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: calc(5 * var(--vm));
  width: calc(5 * var(--vm));
  left: calc(0.7 * var(--vm));
  bottom: calc(0.5 * var(--vm));
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: green;
}

input:checked + .slider:before {
  transform: translateX(calc(4 * var(--vm)));
}

/* Rounded sliders */
.slider.round {
  border-radius: calc(3 * var(--vm));
}

.slider.round:before {
  border-radius: 50%;
}