@media (max-width: 768px) {

}

@media (min-width: 768px) {
    .principal {
        margin-top: -12vh;
    }
}
/* principal section */

#background {
    background: linear-gradient(151deg, #121113, #2640ea, #121113, #121113, #121113);
    background-size: 1000% 1000%;
    -webkit-animation: gradient 34s ease infinite;
    -moz-animation: gradient 34s ease infinite;
    -o-animation: gradient 34s ease infinite;
    animation: gradient 34s ease infinite;
}

@-webkit-keyframes gradient {
    0% {
        background-position: 22% 0%
    }

    50% {
        background-position: 79% 100%
    }

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

@-moz-keyframes gradient {
    0% {
        background-position: 22% 0%
    }

    50% {
        background-position: 79% 100%
    }

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

@-o-keyframes gradient {
    0% {
        background-position: 22% 0%
    }

    50% {
        background-position: 79% 100%
    }

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

@keyframes gradient {
    0% {
        background-position: 22% 0%
    }

    50% {
        background-position: 79% 100%
    }

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