@font-face {
  font-family: 'Medieval';
  src: url('medieval-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'gg sans';
  src: url('gg-sans-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'gg sans';
  src: url('gg-sans-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
}

[class*="effect-"] {
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.effect-neon {
  background-image: linear-gradient(135deg, #01a89e 0%, #7d60ba 50%, #b43898 100%);
  text-shadow: none;
  filter: drop-shadow(0 0 4px rgba(1, 168, 158, 0.5)) drop-shadow(0 0 8px rgba(125, 96, 186, 0.4)) drop-shadow(0 0 12px rgba(180, 56, 152, 0.3));
}

.effect-pop {
  background-image: linear-gradient(135deg, #ff6bc1 0%, #ff9a56 50%, #ffd76b 100%);
  text-shadow: none;
  filter: drop-shadow(0 0 2px rgba(255, 107, 193, 0.6)) drop-shadow(0 0 6px rgba(255, 154, 86, 0.4));
}

.effect-toon {
  background-image: linear-gradient(135deg, #4e6aff 0%, #ac4eff 50%, #ff4e8c 100%);
  text-shadow: none;
  filter: drop-shadow(0 0 3px rgba(78, 106, 255, 0.5)) drop-shadow(0 0 8px rgba(172, 78, 255, 0.3));
}

.effect-gummy {
  background-image: linear-gradient(135deg, #00d4aa 0%, #00b8d4 50%, #6b6bff 100%);
  text-shadow: none;
  filter: drop-shadow(0 0 3px rgba(0, 212, 170, 0.5)) drop-shadow(0 0 8px rgba(0, 184, 212, 0.3));
}

.effect-solid {
  -webkit-text-fill-color: #fff;
  background: none;
  background-clip: unset;
  text-shadow: 0 0 3px rgba(255, 255, 255, 0.5), 0 0 6px rgba(255, 255, 255, 0.3);
}

.medieval-text {
  font-family: 'Medieval', serif;
  font-size: 24px;
  color: #fff;
}