#general-dice-throw-wrapper {
    position: fixed;
    bottom: 5%;
    right: 3%;

    display: grid;
    grid-auto-flow: row;
    gap: 40px;
}

#general-dice-throw-wrapper:not(:hover) .d6,
#general-dice-throw-wrapper:not(:hover) .d20 {
    display: none;
}

#general-dice-throw-wrapper .d20 {
    visibility: hidden;
    transition: all .2s;
    opacity: 0;

    transform: scale(0) rotate(15deg);
}

#general-dice-throw-wrapper:hover .d20 {
    transition: all .1s;
    visibility: visible;
    opacity: 1;
    transform: scale(1.4);
}

.general-dice-row .d6 {
    visibility: hidden;
    transition: all .2s;
    opacity: 0;

    transform: scale(0) rotate(15deg) translateY(100px);
}

.general-dice-row:hover .d6,
.general-dice-row:active .d6 {
    display: block;
    visibility: visible;
    transition: all .1s;
    opacity: 1;
    transform: scale(1);
    
    transition-delay: .02s;
}

.general-dice-row .d6,
#general-dice-throw-wrapper:hover > .general-dice-row:not(:hover) .d8,
.general-dice-row:not(:hover) .d20 {
    filter: opacity(50%);
}

.general-dice-row .d6:hover,
.general-dice-row .d6:hover ~ .d6 {
    filter: opacity(100%);
    transition-delay: 0s;
}

#general-dice-throw-wrapper .d8 {
    height: 100px;
    transform: scale(1);
}

.general-dice-row {
    align-items: center;
}
@media only screen and (max-width: 800px) {
    #general-dice-throw-wrapper .d6 {
        width: 50px;
    }
}