/* Header */
header {
  color: var(--corPrimeira);
  background-color: var(--corTerceira);
  position: relative;
  padding: 10px 170px;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 1);
}

.header__logo {
  float: left;
  font-weight: 600;
  font-size: 1.4em;
}

.header__logo:hover {
  cursor: default;
}

.header__nav {
  width: 100%;
  display: inline-block;
}

.header__ul {
  float: right;
}

.header__ul a {
  color: var(--corPrimeira);
  text-decoration: none;
  transition: 0.4s;
}

.header__nav li {
  display: inline;
  padding: 0px 20px;
  font-size: larger;
}

.header__ul a:hover {
  transition: 0.4s;
  color: var(--corSegunda);
}

.header__img--moon {
  width: 30px;
  float: right;
  margin-inline-start: 20px;
  filter: invert(84%) sepia(8%) saturate(1561%) hue-rotate(338deg)
    brightness(112%) contrast(92%);
  transition: 0.4s;
}

.header__img--moon:hover {
  cursor: pointer;
  filter: invert(53%) sepia(7%) saturate(3064%) hue-rotate(356deg)
    brightness(108%) contrast(80%);
  transition: 0.4s;
}
