body {
  margin: 0;
  background: black;
  color: grey;
  font-family: "degular-mono", sans-serif;
  font-weight: 400;
  font-style: normal;
  overflow-x: hidden;
}

header {
  background: #111;
  padding: 20px;
  text-align: center;
  border-bottom: 2px dotted grey;
}

h1 {
  color: white;
  font-size: 2rem;
  text-shadow: 2px 2px 0 grey;
}

nav a {
  margin: 0 1rem;
  color: #F9D50D;
  text-decoration: none;
  font-weight: bold;
  animation: blink 1s infinite alternate;
}

@keyframes blink {
  from { opacity: 1; }
  to { opacity: 0.5; }
}

.artist-card {
  border: 1px dashed grey;
  padding: 10px;
  margin: 20px;
  background: rgba(255, 255, 255, 0.1);
  mix-blend-mode: difference;
}

.glitch {
  position: relative;
  color: white;
}

.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  left: 2px;
  top: 0;
  color: red;
  background: black;
  overflow: hidden;
  clip: rect(0, 900px, 0, 0);
  animation: glitch 2s infinite linear alternate-reverse;
}

@keyframes glitch {
  0% { clip: rect(42px, 9999px, 44px, 0); }
  20% { clip: rect(12px, 9999px, 22px, 0); }
  40% { clip: rect(72px, 9999px, 88px, 0); }
  60% { clip: rect(32px, 9999px, 38px, 0); }
  80% { clip: rect(2px, 9999px, 8px, 0); }
  100% { clip: rect(92px, 9999px, 100px, 0); }
}

.cursor-dot {
  position: absolute;
  width: 4px;
  height: 4px;
  background: white;
  border-radius: 50%;
  pointer-events: none;
  animation: flicker 0.2s ease-out;
}

@keyframes flicker {
  0% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(3); }
}

img {
  width: 300px;
  height: 300px;
  object-fit: cover;
}

.logo-gif {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  image-rendering: pixelated; /* optional retro pixel look */
}