/*  — custom styles only (Tailwind still via CDN) */
@import url('https://fonts.googleapis.com/css2?family=Doto:wght@600&display=swap');

body {
  font-family: 'Doto', sans-serif;
  cursor: crosshair;
}
.logo-blend {
  mix-blend-mode: difference;
}



#pageTransition {
  transition: all 0.7s ease;
}

  .typewriter {
    overflow: hidden;
    white-space: nowrap;
    border-right: 0px solid #fff;
    width: 0;
    animation: typing steps(var(--n)) forwards;
    animation-duration: 1s;
  }
  /* sequential delays */
  .typewriter:nth-child(1) { animation-delay: 0s; }
  .typewriter:nth-child(2) { animation-delay: .5s; }
  .typewriter:nth-child(3) { animation-delay: 1s; }
  .typewriter:nth-child(4) { animation-delay: 1s; }
  .typewriter:nth-child(5) { animation-delay: 1.5s; }
  .typewriter:nth-child(6) { animation-delay: 2s; }
  .typewriter:nth-child(7) { animation-delay: 2s; }
  .typewriter:nth-child(8) { animation-delay: 2.5s;}
  .typewriter:nth-child(9) { animation-delay: 2.5s;}
  .typewriter:nth-child(10) { animation-delay: 3s;}
  .typewriter:nth-child(11) { animation-delay: 3s;}
  @keyframes typing {
    from { width: 0 }
    to { width: calc(var(--n) * 0.6ch); } /* 0.6ch ≈ character width */
  }

.nav-link {
  color: white; /* Base color, blend mode will handle inversion */
  transition: color 0.3s, text-shadow 0.3s;
}
.nav-link:hover {
  color: red;
}
.video-container {
    width: 100%;
    max-width: 100vw;
    position: relative;
    overflow: hidden;

}

.body-text {
  font-family: 'Doto', sans-serif;
}


p {
  letter-spacing: 0px;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease; 
  cursor: cell;
}
#a:hover {
    letter-spacing: 5px; 
    cursor: cell;
}
#b:hover {
  letter-spacing: 1em; 
}
#c:hover {
  letter-spacing: 10px; 
}