html {
  color-scheme: dark;
  scroll-behavior: auto;
}

.has-custom-cursor body {
  cursor: none;
}

.logo-jaw,
.logo-body {
  fill: #fff;
}

.logo-eye {
  fill: #141e30;
}

a:focus-visible {
  outline: 2px solid #7dd3fc;
  outline-offset: 4px;
}

[id] {
  scroll-margin-top: 6rem;
}

html:not(.resume-enhanced) .opacity-0 {
  opacity: 1 !important;
}

html:not(.resume-enhanced) [class*="translate-"] {
  transform: none !important;
}

@media (max-width: 768px) {
  body {
    cursor: auto;
  }

  #cr,
  #cd {
    display: none !important;
  }

  .ex-hd {
    flex-direction: column !important;
    gap: 4px !important;
  }

  .sk-row {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
}

@supports (padding: max(0px)) {
  #nav {
    padding-top: max(1.75rem, env(safe-area-inset-top));
  }

  #hero {
    padding-bottom: max(5.5rem, calc(5.5rem + env(safe-area-inset-bottom)));
  }

  @media (max-width: 768px) {
    #nav {
      padding-left: max(1.5rem, env(safe-area-inset-left));
      padding-right: max(1.5rem, env(safe-area-inset-right));
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  #scene,
  #cr,
  #cd,
  #prog {
    display: none !important;
  }
}