@use './element.scss' as *; @use './common.scss' as *; :root { box-sizing: border-box; font-family: 'Inter', system-ui, 'Avenir', 'Helvetica', 'Arial', sans-serif; font-size: 16px; font-weight: 400; line-height: 1.5; color: $font-color; color-scheme: light dark; background-color: $main-background-color; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-size-adjust: 100%; } body { width: 100%; min-width: 320px; height: 100vh; min-height: 100vh; padding: 0; margin: 0; } #app { width: 100%; height: 100%; overflow: hidden; } h1 { font-size: 3.2em; line-height: 1.1; } a { font-weight: 500; color: #646cff; text-decoration: inherit; &:hover { color: #535bf2; } } button { padding: 0.6em 1.2em; font-family: inherit; font-size: 1em; font-weight: 500; cursor: pointer; background-color: #1a1a1a; border: 1px solid transparent; border-radius: 8px; transition: border-color 0.25s; &:hover { border-color: #646cff; } &:focus, &:focus-visible { outline: 4px auto -webkit-focus-ring-color; } } ul { padding-inline-start: 0; margin: 0; li { list-style: none; } } .card { padding: 2em; } *, *::before, *::after { box-sizing: inherit; } @media (prefers-color-scheme: light) { :root { color: $font-color; background-color: $main-background-color; } a:hover { color: #747bff; } button { background-color: #f9f9f9; } }