body {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 16px);
    width: calc(100% - 27px)
}

.header, .header_debug {
    flex: 0 0 auto;
    display: flex;
    width: 100%;
}

.header_debug {
    display: none;
}
form {
    display: inline-block;
}

.game_info {
    flex: 0 1 auto;
    display: flex;
    flex-direction: column;
    align-content: space-around;
    margin-right: 5px;
}
.game_info > div > span {
    display: inline-block;
}

.game_status {
    flex: 1 1 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
}
.game_status_text {
    flex: 1 1 auto;
    font-size: 130%;
    text-align: center;
}
button {
    color: #900;
    font-weight: bold;
    font-size: 130%;
    text-transform: uppercase;
    flex: 0 1 auto;
}

.header .game_status > * {
    display: none;
    margin-bottom: 5px;
}
.header.not_started .game_info,
.header.level_finished .game_info,
.header.minder .game_info,
.header.reenter_field .game_info,
.header.enter_field .game_info,
.header.position_error .game_info,
.header.not_started .shield_container,
.header.level_finished .shield_container,
.header.minder .shield_container,
.header.reenter_field .shield_container,
.header.enter_field .shield_container,
.header.position_error .shield_container {
    display: none;
}
.header.not_started .button_start {
    display: inline-block;
}
.header.started .game_status_text,
.header.enter_field .game_status_text,
.header.playing .game_status_text,
.header.reenter_field .game_status_text,
.header.accuracy_bad .game_status_text,
.header.position_error .game_status_text {
    display:inline-block;
}
.header.enter_field .game_status,
.header.reenter_field .game_status{
    background-color: rgb(199, 139, 159);
}

.header.level_finished .game_status_text,
.header.minder .game_status_text,
.header.level_finished .button_start_level {
    display: inline-block;
}
.header.minder .game_status_text::before {
  content: "Gratulation! Alle Level abgeschlossen!";
  display: block;
}
.header.restart .restart_button {
  display: block;
}

.game_info > div {
    flex: 1;
}

.shield_container {
    position: relative;
    flex: 0 0 auto;
    max-height: 60px;
    align-self: center;
}

.shield_background {
    position: absolute;
    height: 0%;
    background-color: rgb(252, 203, 81);
    width: 100%;
    z-index: -20;
    bottom: 0px;
}
.shield_text {
    position: absolute;
    top: 19px;
    width: 100%;
    text-align: center;
}
.shield_image {
    height: 60px;
    display: inline-block;
}

.geoman_map {
    width: 100%;
    border: 1px solid rgb(79, 71, 196);
    flex: 1 1 100%;
}