* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: black;
  color: white;
  font-family: monospace;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.wrap {
  text-align: center;
}

img {
  max-width: 90vw;
  max-height: 80vh;
  opacity: 0;
  transition: opacity 0.25s ease;
}

img.show {
  opacity: 1;
}

.glitch {
  margin-top: 14px;
  font-size: 14px;
  opacity: 0.6;
  position: relative;
}

.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0.8;
}

.glitch::before {
  color: red;
  animation: glitch 1.2s infinite linear alternate-reverse;
}

.glitch::after {
  color: cyan;
  animation: glitch 1.4s infinite linear alternate;
}

@keyframes glitch {
  0% { transform: translate(0); }
  20% { transform: translate(-1px, 1px); }
  40% { transform: translate(1px, -1px); }
  60% { transform: translate(-1px, 0); }
  80% { transform: translate(1px, 1px); }
  100% { transform: translate(0); }
}