index.css

.props {
    position: fixed;
    bottom: 0px;
    right: 0px;
    height: 100%;
    display: flex;
}

.imgprops {
    max-width: 100%;
    max-height: 100%;
}

.title {
    display: flex;
    justify-content: center;
    width: 100px;
    height: 100px;
    
    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    
    margin: auto;
}

.typewriter h1{
    font-family: 'Reenie Beanie', cursive;
    color:rgb(66, 66, 66);
    font-size: 50px;
    overflow: hidden;
    border-right: .1em solid rgba(0, 0, 0, 0);
    white-space: nowrap;
    margin: 0 auto;
    letter-spacing: 0.1em;
    animation: typing 4s steps(50, end),
               blink-caret 3s step-end 3;
}

@keyframes typing {
    from { width: 0 }
    to { width: 100% }
  }
  
 /* The typewriter cursor effect */
@keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: transparent }
}


.buttonprop {
    font-family: 'Reenie Beanie', cursive;
    font-size: larger;
    background-color: transparent;
    border: none;
    
    display: flex;
    justify-content: center;
    width: 500px;
    height: 500px;
    
    position: absolute;
    top: 100;
    bottom: 0;
    left: 0;
    right: 0;
    
    margin: auto;
    z-index: 5;
}

.lineart img.image-hover {
    position: absolute;
    top:0;
    right: 0;
    left: 0;
    bottom: 0;
    object-fit: contain;
    opacity: 0;
    transition: opacity 0.3s;
  }
  .lineart:hover img.image-hover {
    opacity: 1;
  }

.laprops {
    max-height: 100%;
    max-width: 100%;
}

footer{
    position: fixed;
     left: 0%;
     bottom: 0%;
     width: 100%;
     height: 22px;
     text-align: center;
     padding-bottom: 1.5em;
  }