Build a Personal Portfolio Webpage - Your portfolio should use at least one media query

Hi, I’m going crazy trying to figure out what’s wrong with my code as I’m only missing a media query and I’m using two in my code.

Can someone help me please?

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="description" content="Sofia Cifuentes, Designer and front-end developer based in Lisbon" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Sofia Cifuentes</title>
  <link rel="icon" type="image/png" sizes="16x16" href="images/sc-logo16.png">
  <link rel="icon" type="image/png" sizes="32x32" href="images/sc-logo32.png">
  <link rel="stylesheet" href="style.css" />
  <link rel="stylesheet" href="https://use.typekit.net/rbz5yaa.css">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
    crossorigin="anonymous"></script>
</head>

<body>

  <nav class="navbar navbar-expand-lg bg-body-tertiary fixed-top" id="navbar">
    <div class="container-fluid">
      <a class="navbar-brand" href="index.html">SOFIA CIFUENTES</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
        aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">

          <li class="nav-item">
            <a class="nav-link" href="about.html" title="Page about Sofia Cifuentes">About</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="about.html#contact" title="Direct link to contact me">Contact</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#projects" title="Scroll down to projects">Projects</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
  <br>
  <div class="container center-div" id="welcome-section">
    <h2>👋 Hi I am</h2>
    <h1 class="big-text">SOFIA</h1>
    <h3 class="headline">🇵🇹 Designer and front-end developer, based in Lisbon</h3>
    <div class="contact-container row  mt-5 justify-content-center">
      <div class="col-sm-3 col-xs-12 text-center mb-2">
        <a href="about.html#contact"><button class="contact" role="button">
            Contact me
          </button>
        </a>
      </div>
      <div class="col-md-2 col-sm-8 col-xs-12 text-center">
        <a href="about.html">
          <button class="about" role="button" href="about.html">
            About me
          </button></a>
      </div>
    </div>
    <p class="text-center mt-4"><a id="profile-link" href="https://github.com/sofiacif" target="_blank"
        title="Link to GitHub profile">DEV
        PROFILE</a></p>
  </div>
  <div class="carousel-container" id="projects">
    <div id="carouselExampleCaptions" class="carousel slide">
      <div class="carousel-indicators">
        <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active"
          aria-current="true" aria-label="Slide 1"></button>
        <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1"
          aria-label="Slide 2"></button>
        <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2"
          aria-label="Slide 3"></button>
      </div>
      <div class="carousel-inner">
        <div class="carousel-item active">
          <a href="https://isitsunnytoday.netlify.app" target="_blank">
            <img src="images/isitsunny1.png" class="d-block w-100" alt="is it sunny weather app"></a>
          <div class="carousel-caption d-none d-md-block">
            <h5 class="project-tile">Is it sunny?</h5>
            <p>Weather app that shows the temperature in your city based on the she codes
              API</p>
          </div>
        </div>
        <div class="carousel-item"><a
            href="https://www.shecodes.io/workshops/shecodes-basics-fce9b431-f74c-4260-a633-606494ff1757/projects/1188187"
            target="_blank">
            <img src="images/ericeira.png" class="d-block w-100" alt="beach in ericeira"></a>
          <div class="carousel-caption d-none d-md-block">
            <h5 class="project-title">Ericeira</h5>
            <p><em>Ericeira, onde o mar é mais azul</em> is a project made for SheCodes
              course homework</p>

          </div>
        </div>
        <div class="carousel-item">
          <a href="https://www.behance.net/gallery/159135411/Macarico-Ocean-Literacy-Programme" target="_blank">
            <img src="images/macarico.png" class="d-block w-100" alt="maçarico bird logo"></a>
          <div class="carousel-caption d-none d-md-block">
            <h5 class="project-title">Maçarico</h5>
            <p>Visual identity design for an Ocean Literacy programme for +ATLANTIC</p>
          </div>
        </div>
      </div>
      <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions"
        data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
      </button>
      <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions"
        data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
      </button>
    </div>
  </div>
</body>

</html>
:root {
  --primary-color: #15cc92;
  --offwhite: #ebebeb;
  --yellow: #ffea00;
  --secondary-color: #f5f2fe;
  --bs-heading-color: white;
  --box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
}
@media (prefers-reduced-motion: no-preference) {
  * {
    scroll-behavior: smooth;
  }
}
@media (max-width: 576px) {
  .headline {
    font-weight: 300;
  }
}

