500.astro styling isn't being applied | Astro Lounge | Page 1

I have a custom 500.astro page that looks something like this

<SiteLayout title="Server error">
  <PageLayout
    title="500"
    subtitle="Something went wrong on our end"
    imageSrc="/500.png"
  />
</SiteLayout>

It includes the Header and Footer components from the SiteLayout, but it seems none of the styling is being applied. How can I update it so the content of 500.astro loads the styling from my SiteLayout.astro (which just imports @/styles/global.css for tailwind)

In my other Astro page I'm testing the rendering of the 500.astro by throwing an error or returning a response with status 500

---
const { userId } = Astro.params

if (userId) throw new Error('oh no!')
// return new Response('oh no!', { status: 500 })
---
<div>{userId}</div>

#500.astro styling isn't being applied