html {
  background: url(../images/wood.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

body {
  text-align: center;
}

#board,
#board td {
  border: 1px solid black;
}

#board {
  margin-left: auto;
  margin-right: auto;
  margin-top: 15px;
  background-color: white;
  border-spacing: 0;
  border-collapse: collapse;
}

#board td.active {
  background: lightgray;
}

#board td.options {
  background: lightgray;
}

#board td.player_1_vertical1 {
  background: url(../images/vertical1_1.png);
  background-size: cover;
}

#board td.player_2_vertical1 {
  background: url(../images/vertical1_2.png);
  background-size: cover;
}

#board td.player_1_horizontal1 {
  background: url(../images/horizontal1_1.png);
  background-size: cover;
}

#board td.player_2_horizontal1 {
  background: url(../images/horizontal1_2.png);
  background-size: cover;
}

#board td.player_1_vertical2 {
  background: url(../images/vertical2_1.png);
  background-size: cover;
}

#board td.player_2_vertical2 {
  background: url(../images/vertical2_2.png);
  background-size: cover;
}

#board td.player_1_horizontal2 {
  background: url(../images/horizontal2_1.png);
  background-size: cover;
}

#board td.player_2_horizontal2 {
  background: url(../images/horizontal2_2.png);
  background-size: cover;
}

#board td.player_1_juvavum {
  background: url(../images/50groschen.jpg);
  background-size: cover;
}

#board td.player_2_juvavum {
  background: url(../images/10groschen.jpg);
  background-size: cover;
}

#controls {
  margin-left: auto;
  margin-right: auto;
  padding: 10px;
  z-index: 2;
  left: 0;
  top: 0;
}

div#settings select, label {
  font-size: 18px;
}

div#settings input[type=checkbox] {
    transform: scale(1.5);
}

div#settings input{
  margin-left: 12px;
}

div#settings label{
  margin: 0;
}

div#settings input#ok {
  margin-left: 40px;
}

div#settings {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  background-color: #F7F7D4;
  border-bottom: 2px solid black;
  padding: 10px;
}

div#settings input,
div#settings select,
div#settings label {
  padding-left: 10px;
  padding-right: 10px;
}

#forkongithub a {
  background: #000;
  color: #fff;
  text-decoration: none;
  font-family: arial, sans-serif;
  text-align: center;
  font-weight: bold;
  padding: 5px 40px;
  font-size: 1rem;
  line-height: 2rem;
  position: relative;
  transition: 0.5s;
}

#forkongithub a::before,
#forkongithub a::after {
  content: "";
  width: 100%;
  display: block;
  position: absolute;
  top: 1px;
  left: 0;
  height: 1px;
  background: #fff;
}

#forkongithub a::after {
  bottom: 1px;
  top: auto;
}

@media screen and (min-width:800px) {
  #forkongithub {
    position: fixed;
    display: block;
    top: 0;
    right: 0;
    width: 200px;
    overflow: hidden;
    height: 200px;
    z-index: 9998;
  }
  #forkongithub a {
    width: 200px;
    position: absolute;
    top: 60px;
    right: -60px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.8);
  }
}