body {
  background: radial-gradient(circle at center, #111 0%, #000 100%);
  color: #fff;
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-family: 'Montserrat', sans-serif;
}

h1 {
  margin: 0;
}

.glitch {
  position: relative;
  font-size: 4rem;
  line-height: 1;
  margin: 0;
  /* Gradient text */
  background: linear-gradient(45deg, #fff, #ccc);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.glitch::before,
.glitch::after {
  content: none;
}

.glitch.animate {
  animation: glitchflicker 0.3s ease-in-out both;
}

@keyframes glitchflicker {
  0% { text-shadow: -2px 0 red, 2px 0 cyan; transform: translate(1px, -1px); }
  20% { text-shadow: none; transform: translate(0, 0); }
  100% { text-shadow: none; transform: translate(0, 0); }
}

.social-links {
  display: flex;
  gap: 1rem;
  margin-top: 4rem;
}

.github-link, .linkedin-link {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.5rem;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: #fff;
  transition: background 0.3s, transform 0.3s;
}

.github-link:hover, .linkedin-link:hover {
  transform: scale(1.05);
  background: linear-gradient(45deg, rgba(255,255,255,0.1), rgba(255,255,255,0.2));
}

.github-link svg, .linkedin-link svg {
  width: 2rem;
  height: 2rem;
  fill: currentColor;
}

/* Typewriter text styling */
.typewriter {
  font-family: 'Roboto Mono', monospace;
  font-weight: 400;
  font-size: 1.2rem;
  color: #bbb;
  margin: 0.3rem 0 0 0;
  height: 1.5rem;
  overflow: hidden;
}

.typewriter-text {
  display: inline;
}

.cursor {
  display: inline;
  color: #bbb;
  margin-left: 0.1em;
  animation: blink-cursor 0.7s steps(1) infinite;
}

.cursor::after {
  content: "_";
}

@keyframes blink-cursor {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

:root {
  --x: 50%;
  --y: 50%;
  /* Neon gradient endpoints */
  --gradient-start: #fff;
  --gradient-end: #777;
}

/* Spotlight overlay for mouse highlight */
.spotlight {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background-color: rgba(0,0,0,0.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  mask-image: radial-gradient(circle at var(--x) var(--y), transparent 300px, black 600px);
  -webkit-mask-image: radial-gradient(circle at var(--x) var(--y), transparent 300px, black 600px);
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-mode: alpha;
}

/* Neon gradient with glow via drop-shadow */
.neon-text {
  font-size: 4rem;
  font-family: 'Montserrat', sans-serif;
  /* Gradient is now applied per-letter */
  cursor: pointer;
}

.letter {
  display: inline-block;
  /* Use CSS vars for dynamic neon color */
  background: linear-gradient(180deg, var(--gradient-start) 0%, var(--gradient-end) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  /* Glow uses CSS var so it updates on click */
  text-shadow: 0 0 8px var(--gradient-start), 0 0 15px var(--gradient-start), 0 0 25px var(--gradient-start);
}

.blink {
  text-shadow: none !important;
}

/* Bounce animation for click effect */
@keyframes bounce {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}
.bounce {
  animation: bounce 0.4s ease-out;
}

/* Mobile tweak for very small viewports */
@media only screen and (max-width: 480px) {
  .neon-text {
    font-size: 3rem;
  }
}