Css подключается к html, но отображается некорректно

    {% 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);
}

Здравствуйте, я пытаюсь подключить мой css к моему html, но по известной причине он подключается, но дает мне очень странные темные цвета. Я пытаюсь понять, может я делаю что-то неправильно, но не могу найти это. В моих представлениях и настройках у меня есть все необходимые пункты, но я все еще не могу понять, как это исправить, пожалуйста, помогите мне

Ваше наложение содержимого будет занимать весь экран, из-за чего все будет выглядеть темнее из-за 50% непрозрачности. Вы можете установить его в display:none до тех пор, пока это не понадобится для решения проблемы.

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

<div class="overlay"></div>
Вернуться на верх