html {
    box-sizing: border-box;
    font-size: 62.5%;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

:root {
    --clr-risk-gray-light: #fefeff;
    --clr-risk-gray-medium: #9aa2a6;
    --clr-risk-gray-dark: #202729;
    --clr-risk-red: #e81a23;
    --font-general: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
        'Open Sans', 'Helvetica Neue', sans-serif;
    --font-size-large: 3rem;
    --font-size-med: 2.65rem;
    --font-size-small: 2.3rem;
    --font-size-very-small: 2rem;
}

body {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-color: var(--clr-risk-gray-medium);
    font-family: var(--font-general);
    color: var(--clr-risk-gray-dark);
}

h2 {
    font-size: var(--font-size-large);
    text-align: center;
    margin-bottom: 0;
}

h3 {
    font-size: var(--font-size-med);
    text-align: center;
}

fieldset {
    border: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

label {
    font-family: var(--font-general);
    font-size: var(--font-size-large);
    font-weight: bold;
    margin-bottom: 0.25em;
}

input {
    font-family: var(--font-general);
    font-size: var(--font-size-large);
    max-width: 100px;
    background: var(--clr-risk-gray-light);
    border: 1px solid var(--clr-risk-gray-dark);
    border-radius: 0.25em;
    padding: 0 0.5em;
}

button {
    border: 0;
    padding: 0.25em 0.65em;
    font-family: var(--font-general);
    font-size: var(--font-size-large);
    font-weight: bold;
    border-radius: 0.25em;
    background: var(--clr-risk-gray-dark);
    color: var(--clr-risk-gray-light);
    cursor: pointer;
}

button:active,
button.clicked {
    color: var(--clr-risk-gray-dark);
    background: var(--clr-risk-gray-medium);
}

#dummy-button {
    width: 1px;
    height: 1px;
    padding: 0;
    position: absolute;
    top: -5000px;
}

table {
    width: 100%;
    margin-top: 3em;
}

tr:nth-of-type(odd) {
    background: var(--clr-risk-gray-dark);
    color: var(--clr-risk-gray-light);
}

td,
th {
    font-size: var(--font-size-very-small);
    text-align: center;
    width: 16.5%;
}

.logo-container {
    max-width: 400px;
    padding: 0 1em;
    margin-bottom: 2em;
}

.logo {
    width: 100%;
}

.ui-container {
    max-width: 1000px;
    width: 80%;
    background: var(--clr-risk-gray-light);
}

.hidden {
    display: none;
}

.ui-elements {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: var(--clr-risk-gray-light);
}

.input-fields {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3em;
    margin: 3em 0;
}

#alert {
    color: var(--clr-risk-red);
}

.buttons-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3em;
}

.dice-outer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10em;
    background: var(--clr-risk-gray-light);
    padding: 0 3em;
}

.dice {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-bottom: 3em;
}

.dice-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1em;
}

.die {
    max-width: 150px;
    max-height: 150px;
    width: 100%;
    height: 100%;
}

.die.animate {
    animation-name: rotateDice;
    animation-iteration-count: 1;
}

@keyframes rotateDice {
    from {
        transform: rotate(-360deg);
    }

    to {
        transform: rotate(0deg);
    }
}

.battle-log-container {
    background: var(--clr-risk-gray-light);
    max-width: 1000px;
    width: 80%;
    margin-top: 3em;
}

.battle-log {
}

@media (max-width: 1000px) {
    h2 {
        font-size: var(--font-size-med);
    }

    h3 {
        font-size: var(--font-size-small);
    }

    label {
        font-size: var(--font-size-med);
    }

    input {
        font-size: var(--font-size-med);
    }

    button {
        font-size: var(--font-size-med);
    }
}

@media (max-width: 850px) {
    :root {
        --font-size-very-small: 1.75rem;
    }

    .ui-container {
        width: 100%;
    }

    .dice-outer {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }

    .attacker-dice {
        margin-bottom: -8em;
    }

    .die {
        max-width: 100px;
    }

    .battle-log-container {
        width: 100%;
    }
}

@media (max-width: 650px) {
    :root {
        --font-size-very-small: 1.25rem;
    }

    .input-fields {
        flex-direction: column;
        gap: 0;
    }

    .buttons-container {
        flex-direction: column;
    }
}