body,
.under-presentation {
    animation-name: colorchange, moveBackground;
    animation-duration: 10s, 30s;
    animation-delay: 0ms, 0.2ms;
    animation-timing-function: linear, linear;
    animation-iteration-count: infinite, infinite;
}

.vibrate>p {
    animation-name: shake;
    animation-duration: 0.1s;
    animation-iteration-count: infinite;
    cursor: progress;
}

.prestations--title {
    animation: invertColorChange 10s linear infinite;
}

.wrapper {
    animation: invertColorChange 10s linear infinite;
}

@-webkit-keyframes colorchange {
    0% {
        background-color: #b555d3;
    }

    25% {
        background-color: #53bbe4;
    }

    50% {
        background-color: #ffcd29;
    }

    75% {
        background-color: #ff2626;
    }

    100% {
        background-color: #b555d3;
    }
}

@keyframes colorchange {
    0% {
        background-color: #b555d3;
    }

    25% {
        background-color: #53bbe4;
    }

    50% {
        background-color: #ffcd29;
    }

    75% {
        background-color: #ff2626;
    }

    100% {
        background-color: #b555d3;
    }
}

@-webkit-keyframes invertColorChange {
    0% {
        background-color: #ff2626;
    }

    25% {
        background-color: #ffcd29;
    }

    50% {
        background-color:  #53bbe4;
    }

    75% {
        background-color: #b555d3;
    }

    100% {
        background-color: #ff2626;
    }
}

@keyframes invertColorChange {
    0% {
        background-color: #ff2626;
    }

    25% {
        background-color: #ffcd29;
    }

    50% {
        background-color:  #53bbe4;
    }

    75% {
        background-color: #b555d3;
    }

    100% {
        background-color: #ff2626;
    }
}

@keyframes moveBackground {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 100% 0;
    }
}


@keyframes shake {
    0% {
        transform: translate(2px, 2px) rotate(1deg);
    }

    10% {
        transform: translate(-2px, -4px) rotate(-2deg);
    }

    20% {
        transform: translate(-6px, 0px) rotate(2deg);
    }

    30% {
        transform: translate(6px, 4px) rotate(1deg);
    }

    40% {
        transform: translate(2px, -2px) rotate(2deg);
    }

    50% {
        transform: translate(-2px, 4px) rotate(-2deg);
    }

    60% {
        transform: translate(-6px, 2px) rotate(1deg);
    }

    70% {
        transform: translate(6px, 2px) rotate(-2deg);
    }

    80% {
        transform: translate(-2px, -2px) rotate(2deg);
    }

    90% {
        transform: translate(2px, 4px) rotate(1deg);
    }

    100% {
        transform: translate(2px, -4px) rotate(-2deg);
    }
}


#contact {
    animation-delay: 0.3s;
}

#real {
    animation-delay: 0.6s;
}

.float {
    animation-name: floating;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    margin-left: 30px;
    margin-top: 5px;
}

@keyframes floating {
    0% {
        transform: translate(0, 0px);
    }

    50% {
        transform: translate(0, 15px);
    }

    100% {
        transform: translate(0, -0px);
    }
}