:root {

    /* colores */
    --color-text: #010a09;
    --color-background: #f6fefd;
    --color-background-alpha: rgba(246, 254, 253, 70%);
    --color-primary: #24e2cb;
    --color-secondary: #81bbee;
    --color-tertiary: #80142b;
    --color-accent: #557be8;

    --color-border: rgba(1, 10, 9, 0.12);

    --color-shadow-sm: 0 1px 3px rgba(1, 10, 9, 0.08);
    --color-shadow-md: 0 2px 8px rgba(1, 10, 9, 0.12);
    --color-shadow-lg: 0 8px 16px rgba(1, 10, 9, 0.16);

    /* fuentes */
    --font-primary: "Stack Sans Notch", sans-serif;
    --font-secondary: "Stack Sans Text", sans-serif;
}

:root.dark {
    --color-text: #f6fefd;
    --color-background: #121f1e;
    --color-background-alpha: rgba(1, 9, 8, 70%);
    --color-primary: #1dddc7;
    --color-secondary: #114b7e;
    --color-tertiary: #80142b;

    --color-accent: #173fab;

    --color-border: rgba(246, 254, 253, 0.15);

    --color-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
    --color-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.5);
    --color-shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.6);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;

    transition: color .4s ease-out, background-color .5s ease-out;
}

html {
    scroll-behavior: smooth;
}

body {
    position: relative;

    background-color: var(--color-background);

    scroll-behavior: smooth;
    /* en algunos navegadores scrollea con el body en vez de con el html */
}

.article {
    scroll-margin-top: 5rem;
}

li {
    list-style: none;
}

.link {
    color: var(--color-text);
    text-decoration: none;
}