/*
    ak-bg-anim.css
    This stylesheet is designed to add an easy set of background animations to a website. Requires companion script ak-bg-anim.js for full functionality
    Alex Knipper

    To use, copy the following HTML code:
    <div id="ak-bg-anim"></div>
*/

#ak-bg-anim
{
    position:fixed;
    top:0%;
    left:0%;
    width:100%;
    height:100%;
    z-index:-1;
    -webkit-user-select: none; /* Safari 3.1+ */
	-moz-user-select: none; /* Firefox 2+ */
	-ms-user-select: none; /* IE 10+ */
	user-select: none; /* Standard syntax */
}

#ak-bg-anim span
{
    position:absolute;
}

@keyframes fall
{
    from {top:calc(-5% - var(--size, 1em));}
    to {top:calc(105% + var(--size, 1em));}
}

@keyframes sway
{
    from {left:calc(var(--position) - var(--sway-offset, 2.5%))}
    to {left:calc(var(--position) + var(--sway-offset, 2.5%))}
}

@keyframes spin
{
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}

.starfall span
{
    display:flex;
    top:calc(-5% - var(--size, 1em));
    left:var(--position, 0%);
    color:var(--color, white);
    font-size:var(--size, 1em);
    justify-content:center;
    align-items:center;
    animation:fall, spin;
    animation-duration:var(--fall-time, 16s), var(--spin-time, 4s);
    animation-iteration-count:infinite, infinite;
    animation-timing-function:linear, linear;
    animation-delay:var(--delay, 0s), 0s;
}
.reverse.starfall span
{
    animation-direction: reverse, reverse;
}

.magic span
{
    display:flex;
    top:calc(-5% - var(--size, 1em));
    left:var(--position, 0%);
    color:var(--color, white);
    font-size:var(--size, 1em);
    text-shadow:0px 0px calc(var(--size, 1em) / 2.75) var(--color, white);
    animation:fall, sway, spin;
    animation-duration:var(--fall-time, 16s), var(--sway-time, 4s), var(--spin-time, 10s);
    animation-iteration-count:infinite, infinite, infinite;
    animation-timing-function:linear, cubic-bezier(0.37, 0, 0.63, 1), linear;
    animation-direction: reverse, alternate, var(--anim-dir, normal);
    animation-delay:var(--delay, 0s), 0s;
}
.reverse.magic span
{
    animation-direction: normal, alternate, var(--anim-dir, normal);
}

.snow span
{
    display:flex;
    top:calc(-5% - var(--size, 1em));
    left:var(--position, 0%);
    background-color:var(--color, white);
    width:calc(var(--size, 1em) / 10);
    border-radius:50%;
    animation:fall, sway;
    animation-duration:var(--fall-time, 16s), var(--sway-time, 4s);
    animation-iteration-count:infinite, infinite;
    animation-timing-function:linear, cubic-bezier(0.37, 0, 0.63, 1);
    animation-direction: normal, alternate;
    animation-delay:var(--delay, 0s), 0s;
}
.snow span:after
{
    content:"";
    display:block;
    padding-bottom:100%;
}
.reverse.snow span
{
    animation-direction: reverse, alternate;
}