/* 
 * 1. CSS Reset
 * 
 * CSS reset source: https://www.joshwcomeau.com/css/custom-css-reset/
 */

    /* 1. Use a more-intuitive box-sizing model */
    *, *::before, *::after {
    box-sizing: border-box;
    }

    /* 2. Remove default margin */
    *:not(dialog) {
    margin: 0;
    }

    /* 3. Enable keyword animations */
    @media (prefers-reduced-motion: no-preference) {
    html {
        interpolate-size: allow-keywords;
    }
    }

    body {
    /* 4. Increase line-height */
    line-height: 1.5;
    /* 5. Improve text rendering */
    -webkit-font-smoothing: antialiased;
    }

    /* 6. Improve media defaults */
    img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
    }

    /* 7. Inherit fonts for form controls */
    input, button, textarea, select {
    font: inherit;
    }

    /* 8. Avoid text overflows */
    p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
    }

    /* 9. Improve line wrapping */
    p {
    text-wrap: pretty;
    }
    h1, h2, h3, h4, h5, h6 {
    text-wrap: balance;
    }

    /*
    10. Create a root stacking context
    */
    #root, #__next {
    isolation: isolate;
    }


/*
 * 2. Base Eleemnt Styles
 */

:root {
    --color-bg: #ffffff;
    --color-text: #1a1a1a;
    --color-accent: #0066cc;
    --nav-link: #1a1a1a;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #1a1a1a;
    --color-text: #f0f0f0;
    --color-accent: #66aaff;
    --nav-link: #f0f0f0;
  }
}

:root {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
}

/* 
 * 3. Header
 */


nav>a {
    color: var(--nav-link);
    text-decoration: none;
}

/* 
 * 4. Main
 */

main {
  padding-top: 5rem;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}