
.die
{
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    height: var(--size);
    width: var(--size);

    border-color: black;
    border-style: solid;
    border-width: calc(var(--size) * (3 / 200));;

    border-radius: calc(var(--size) * (30 / 200));
}

.selected > .die
{
    border-color: red;
}

.die img
{
    width: calc(var(--size) * (140 / 200));
    height: calc(var(--size) * (140 / 200));
}

.die .die-overlay
{
    position: absolute;
    width: calc(var(--size) * (50 / 200));
    height: calc(var(--size) * (50 / 200));
    bottom: calc(var(--size) * (25 / 200));
    right: calc(var(--size) * (25 / 200));
    opacity: 35%;
}

.die .die-overlay > img
{
    width: 100%;
    height: 100%;
}
