html, body {
    margin: 0;
    padding: 0;
  }
  
canvas {
  display: block;
}  

#bg{
  position:absolute;
  z-index:-1;
  top:0;
  left:0;
}

#wrapper {
    width:60%;
    margin:0 auto;
}

#content {
    width:100%;
    background-color: none;
}

h1 {
    font-family:'Charmonman', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 2.5vw;
    text-align:center;
    color:rgb(63, 73, 84);
    padding:100px 0 0 0;
    animation:tilt ease 16s;
    animation-fill-mode: forwards;
    animation:fade-in ease 3s;
}

p {
    font-family:"Charmonman", Georgia, Times, 'Times New Roman', serif;
    font-size: 1.5vw;
    color:#554636;
    text-align: justify;
    padding:70px 0 0 0;
    overflow: hidden;
    font-size: 1.6rem;
    width: 0;
    animation: typing 1s forwards;
}

#backButton {
    position: relative;
    display: inline-block;
    background-color:rgba(207, 206, 206, 0.986);
    border-radius: 16px;
    font-family:"Rosarivo", Georgia, Times, 'Times New Roman', serif;
  }

#backButton:hover {
    position: relative;
    display: inline-block;
    background-color:rgba(207, 206, 206, 0.534);
    border-radius: 16px;
    font-family:"Rosarivo", Georgia, Times, 'Times New Roman', serif;
}

/*animations*/ 
@keyframes fade-in {
    0% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
}

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