/* color palette from */ :root { --c-white: #ffffff; --c-white-soft: #f8f8f8; --c-white-mute: #f2f2f2; --c-black: #202428; --c-black-soft: #222222; --c-black-mute: #282828; --c-indigo: #2c3e50; --c-black-light-1: #333333; --c-black-light-2: #454545; --c-black-light-3: #666666; --c-black-light-4: #999999; --c-text-light-1: var(--c-indigo); --c-text-light-2: rgba(60, 66, 70, 0.66); --c-text-dark-1: var(--c-white); --c-text-dark-2: rgba(235, 235, 235, 0.64); } /* semantic color variables for this project */ :root { --color-background: var(--c-white); --color-background-soft: var(--c-white-soft); --color-background-mute: var(--c-white-mute); --color-border: var(--c-black-light-2); --color-border-hover: var(--c-black-light-1); --color-heading: var(--c-text-light-1); --color-text: var(--c-black); --section-gap: 160px; --main-color: #005f77; --main-color-dark: #004d5c; --main-light-1: #007f96; --main-light-2: #D3EAED; --main-light-3: #EDF4F5; --main-light-4: #F2F6F7; --main-light-5: #F7FAFB; --main-light-6: #FAFDFD; --min-width: 400px; --min-header-width: 80px; --min-sider-width: 100px; --error-color: #f50a0d; } /* @media (prefers-color-scheme: dark) { :root { --color-background: var(--c-black); --color-background-soft: var(--c-black-soft); --color-background-mute: var(--c-black-mute); --color-border: var(--c-black-dark-2); --color-border-hover: var(--c-black-dark-1); --color-heading: var(--c-text-dark-1); --color-text: var(--c-text-dark-2); } } */ *, *::before, *::after { box-sizing: border-box; margin: 0; position: relative; font-weight: normal; } body { display: flow-root; min-height: 100vh; color: var(--color-text); line-height: 1.6; font-family: 'HarmonyOS Sans SC', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; font-size: 15px; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }