:root {
    --text: #6b6375;
    --text-h: #fff;
    --bg: #08060d;
    /*--bg: #FFFFFF;*/
    --border: #e5e4e7;
    --code-bg: #f4f3ec;
    --accent: #aa3bff;
    --accent-bg: rgba(170, 59, 255, 0.1);
    --accent-border: rgba(170, 59, 255, 0.5);
    --social-bg: rgba(244, 243, 236, 0.5);
    --shadow: rgba(0, 0, 0, 0.1) 0 10px 15px -3px, rgba(0, 0, 0, 0.05) 0 4px 6px -2px;

    --sans: system-ui, 'Segoe UI', Roboto, sans-serif;
    --heading: system-ui, 'Segoe UI', Roboto, sans-serif;
    --mono: ui-monospace, Consolas, monospace;

    font: 18px/145% var(--sans);
    letter-spacing: 0.18px;
    color-scheme: light dark;
    color: var(--text);
    background: var(--bg);
    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    @media (max-width: 1024px) {
        font-size: 16px;
    }
}

html,
body {
    height: 100%;
    margin: 0;
}

#app {
    min-height: 100dvh;
    height: 100%;
}