.container {
  max-width: 900px;
}

.nav-link {
  color: var(--bs-light);
  opacity: 0.8;
}

@media (hover: hover) {
  .nav-link:hover {
    color: var(--bs-light);
    opacity: 1;
  }
}

h1 {
  background: linear-gradient(90deg, var(--bs-purple) 0%, var(--bs-cyan) 25%, var(--bs-purple) 50%, var(--bs-cyan) 75%, var(--bs-purple) 100%);
  background-size: 200% auto;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: animatedTextGradient 15s linear infinite;
  animation-delay: -8s;
}

@keyframes animatedTextGradient {
  to {
    background-position: 200% center;
  }
}

p {
  margin-bottom: 0;
  font-weight: 500;
}

a {
  font-weight: initial;
}

ul {
  margin-bottom: 0.5rem;
}

.logo {
  background: linear-gradient(90deg, var(--bs-purple), var(--bs-info));
  background: linear-gradient(90deg, var(--bs-purple), var(--bs-cyan),var(--bs-purple));
  color: transparent;
  background-clip: text;
  background-size: 200% auto;
  font-weight: bold;
  animation: animatedTextGradient 8s linear infinite;
}

.logo:hover {
  filter: opacity(0.7);
  background: linear-gradient(90deg, var(--bs-purple), var(--bs-cyan),var(--bs-purple));
  color: transparent;
  background-clip: text;
  background-size: 200% auto;
  font-weight: bold;
  animation: animatedTextGradient 10s linear infinite;
}