@keyframes colorBackground {
    from, to    { background-color: hsl(184, 100%, 52%); }
    10%         { background-color: hsl(232, 100%, 67%); }
    20%         { background-color: hsl(262, 72%, 75%); }
    30%         { background-color: hsl(274, 100%, 77%); }
    40%         { background-color: hsl(302, 71%, 74%); }
    50%         { background-color: hsl(329, 975, 61%); }
    60%         { background-color: hsl(360, 67%, 76%); }
    70%         { background-color: hsl(28, 90%, 72%); }
    80%         { background-color: hsl(48, 100%, 66%); }
    90%         { background-color: hsl(132, 86%, 69%); }
}

@keyframes colorBorder {
    from, to    { border-color: hsl(184, 100%, 52%); }
    10%         { border-color: hsl(232, 100%, 67%); }
    20%         { border-color: hsl(262, 72%, 75%); }
    30%         { border-color: hsl(274, 100%, 77%); }
    40%         { border-color: hsl(302, 71%, 74%); }
    50%         { border-color: hsl(329, 975, 61%); }
    60%         { border-color: hsl(360, 67%, 76%); }
    70%         { border-color: hsl(28, 90%, 72%); }
    80%         { border-color: hsl(48, 100%, 66%); }
    90%         { border-color: hsl(132, 86%, 69%); }
}

.color-border {
    border-color: rgb(0, 0, 0);
    animation: colorBorder 20s infinite;
}

.color-background {
    background-color: rgb(255, 255, 255);
    animation: colorBackground 20s infinite;
}

.color-background-mobile {
    background-color: rgb(255, 255, 255);
    animation: none;
}

@media only screen and (max-device-width : 1024px) {
    .color-background-mobile {
        animation: colorBackground 20s infinite;
    }
}