#widowOverlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: black;
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  animation: fadeOut 2s ease 39s forwards;
}

#widowFace {
  position: relative;
  width: 260px;
  height: 260px;
  background: url('images/widow_face.png') no-repeat center center;
  background-size: contain;
  filter: brightness(1) contrast(1.8);
  opacity: 1;
}

#widowText {
  color: white;
  font-family: monospace;
  font-size: 2em;
  opacity: 0;
  margin-top: 20px;
  animation: fadeInText 1s ease 7.5s forwards;
  text-align: center;
}

#captionText {
  margin-top: 15px;
  font-family: 'Courier New', monospace;
  font-size: 1.2em;
  color: #ff0000;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  border-right: 2px solid #ff0000;
  width: 0;
  animation:
    typing 1.2s steps(35, end) 0s forwards,
    blink 0.7s step-end infinite;
  text-shadow:
    0 0 5px #ff0000,
    0 0 10px #ff0000,
    0 0 15px #ff0000;
}

#skipIntro {
  margin-top: 20px;
  padding: 8px 16px;
  font-size: 0.8em;
  background: #222;
  color: #fff;
  border: 1px solid #444;
  cursor: pointer;
}

@keyframes fadeInText {
  to { opacity: 1; }
}

@keyframes typing {
  to { width: 33ch; }
}

@keyframes blink {
  50% { border-color: transparent; }
}

@keyframes fadeOut {
  to {
    opacity: 0;
    visibility: hidden;
    z-index: -1;
  }
}