:root {
  --bg: #07090d;
  --bg2: #0e131a;
  --panel: #121922;
  --line: #1f2a36;
  --text: #f3f6f8;
  --muted: #7d8b9b;
  --lime: #c8ff2e;
  --orange: #ff6a1a;
  --red: #ff2d4f;
  --cyan: #2ee6ff;
  --display: 'Bebas Neue', 'Oswald', Impact, sans-serif;
  --body: 'Barlow Condensed', 'Barlow', system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
}

.avatar {
  --c: var(--lime);
  flex: none;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--c) 25%, #000);
  border: 3px solid var(--c);
  font-family: var(--display);
  color: #fff;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

.stripes {
  background: repeating-linear-gradient(-45deg, var(--lime) 0 10px, transparent 10px 20px);
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}
.dot {
  display: inline-block;
  width: .6em; height: .6em;
  border-radius: 50%;
  background: currentColor;
  vertical-align: middle;
}
.running .dot, .dot.live { animation: pulse 1.2s infinite; }