PDF from website looks garbled on browser, but opens after downloading

I have written up this basic html website that is hosted on cloudflare: https://logic-labs.in/workshops

When I try to open the linked PDF, it is garbled in the browser (both Firefox and Chrome, it downloads in Safari rather than opening in browser). After downloading this file, it opens fine. I am unsure what is the issue. The html element is

<li><a href="resources/two_logiclabs-flyer-vels-academy.pdf" target="_blank" class="button">Flyer</a></li>

Could you please help or point me to the right resources?

1. MIME type: I tried using type=application/pdf in case it is an issue due to MIME type
2. I tried removing all warnings in the html files and then host a test deployment: https://test.logic-labs.pages.dev/
3. I also experimented removing the target="_blank"
4. Trying to understand the console outputs after inspecting element, but I am fairly new to this and unsure how to proceed. I saw some warnings like unrecognized content-security-policy directive "require-trusted-types-for", but presumably they should not be causing issues.

Edit

I tried adding a _headers file with the following content. This seems to work.

https://test.logic-labs.pages.dev/resources/himalaya_CV.pdf
    Content-Type: application/pdf
    Accept: application/pdf
    Referrer-Policy: origin
    X-Frame-Options: SAMEORIGIN
    Content-Disposition: inline

I see no content-type (and no content-disposition although this is not compulsory) headers in your response. This is probably the reason for the mess up. Try curl -L -v 'https://github.com/progit/progit2/releases/download/2.1.437/progit.pdf' > /dev/null as an example. It returns the content-type as application/octet-stream where the default browser action is to download the file.

If you're setting them yourself but still not seeing anything, my guess is that your CDN (cloudflare) is rewriting them or serving a cached version of your document.