/*
Copyright 2015 Tenetics, LLC - All Rights Reserved
    Created on : May 26, 2019
    Author     : Benjamin Albert
*/

@import "colors.css";

#gradient-wave{
    --gradient-time-interval: 60s;
    /* percent width and height should be greater than 100% for an animation effect (~500%) */
    --gradient-percent-width: 100%;
    --gradient-percent-height: 100%;
    
    background: radial-gradient(var(--color-primary-very-light), var(--color-primary-very-dark));
    background-size: var(--gradient-percent-width) var(--gradient-percent-height);
    
    -webkit-animation-name: GradientWave;
    -webkit-animation-timing-function: ease;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: var(--gradient-time-interval);
    -webkit-animation-delay: 0s;
    -webkit-animation-direction: alternate-reverse;
    -webkit-animation-fill-mode: backwards;
    
    -moz-animation-name: GradientWave;
    -moz-animation-timing-function: ease;
    -moz-animation-iteration-count: infinite;
    -moz-animation-duration: var(--gradient-time-interval);
    -moz-animation-delay: 0s;
    -moz-animation-direction: alternate-reverse;
    -moz-animation-fill-mode: backwards;
    
    animation-name: GradientWave;
    animation-timing-function: ease;
    animation-iteration-count: infinite;
    animation-duration: var(--gradient-time-interval);
    animation-delay: 0s;
    animation-direction: alternate-reverse;
    animation-fill-mode: backwards;
}

@-webkit-keyframes GradientWave {
    from {background-position: 0%}
    to {background-position: 100%}
}

@-moz-keyframes GradientWave {
    from {background-position: 0%}
    to {background-position: 100%}
}

@keyframes GradientWave {
    from {background-position: 0%}
    to {background-position: 100%}
}