header {
  position: fixed;
}

/* estilização da Logo */
.thin {
  font-weight: 300;
}

.bold-neon {
  font-weight: 700;
  color: #39ff14;
  transition: 0.5s;
}

/* estilização da Navgator */
header nav {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100vw;
  height: 12vh;
  transition: 0.5s;
}

header nav.scrolling {
  background-color: #121212;
}
header nav.scrolling.dark {
  background-color: #e4e4e4;
}

header nav .nav-list {
  display: flex;
  gap: 20px;
}

header nav .nav-list .social-links {
  display: flex;
  gap: 20px;
}

header nav .nav-list li {
  font-weight: 600;
  cursor: pointer;
  position: relative;
  transition: color 0.3s ease;
  box-sizing: border-box;
}

header nav ul li::after {
  content: "";
  display: block;
  background-color: #39ff14;
  width: 100%;
  height: 1px;
  bottom: -5px;
  left: 0;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease-in-out;
}

header nav ul li:hover::after {
  transform: scaleX(1);
}
header nav ul li.dark::after {
  background-color: #303030;
}
header nav ul li:hover {
  color: #39ff14;
}

header nav ul li.dark:hover {
  color: #303030;
}

/* Botão menu Mobile*/

.mobile-menu {
  display: none;
  cursor: pointer;
}

.mobile-menu div {
  width: 32px;
  height: 2px;
  background: #fff;
  margin: 8px;
  transition: 0.5;
}

@media (max-width: 999px) {
  .mobile-menu {
    display: block;
  }
  header nav .nav-list {
    position: fixed;
    top: 12vh;
    right: 0;
    width: 50vw;
    height: 88dvh;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    background-color: #6d6b6b;
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out, background-color 0.5s ease;
  }

  header nav .nav-list.dark {
    background-color: #d6d5d5;
  }

  header nav .nav-list.active {
    transform: translateX(0);
  }

  header nav .nav-list li {
    opacity: 0;
    transform: translateX(500%);
    transition: opacity 1.5s ease-in-out, transform 0.5s ease-in-out;
  }

  header nav .nav-list li.active {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Botão modo dark*/

.container-dark {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.container-dark .trilho {
  cursor: pointer;
  width: 45px;
  height: 25px;
  background-color: #4d4d4d;
  border-radius: 150px;
  position: relative;
}

.container-dark .trilho .indicador {
  width: 25px;
  height: 25px;
  background-color: #000;
  border-radius: 50%;
  transform: scale(0.9);
  position: absolute;
  left: 0;
  transition: 0.5s;
}

.trilho.dark .indicador {
  left: 20px;
  background-color: #fff;
}

.trilho.dark {
  background-color: #c3c3c3;
}

body.dark {
  background-color: #e4e4e4;
  color: #000;
}

.bold-neon.dark {
  color: #000;
}

.mobile-menu div.dark {
  background: #000;
}