#nb-brand {
  color: #16437a;
  font-family: Bitter;
  font-weight: 700;
  font-size: 1.7rem;
  letter-spacing: 0.5px;
}

#nb-brand-n {
  color: #16437a;
  font-family: Bitter;
  font-weight: 700;
  font-size: 2.4rem;
  letter-spacing: 0.5px;
}

.kolor {
  color: white;
}

.fas fa-star-half {
  color: red;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: orange;
}

/* parte auto-scroll */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

@property --progress {
  syntax: '<length-percentage>';
  inherits: false;
  initial-value: 0%;
}

@property --angle {
  syntax: '<angle>';
  inherits: true;
  initial-value: -90deg;
}

@keyframes progress {
  0% {
    --progress: 0%;
    --angle: 0deg;
  }

  2% {
    --angle: -90deg;
  }

  100% {
    --progress: 100%;
  }
}

.back-to-top {
  --yellow: oklch(85.33% 0.185 92.12);
  --white: oklch(100% 0 0);
  background-image: linear-gradient(
    var(--yellow) 0% var(--progress),
    var(--white) var(--progress) 100%
  );
  border: 2px solid currentColor;
  border-radius: 0.5em;
  display: inline-block;
  padding: 0.3em;
  position: fixed;
  inset: auto 2rem 2rem auto;
  overflow: hidden;
  animation: progress linear;
  animation-timeline: scroll();
}

@supports not (animation-timeline: scroll()) {
  .back-to-top {
    background: var(--yellow);
  }
}

.back-to-top:is(:link, :visited) {
  color: currentColor;
  text-decoration: none;
}

.back-to-top span {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.back-to-top svg {
  display: block;
  fill: none;
  stroke: currentcolor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3px;
  transform: rotate(var(--angle));
}