.container-header {
  width: 100%;
  max-width: 1280px;
  display: flex;
  align-items: center;
  flex-direction: column;
  margin: 1rem;
  height: 200vh;
}

.container-header .header {
  display: flex;
  flex-direction: column;
  width: 90%;
  max-width: 100%;
  gap: 5rem;
}

.container-header .header .head {
  display: flex;
  justify-content: space-between;
  padding: 1.5rem;
  margin: 2rem 0;
  background: url(../assets/images/logo.svg) center left 2rem no-repeat
    var(--secondary-light-color);
  border-radius: 2rem;
  box-shadow: 0 0.1rem 0.1rem 0.1rem var(--secondary-light-color);
}

.container-header .header .head button {
  padding: 2rem;
  border-radius: 25%;
  border-style: none;
  display: flex;
  background: url(../assets/images/icon-sun.svg) center center no-repeat
    var(--neutral-light);
}

.container-header .header .head button:hover {
  background-color: var(--very-neutral-dark);
}

.container-header .header .navegation {
  display: flex;
  justify-content: space-between;
  color: var(--neutral-dark);
}

.container-header .header .navegation .navegation-bar ul {
  display: flex;
  gap: 1rem;
  transition: 0.5s ease-in-out;
}

.container-header .header .navegation .navegation-bar ul li button {
  padding: 1rem 2rem;
  border-radius: 2.5rem;
  font-size: 2rem;
  font-weight: var(--small-weight);
  color: var(--neutral-dark);
  border: 0.1rem solid var(--neutral-light);
  background-color: var(--secondary-light-color);
}

.container-header .header .navegation .navegation-bar ul li button:hover {
  background-color: var(--red-medium);
  color: var(--primary-light-color);
}