/* Reset margins and height */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

/* Custom font */
@font-face {
  font-family: 'generic_mobile_system_nuevoRg';
  src: url('genericmobilesystemnuevo-webfont.woff2') format('woff2'),
       url('genericmobilesystemnuevo-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

/* Body styling with layered background */
body {
  margin: 0;
  font-family: 'generic_mobile_system_nuevoRg', sans-serif;
  color: white;

  /* Layered backgrounds: overlay first, then base */
  background-image: 
    url('https://worth03.neocities.org/Assets/3dgifmaker99383.gif'),
    url('https://worth03.neocities.org/Assets/Untitled-3.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  /* Blend overlay and base */
  background-blend-mode: multiply; /* or overlay, lighten, etc. */
}

/* Table styling */
table {
  display: table;
  border-collapse: separate;
  box-sizing: border-box;
  border-spacing: 2px;
  border-color: gray;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  font-family: 'generic_mobile_system_nuevoRg';
}

/* Example container with background */
.horror-text {
  color: #ff0000; /* horror red */
  font-size: 1.5rem;
  text-align: left;
  white-space: nowrap; /* letters stay in line */
  display: block;
  overflow: hidden; /* hide unrevealed letters */
}

/* Each line */
.horror-text span {
  display: block; /* new line */
  border-right: 2px solid #ff0000; /* blinking cursor */
  width: 0; /* start hidden */
  white-space: nowrap;
  overflow: hidden;
  margin-bottom: 0.2em;

  /* Type letters one at a time */
  animation: typing 9s steps(90, end) forwards, blink 0.5s step-end infinite alternate;
}

/* Delay each line so they appear one after another */
.horror-text span:nth-child(1) { animation-delay: 0s; }
.horror-text span:nth-child(2) { animation-delay: 9.2s; }
.horror-text span:nth-child(3) { animation-delay: 18.4s; }

/* Keyframes for typing effect */
@keyframes typing {
  from { width: 0; }
  to { width: 100%; }
}

/* Blinking cursor */
@keyframes blink {
  0%, 100% { border-color: transparent; }
  50% { border-color: #ff0000; }
}