body > header:first-of-type {
    background: none;
}


[data-bganimation] {
    position: fixed;
    inset: 0;
    z-index: -1;
    --size: 50vh;
    @media screen and (min-width: 45em) {
        --size: 110vh;
    }
}

[data-bganimation] span {
    position: absolute;
    inline-size: var(--size);
    aspect-ratio: 1/1;
    inset: auto;
    background-image: radial-gradient(var(--accent) 10%, transparent 67%);
    /*transform: translate( var(--tx), var(--ty) );*/

    &.a {
        transform: translate( -40%, 130%);
        background-image: radial-gradient(var(--accent) 20%, transparent 73%);
        opacity:.7;
    }

    &.b {
        transform: translate( 60%, -40%);
    }

    @media screen and (min-width: 45em) {
        &.a {
            transform: translate( -30%, 50%);
        }

        &.b {
            transform: translate( 100%, -40%);
        }
    }

}
[data-bganimation] span + span {
    background-image: radial-gradient(#ffcc00 10%, transparent 67%);
}


label.aniType {
    position: fixed;
    inset: 1rem 1rem auto auto;
    font-size: small;
    accent-color: var(--accent);
    z-index: 2;
}