<template>
    <div>
        <div class="backgrounds" :style="'background: linear-gradient(163deg, #'+C1+', #'+C2+', #'+C3+');'"></div>
    </div>
</template>

<script>
export default {
    props: {
        C1: { default: '1C0F41' },
        C2: { default: 'ee3552' },
        C3: { default: '0C1630' },
    },

};
</script>

<style lang="scss" scoped>

.backgrounds {
    // background: linear-gradient(163deg, #1C0F41, #085156, #0C1630);
    background-size: 600% 600%;
    -webkit-animation: AnimationName 30s ease infinite;
    -moz-animation: AnimationName 30s ease infinite;
    -o-animation: AnimationName 30s ease infinite;
    animation: AnimationName 30s ease infinite;
    min-width: 100%;
    min-height: 100%;
    position:fixed;
    z-index: -1;

}

@-webkit-keyframes AnimationName {
    0%{background-position:37% 0%}
    50%{background-position:64% 100%}
    100%{background-position:37% 0%}
}
@-moz-keyframes AnimationName {
    0%{background-position:37% 0%}
    50%{background-position:64% 100%}
    100%{background-position:37% 0%}
}
@-o-keyframes AnimationName {
    0%{background-position:37% 0%}
    50%{background-position:64% 100%}
    100%{background-position:37% 0%}
}
@keyframes AnimationName {
    0%{background-position:37% 0%}
    50%{background-position:64% 100%}
    100%{background-position:37% 0%}
}

</style>
