/* Root variables */
:root {
    --spacing: 3px;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
    background-color: #fff;
    color: rgb(55, 53, 47);
}

body.serif,
body.serif button {
    font-family: 'PT Serif', serif;
}

body.embed {
    margin: 5px 0 0 0;
    padding-left: var(--spacing);
}

.hidden {
    display: none;
}

#dice-buttons,
#default-dice {
    display: flex;
    flex-wrap: wrap;
}

#dice-buttons button:not(:last-child),
#default-dice {
    margin-right: var(--spacing);
}

button, .button, input {
    transition: background 20ms ease-in 0s;
    font-size: 1rem;
    padding: 5px;
    border-radius: var(--spacing);
    background-color: transparent;
    border: 1px solid rgba(55, 53, 47, 0.16);
    margin-bottom: var(--spacing);
    text-decoration: none;
}

.small {
    font-size: smaller;
}

input {
    width: 60px;
}

#add-custom-die {
    margin-bottom: 0;
    border-radius: 0 var(--spacing) var(--spacing) 0;
    border-left: 0px;
    background-color: #3aa15b;
    color: #fff;
}

.top-buttons {
    display: flex;
    align-items: center;
    margin-bottom: var(--spacing);
}

.top-buttons button {
    margin-bottom: 0;
}

#total-container {
    margin-left: var(--spacing);
}

#config-container {
    margin-bottom: var(--spacing);
}

#config-container input {
    margin-bottom: 0;
    margin-left: var(--spacing);
}

input#custom-die-input {
    border-radius: var(--spacing) 0 0 var(--spacing);
    border-right: 0px;
    margin-right: 0;
}

#config-container > div:not(:last-child) {
    margin-bottom: var(--spacing);
}

button.dieNumber, button.removeDie {
    margin-bottom: 0;
}

.dieContainer {
    margin-bottom: var(--spacing);
}

button:hover, .button:hover,
button:focus-visible, .button:focus-visible {
    background: rgba(55,53,47,0.08) none repeat;
    outline: none;
}

button:focus, .button:focus {
    outline: none;
}

button.removeDie {
    border-left: 0px;
    border-radius: 0 var(--spacing) var(--spacing) 0;
    background-color: #FE7369;
    color: rgba(255, 255, 255, 0.9);
}

button.dieNumber {
    border-radius: var(--spacing) 0 0 var(--spacing);
    width: fit-content;
}

.customDieContainer {
    margin-right: var(--spacing);
}

button.customDieButton {
    border-radius: var(--spacing) 0 0 var(--spacing);
    margin-right: 0 !important;
}

.total {
    margin-right: var(--spacing);
}

#dice {
    display: flex;
    flex-wrap: wrap;
    margin-top: var(--spacing);
}

.die {
    margin-right: var(--spacing);
    border-radius: var(--spacing);
}

.dieContainer.showing {
    animation: buttonzoomin 100ms ease-in-out forwards;
}

.dieContainer.hiding {
    opacity: 0;
    animation: buttonzoomout 100ms ease-in-out;
}

.dieNumber {
    border-right: 0;
}

.natural .die {
    /* box-shadow: 0 0 var(--spacing) 0 gold; */
    animation: buttonglow 200ms ease-in-out forwards;
}

/* dark mode start */
body.dark {
    background-color: #191919;
    color: rgba(255, 255, 255, 0.9);
}

body.dark button, body.dark .button, body.dark input {
    background-color: #262626;
    color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.14);
}

body.dark button:hover, body.dark .button:hover {
    background: rgb(71,76,80) none repeat scroll 0% 0%;
}
/* dark mode end */

@keyframes buttonzoomin {
    0% {
        transform: scale(0.9);
        opacity: 0;
    }

    80% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1.0);
        opacity: 1;
    }
}

@keyframes buttonzoomout {
    from {
        opacity: 1;
    }
    to {
        transform: scale(0.9);
        opacity: 0;
        visibility: hidden;
    }
}

@keyframes buttonglow {
    0% {
        box-shadow: 0 0 0px 0 gold;
    }

    50% {
        box-shadow: 0 0 50px 0 gold;
    }
    100% {
        box-shadow: 0 0 var(--spacing) 0 gold;
    }
}