* {
    box-sizing:border-box;
}

body {
    background-color:darkslategrey;
    margin: 0;
}

.content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 40px;
    overflow:hidden;
    
    font-family: 'Sunflower', sans-serif;
    font-size: 35px;
    line-height: 40px;
    color: #ecf0f1;
    font-weight: 400;
}

.hello {
    display: inline;
    float: left;
    margin: 0;
}

.greeting {
    margin-top: 0;
    padding-left: 110px;
    text-align: left;
    list-style: none;

    animation-name: change;
    animation-duration: 30s;
    animation-iteration-count: infinite;
    animation-delay: 1s;
    animation-timing-function:cubic-bezier(0.075, 0.82, 0.165, 1);
    animation-direction: alternate;
}

.to {
    line-height:40px;
    margin:0;
}

@keyframes change {
    0% {transform: translateY(0);}
    5% {transform: translateY(-10%);}
    10% {transform: translateY(-20%);}
    15% {transform: translateY(-30%);}
    20% {transform: translateY(-40%);}
    25% {transform: translateY(-50%);}
    30% {transform: translateY(-60%);}
    35% {transform: translateY(-70%);}
    40% {transform: translateY(-80%);}
    45% {transform: translateY(-90%);}
    50% {transform: translateY(-90%);}
    55% {transform: translateY(-80%);}
    60% {transform: translateY(-70%);}
    65% {transform: translateY(-60%);}
    70% {transform: translateY(-50%);}
    75% {transform: translateY(-40%);}
    80% {transform: translateY(-30%);}
    85% {transform: translateY(-20%);}
    90% {transform: translateY(-10%);}
    95% {transform: translateY(-0%);}
}