:root { --color-tabs-bg: #fafafa; --logo: #1b1b32; --bg: #24223c; --bg-h: #3f3b72; --white: #f5f4eb; --color-bg-button: #c8c0d9; --color-bg-button-hover: #b2a8c7; --input-focus-h: 244; --input-focus-s: 32%; --input-focus-l: 34%; } *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } body { font-family: "Calibre", Sans-Serif; line-height: 1.5; -webkit-font-smoothing: antialiased; min-height: 100vh; } img, picture, video, canvas, svg { display: block; max-width: 100%; } input, button, textarea, select { font: inherit; } p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; } p { text-wrap: pretty; } h1, h2, h3, h4, h5, h6 { text-wrap: balance; } #root { isolation: isolate; } /* --- globals */ /* HTMX */ .fade-in.htmx-added { opacity: 0; } .fade-in { opacity: 1; transition: opacity 0.5s ease-out; } body { /* FIXME: */ &::before { content: ""; } } main { /* FIXME: */ &::before { content: "
"; } height: 100%; width: 80vw; max-width: 960px; margin: 24px auto; } /* --- form */ form { margin: 64px; display: flex; flex-direction: column; gap: 8px; } .form-group { display: flex; } /* --- button */ .button { background: var(--color-bg-button); border-radius: 6px !important; color: var(--bg); height: auto !important; line-height: 0 !important; border: none; border-radius: 20px; cursor: pointer; display: inline-block; font-size: 0; height: 39px !important; line-height: 39px; font-size: 23px; font-weight: 600; overflow: hidden; position: relative; text-align: center; text-decoration: none; transition: background 0.25s cubic-bezier(0.33, 1, 0.68, 1), color 0.25s cubic-bezier(0.33, 1, 0.68, 1); user-select: none; margin: 0; min-width: 0; padding: 0; vertical-align: baseline; padding: 8px 20px; &:hover { background: var(--color-bg-button-hover); color: var(--bg-h); } }