@font-face {
  font-family: 'Inter Tight';
  src: url('../fonts/InterTight-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

html, body {
      margin: 0;
      padding: 0;
      height: 100%;
      background-color: #f8f9fa;
      font-family: 'Inter Tight', system-ui, sans-serif;
    }

    body {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    h1 {
      font-size: 5rem;
      font-weight: 700;
      letter-spacing: -0.03em;
      color: #0f172a; /* Tailwind slate-900 */
      opacity: 0;
      transform: translateY(30px);
      animation: fadeIn 1.3s ease-out forwards;
    }
	
	.rainbow {
		background: linear-gradient(90deg, #ff0000, #ff9900, #33cc33, #0099ff, #6633cc);
		background-size: 200% auto;
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
		color: transparent;
		font-weight: bold;
		animation: rainbow-shift 3s linear infinite;
	}

    @keyframes fadeIn {
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
	
	@keyframes rainbow-shift {
    0%,100% {
        background-position: 0 0;
    }

    50% {
        background-position: 100% 0;
    }
}