@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)
    
}
#canal {
  max-width: 70vw;
}
.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: 100vw;
  height: 100vh;
  -webkit-filter: blur(2px); /* Safari 6.0 - 9.0 */
  filter: blur(2px);
  }

  .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;
margin-top: 1em;
}

@media only screen and (max-height: 700px){

  .main-body {
    
    margin-top: 1em;
    
    }
}

@media only screen and (max-height: 600px){

  .main-body {
    
    margin-top: 1em;
    
    }
}
#logo {
  height:11vh;
}
#title{
  font-size: 3.5em;
}
.clue{
  color: #e67e22;
  font-style: italic;
  
}