:root {
  --primary-color: #ffffff;
  --secondary-color: #7494ff;
  --ternary-color: #8f8f8f;
  --quartary-color: #000;
  --background: url("./Images/schwarzes-auge.png") center center/contain;
  --backgroundOpacity: 0.25;
  --max-width: 1100px;
  --dice-color: var(--ternary-color);
  --dice-button-color: var(--primary-color);
  --highlight-color: var(--quartary-color);
  --control-color: var(--primary-color);
  --navigation-height: 3rem;
  --border-width: 1px;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
}
.full-horizontal {
  width: 100%;
}
.full-vertical {
  height: 100%;
}
.flow-horizontal {
  display: flex;
  flex-direction: row;
}
.flow-vertical {
  display: flex;
  flex-direction: column;
}

.navigation {
  background: var(--control-color);
  display: flex;
  min-height: var(--navigation-height);
  border-bottom: var(--border-width) var(--quartary-color) solid;
}
.bordered {
  border: var(--border-width) var(--quartary-color) solid;
}
.navigationCenter {
  height: var(--navigation-height);
}
.value {
  font-size: calc(var(--navigation-height) * 2 / 3);
  padding: calc(var(--navigation-height) / 12)
    calc(var(--navigation-height) / 3);
  border-radius: calc(5 * var(--border-width));
}
.content {
  width: 100%;
  height: calc(100% - var(--border-width) - var(--navigation-height));

  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}
.content::after {
  position: absolute;
  content: "";
  width: 100%;
  height: calc(100% - var(--border-width) - var(--navigation-height));
  background: var(--background) no-repeat no-repeat;
  opacity: var(--backgroundOpacity);
  z-index: -1;
}
#game-field {
  width: 100%;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
}
.game-section {
  justify-content: flex-start;
  align-items: center;
  width: calc(2 * var(--navigation-height));
}
.game-section-selected {
  background: var(--highlight-color);
}
.section-value {
  align-items: center;
}
#config-btn {
  content: url(./Images/settings-24px.svg);
  height: var(--navigation-height);
  width: var(--navigation-height);
}
#roll-btn {
  content: url(./Images/play_arrow-24px.svg);
  height: var(--navigation-height);
}
.is-invisible {
  visibility: hidden;
}
.is-hidden {
  display: none;
}
.dicesClass {
  display: inline-flex;
  width: 100%;
  height: 100%;
}
.diceColor {
  fill: var(--dice-color);
}

.button-Up {
  content: url("./Images/add_circle_outline_black_24dp.svg");
  height: calc(var(--navigation-height) / 2);
  background: var(--dice-button-color);
}

.button-Down {
  content: url("./Images/remove_circle_outline_black_24dp.svg");
  height: calc(var(--navigation-height) / 2);
  background: var(--dice-button-color);
}
@media (max-height: 18rem) {
  body {
    display: flex;
    flex-direction: row;
  }
  .full-horizontal {
    height: 100%;
    width: unset;
  }
  .full-vertical {
    width: 100%;
    height: unset;
  }
  .flow-horizontal {
    flex-direction: column;
  }
  .flow-vertical {
    flex-direction: row;
  }
  .content {
    height: 100%;
    width: calc(100% - var(--border-width) - var(--navigation-height));
  }
  .content::after {
    height: 100%;
    width: calc(100% - var(--border-width) - var(--navigation-height));
  }
  .navigation {
    flex-direction: column-reverse;
    max-width: var(--navigation-height);
    border-bottom: unset;
    border-right: var(--border-width) var(--quartary-color) solid;
  }
  .navigationCenter {
    width: var(--navigation-height);
  }
  #roll-btn {
    width: var(--navigation-height);
    height: 100%;
  }
  #game-field.config-state {
    flex-direction: row;
  }
  .game-section {
    height: calc(2 * var(--navigation-height));
    width: unset;
  }
  .value {
    padding: calc(var(--navigation-height) * 2 / 3)
      calc(var(--navigation-height) / 12);
  }
  .button-Up,
  .button-Down {
    width: calc(var(--navigation-height) / 2);
  }
}