style.css

#cardContainer {
  position: fixed;
  top: 10vh;
  left: 0;
  bottom: 0;
  right: 0;
}

.card div {
  border: 0.1em solid #000000;
  border-radius: 0.3em;
  margin: 0 auto;
  position: absolute;
  top: 5%;
  bottom: 5%;
  left: 5%;
  right: 5%;
  text-align: center;
  vertical-align: middle;
  line-height: 17vh;
  font-size: 2vw;
  box-shadow: inset 0px 0px 0.1em black;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  cursor: default;
}

.card.state-0 div {
  background: #FFDDAA;
  font-weight: bold;
  color: #000;
}

.card.state-1 div {
  background: #00A;
  color: #AAF;
}

.card.state-2 div {
  background: #A00;
  color: #FAA;
}

.card.state-3 div {
  background: #AAA;
  color: #666;
}

.card.state-4 div {
  background: #333;
  color: #AAA;
}

h1 {
  float: left;
  margin: 0.5vh;
  height: 9vh;
}

button {
  float: right;
  margin: .2em;
}

button.text {
  height: 9vh;
  font-size: 3vh;
  padding: 0 0.5em;
  border: 1px solid #000;
  line-height: 7vh;
  vertical-align: middle;
  border-radius: 0.3em;
  min-width: 8vw;
}

.lang {
  height: 9vh;
  width: 12vh;
  padding: 0;
  background-position: 50% center;
  background-repeat: no-repeat;
  background-size: cover;
  border: 1px solid #000;
  filter: grayscale(80%);
}

.lang:disabled {
  filter: none;
}

.lang:hover {
  filter: none;
}

.lang.de {
  background-image: url('img/de.svg')
}

.lang.en {
  background-image: url('img/en.svg')
}