Hi how do i change the colors in snipcart (Next.js)

hello everyone!
i need help! i cant understand how to change the colors in my snipcart:

ive installed snipcart in my Next.js website in a file called: _document.js
(to be frank its a forked version of the headless dropshiping starter project)
my question is how do i overide the css??
this how it looks:

export default function Document() {

return (

<Html lang="en">

    <Head>

      <link rel="preconnect" href="https://app.snipcart.com" />

      <link rel="preconnect" href="https://cdn.snipcart.com" />

      <link

        rel="stylesheet"

        href="https://cdn.snipcart.com/themes/v3.0.31/default/snipcart.css"

      />

       

      <link

        href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap"

        rel="stylesheet"

      />

   

    </Head>

    <body className="antialiased">

      <Main />

      <NextScript />

      <script

        async

        src="https://cdn.snipcart.com/themes/v3.0.31/default/snipcart.js"

      ></script>

     

      <div

        id="snipcart"

        data-config-modal-style="side"

        data-api-key={process.env.NEXT_PUBLIC_SNIPCART_API_KEY}

        hidden

      >

        <address-fields section="top">

          <div className="snipcart-form__field">

            <snipcart-label for="phone">Phone number</snipcart-label>

            <snipcart-input name="phone"></snipcart-input>

          </div>

        </address-fields>

       

      </div>

    </body>

  </Html>

)

}