:root {
    --bfred: #ffcaca;
    --bforange: #ffedc1;
    --bfyellow: #feffb8;
    --bfgreen: #c4ffcb;
    --bfblue: #add8ff;
    --bfpurple: #ccafe9;

    --darkgreen: #3E885B;
    --darkblue: #7fb4f5;


    --background: #454545;


    --rainbowright: linear-gradient(to right, var(--bfred) 0%, var(--bforange) 20%, var(--bfyellow) 40%, var(--bfgreen) 60%, var(--bfblue) 80%,  var(--bfpurple) 100%);
    
}

#bucketfish span{
        animation-delay: var(--n);
        animation: wave 1.5s linear var(--n) infinite forwards running, rainbow 3s linear var(--n) infinite forwards running;
        position: relative;
      }

      @media screen and (prefers-reduced-motion: reduce;)
      {
        #bucketfish span {
          animation: none;
        }
      }

      @keyframes wave{
        0%    {top: 0px;}
        25%   {top: -1px;}
        50%   {top: 0px;}
        75%  {top: 1px;}
        100% {top: 0px;}
      }

      @keyframes rainbow{
        0% {color: var(--bfred);}
        17% {color: var(--bforange);}
        33% {color: var(--bfyellow);}
        50% {color: var(--bfgreen);}
        67% {color: var(--bfblue);}
        83% {color: var(--bfpurple);}
        100% {color: var(--bfred);}
      }

.bucketfish {
    color: var(--bfpurple);
}

.dreams span {
    animation-delay: var(--ntwo);
    animation: wavetwo 1.5s linear var(--ntwo) infinite forwards running, dreamy 3s linear var(--ntwo) infinite forwards running;
    position: relative;
}

    @keyframes wavetwo{
        0%    {top: 0px;}
        25%   {top: -1px;}
        50%   {top: 0px;}
        75%  {top: 1px;}
        100% {top: 0px;}
    }

    @keyframes dreamy{
        0% {color:#E5B0ED;}
        25% {color:#BBEEFD;}
        50% {color:#6BACF2;}
        75% {color:#AC9BF2;}
        100% {color:#E5B0ED;}
    }