title: CSS not loading with node.js and express
body: <p>My CSS won't load when running my HTML. The HTML is hooked up correctly with the CSS but express and node.js seem to be ignoring it. I can't understand the articles and tutorials or other stack overflow questions so I'll just send the code.</p>
  <p>I also get an error that says the MIME-type is text/HTML even though I've checked multiple times, the MIME-type is indeed text/CSS.</p>
  <p><strong>HTML:</strong></p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
      &lt;meta charset=&quot;UTF-8&quot;&gt;
      &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
      &lt;title&gt;Infinite Road&lt;/title&gt;
      &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;style.css&quot;/&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class=&quot;infinite&quot;&gt;
          &lt;div class=&quot;shadow&quot;&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p><strong>CSS:</strong></p>
  <pre><code>* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body {
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        background: radial-gradient(#9bdfff, #009be4);
    }
    .infinite {
        position: relative;
        width: 800px;
        height: 160px;
        background: #525252;
        transform-origin: bottom;
        transform-style: preserve-3d;
        transform: perspective(500px) rotateX(30deg);
    }
    .infinite::before {
        content: &quot;&quot;;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 0;
        width: 100%;
        height: 10px;
        background: linear-gradient(90deg, #fff 0%, #fff 70%, #525252 70%, #525252 100%);
        background-size: 120px;
        animation: animate 0.5s linear infinite;
    }
    @keyframes animate {
        0% {
            background-position: 0px;
        }
        100% {
            background-position: -120px;
        }
    }
    .infinite::after {
        content: &quot;&quot;;
        position: absolute;
        width: 100%;
        height: 30px;
        background: #333;
        bottom: -30px;
        transform-origin: top;
        transform: perspective(500px) rotateX(-25deg)
    }
    .shadow {
        position: absolute;
        bottom: -93px;
        left: 50%;
        transform: translateX(-50%);
        width: 95%;
        height: 60px;
        background: linear-gradient(#000, transparent);
        opacity: 0.5;
    }
  </code></pre>
  <p><strong>JS:</strong></p>
  <pre><code>const path = require('path');
  const { readFile } = require('fs');
  const app = express();
  
  app.get('/', (request, response) =&gt; {
      response.sendFile(path.join(__dirname, &quot;index.html&quot;))
  });
  
  app.get('/', (request, responseC) =&gt; {
      responseC.sendFile(path.join(__dirname, &quot;style.css&quot;))
  });
  
  app.listen(process.env.PORT || 8080, () =&gt; console.log('App availible on http://localhost:8080'))
  </code></pre>
  <p>Stackoverflow told me there's too much code, not enough text so I tried to add more.</p>