body{
    background-image: url(rideauouvert.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-color: rgb(11, 11, 46);
}
audio {
    opacity: 0%;
}
h1{
font-family: 'homoneta';
text-align: center;
color: bisque;
font-size: 275%;
position: relative;
top: 375px;
left: 15px;
overflow: hidden;
white-space: nowrap;
margin: 0 auto; /* Gives that scrolling effect as the typing happens */
width: 0;
animation: typing;
animation-duration: 2.5s;
animation-timing-function: steps(30, end);
animation-fill-mode: forwards;
}

h2{
font-family: 'homoneta';
text-align: center;
color: bisque;
font-size: 275%;
position: relative;
top: 375px;
left: 15px;
overflow: hidden;
white-space: nowrap;
margin: 0 auto; /* Gives that scrolling effect as the typing happens */
width: 0;
animation: typing;
animation-delay: 2s;
animation-duration: 2s;
animation-timing-function: steps(30, end);
animation-fill-mode: forwards;
}

@keyframes typing {
    from { width: 0 }
    to { width: 100% }
  }

@font-face {
    font-family:'homoneta' ;
    src: url(Homoneta-Regular.woff);
}


img{
    width: 15%;
    white-space: nowrap;
    overflow: hidden;
    animation-delay:5s ;
    transition: none;
    position: absolute;
    top: 5em;
    right: 10em;
    animation: taadaa;
    animation-duration: 5.5s;
    
}

@keyframes taadaa { 
    0% {
      opacity: 0;
    }
    60% {
        opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }