:root {
    /* Opt in to the browser's native light/dark rendering (scrollbars,
       form controls, etc.) and unlock the light-dark() function below. */
    color-scheme: light dark;

    /* Nord palette: https://www.nordtheme.com
       Polar Night: #2E3440 #3B4252 #434C5E #4C566A
       Snow Storm:  #D8DEE9 #E5E9F0 #ECEFF4
       Frost:       #8FBCBB #88C0D0 #81A1C1 #5E81AC */
    --color-bg: light-dark(#eceff4, #2e3440);
    --color-fg: light-dark(#2e3440, #eceff4);
    --color-muted: light-dark(#4c566a, #d8dee9);
    --color-border: light-dark(#d8dee9, #434c5e);
    --color-accent: light-dark(#5e81ac, #88c0d0);
}

.font-roboto {
    font-family: "Roboto", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings: "wdth" 100;
}

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

body {
    min-height: 100dvh;
    padding-top: 10dvh;
    display: flex;
    justify-content: center;
    background-color: var(--color-bg);
    color: var(--color-fg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings:
        "cv11", "salt", "ss01", "ss03", "cv01", "cv02", "cv03", "cv04", "cv05",
        "cv06", "cv09", "cv10";
}