html {
  scroll-behavior: smooth;
}

.no-scrollbar {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}

body {
  font-family: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
}

.skill-pill-float {
  animation-name: float;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.skill-pill-inner {
  display: inline-block;
  will-change: transform;
  transition: transform 80ms linear;
}

.project-row-inner {
  transition: transform 300ms ease;
}

.project-row:hover .project-row-inner {
  transform: translateX(8px);
}

.project-title {
  transition: color 300ms ease;
}

.project-row .project-arrow {
  transition: transform 300ms ease;
}

.project-row:hover .project-arrow {
  transform: translateX(6px);
}

.nav-link {
  display: inline-block;
  opacity: 0.5;
  cursor: pointer;
  transition: opacity 250ms ease, transform 250ms ease;
}

.nav-link:hover {
  opacity: 1;
  transform: translateX(4px);
}

.nav-link.is-active {
  opacity: 1;
}

.social-link {
  cursor: pointer;
  transition: transform 250ms ease, color 250ms ease;
}

.social-link:hover {
  transform: translateX(4px);
}

/* On the responsive top bar the nav sits in a horizontally scrolling row, so a
   sideways hover just gets clipped at the edges. There it presses in instead,
   which reads like a tap. */
@media (max-width: 1023px) {
  .nav-link:hover,
  .social-link:hover {
    transform: scale(0.92);
  }

  .nav-link:active,
  .social-link:active {
    transform: scale(0.88);
  }
}

.lang-option {
  cursor: pointer;
  transition: color 200ms ease;
}

.email-link {
  cursor: pointer;
}

.cs-textlink-disabled {
  position: relative;
  cursor: not-allowed;
  opacity: 0.5;
}

.cs-textlink-disabled .cs-tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  white-space: nowrap;
  background: #1a1a1a;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 6px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms ease, transform 150ms ease;
}

.cs-textlink-disabled:hover .cs-tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(-8px);
}

.reading-time:empty {
  display: none;
}