body {
  background-image: url("twirl bg.png");
  background-size: 2000px;
  background-position:top;
  color: black;
  font-family: Tahoma;
}
                #main {
            background-image: url("crystalbg.png");
            background-position:top;
            background-repeat:none;
            opacity:0.8;
            border: 3px solid;
            border-color:#387B19;
            color:#FFFFFF;
            padding: 0px 20px 0px 20px;
            width: 500px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
}

/* Container styles to ensure proper display */
.container {
  display: inline-block; /* Prevents the cursor from spanning the whole page width */
  font-family: monospace; /* Monospaced font often looks best for this effect */
  font-size: 1rem;
}

/* Header styles for the typing effect */
.typed-out {
  overflow: hidden; /* Hides text outside the animated width */
  border-right: .15em solid black; /* Creates the initial cursor */
  white-space: nowrap; /* Keeps all text on a single line */
  width: 0; /* Starts with no visible width */
  /* Combines typing and blinking animations */
  animation: 
    typing 2s steps(20, end) forwards, /* Typing animation */
    blink-cursor .55s step-end infinite; /* Blinking cursor animation */
}

/* Keyframes for the typing animation */
@keyframes typing {
  from { width: 0 }
  to { width: 50% }
}

/* Keyframes for the blinking cursor */
@keyframes blink-cursor {
  from, to { border-color: transparent }
  50% { border-color: white; }
  
   
}

  
  span {
    padding: 3px;
    border: 3px dotted #771143;
    display: inline-block;
}

.transparent-img {
  opacity: 0.5; /* Makes the image 50% transparent */
}