<template>
    <div>
        <div class="backgrounds"></div>
    </div>
</template>

<script>
export default {
    props: {
        R1: { default: 130 },
        R2: { default: 64 },
        G1: { default: 0 },
        G2: { default: 64 },
        B1: { default: 250 },
        B2: { default: 64 },
    },
    
};
</script>

<style lang="scss" scoped>

.backgrounds {
    background: linear-gradient(163deg, #246655, #602466, #e3533c);
    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;

}

@-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>
