.header {
  display: flex;
  justify-content: space-between;
  width: 100vw;
  max-width: 1080px;
  padding: 1.25rem 1.25rem;
  margin-top: 0.3cm;
  align-items: center;
  border: 2px solid rgba(46, 46, 46, 0.2);
  border-radius: 30px;
  background-color: rgba(46, 46, 46, 0.1);
  backdrop-filter: blur(30px);
  z-index: 1;
  position: absolute;
}

.header__logo {
  width: 60px;
}

.nav__ul {
  list-style: none;
  display: flex;
  gap: 0.5cm;
  margin-right: -20px;
}

.nav__btn {
  border: 2px solid rgba(46, 46, 46, 0.2);
  border-radius: 20px;
  background-color: rgba(46, 46, 46, 0.1);
  padding: 0.75rem 1rem;
  color: inherit;
  transition: 0.3s ease;
  text-decoration: none;
}

.nav__btn:hover {
  border: 2px solid rgba(46, 46, 46, 0.4);
  color: #d6d6d6;
  background-color: rgba(46, 46, 46, 0.3);
}

.nav__btn span {
  padding-left: 7px;
}

.nav__menu {
  padding: 0.3cm 0.46cm;
  margin-right: 20px;
  background-color: rgba(46, 46, 46, 0.1);
  color: inherit;
  backdrop-filter: blur(30px);
  border-radius: 15px;
  border: 2px solid rgba(46, 46, 46, 0.2);
  display: none;
}

.nav__menu:hover {
  border: 2px solid rgba(46, 46, 46, 0.4);
  color: #d6d6d6;
  background-color: rgba(46, 46, 46, 0.3);
}

.header__menu {
  position: absolute;
  width: 100%;
  margin-top: 87px;
  background-color: rgba(29, 29, 29, 0.9);
  backdrop-filter: blur(5px);
  border-bottom: 2px solid rgba(46, 46, 46, 0.2);
  flex-direction: column;
  align-items: center;
  display: none;
  z-index: 1;
  overflow-x: hidden;
}

.nav2__btn {
  color: inherit;
  text-decoration: none;
  padding: 0.3cm 100vw;
}

@media (width < 800px) {
  .nav__btn {
    display: none;
  }

  .nav__menu {
    display: block;
  }

  .header {
    margin-top: 0cm;
    border-radius: 0px;
    padding-block: 0.3cm;
    border-inline: 0px;
  }
}