@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');

:root {
  --bs-body-bg: #181818;
  --bs-body-color: #ffffff;
  --bs-dark: #181818;
  --gradient-line-opacity: 0.5;
  --gradient-color-1: rgba(159, 59, 59,var(--gradient-line-opacity));
  --gradient-color-2: rgba(105, 138, 246,var(--gradient-line-opacity));
  --test: rgb(105, 138, 246);
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  width: 100%;
  min-height: 100%;
  background-color: black;
}


html,
body {
  background-image: linear-gradient(rgba(0, 0, 0, 0.13), rgba(0, 0, 0, 0.13)), url("/assets/diamond-sunset.svg");
  background-blend-mode: darken;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  font-family: "Ubuntu", sans-serif;
  font-weight: 400;
  font-style: normal;
  height: 130%;
}

nav {
  background-color: var(--bs-body-bg);
  z-index: 0;
  background: rgba(0, 0, 0, 0.53);
  backdrop-filter: blur(30px);
  overflow: hidden;
}

@keyframes grad {
  0% {
    background-position: 200% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}

.gradient-animation {
  position: fixed;
  top: 60px;
  left: 0;
  width: 100%;
  height: 5px;
  overflow: visible; /* allow the blur to show outside the 5px line */
  filter: blur(10px);
  
  /* Your existing animated gradient */
  background: linear-gradient(
    90deg,
    var(--gradient-color-1) 0%,
    var(--gradient-color-2) 50%,
    var(--gradient-color-1) 100%
  );
  background-size: 200% 100%;
  animation: grad 3s linear infinite;
}

/* Pseudo‐element creates the blurred glow behind */
.gradient-animation::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  
  /* Inherit exactly the same gradient+animation from the parent */
  background: inherit;
  background-size: inherit;
  animation: inherit;
  
  /* Blur and lower opacity to make it look like a glowing bleed */
  filter: blur(6px);
  opacity: 0.6;
  z-index: -1; /* sit it behind the main 5px bar */
}


/* nav::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);  
  z-index: 1;
} */