h1 {
    font-size: 50px;
}
body {
    font: 20px Helvetica sans-serif;
    color: #333;
    width: 100%;
    display: flex;
    height: 100vh;
    justify-content: center;
    background-image: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%)
}

.wrapper {
    text-align: center;
    align-self: center;
}

.loading {
    margin-top: 50px;
    margin-left: 50px;
    font-size: 50px;
    font-family: sans-serif;
}
.ball {
    display: inline-block;
    height: 50px;
    width: 50px;
    background-color: #e74c3c;
    border-radius: 50%;
    box-shadow:inset 6px -10px 50px -20px #000;
    animation: loading 1s infinite;
}

@keyframes loading {
    0%, 100% {
        transform: translateY(0px);
        animation-timing-function: ease-out;
    }
    50% {
        transform: translateY(-30px);
        animation-timing-function: ease-in;
    }
}