/*
font-family: depot-new-web, sans-serif;
font-weight: 400;
font-style: normal;
*/
body {
  background-image: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.492),
      rgba(0, 0, 0, 0.492)
    ),
    url(https://images.unsplash.com/photo-1532423622396-10a3f979251a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2370&q=80);
  background-size: cover;
  background-attachment: fixed;
}
#welcome-section {
  height: 100%;
}
h1,
h2,
h3 {
  text-align: center;
  margin: 0;
  font-family: depot-new-web, sans-serif;
  font-weight: 400;
  font-style: normal;
  color: white;
}
.navbar-brand {
  font-weight: 600;
  letter-spacing: 1.5px;
}
.navbar {
  font-family: depot-new-web, sans-serif;
  font-style: normal;
  font-weight: 400;
}
.big-text {
  font-size: calc(48px + 6vw);
  font-family: aktiv-grotesk-extended, sans-serif;
  font-weight: 800;
  font-style: normal;
  color: white;
  letter-spacing: 1vw;
}
/*
p {
  padding: 20px;
  font-size: 18px;
  line-height: 1.5;
  text-align: center;
  color: white;
}*/

.contact-container {
  display: flex;
  justify-content: center;
  margin-top: 7vw;
}
.contact {
  /*margin-right: 2vw;*/
  /*display: inline-block;*/
  outline: none;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  border-radius: 500px;
  transition-property: background-color, border-color, color, box-shadow, filter;
  transition-duration: 0.3s;
  border: 1px solid transparent;
  letter-spacing: 2px;
  min-width: 160px;
  text-transform: uppercase;
  white-space: normal;
  font-weight: 700;
  text-align: center;
  padding: 16px 14px 18px;
  color: white;
  box-shadow: inset 0 0 0 2px white;
  background-color: transparent;
  height: 48px;
}

.contact:hover {
  color: var(--primary-color);
  background-color: white;
}
.about {
  /* margin-left: 2vw;*/
  /*display: inline-block;*/

  outline: none;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  border-radius: 500px;
  transition-property: background-color, border-color, color, box-shadow, filter;
  transition-duration: 0.3s;
  border: 1px solid transparent;
  letter-spacing: 2px;
  min-width: 160px;
  text-transform: uppercase;
  white-space: normal;
  font-weight: 700;
  text-align: center;
  padding: 16px 14px 18px;
  color: var(--primary-color);
  background-color: white;
  height: 48px;
}

.about:hover {
  color: white;
  background-color: var(--primary-color);
}

a {
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
#backHome {
  justify-content: left;
  text-align: left;
  color: white;
  text-decoration: none;
  font-size: calc(12px + 0.3vw);
  font-weight: 600;
  letter-spacing: 1.5px;
  margin-left: 2vw;
}
#backHome:hover {
  text-decoration: underline;
}
.textContainer {
  margin-left: 5vw;
  margin-right: 5vw;
  width: 70%;
  margin: 0 auto;
  margin-bottom: 2vw;
  margin-top: 2%;
  text-align: left;
  max-width: 800px;
}
.about-paragraphs {
  font-family: depot-new-web, sans-serif;
  font-style: normal;
  font-weight: 300;
  color: white;
  font-size: calc(18px + 0.2vw);
  text-align: left;
  padding: 0 2vw;
  padding-bottom: 0;
}

.center-div {
  margin-top: 10%;
}
.normalText {
  margin: 0 auto;
  font-size: calc(12px + 0.5vw);
}
.email-link {
  margin-bottom: 2vw;
  color: white !important;
  padding-top: 0;
  text-decoration: none !important;
  display: flex;
  justify-content: center;
}
.email-link:hover {
  color: var(--yellow) !important;
  cursor: pointer !important;
}
#contact {
  color: white;
  font-size: calc(18px + 0.5vw);
  margin-top: 5%;
}
.about-top {
  margin-bottom: 3%;
}
#cards-gal {
  margin: 0 auto;
  margin-top: 8%;
  margin-bottom: 8%;
  padding-left: 5%;
  padding-right: 7%;
}
.carousel-container {
  margin-top: 10%;
  margin-bottom: 0;
}
#profile-link {
  text-decoration: none;
  color: #ffea00;
  font-weight: 600;
  letter-spacing: 2px;
}

#profile-link:hover {
  text-decoration: underline;
}

I think it should be “styles.css”.

Thank you, that’s exactly it
the file in vs code was named style, so it was working, but on free code camp the naming is automatic