:root {
    --accent: #1a4f34;
    --bg: #fff;
    --fg: #444
}
*, *::after, *::before {
    box-sizing: border-box;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    margin: 0;
    padding: 0
}
html {
    font-size: 16px;
    overflow-x: clip;
    scroll-behavior: smooth
}
@supports (scrollbar-gutter: stable) {
    html {
        scrollbar-gutter: stable
    }
}
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto
    }
}
body {
    background-color: var(--bg);
    color: var(--fg)
}
body, main {
    max-width: 100%;
    min-height: 100svh
}
header h1 {
    font-size: 40px;
    margin-bottom: 4rem
}
h2 {font-size: 32px}
/* h3 {font-size: 24px} */
.spaced-top-bottom {margin: 2rem 0}
.spaced-top {margin-top: 2rem}
.spaced-bottom {margin-bottom: 2rem}
@media (prefers-reduced-motion: reduce) {
    main button[type="submit"] {
        transition: none
    }
}
main form,
main form:not(button[type="submit"]),
main div.decimals-setting {
    display: flex;
}
main form {
    flex-direction: column
}
main form:not(button[type="submit"]) {
    align-items: center;
    justify-content: center
}
main form *:not(button[type="submit"]) {
    padding: 0.5rem;
    width: 50%
}
main button[type="submit"] {
    background: transparent;
    border: 0.15rem solid var(--accent);
    border-radius: 2rem;
    color: var(--fg);
    cursor: pointer;
    padding: 0.5rem;
    transition: transform 500ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
    width: 20%;
    &:hover,
    &:focus-visible {
        transform: scaleY(1.2)
    }
}
header,
main div.results {
    text-align: center
}
@media (prefers-color-scheme: dark) {
    :root {
        --accent: #b1ffd7;
        --bg: #444;
        --fg: #fff
    }
}