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

html {
    scroll-behavior: smooth;
}

:root {
    --color-primary: #000;
    --color-secondary: darkslategray;
    --color-background: #fff;
    --color-highlight: #0c3fe5;
    --color-highlight-hover: #2150eb;
    --color-menu-background: linear-gradient(to bottom left, #214fec, #459ce7 95.918399%, #45c9e7 100%);
    --color-menu-primary: white;
    --color-screenshot-border: black;
    --color-screenshot-shadow: rgba(227, 227, 14, 0.3);
    --color-timeline-arrow: linear-gradient(to right, skyblue, cornflowerblue 75%, dodgerblue 99%);
    --color-timeline-arrow-end: dodgerblue;
    --color-conclusion: deepskyblue;
    --color-conclusion-description: dodgerblue;
}

@media (prefers-color-scheme: dark) {
    :root {
        --color-primary: #fff;
        --color-secondary: #aeaeae;
        --color-background: #181a1b;
        --color-highlight: lightskyblue;
        --color-highlight-hover: lightblue;
        --color-menu-background: linear-gradient(to bottom right, #163ec0, #387db9 95.918399%, #2f96ad 100%);
        --color-menu-primary: white;
        --color-screenshot-border: white;
    }
}

body {
    background-color: var(--color-background);
    color: var(--color-primary);
    /* font: 12px/18px "Lucida Grande", "Lucida Sans Unicode", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; */
    font: 18px "Lucida Grande", "Lucida Sans Unicode", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

a {
    color: var(--color-highlight);
    text-decoration: none;
}

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

a, a:hover {
    transition: all 150ms ease;
}