Css is connecting to html but is not rendering correctly

    {% load static %}
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    
        <link rel="stylesheet" href="{% static '\css\index.css'%}" />
        <title>LUXURY STARTS HERE</title>
      </head>
      <body>
        <section class="content">
          <h1>LUXURY VILLAS</h1>
    
          <video
            width="500px"
            autoplay
            muted
            loop
            src="{% static '\video\production ID_4069480.mp4'%}"
          ></video>
    
          <div class="overlay"></div>
    
          <a href="">EXPLORE</a>
        </section>
      </body>
    </html>

@import url("https://fonts.googleapis.com/css2?family=Luxurious+Roman&display=swap");

.content {
  position: absolute;

  top: 0;
  right: 0;
  width: 100%;
  min-height: 100vh;
  padding: 0;
  display: flex;

  align-items: center;

  background: gold;
  font-family: "Luxurious Roman", 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);
}

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

Your content overlay will be covering the whole screen, making things look darker because of its 50% opacity. You could set it to display:none until it is needed to fix the problem.

.content .overlay {
  position: absolute;
  background: black;
  width: 100%;
  height: 100%;
  opacity: 0.5;
}

<div class="overlay"></div>
Back to Top