body {
    display: flex; /* flexbox aktivieren */
    justify-content: center; /* children horizontal zentrieren */
    align-items: center; /* children vertikal zentrieren */
    height: 100vh; /* sagen, dass der body 100vh (also die gesamte vertical height) hoch sein soll */
}

.container {
    width: fit-content;
}

.cell {
    /* width: 50px;
    height: 50px; */

    background-color: grey;

    border: 1px solid black;
    text-align: center;

    user-select: none;

    display: flex;
    justify-content: center;
    align-items: center;
}

.HUD {
    border: 1px solid black;
    background-color: deepskyblue;
    display: flex;
    align-items: center;
    padding: 0px 10px;
}

.HUD img {
    height: 100%;
}

.bombCounter,.timer,.smiley {
    flex: 1;
    gap: 10px;
}

.bombCounter {
    display: flex;
    height: 100%;
    align-items: center;
}

.bombCounter span {
    border: 1px solid darkblue;
    padding: 6px;
    background-color: aquamarine;
    border-radius: 5px;
}

.bombCounter img {
    height: 100%;
}

.timer span {
    border: 1px solid tan;
    padding: 6px;
    background-color: bisque;
    border-radius: 5px;
}

.timer {
    display: flex;
    align-items: center;
    justify-content: right;
    height: 100%;
}

.timer img {
    height: 100%;
}

.smiley {
    display: flex;
    justify-content: center;
    height: 100%;
}

.status {
    /* height: 25px; */
    border: 1px solid black;

    text-align: center;
}

.playing {
    background-color: forestgreen;
}

.failed {
    background-color: firebrick;
}

.win {
    background-color: goldenrod;
}

.fail {
    background-image: url('fail.webp');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.flag {
    background-image: url('flag3.webp');
    background-color: darkgray;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.row {
    display: flex;
}

.hidden:not(.flag) {
    background-image: none !important;
    background-color: darkgray;
}

/* no display stuff */

.hidden > span {
    display: none;
}

.bomb > p {
    display: none;
}