#message,
#numbers {
    font-weight: 700;
    display: block
}

:root {
    --primary: #EB5B26;
    --secondary: #101010;
    --light: #10101020;
    --p: 24px
}

body {
    overflow-x: hidden
}

button {
    min-width: 100px
}

button.primary,
button.primary:disabled {
    background-color: var(--primary);
    border-color: var(--primary)
}

button.primary:active,
button.primary:focus,
button.primary:hover {
    background-color: var(--secondary);
    border-color: var(--secondary)
}

#history-btn {
    top: 20px;
    right: 20px
}

#controls {
    width: 100%;
    padding-inline: var(--p);
    padding-block: calc(var(--p)/ 2);
    background-color: var(--light)
}

#numbers {
    font-size: 20rem;
    line-height: 1;
    word-break: break-word;
    padding-inline: calc(var(--p)/ 2)
}

#message {
    font-size: 2rem;
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translate(-50%)
}

input.error {
    box-shadow: 0 0 0 .25rem var(--bs-danger-border-subtle)
}

label.error {
    color: var(--bs-danger)
}

@media(max-width:1023px) {
    #controls .col {
        padding-block: calc(var(--p)/ 4)
    }
}

@media(max-width:767px) {
    #history {
        overflow-y: scroll
    }
}