@import url('https://fonts.googleapis.com/css2?family=Libre+Bodoni&display=swap');
.typewriter h1 {
  overflow: hidden; /* Ensures the content is not revealed until the animation */
  /* border-right: .15em solid orange;  The typwriter cursor */
  white-space: nowrap; /* Keeps the content on a single line */
  margin: 0 auto; /* Gives that scrolling effect as the typing happens */
  letter-spacing: .15em; /* Adjust as needed */
  animation: 
    typing 3.5s steps(30, end)
    
}
.more-info {
  visibility: hidden;
  
  height: 0;
  animation: hideAnimation 0s ease-in 4s;
  animation-fill-mode: forwards;
}

@keyframes hideAnimation {
 
  
  to {
    visibility: visible;
    height:100%;
  }
}

/* The typing effect */
@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

/* The typewriter cursor effect */
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: orange; }
}

.bouncy {
  visibility: hidden;
  height:0;
  animation: 
    
    bouncyan 4s infinite linear;
  position:relative;
  }

  @keyframes bouncyan {
  0%{top:0em}
  40%{top:0em}
  43%{top:-0.9em}
  46%{top:0em}
  48%{top:-0.4em}
  50%{top:0em}
  100%{top:0em;}
  } 

img.background {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: -1;
  width: 100%;
  height: 100%;
  -webkit-filter: blur(3px); /* Safari 6.0 - 9.0 */
  filter: blur(3px);
  }

  .main-body {
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(240,239,224, 0.7); /* Black w/opacity/see-through */
color: black;
font-weight: bold;
border-radius: 10px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
width: 80%;
padding: 20px;
text-align: center;
font-family: 'Libre Bodoni', serif;
}
#logo {
  height:11vh;
}
#title{
  font-size: 3.5em;
}