* {
    font-family: Verdana;
}

root {
    width: 100%;
    height: 100%;
    position: absolute;
    color: white;
    font-size: 24px;
    pointer-events: all;
}

watermark {
    padding-top: 8px;
    padding-left: 12px;
    color: white;
    font-size: 18px;
}

static-bar {
    font-size: 21px;
    position: absolute;
    top: 32px;
    right: 0;
    width: 34%;
    padding-left: 1em;
    background-color: #FFFFFFAA;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

bottom-bar {
    position: absolute;
    bottom: 0;
    left: 20%;
    width: 66%;
    height: 16%;
    background-color: #000000AA;
}

    bottom-bar selected-name {
        font-size: 64px;
        color: white;
    }

build-container {
    position: absolute;
    display: flex;
    flex-direction: column;
}

build-unit {
    width: 180px;
    height: 60px;
    border-radius: 50%;
    background-color: #000000AA;
    pointer-events: all;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}

    build-unit button:hover {
        cursor: crosshair;
        background-color: black;
    }

next-turn-button {
    position: absolute;
    bottom: 4%;
    left: 93%;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background-color: #000000AA;
    pointer-events: all;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

    next-turn-button:hover {
        cursor: crosshair;
        background-color: black;
    }

dead {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: red;
    font-size: 96px;
    text-align: center;
    pointer-events: none;
    animation-name: splash;
    animation-duration: 0.5s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: linear;
    text-shadow: -3px -3px 0 black, 3px -3px 0 black, -3px 3px 0 black, 3px 3px 0 black, -3px 0 0 black, 3px 0 0 black, 0 -3px 0 black, 0 3px 0 black;
}

@keyframes splash {
    from {
        transform: translate(-50%, -50%) scale(1) rotate(1deg);
    }

    to {
        transform: translate(-50%, -50%) scale(1.1) rotate(-1deg);
    }
}