:root {
    color-scheme: light dark;

    --bg: light-dark(white, hsl(223 6.7% 20.6%));
    --fg: light-dark(black, white);
    --fg-secondary: light-dark(#313338, #b5bac1);
    --fg-semi-trans: light-dark(rgb(0 0 0 / 0.2), rgb(255 255 255 / 0.2));
    --link: light-dark(#006ce7, #00a8fc);
    --link-hover: light-dark(#005bb5, #0086c3);
}

html,
body {
    margin: 0;
    padding: 0;
}

body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell,
        "Open Sans", "Helvetica Neue", sans-serif;
    background: var(--bg);
    color: var(--fg);
}

a {
    color: var(--link);
    transition: color 0.2s linear;
}

a:hover {
    color: var(--link-hover);
}