.side-menu {
  width: 100%;
  height: 0;
  overflow: hidden;
  position: fixed;
  top: 0;
  z-index: 1000;
  transition: 300ms ease-out;
  background-color: var(--primary-color);
}

.side-menu .header {
  display: flex;
  width: 90%;
  margin: auto;
  margin-top: 50px;
  justify-content: right;
}

.side-menu .header svg {
  cursor: pointer;
  color: #fff;
}

.close-btn {
  font-size: 300px;
}

.side-menu ul {
  width: 90%;
  margin: 100px auto;
  display: flex;
  flex-direction: column;
  gap: 50px;
  list-style: none;
}

.side-menu ul li a {
  color: white;
  font-size: 30px;
  font-weight: bolder;
  text-decoration: none;
}

.open-side-menu {
  height: 100vh;
  background-color: #2536d3a7;
  backdrop-filter: blur(5px);
}