* {
  box-sizing: border-box;
}

body {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    background-color: #AEB8FE;
    font-family: sans-serif;
}

form {
    margin: 1rem 1rem 1.5rem;
}

h1 {
    font-size: 2.5rem;
    text-align: center;
}

.roll-button {
    display: block;
    margin: 0 auto;
    font-size: 2rem;
    padding: 0.15em 0.75em;
}

.form-group {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    margin-bottom: 1rem;
}

.form-die-count-label,
.form-die-count-input {
    font-size: 1.5rem;
}

.form-die-count-label {
    text-align: center;
    line-height: 1.3;
}

.form-die-count-input {
    margin: 0 auto;
}

.dice-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 50rem;
    padding: 0 1.5rem;
    margin-bottom: 1.5rem;
}

.die-container {
    --_die-width: var(--die-width, 5rem);
    width: var(--_die-width);
}

.die {
    --gap: 6%;
    display: grid;
    grid: repeat(3, 1fr) / repeat(3, 1fr);
    grid-template-areas:
        "top-left top-center top-right"
        "middle-left middle-center middle-right"
        "bottom-left bottom-center bottom-right";
    justify-items: center;
    align-items: center;
    width: calc(100% - 2 * var(--gap));
    aspect-ratio: 1;
    padding: var(--gap);
    margin: var(--gap);
    border: none;
    border-radius: var(--gap);
    background-color: #f5f5f5;
    box-shadow: inset 0px 0px 5px 2px rgba(0,0,0,0.2), 0px 0px 7px 0px rgba(0,0,0,0.75);
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

.die-dot {
    width: 70%;
    aspect-ratio: 1;
    background-image: radial-gradient(rgb(90, 90, 90), black);
    border-radius: 50%;
}

@keyframes roll {
    0% {
        opacity: 0;
        transform:  rotateZ(0deg);
    }
    10% {
        opacity: 0;
    }
    100% {
        opacity: 1;
        transform: rotateZ(720deg);
    }
}

.roll-animation {
    animation-name: roll;
}

.top-left {
    grid-area: top-left;
}

.top-center {
    grid-area: top-center;
}

.top-right {
    grid-area: top-right;
}

.middle-left {
    grid-area: middle-left;
}

.center {
    grid-area: middle-center;
}

.middle-right {
    grid-area: middle-right;
}

.bottom-left {
    grid-area: bottom-left;
}

.bottom-center {
    grid-area: bottom-center;
}

.bottom-right {
    grid-area: bottom-right;
}