.contact won't change when using @media to have custom view on devices with widths less than 678px

I'm trying to have a custom view for devices with a width less than 678px.

Most of things I've written to change inside the @media block change. the only thing that won't change is the width of .contact

Normaly its 150px, but for devices with a width less than 678px they should be 100px. But it doesn't work.

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@500&display=swap');
html {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: url(cursor.png), pointer;
  background: url("ohmygod.png");
  background-size: 100vmax;
  font-family: "Inter";
  color: white;
}

.glass {
  background-color: rgba(255, 255, 255, .3);
  border: 2px solid rgba(255, 255, 255, .2);
  border-radius: 15px;
  height: 320px;
  width: 1000px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  filter: drop-shadow(0 0 5rem black);
}

@media (max-width: 400px) {
  html {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: url("ohmygod.png");
    background-size: 100vmax;
    font-family: "Inter";
    color: white;
  }
  .glass {
    background-color: rgba(255, 255, 255, .3);
    border: 2px solid rgba(255, 255, 255, .2);
    border-radius: 15px;
    height: 550px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-direction: column;
    filter: drop-shadow(0 0 5rem black);
  }
  #contacts {
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: 33%, 33%, 33%;
    column-gap: 5px;
    row-gap: 5px;
  }
  .contact {
    padding: 1px;
    background: rgba(255, 255, 255, .2);
    border: 2px solid rgba(255, 255, 255, .3);
    border-radius: 15px;
    width: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: white;
  }
}

img {
  width: 200px;
}

#contacts {
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: 33%, 33%, 33%;
  column-gap: 10px;
  row-gap: 10px;
}

.contact {
  padding: 1px;
  background: rgba(255, 255, 255, .2);
  border: 2px solid rgba(255, 255, 255, .3);
  border-radius: 15px;
  width: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: white;
}

.icons {
  width: 20px;
  padding-right: 20px;
}

#replit {
  filter: hue-rotate(360deg);
}

.link {
  text-decoration: none;
}

a {
  text-decoration: none;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Ronak</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer"
  />
  <link rel="icon" type="image/x-icon" href="ronakexe.png">
</head>

<body>
  <div class="glass">
    <h1>Ronak Ramnani</h1>
    <div id="contacts">
      <a href="mailto:“[email protected]”" target="_blank">
        <div class="contact">
          <i class="fa-regular fa-xl fa-envelope icons" style="color: #ffffff;"></i>
          <p>Email</p>
        </div>
      </a>

      <div class="contact">
        <i class="fa-brands fa-xl fa-discord icons" style="color: #ffffff;"></i>
        <p>Discord</p>
      </div>
      <a href="https://github.com/ronakexe" target="_blank">
        <div class="contact">
          <i class="fa-brands fa-xl fa-github icons" style="color: #ffffff;"></i>
          <p>Github</p>
        </div>
      </a>
      <a href="https://replit.com/@ronakexe">
        <div class="contact">
          <img id="replit" class="icons" src="replit.png" alt="replit icon">
          <p>Replit</p>
        </div>
      </a>

      <div class="contact">
        <i class="fa-brands fa-xl fa-twitter icons" style="color: #ffffff;"></i>
        <p>Twitter</p>
      </div>
      <div class="contact">
        <i class="fa-brands fa-xl fa-unsplash icons" style="color: #ffffff;"></i>
        <p>Unsplash</p>
      </div>
    </div>
    <img src="me.png" alt="A photo of me">
</body>

</html>

I have tried restarting @media block, but nothing works.

The width of .contact should be 100px, but it's the usual 150px.

Solution

In this case, your media query is being overridden by the declaration for .contact below it. Always put your media queries last, and make sure that they're in order of inheritance, where the last ones will override the earlier ones.