:root {
    --slotmachine-time: 2000ms;
    --slotmachine-time-after: 2000ms;
}


.slotmachine {
    font-size: 5vh;
    box-sizing: border-box;
    text-align: center;
    vertical-align: middle;
    border-radius: 2vw;
    border: 2vw solid;
    background: repeating-linear-gradient(30deg, lightgray, lightgray 7vw, whitesmoke 7.1vw, whitesmoke 14vw);
    background-size: 1000vw 1000vw;
    background-position: 0 -100vw;
}


.responded .slotmachine {
    font-size: 5vh;
    animation: spin forwards ease-in-out;
    animation-duration: var(--slotmachine-time);
}


.responded::after {
    content: attr(value);
    color: transparent;
    position: absolute;
    font-size: 5vh;
    padding: 0;
    margin: 0;
    left: 50vw;
    top: 50%;
    z-index: 9999;
    transform: translate(-50%, -50%);
    animation: show forwards ease-in-out;
    animation-duration: var(--slotmachine-time-after);
}


@keyframes show {
    0% {
        color: transparent;
    }
    89% {
        color: transparent;
    }
    97% {
        color: darkgoldenrod;
    }
    100% {
        color: darkgoldenrod;
    }
}

@keyframes spin {
    0% {
        background-position: 0 -100vw
    }
    89% {
        background-position: 0 0;
    }
    100% {
        background-position: 0 0;
    }
}