body {
    margin: 0;
}

canvas {
    width: 100% !important;
    height: 100% !important;
    height: 100vh !important;

}

.hud-cont {
    display: grid;
    display: flex;
    position: absolute;
    align-items: end;
    justify-content: start;
    width: 100%;
    height: 100%;
}

.hud {
    margin: 1rem;
}
.hud-item-cont {
    display: inline-block;
    width: 7.5rem;
    height: 2.5rem;
    text-shadow: 0.0rem 0.0rem 0.1rem #fff;
    user-select: none;
}
    .hud-item-cont button {
        display: inline-block;
        width: 1.8rem;
        height: 1.8rem;
        border-radius: 0.3rem;
        border: 0.01rem solid black;
    }

    .hud-item-cont button:active, .hud-item-cont button.active {
        background-color: #878787;
        border-radius: 0.3rem;
        border: 0.01rem solid black;
    }

#helperboard {
    position: absolute;
    color: yellow;
    padding: 0.5rem;
    text-shadow: 0.1rem 0.1rem 0.1rem #0d030d;
}