nav {
  display: flex;
  justify-content: center;
  gap: 1rem;
  background-color: rgba(30, 34, 43, 0.5);
  border-radius: 16px;
  margin: 1rem auto;
  max-width: 900px;
  padding: 1rem;
  transition: 0.3s ease-in-out;
}

nav a {
  color: var(--glow-teal);
  text-decoration: none;
  font-size: 17px;
  padding: 14px 20px;
  border-radius: 8px;
}

nav a:hover {
  background-color: #353c4a;
  color: #bffff1;
  transition: 0.3s ease-in-out;
}

nav .active {
  background-color: #c8f5ff4d;
}

.home nav {
  background-color: rgba(13, 27, 42, 0.8);
}

@media (max-width: 560px) {
  nav {
    margin: 1rem;
  }
}