My starter CSS for most projects

css-reset-snippit.html

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Geist:wght@100..900&display=swap" rel="stylesheet">
    <style>
        *, *::before, *::after {
          box-sizing: border-box;
        }
        
        @media (prefers-reduced-motion: no-preference) {
          html {
            interpolate-size: allow-keywords;
          }
        }
        
        body {
            margin-top: 40px;
            margin-bottom: 40px;
            line-height: 1.6;
            font-size: 18px;
            color: #444;
            font-family: "Geist", sans-serif;
            font-optical-sizing: auto;
            font-weight: 400;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
        }

        img, picture, video, canvas, svg {
          display: block;
          max-width: 100%;
        }

        input, button, textarea, select {
          font: inherit;
        }

        p, h1, h2, h3, h4, h5, h6,.header,.paragraph {
          overflow-wrap: break-word;
        }

        h1,h2,h3,.header {
            line-height: 1.2;
            margin-top: 0rem;
            margin-bottom: 0rem;
            text-wrap: balance;
        }

        p,.paragraph {
            margin-top: 0.25rem;
            margin-bottom: 1.0rem;
            text-wrap: pretty;
        }

        section,.section {
            margin: 1.5rem auto;
            padding: 0 10px;
            max-width: 650px;
        }

        .row {
            display: block;
        }

        @media (min-width: 650px) {
            .row {
                display: flex;
                gap: 2rem;
            }
        }
    </style>