* {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  line-height: 1.7;
  text-transform: lowercase;
}

html {
  font-size: 100%;
}

body {
  margin: 0;
  padding: 40px;
  background-color: #000;
  color: #fff;
  font-family: 'Roboto', sans-serif;
  line-height: 1.6;
}

h1,
h2 {
  font-family: "Trebuchet MS", Helvetica, sans-serif;
  text-transform: lowercase;
}

h1, #sign {
  font-size: 2.5rem;
  margin-bottom: 10px;
}

h2 {
  margin-top: 40px;
  font-size: 1.4rem;
}

.ipa {
  opacity: 0.7;
  margin-bottom: 20px;
}

blockquote {
  margin: 30px 0;
  padding-left: 20px;
  border-left: 2px solid #fff;
  font-style: italic;
  opacity: 0.9;
}

ul {
  padding-left: 20px;
}

li {
  margin-bottom: 10px;
}

.section {
  max-width: 700px;
  margin-bottom: 30px;
}

.muted {
  opacity: 0.7;
}

a {
  color: #fff;
  text-decoration: none;
}

a:hover {
  text-decoration: line-through;
}

#sign {
  cursor: pointer;
  user-select: none;
  line-height: 1;
  z-index: 999;
}

/* Glitch animation — exact copy from assisted_self-portrait.
   Two pseudo-elements ("le" in red and blue) are hidden by default.
   On #sign:hover they appear with offset positions and clip-path
   keyframes that randomly mask portions of the text, creating a
   chromatic aberration / VHS tracking error effect.
   The animation runs at 2s with alternate-reverse for a slow, unhurried flicker. */
.glitch {
  font-family: sans-serif;
  position: relative;
}

.glitch::before,
.glitch::after {
  content: "le";
  color: var(--color-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  display: none;
}

#sign:hover .glitch::before {
  display: block;
  left: 3px;
  text-shadow: -2px 0 red;
  animation: glitch-1 2s linear infinite alternate-reverse;
}

#sign:hover .glitch::after {
  display: block;
  left: -3px;
  text-shadow: -2px 0 blue;
  animation: glitch-2 2s linear infinite alternate-reverse;
}

@keyframes glitch-1 {
  0% {
    clip-path: inset(92% 0 0 0);
  }

  10% {
    clip-path: inset(80% 0 2% 0);
  }

  20% {
    clip-path: inset(6% 0 47% 0);
  }

  30% {
    clip-path: inset(40% 0 55% 0);
  }

  40% {
    clip-path: inset(20% 0 82% 0);
  }

  50% {
    clip-path: inset(58% 0 5% 0);
  }

  60% {
    clip-path: inset(83% 0 32% 0);
  }

  70% {
    clip-path: inset(87% 0 48% 0);
  }

  80% {
    clip-path: inset(19% 0 14% 0);
  }

  90% {
    clip-path: inset(20% 0 59% 0);
  }

  100% {
    clip-path: inset(54% 0 22% 0);
  }
}

@keyframes glitch-2 {
  0% {
    clip-path: inset(47% 0 82% 0);
  }

  10% {
    clip-path: inset(51% 0 6% 0);
  }

  20% {
    clip-path: inset(33% 0 9% 0);
  }

  30% {
    clip-path: inset(52% 0 80% 0);
  }

  40% {
    clip-path: inset(96% 0 40% 0);
  }

  50% {
    clip-path: inset(90% 0 13% 0);
  }

  60% {
    clip-path: inset(56% 0 70% 0);
  }

  70% {
    clip-path: inset(68% 0 49% 0);
  }

  80% {
    clip-path: inset(92% 0 1% 0);
  }

  90% {
    clip-path: inset(16% 0 76% 0);
  }

  100% {
    clip-path: inset(62% 0 55% 0);
  }
}