*, *::before, *::after {
    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
}
@supports (text-wrap: pretty) {
    *, *::before, *::after {
        text-wrap: pretty
    }
}
body, main {
    max-width: 100%;
    min-height: 100vh
}
@supports (min-height: 100svh) {
    body, main {
        min-height: 100svh
    }
}
html {
    font-size: 16px
}
@supports (scrollbar-gutter: stable) {
    html {
        scrollbar-gutter: stable
    }
}
main {
    align-content: center;
    display: grid;
    justify-items: center
}
header h1, footer {
    text-align: center
}
header h1 {
    font-size: 40px;
    margin-bottom: 2rem;
    line-height: 1.3
}
@supports (text-wrap: balance) {
    header h1 {
        text-wrap: balance
    }
}
#text, #generate-btn {
    margin-bottom: 1.5rem
}
#text {
    padding: 1rem
}
@media (prefers-reduced-motion: reduce) {
    #generate-btn {
        transition: none
    }
}
#generate-btn {
    transition: transform 500ms ease-in-out
}
#generate-btn:hover, #generate-btn:focus {
    transform: scale(1.05)
}