CT Gradient Animation

by bryandowning

HTML

<main></main>

CSS

:root {
    --color-primary: hsl(240,64%,58%);
    --color-primary-10: hsl(240,66%,19%);
    --color-primary-20: hsl(240,45%,33%);
    --color-primary-25: hsl(240,46%,48%);
    --color-primary-30: hsl(240,46%,53%);
    --color-primary-40: hsl(240,100%,67%);
    --color-primary-85: hsl(244,100%,84%);
    --color-primary-90: hsl(243,100%,93%);
    --color-primary-95: hsl(244,100%,97%);
    --color-primary-98: hsl(244,100%,99%);
    --color-accent: #213c45;
    --color-accent-10: hsl(195,100%,10%);
    --color-accent-20: hsl(195,80%,20%);
    --color-accent-30: hsl(195,70%,30%);
    --color-accent-40: hsl(195,70%,40%);
    --color-accent-50: hsl(195,70%,50%);
    --color-accent-60: hsl(195,70%,60%);
    --color-accent-85: hsl(195,85%,85%);
    --color-accent-90: hsl(195,90%,90%);
    --color-accent-95: hsl(195,95%,95%);
    --color-accent-98: hsl(195,100%,98%);
    --color-brown-10: hsl(41,100%,10%);
    --color-brown-20: hsl(41,100%,20%);
    --color-brown-35: hsl(41,96%,30%);
    --color-brown-50: hsl(41,95%,44%);
    --color-brown-70: hsl(47,95%,70%);
    --color-brown-85: hsl(47,100%,85%);
    --color-brown-90: hsl(47,100%,90%);
    --color-brown-95: hsl(47,100%,95%);
    --color-brown-98: hsl(48,100%,97%);
    --color-purple-10: hsl(248,88%,10%);
    --color-purple-20: hsl(248,50%,20%);
    --color-purple-35: hsl(248,25%,35%);
    --color-purple-50: hsl(248,64%,58%);
    --color-purple-70: hsl(248,80%,70%);
    --color-purple-85: hsl(249,100%,85%);
    --color-purple-90: hsl(248,100%,90%);
    --color-purple-95: hsl(248,100%,95%);
    --color-purple-98: hsl(246,100%,98%);
    --color-turquoise-10: hsl(180,88%,10%);
    --color-turquoise-20: hsl(180,90%,20%);
    --color-turquoise-35: hsl(178,88%,25%);
    --color-turquoise-50: hsl(178,67%,50%);
    --color-turquoise-70: hsl(180,75%,70%);
    --color-turquoise-85: hsl(180,90%,85%);
    --color-turquoise-90: hsl(180,88%,90%);
    --color-turquoise-95:...