body {
    --color-bg: #0000ff;
    --color-glitch: #FFE800;
    --color-pink: #ff40b4;
    background-color: #000000;
}

/* layout stuff */
.stack {
  display: flex;
  align-items: center;
  justify-content: center;
}
.stack div {
    position: absolute;
}

.die {
    margin: 64px auto 0 auto;
    color: white;
    text-align: center;
    line-height: 1;
    font-size: 96px;
    width: 96px;
    height: 96px;
    padding: 16px;
}
.die .bg {
    width: 112px;
    height: 112px;
    background-color: var(--color-bg);
    border: 4px white solid;
}
.die.fresh {
    font-size: 32px;
    line-height: 96px;
}

.glitched.die .bg {
    background-color: var(--color-bg);
    color: white;
    border-color: var(--color-pink);
    transform: rotate(7deg);
    filter: url('#filter-glitch');
}

.glitching .glitched.die.rolled .bg {
    filter: url('#filter-glitch');
}

.glitching .die.rolled .bg {
    border-color: var(--color-glitch);
    filter: url('#filter-glitchable');
}

.glitchButton {
    position: absolute;
    top: 10px;
    right: 16px;
    width: 112px;
    height: 24px;
    font-size: 16px;
    line-height: 24px;
    padding: 8px;
    text-align: center;
    background-color: var(--color-glitch);
    border: 4px var(--color-glitch) solid;
}

.glitchButton:hover {
    filter: url('#filter-glitchable');
}

.glitching .glitchButton {
    background-color: var(--color-bg);
    color: var(--color-glitch);
    filter: none;
}