.dice-container {
    margin-top: 7.5%;
    z-index: 100;
}

.dice {
    --size: 250px;

    width: var(--size);
    height: var(--size);
    position: relative;
    margin: 5px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
    z-index: 101;
}

.dice-dot {
    --top: 0%;
    --left: 0%;
    --size: 40px;
    --color: black;

    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    background-color: var(--color);
    
    /* Positioning */
    position: absolute;
    z-index: 102;
    top: var(--top);
    left: var(--left);
    transform: translateX(calc(var(--left) * -1)) translateY(calc(var(--top) * -1));
}