@import url('https://fonts.googleapis.com/css2?family=Architects+Daughter&display=swap');

.prasheel {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Architects Daughter', cursive, "Segoe UI";
    font-size: 10rem;
    text-align: center;
    background: linear-gradient(to right bottom, #fdd835, #f57f17);
    color: #fff;
    width: 100%;
    height: 100vh;
    -webkit-transition: backgound-image 4000ms ease;
    -moz-transition: backgound-image 4000ms ease;
    -ms-transition: backgound-image 4000ms ease;
    -o-transition: backgound-image 4000ms ease;
    transition: backgound-image 4000ms ease;
}

.word {
    margin: 50px 0 0 0;
    display: inline-block;
}

.prasheel span.p {
  
    position: relative;
    animation: .2s ps;
}

.prasheel span.r {

    position: relative;
    animation: .3s ps;
}

.prasheel span.a {

    position: relative;
    animation: .4s ps;
}

.prasheel span.s {

    position: relative;
    animation: .5s ps;
}

.prasheel span.h {

    position: relative;
    animation: .6s ps;
}

.prasheel span.e {

    position: relative;
    animation: .7s ps;
}

.prasheel span.e {

    position: relative;
    animation: .8s ps;
}

.prasheel span.l {

    position: relative;
    animation: .9s ps;
}


@keyframes ps {
    0% {
        opacity: 0;
        transform: translateX(-80%);
    }

    50% {
        opacity: 0.5;
        transform: translateX(80%);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}