title: Css is connecting to html but is not rendering correctly
body: <pre><code>    {% load static %}
      &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;link rel=&quot;stylesheet&quot; href=&quot;{% static '\css\index.css'%}&quot; /&gt;
          &lt;title&gt;LUXURY STARTS HERE&lt;/title&gt;
        &lt;/head&gt;
        &lt;body&gt;
          &lt;section class=&quot;content&quot;&gt;
            &lt;h1&gt;LUXURY VILLAS&lt;/h1&gt;
      
            &lt;video
              width=&quot;500px&quot;
              autoplay
              muted
              loop
              src=&quot;{% static '\video\production ID_4069480.mp4'%}&quot;
            &gt;&lt;/video&gt;
      
            &lt;div class=&quot;overlay&quot;&gt;&lt;/div&gt;
      
            &lt;a href=&quot;&quot;&gt;EXPLORE&lt;/a&gt;
          &lt;/section&gt;
        &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>
  <hr />
  <pre><code>@import url(&quot;https://fonts.googleapis.com/css2?family=Luxurious+Roman&amp;display=swap&quot;);
  
  .content {
    position: absolute;
  
    top: 0;
    right: 0;
    width: 100%;
    min-height: 100vh;
    padding: 0;
    display: flex;
  
    align-items: center;
  
    background: gold;
    font-family: &quot;Luxurious Roman&quot;, cursive;
  
    z-index: -1;
  }
  
  .content video {
    position: absolute;
  
    width: 100%;
    height: 80%;
  
    object-fit: cover;
  }
  
  .content .overlay {
    position: absolute;
    background: black;
    width: 100%;
    height: 100%;
    opacity: 0.5;
  }
  
  .content h1 {
    font-size: 50px;
    position: absolute;
    opacity: 0.7;
    color: gold;
    top: 10%;
    left: 10%;
    z-index: 1000;
  }
  
  .content a {
    position: absolute;
    top: 60%;
    left: 50%;
    font-size: 30px;
    z-index: 1000;
    text-decoration: none;
    color: white;
    width: 5em;
  
    font-family: monospace;
    transition: 0.5s;
  }
  
  .content a:hover {
    color: gold;
    letter-spacing: 6px;
    background: rgb(0, 0, 0);
    opacity: 0.75;
  
    border: 5px solid rgb(0, 0, 0);
  }
  </code></pre>
  <p>Hello I am trying to connect my css to my html but for so on known reason it connects but gives me very weird dark colors. I am trying to figure out if I am doing something incorrectly but can't seem to find it. In my views and settings I have every necessary item but still can't figure out how to fix this please help me out</p>