styles.css

body, h1 {
    font-family: "Raleway", sans-serif
}

body, html {
    height: 100%;
    margin: 0px;
}

.bgimg {
    background-image: url('background.jpg');
    min-height: 100%;
    background-position: center;
    background-size: cover;
    animation-name: fade-in;
    animation-duration: 2s;
    opacity: 1;
}

@keyframes fade-in {
    from {opacity: 0;}
    to {opacity: 1;}
}



.wrapper {
    height: 25vh;
    /*This part is important for centering*/
    display: grid;
    place-items: center;
}

.typewriter_center {
    width: 47ch;
    animation: typing 2s steps(47), blink .5s step-end infinite alternate;
    white-space: nowrap;
    overflow: hidden;
    border-right: 3px solid;
    font-size: 2.8em;
}

@keyframes typing {
    from {
        width: 0
    }
}

@keyframes blink {
    50% {
        border-color: transparent
    }
}