@font-face {
  font-family: "Biennale";
  src: url("/fonts/Biennale-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: "Biennale", sans-serif;
}
  
  @keyframes fadeToDark {
    0% {
      background-color: #ffffff; /* White */
      color: #1F2937; /* text-gray-800 */
    }
    50% {
      background-color: #F3F4F6; /* A light gray fade step */
      color: #1F2937;
    }
    100% {
      background-color: #1F2937; /* Dark gray (similar to gray-800) */
      color: #ffffff; /* White */
    }
  }
  /* Custom class to trigger the animation on hover */
  .hover-fade-dark:hover {
    animation: fadeToDark 0.5s forwards;
  }

  .fade-out {
    opacity: 0;
    transition: opacity 300ms ease;
  }