body {
    background-color: darkgreen;
}

#input-container {
    color: goldenrod;
    font-family: Arial, Helvetica, sans-serif;
    font-size: large;
}

#input-container input[type="number"] {
    width: 3em;
    margin: 0.5em;
}

.die {
    user-select: none;
    display: inline-block;
    background-color: darkred;
    color: goldenrod;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: x-large;
    margin: 0.5em;
    width: 2em;
    height: 2em;
    text-align: center;
    line-height: 2em;
    border: 0.2em solid black;
    border-radius: 20%;
    animation: rollIn 0.2s linear;
}

@keyframes rollIn {
    0% {
        transform: /*translate(-50%, -50%)*/ scale(0) rotate(120deg);
    }

    /*4% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.6) rotate(-20deg);
    }

    6% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1) rotate(0deg);
    }*/  

    75% {
        opacity: 1;
        transform: /*translate(-50%, -50%)*/ scale(1.2) rotate(-30deg);
    }

    100% {
        transform: /*translate(-50%, -50%)*/ scale(1) rotate(0deg);
    }
}