/* App-wide styling */
body {
    background-color: #121212;
    color: #ffffff;
    font-family: 'Source Sans 3', 'Segoe UI', sans-serif;
    margin: 0;
    padding: 0;
    font-optical-sizing: auto;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
.button { position: relative; display: inline-flex; align-items: center; justify-content: center; padding: .625rem 1.25rem; border-radius: .75rem; font-family: 'Source Sans 3', 'Segoe UI', sans-serif; font-size: 1rem; font-weight: 600; line-height: 1.5rem; box-shadow: 0 4px 6px -1px rgb(0 0 0 / .2); transition: transform 180ms ease; }
.button:hover { transform: scale(1.04); }
.button:active { transform: scale(.97); }
.button:focus-visible { outline: 3px solid #fbbf24; outline-offset: 3px; }
.button-lg { padding: .75rem 1.5rem; font-size: 1.125rem; }
.button-primary { background: linear-gradient(to right, #f59e0b, #d97706); color: #111827; }
.button-outline { border: 1px solid #f59e0b; color: #f59e0b; }
footer nav a:hover { color: #fbbf24; }
.jitpomi-link { color: #fbbf24; font-weight: 600; }
.jitpomi-link:hover { text-decoration: underline; text-underline-offset: .2em; }

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Space Grotesk', 'Segoe UI', sans-serif;
    letter-spacing: -0.025em;
}

code,
pre {
    font-family: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;
    font-variant-ligatures: none;
}

.brand-logo {
    width: min(20rem, 70vw);
    height: auto;
    margin-bottom: 1.5rem;
    border-radius: 1.25rem;
}