html, body {
  height: 100%;
  background: url('background.gif') no-repeat center center fixed;
  background-size: cover;
  color: #fff;
  text-align: center;
  font-size: 20px;
}

p {
  margin-top: 0;
}

a {
  color: #AD81FF;          /* Link color */
  text-decoration: none;   /* Remove underline */
  margin: 0 12px;          /* Horizontal spacing between links */
  font-weight: bold;       /* Optional: make links bold */
  cursor: pointer;         /* Change cursor on hover */
  transition: color 0.3s ease; /* Smooth color change */
}

a:hover {
  color: #c6a7ff;          /* Color on hover */
  text-decoration: underline; /* Underline on hover */
}

.top {
  padding-top: 350px;
  text-align: center;
  margin: 0;
}

@-webkit-keyframes typing { from { width: 0; } }
@-webkit-keyframes blink-caret { 50% { border-color: transparent; } }

 .typing {
  border-right: .1em solid rgb(173, 129, 255);
  width: 41ch;
  margin: 350px auto 0 auto; 
  white-space: nowrap;
  overflow: hidden;
  -webkit-animation: typing 4s steps(41, end), blink-caret .5s step-end infinite alternate;
}


    /*door*/ 
    
@keyframes slideInUp {
  from {
    bottom: -500px;
  }
  to {
    bottom: 50px; /* final visible position, adjust as needed */
  }
}

#door {
  position: absolute;
  bottom: -500px; /* start off-screen */
  left: 50%;
  transform: translateX(-50%); /* center horizontally */
  animation: slideInUp 1s ease-out 5s forwards;
  cursor: pointer;
}


/* overlay */

#overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: black;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.5s ease;
  z-index: 1000;
}

