html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  font-family: monospace;
}

.container {
  width: 100%;
  height: 100vh;
}

.image-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  background: url("https://d2w9rnfcy7mm78.cloudfront.net/42467243/original_a57e8c179efbfba8411314960b89b134.png?1767871562?bc=0")
              center / cover no-repeat;
}

/* overlays */
.overlay {
  position: absolute;   /* ALL PNG overlays relative to wrapper */
}

.overlay img {
  width: 100%;
  height: auto;
  display: block;
}

/* example positions & sizes */
.ticket {
  top: 5%;
  left: 5%;
  width: 12%;
}

.guestbook {
  bottom: 5%;
  left: 5%;
  width: 12%;
}

.zine {
  bottom: 5%;
  left: 40%;
  width: 12%;
}

.ticket:hover img {
  opacity: 0.5;
}

.guestbook:hover img {
  opacity: 0.6;
}

.zine:hover img {
  opacity: 0.8;
}

.image-wrapper .stopwatch {
  position: absolute;
  top: 2.5vh;
  left: 2.5vw;
  z-index: 1000;
  font-family: monospace;
  font-size: 16px;
  color: white;
  background-color: rgba(0,0,0,0.4);
  padding: 5px 10px;
  border-radius: 5px;
}


/* Common line styles for typing effect */
.line {
  display: inline-block;    
  overflow: hidden;          /* hides text until animation */
  white-space: nowrap;       /* prevent wrapping */
 
  letter-spacing: 0.15em;
  width: 0;                  /* start hidden */
  margin: 0 auto;
  animation: typing 3s steps(40, end) forwards;
}

.line1 { animation-delay: 0.5s; }
.line2 { animation-delay: 3.8s; }
.line3 { animation-delay: 9.1s; }


@keyframes typing {
  from { width: 0; }
  to { width: 30ch; } 
}