{# Parallax Stars - from https://codepen.io/sarazond/pen/LYGbwj #}
{% set small_shadows = "1309px 228px #FFF, 51px 1518px #FFF, 563px 501px #FFF, 457px 285px #FFF, 1508px 209px #FFF, 1385px 1516px #FFF, 1827px 1116px #FFF, 178px 1209px #FFF, 864px 65px #FFF, 61px 191px #FFF, 447px 476px #FFF, 1034px 1232px #FFF, 54px 1149px #FFF, 407px 1466px #FFF, 1330px 1436px #FFF, 1116px 859px #FFF, 451px 919px #FFF, 1206px 569px #FFF, 1657px 1780px #FFF, 13px 1554px #FFF, 1650px 326px #FFF, 1429px 865px #FFF, 696px 569px #FFF, 318px 440px #FFF, 1960px 1563px #FFF, 689px 209px #FFF, 189px 778px #FFF, 198px 735px #FFF, 1735px 704px #FFF, 1236px 541px #FFF, 1652px 88px #FFF, 1494px 940px #FFF, 1098px 255px #FFF, 1992px 1888px #FFF, 775px 161px #FFF, 1130px 600px #FFF, 1698px 1287px #FFF, 1266px 1813px #FFF, 1764px 740px #FFF, 1182px 393px #FFF, 1442px 142px #FFF, 93px 1354px #FFF, 466px 1583px #FFF, 592px 163px #FFF, 1751px 476px #FFF, 1774px 206px #FFF, 778px 569px #FFF, 928px 1301px #FFF, 1708px 747px #FFF, 333px 758px #FFF, 727px 429px #FFF, 1372px 546px #FFF, 1437px 1918px #FFF, 1399px 1327px #FFF, 146px 1247px #FFF, 1300px 350px #FFF" %}
{% set med_shadows = "1093px 1493px #FFF, 501px 334px #FFF, 946px 777px #FFF, 552px 1895px #FFF, 1310px 1409px #FFF, 1140px 449px #FFF, 1402px 664px #FFF, 1726px 1573px #FFF, 1589px 114px #FFF, 469px 1683px #FFF, 65px 1648px #FFF, 646px 821px #FFF, 548px 135px #FFF, 432px 1870px #FFF, 1931px 1161px #FFF, 1794px 1470px #FFF, 644px 435px #FFF" %}
{% set big_shadows = "1309px 228px #FFF, 51px 1518px #FFF, 563px 501px #FFF, 457px 285px #FFF, 1508px 209px #FFF, 1385px 1516px #FFF, 1827px 1116px #FFF, 178px 1209px #FFF" %}
<div id="background-stars" class="fixed inset-0 z-[-1] overflow-hidden pointer-events-none">
    <div id="stars" class="bg-stars-layer"></div>
    <div id="stars2" class="bg-stars-layer bg-stars-layer-2"></div>
    <div id="stars3" class="bg-stars-layer bg-stars-layer-3"></div>
</div>
<style>
#background-stars {
    background: radial-gradient(ellipse at bottom, #1B2735 0%, #090A0F 100%);
}
#background-stars .bg-stars-layer {
    width: 1px;
    height: 1px;
    background: transparent;
    box-shadow: {{ small_shadows }};
    animation: bg-animStar 50s linear infinite;
}
#background-stars .bg-stars-layer:after {
    content: " ";
    position: absolute;
    top: 2000px;
    width: 1px;
    height: 1px;
    background: transparent;
    box-shadow: {{ small_shadows }};
}
#background-stars .bg-stars-layer-2 {
    width: 2px;
    height: 2px;
    box-shadow: {{ med_shadows }};
    animation: bg-animStar 100s linear infinite;
}
#background-stars .bg-stars-layer-2:after {
    width: 2px;
    height: 2px;
    box-shadow: {{ med_shadows }};
}
#background-stars .bg-stars-layer-3 {
    width: 3px;
    height: 3px;
    box-shadow: {{ big_shadows }};
    animation: bg-animStar 150s linear infinite;
}
#background-stars .bg-stars-layer-3:after {
    width: 3px;
    height: 3px;
    box-shadow: {{ big_shadows }};
}
@keyframes bg-animStar {
    from { transform: translateY(0); }
    to { transform: translateY(-2000px); }
}
</style>