@use "@fontsource/fira-mono"; :root { --font-body: Arial, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; --font-mono: "Fira Mono", monospace; --color-theme-1: #ff3e00; --color-theme-2: #4075a6; --color-text: rgba(0, 0, 0, 0.7); --column-width: 42rem; --column-margin-top: 4rem; font-family: var(--font-body); color: var(--color-text); --primary-color: #e6e7ec; --secondary-color: rgb(36, 44, 70); --purple-color: rgb(128, 140, 177); --white-color: rgb(255, 255, 255); --success-bg-color: #d4edda; --success-color: #155724; --success-border-color: #c3e6cb; --error-color: rgb(255, 101, 101); --bg-color: #f3f4f6; --hover-bg-color: #e0e1e4; --placeholder-color: #888; --border-0-color: #f3f4f6; --border-1-color: #a1a1a1; --text-0-color: black; --text-1-color: #303d45; --text-2-color: #444; --tag-info-color: #b3b3b3; --tag-success-color: #cdeed5; --tag-error-color: rgb(245, 200, 200); --tag-warning-color: rgb(255, 231, 199); } body { min-height: 100vh; margin: 0; background-attachment: fixed; background-size: 100vw 100vh; } h1, h2, p { font-weight: 400; } p { line-height: 1.5; } a { color: var(--color-theme-2); text-decoration: none; } a:hover { text-decoration: underline; } h1 { font-size: 2rem; text-align: center; } h2 { font-size: 1rem; } pre { font-size: 16px; font-family: var(--font-mono); background-color: rgba(255, 255, 255, 0.45); border-radius: 3px; box-shadow: 2px 2px 6px rgb(255 255 255 / 25%); padding: 0.5em; overflow-x: auto; color: var(--color-text); } .text-column { display: flex; max-width: 48rem; flex: 0.6; flex-direction: column; justify-content: center; margin: 0 auto; } input, button { font-size: inherit; font-family: inherit; } button:focus:not(:focus-visible) { outline: none; } @media (min-width: 720px) { h1 { font-size: 2.4rem; } } input[type="text"], input[type="number"] { padding: 8px 12px; border: 1px solid #ccc; border-radius: 5px; font-size: 1rem; color: #333; background-color: #f9f9f9; transition: border-color 0.2s; &:focus { border-color: #007bff; outline: none; background-color: #fff; } &:disabled { background-color: #e9ecef; color: #666; } } input[type="checkbox"] { width: 20px; height: 20px; margin: 0; cursor: pointer; }