:root {
  /* Background ~ Gradient */
  --bg-top-rgb: 109, 76, 84;
  --bg-bottom-rgb: 124, 105, 109;
  --bg-gradient: linear-gradient(0deg, rgb(var(--bg-bottom-rgb)) 0%, rgb(var(--bg-top-rgb)) 100%);
  --big-dim-opacity: 0;
  
  /* Background ~ Night Sky Elements */
  --bg-sky-rotation: 285deg;
  --bg-nebula-opacity: 0.05;
  --bg-stars-opacity: 0.5;

  /* Background ~ Sun Glow */
  --bg-glow-rgb: 221, 115, 67;
  --bg-glow-opacity: 0.75;

  /* Background ~ Snow */
  --bg-snow-rgb: 255, 255, 255
}

.bg {
  position: fixed; 
  top: 0;
  left: 0;

  z-index: -1;

  /* Fallback incase the newer viewport units aren't supported */
  width: 100vw;
  height: 100vh;

  /* Using Largest Viewport (Newer feature, but somewhat widely supported) */
  /* Solves the background jumping around on mobile due to the url bar showing/hiding */
  width: 100lvw;
  height: 100lvh;
}

.bg-dim {
  opacity: var(--big-dim-opacity);
  background: rgb(var(--panel-rgb));
  background: linear-gradient(
    90deg,
    rgba(var(--panel-rgb), 0.66) 0%, 
    rgba(var(--panel-rgb), 0.33) 25%, 
    rgba(var(--panel-rgb), 0.33) 75%, 
    rgba(var(--panel-rgb), 0.66) 100%
  );
  mix-blend-mode: hard-light;
  z-index: 1;

  position: absolute;
  width: 100%;
  height: 100%;
  top:0; 
  left:0;
}

.bg-sky {
  background: rgb(var(--bg-top-rgb));
  background-repeat: no-repeat;
  overflow: hidden;

  position: relative;
  width: 100%;

  height: 65vh; /* Fallback */
  height: 65lvh;
}
.bg-sky.reflected {
  transform-origin: 50% 0%;
  transform: scaleY(-1) translateY(-65vh); /* Fallback incase lvh not supported */
  transform: scaleY(-1) translateY(-65lvh);
}

.bg-sky-inner {
  position: absolute;
  width: max(200vh, 200vw);
  height: max(200vh, 200vw);
  left: 50%;
  top: 100%;

  transform-origin: center;
  transform: 
    translate(-50%, -50%) 
    translateY(max(calc(50vw - 50vh), 0px)) /* Better alignment on wider screens */
    rotate(var(--bg-sky-rotation));
}
.bg-sky-inner.reflected {
  left: 50%;
  top: 0%;
  transform-origin: center;
  transform: 
    translate(-50%, -50%) 
    translateY(min(calc(-50vw + 50vh), 0px))  /* Better alignment on wider screens */
    scaleY(-1) /* Mirror it to make it a reflection */
    rotate(var(--bg-sky-rotation));
}

.bg-horizon-fade {
  position: relative;
  width: 100%;
  height: 100%;
  background: linear-gradient(0deg, rgba(var(--bg-bottom-rgb), 1) 0%, rgba(var(--bg-top-rgb), 0) 100%);
}
.bg-horizon-fade.reflected {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(var(--bg-bottom-rgb), 1) 0%, rgba(var(--bg-top-rgb), 0) 100%);
}

.bg-glow {
  background: radial-gradient(circle, rgba(var(--bg-glow-rgb),var(--bg-glow-opacity)) 0%, rgba(var(--bg-glow-rgb),0) 50%);
  transform: translateY(50%) scale(2);

  position: absolute;
  background-size: 100%;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
}

.bg-nebula {
  background-image: url("/assets/img/Nebula64.webp");
  opacity: var(--bg-nebula-opacity);

  position: absolute;
  background-size: 100%;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
}

.bg-test {
  background-image: url("/assets/img/skyBgTest.png");
  opacity: 0;

  position: absolute;
  background-size: 100%;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
}

.bg-star {
  position: absolute;

  width: calc((4vw + 4vh) / 2); /* Fallback */
  width: calc((4lvw + 4lvh) / 2);

  height: calc((4vw + 4vh) / 2); /* Fallback */
  height: calc((4lvw + 4lvh) / 2);

  background-image: url("/assets/img/Star32.webp");
  background-size: 100% 100%;
  opacity: var(--bg-stars-opacity);

  filter: brightness(2);
}
.bg-star.reflected {
  background-image: url("/assets/img/StarBlur32.webp");
}

.bg-star-gen {
  position: absolute;

  width: calc((2.5vw + 2.5vh) / 2); /* Fallback */
  width: calc((2.5lvw + 2.5lvh) / 2);

  height: calc((2.5vw + 2.5vh) / 2);; /* Fallback */
  height: calc((2.5lvw + 2.5lvh) / 2);
  
  background-image: url("/assets/img/Star32.webp");
  background-size: 100% 100%;
  opacity: var(--bg-stars-opacity);
}
.bg-star-gen.reflected {
  background-image: url("/assets/img/StarBlur32.webp");
}

/* Hex */
.bg-star-0 { left: 31.3%; top: 20.9%; rotate: 447deg; scale: 1.13004165610849; filter: hue-rotate(0deg) brightness(1.5); }
.bg-star-1 { left: 37.4%; top: 19.9%; rotate: 44deg; scale: 1.14858024205721; filter: hue-rotate(25deg) brightness(1.5); }
.bg-star-2 { left: 29.3%; top: 26.8%; rotate: 47deg; scale: 1.10300635502975; filter: hue-rotate(50deg) brightness(1.5); }
.bg-star-3 { left: 41.6%; top: 24.7%; rotate: 448deg; scale: 1.0804153545332; filter: hue-rotate(50deg) brightness(1.5); }
.bg-star-4 { left: 39.9%; top: 30.1%; rotate: 74deg; scale: 1.27975917329939; filter: hue-rotate(25deg) brightness(1.5); }
.bg-star-5 { left: 32.8%; top: 31.6%; rotate: 147deg; scale: 1.27139540010207; filter: hue-rotate(0deg) brightness(1.5); }

/* Gemini */
.bg-star-6 { left: 60%; top: 22.5%; rotate: 187.884176566336deg; scale: 1.5; filter: hue-rotate(338.582545329106deg) brightness(1.70591311248872); }
.bg-star-7 { left: 57.4%; top: 27.5%; rotate: 298.403574086596deg; scale: 1.5; filter: hue-rotate(282.511732246617deg) brightness(1.38251326148484); }
.bg-star-8 { left: 65.6%; top: 24.3%; rotate: 0.835000697449613deg; scale: 1.25; filter: hue-rotate(62.5898212490923deg) brightness(1.75387973895422); }
.bg-star-9 { left: 72.5%; top: 29.6%; rotate: 8.94600544288212deg; scale: 1.25; filter: hue-rotate(325.688591272731deg) brightness(1.63233969661898); }
.bg-star-10 { left: 77.5%; top: 31.9%; rotate: 271.709551910849deg; scale: 1.25; filter: hue-rotate(162.045285976724deg) brightness(1.8734443803491); }
.bg-star-11 { left: 80.6%; top: 31.4%; rotate: 62.4046826339043deg; scale: 1.25; filter: hue-rotate(253.405771930209deg) brightness(1.20705474968224); }
.bg-star-12 { left: 58.5%; top: 31.8%; rotate: 286.582953277073deg; scale: 1.25; filter: hue-rotate(43.4987003282926deg) brightness(1.41430162246841); }
.bg-star-13 { left: 64.6%; top: 34.4%; rotate: 162.225639598996deg; scale: 1.25; filter: hue-rotate(326.947376408258deg) brightness(1.1814570992772); }
.bg-star-14 { left: 68.8%; top: 36.3%; rotate: 31.3345372515426deg; scale: 1; filter: hue-rotate(22.3387068758876deg) brightness(1.41779075529898); }
.bg-star-15 { left: 75%; top: 38.5%; rotate: 181.61932368196deg; scale: 1; filter: hue-rotate(12.2130459150616deg) brightness(1.88183918311697); }
.bg-star-16 { left: 73.4%; top: 42.1%; rotate: 190.851739730687deg; scale: 1; filter: hue-rotate(144.711395823765deg) brightness(1.27907530305823); }

/* Generated */
.bg-star-gen-0 { left: 46.4777559045769%; top: 39.1060711313168%; rotate: 40.8926096529179deg; scale: 1.45124287358853; filter: hue-rotate(123.294768361807deg) brightness(1.02047722407453); }
.bg-star-gen-1 { left: 74.305874605034%; top: 60.5093636227697%; rotate: 7.31999271953864deg; scale: 1.49370083628529; filter: hue-rotate(198.360902391802deg) brightness(1.0667104816338); }
.bg-star-gen-2 { left: 45.2975114393702%; top: 70.7294287405058%; rotate: 277.829575369078deg; scale: 1.13084563261815; filter: hue-rotate(209.776870007273deg) brightness(1.00509009563887); }
.bg-star-gen-3 { left: 15.6922147397797%; top: 67.0326556377008%; rotate: 333.757888407093deg; scale: 1.23228385390545; filter: hue-rotate(359.435557517071deg) brightness(1.04054970987702); }
.bg-star-gen-4 { left: 62.9920776929081%; top: 67.5565883874019%; rotate: 86.0596957792756deg; scale: 1.47863491399446; filter: hue-rotate(276.206580271327deg) brightness(1.26013035651589); }
.bg-star-gen-5 { left: 13.3969372263004%; top: 79.6284939074281%; rotate: 77.3764670518143deg; scale: 1.33285828171299; filter: hue-rotate(160.792423497293deg) brightness(1.05629420514026); }
.bg-star-gen-6 { left: 66.153497483798%; top: 7.9898993236176%; rotate: 16.0990621438159deg; scale: 1.23546375272577; filter: hue-rotate(245.345902657713deg) brightness(1.00439511734664); }
.bg-star-gen-7 { left: 56.1207439285023%; top: 62.5238004518326%; rotate: 49.4595223814981deg; scale: 1.16424800342702; filter: hue-rotate(325.629465487709deg) brightness(1.00003383924574); }
.bg-star-gen-8 { left: 86.6237334672388%; top: 61.9832551368343%; rotate: 229.818995444059deg; scale: 1.27005099884435; filter: hue-rotate(13.6195000656588deg) brightness(1.31456856360145); }
.bg-star-gen-9 { left: 51.7889774877883%; top: 89.8632462928105%; rotate: 335.27010915884deg; scale: 1.34883549582594; filter: hue-rotate(58.5954230988335deg) brightness(1.00001540207954); }
.bg-star-gen-10 { left: 18.9380735644973%; top: 21.2015948395287%; rotate: 238.725985257362deg; scale: 1.09932576223148; filter: hue-rotate(142.05933367282deg) brightness(1.00204818384062); }
.bg-star-gen-11 { left: 89.2768600328917%; top: 5.86063090676231%; rotate: 67.4857397293113deg; scale: 1.10449406840897; filter: hue-rotate(137.328989933796deg) brightness(1.0015153711114); }
.bg-star-gen-12 { left: 29.2575164234953%; top: 43.6083360458258%; rotate: 177.99760811797deg; scale: 1.16013778488461; filter: hue-rotate(106.461299136165deg) brightness(1.33988345829896); }
.bg-star-gen-13 { left: 44.2394333252251%; top: 31.2742722510674%; rotate: 288.021029653387deg; scale: 1.21111785128007; filter: hue-rotate(147.469959462351deg) brightness(1.24821911275112); }
.bg-star-gen-14 { left: 46.7362247962955%; top: 74.9611643930657%; rotate: 321.948058056525deg; scale: 1.24370552500762; filter: hue-rotate(334.349025649455deg) brightness(1.01155845727188); }
.bg-star-gen-15 { left: 15.2622511980445%; top: 31.6619747639163%; rotate: 298.710271631377deg; scale: 1.15766909043097; filter: hue-rotate(302.822150596433deg) brightness(1.10080377422577); }
.bg-star-gen-16 { left: 48.1522715033667%; top: 71.317235967623%; rotate: 39.82544878652deg; scale: 1.36770887421091; filter: hue-rotate(84.9343298581411deg) brightness(1.00000718250802); }
.bg-star-gen-17 { left: 62.719292739278%; top: 11.5610505201967%; rotate: 354.747073880619deg; scale: 1.34624325816643; filter: hue-rotate(15.0979976662512deg) brightness(1.10906322975333); }
.bg-star-gen-18 { left: 70.7120992655472%; top: 5.28155564831069%; rotate: 168.02868636398deg; scale: 1.21046038979958; filter: hue-rotate(358.070731583814deg) brightness(1.0466724651935); }
.bg-star-gen-19 { left: 61.4395018745031%; top: 45.2858881997405%; rotate: 114.992718125057deg; scale: 1.22006456371068; filter: hue-rotate(194.080034776009deg) brightness(1.16481543112123); }
.bg-star-gen-20 { left: 53.2619245073364%; top: 26.418657008861%; rotate: 346.17032858823deg; scale: 1.17892555934385; filter: hue-rotate(338.006426686019deg) brightness(1.00001677403496); }
.bg-star-gen-21 { left: 73.8494654598957%; top: 8.74619042219078%; rotate: 40.7765742801718deg; scale: 1.33328907062096; filter: hue-rotate(111.946044761578deg) brightness(1.29976249886927); }
.bg-star-gen-22 { left: 79.9003943836882%; top: 45.1843468111274%; rotate: 133.223863945794deg; scale: 1.00338621126979; filter: hue-rotate(246.969102057199deg) brightness(1.09891543096363); }
.bg-star-gen-23 { left: 83.3900423217585%; top: 43.2762643278571%; rotate: 38.2538526766775deg; scale: 1.40929556717688; filter: hue-rotate(173.398977543622deg) brightness(1.13599466802039); }
.bg-star-gen-24 { left: 92.0394474029929%; top: 14.7753585718307%; rotate: 352.723860874725deg; scale: 1.01119444317756; filter: hue-rotate(222.297045443304deg) brightness(1.00152434711218); }
.bg-star-gen-25 { left: 88.3181201003495%; top: 26.5487599620193%; rotate: 25.5158662029214deg; scale: 1.40963280642006; filter: hue-rotate(200.221775112474deg) brightness(1.00162039935154); }
.bg-star-gen-26 { left: 50.3143417537935%; top: 56.4494675327889%; rotate: 112.20664046701deg; scale: 1.40935064626584; filter: hue-rotate(49.6321429283731deg) brightness(1.06491437230922); }
.bg-star-gen-27 { left: 94.5268151798829%; top: 63.2503236868604%; rotate: 349.348780371588deg; scale: 1.10337659356677; filter: hue-rotate(264.667101512064deg) brightness(1.13516280681337); }
.bg-star-gen-28 { left: 89.0653399879088%; top: 78.8034129980792%; rotate: 284.482074715062deg; scale: 1.01862461266955; filter: hue-rotate(354.900726216102deg) brightness(1.12969388946089); }
.bg-star-gen-29 { left: 7.67972524358295%; top: 19.2535221457668%; rotate: 120.815949482079deg; scale: 1.23330329826825; filter: hue-rotate(236.044532840278deg) brightness(1.22423962607193); }
.bg-star-gen-30 { left: 56.2245399208116%; top: 68.0328749301004%; rotate: 142.73479265291deg; scale: 1.13275285632264; filter: hue-rotate(261.340826884541deg) brightness(1.01778332836713); }
.bg-star-gen-31 { left: 21.0953566792953%; top: 33.8668832389195%; rotate: 64.830010129928deg; scale: 1.49454330296542; filter: hue-rotate(179.959572578218deg) brightness(1.14162079306375); }
.bg-star-gen-32 { left: 25.8207881338013%; top: 24.816304112921%; rotate: 126.810085562836deg; scale: 1.49607898388088; filter: hue-rotate(297.229382507406deg) brightness(1.06735392152013); }
.bg-star-gen-33 { left: 26.6805728578937%; top: 40.6272074290915%; rotate: 155.840507830273deg; scale: 1.39833632688503; filter: hue-rotate(76.4910381516802deg) brightness(1.04950483260853); }
.bg-star-gen-34 { left: 89.5977608164538%; top: 29.7974979411332%; rotate: 16.4172694289645deg; scale: 1.18711142816993; filter: hue-rotate(28.3832596973deg) brightness(1.00342885750365); }
.bg-star-gen-35 { left: 23.4474070198652%; top: 34.6657971812732%; rotate: 7.0752681800882deg; scale: 1.38983055088482; filter: hue-rotate(84.3934588493611deg) brightness(1.00060028182242); }
.bg-star-gen-36 { left: 26.7166187515388%; top: 36.981294571032%; rotate: 313.575471689234deg; scale: 1.38817022569772; filter: hue-rotate(260.74355821415deg) brightness(1.16276839629352); }
.bg-star-gen-37 { left: 57.3123232146207%; top: 74.4895332864795%; rotate: 349.945283817388deg; scale: 1.12777165721635; filter: hue-rotate(321.029236687904deg) brightness(1.24814233633491); }
.bg-star-gen-38 { left: 84.6320415874574%; top: 56.150036955774%; rotate: 279.75552285029deg; scale: 1.20096132724699; filter: hue-rotate(256.817199077865deg) brightness(1.18260223975528); }
.bg-star-gen-39 { left: 18.9340145660818%; top: 75.0317640379152%; rotate: 76.8877449139613deg; scale: 1.1452014092796; filter: hue-rotate(115.64971084653deg) brightness(1.3797587409123); }
.bg-star-gen-40 { left: 91.0927326570628%; top: 7.75893696158371%; rotate: 324.28019943135deg; scale: 1.21199353054051; filter: hue-rotate(320.482269240117deg) brightness(1.26336584729932); }
.bg-star-gen-41 { left: 34.1641387840833%; top: 12.9158315652944%; rotate: 166.836661431073deg; scale: 1.07527603957909; filter: hue-rotate(195.95487104884deg) brightness(1.19137603031716); }
.bg-star-gen-42 { left: 53.0841678774182%; top: 87.9359940067957%; rotate: 84.2060130565003deg; scale: 1.21174457789398; filter: hue-rotate(243.328495616199deg) brightness(1.00013309325373); }
.bg-star-gen-43 { left: 76.5405118620007%; top: 51.3111527827493%; rotate: 127.559204902943deg; scale: 1.10293262716109; filter: hue-rotate(89.2962277244294deg) brightness(1.12073345676527); }
.bg-star-gen-44 { left: 27.3186722729417%; top: 66.112696732661%; rotate: 99.8164380084657deg; scale: 1.15795478601838; filter: hue-rotate(148.589786380712deg) brightness(1.0107045682063); }
.bg-star-gen-45 { left: 79.325688842104%; top: 21.7298136177112%; rotate: 281.284994998491deg; scale: 1.25084914729463; filter: hue-rotate(270.796699458082deg) brightness(1.17585517482611); }
.bg-star-gen-46 { left: 52.6579421826121%; top: 12.5175380193387%; rotate: 274.830518377439deg; scale: 1.14100822974984; filter: hue-rotate(62.747335500121deg) brightness(1.0024475456449); }
.bg-star-gen-47 { left: 68.4736483306885%; top: 91.1983506095637%; rotate: 155.519343593935deg; scale: 1.21299664425973; filter: hue-rotate(17.0226926350977deg) brightness(1.3964597785583); }
.bg-star-gen-48 { left: 64.3545405482186%; top: 69.0040930726965%; rotate: 320.416783347147deg; scale: 1.04174393335324; filter: hue-rotate(117.576938233267deg) brightness(1.11698808140546); }
.bg-star-gen-49 { left: 69.0874264372218%; top: 71.9391050164843%; rotate: 253.926300453661deg; scale: 1.24866739859273; filter: hue-rotate(77.2581320760213deg) brightness(1.15200897737602); }
.bg-star-gen-50 { left: 25.1063432248706%; top: 21.3435963706327%; rotate: 334.171289145612deg; scale: 1.4669771868554; filter: hue-rotate(294.948042583311deg) brightness(1.00024775854424); }
.bg-star-gen-51 { left: 49.3115031971111%; top: 34.9085453874864%; rotate: 345.077370037653deg; scale: 1.15834087325626; filter: hue-rotate(282.124217490172deg) brightness(1.0006356265529); }
.bg-star-gen-52 { left: 18.1724455480433%; top: 18.7298312555011%; rotate: 119.564699182371deg; scale: 1.14231996821972; filter: hue-rotate(131.843632577277deg) brightness(1.01551441541301); }
.bg-star-gen-53 { left: 83.9911615076721%; top: 30.0728326332177%; rotate: 160.193394787751deg; scale: 1.19584317724211; filter: hue-rotate(344.114392227737deg) brightness(1.00032059227656); }
.bg-star-gen-54 { left: 82.8980057931645%; top: 41.5188265001266%; rotate: 201.308276792323deg; scale: 1.13644824170409; filter: hue-rotate(273.272351008646deg) brightness(1.00367899467584); }
.bg-star-gen-55 { left: 49.0397657799047%; top: 93.3667383102601%; rotate: 353.394875140945deg; scale: 1.27124984197268; filter: hue-rotate(75.0476593646096deg) brightness(1.1216572516694); }
.bg-star-gen-56 { left: 35.2922285009521%; top: 8.5109034961234%; rotate: 54.0764953192614deg; scale: 1.27571526825463; filter: hue-rotate(126.028124178292deg) brightness(1.00455066444473); }
.bg-star-gen-57 { left: 58.403135964888%; top: 19.9997241916168%; rotate: 156.175665836175deg; scale: 1.15972435445929; filter: hue-rotate(245.58595318212deg) brightness(1.21321624246989); }
.bg-star-gen-58 { left: 73.3081800110955%; top: 52.8878917194251%; rotate: 125.625975646137deg; scale: 1.48695561803727; filter: hue-rotate(247.280134943764deg) brightness(1.04075753763071); }
.bg-star-gen-59 { left: 22.3232879331171%; top: 74.6681662679915%; rotate: 176.711552590245deg; scale: 1.32338594241464; filter: hue-rotate(111.540786673413deg) brightness(1.1200018298884); }
.bg-star-gen-60 { left: 13.3511882268173%; top: 71.4096314036179%; rotate: 273.26118924513deg; scale: 1.22253344158912; filter: hue-rotate(260.0378848664deg) brightness(1.01680086353019); }
.bg-star-gen-61 { left: 15.7133821796836%; top: 13.7367566981607%; rotate: 347.214309817073deg; scale: 1.14833213313097; filter: hue-rotate(266.060591682292deg) brightness(1.06422170875735); }
.bg-star-gen-62 { left: 46.6165905538211%; top: 94.9737168794729%; rotate: 190.637897887379deg; scale: 1.38228740158987; filter: hue-rotate(154.545546862812deg) brightness(1.00799724713024); }
.bg-star-gen-63 { left: 32.6997465991936%; top: 71.4032352508284%; rotate: 119.978465665529deg; scale: 1.39563999103895; filter: hue-rotate(136.921168171264deg) brightness(1.26473814819367); }


.bg-water {
  position: absolute;
  width: 100%;
  height: 35%;
  bottom:0; left:0;
  background-color: rgb(var(--bg-top-rgb));
  overflow: hidden;
}

/* Water Shading Effect */
.bg-water-shade {
  position: absolute;
  top: 0;
  left: 0;
  background-image: url("/assets/img/noise64.jpg");
  background-repeat: repeat;
  /* mix-blend-mode: overlay; */
}

.bg-water-shade-a {
  /* Background Dimensions */
  width: max(480vw, 480vh);
  height: 200vh;

  /* Background Tiling */
  background-size: 130vh 14vh;

  /* Appearence & Animation */
  animation: bg-water-shade-a 20s linear infinite;
  opacity: 0.15;
}

@keyframes bg-water-shade-a {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-130vh, -42vh, 0); }
}

.bg-water-shade-b {
  /* Background Dimensions */
  width: max(320vw, 320vh);
  height: 200vh;
  translate: min(-160vw, -160vh) 0;

  /* Background Tiling */
  background-size: 100vh 10vh;

  /* Appearence & Animation */
  animation: bg-water-shade-b 21.9911486s linear infinite;
  opacity: 0.15;
}

@keyframes bg-water-shade-b {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(100vh, -30vh, 0); }
}

.bg-water-effect {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  mix-blend-mode:overlay;
}

.bg-water-fade {
  position: absolute;
  width: 100%;
  height: 100%;
  top:0; left:0;
  background: linear-gradient(0deg, white 0%, black 100%);
  /* background-color: red; */
  mix-blend-mode: multiply;
}

/* CLOUDS */

.bg-clouds {
  position: absolute;
  width: 100%;
  height: 40%;
  top: 0;
  left: 0;

  mix-blend-mode: screen;
}

.bg-clouds-noise-a {
  position: absolute;
  height: 100%;

  background-image: url("/assets/img/cloudNoise128.jpg");

  background-size: max(300vw, 300vh) max(40vw, 40vh);
  background-size: max(300lvw, 300lvh) max(40lvw, 40lvh);

  width: max(900vw, 900vh);
  width: max(900lvw, 900lvh);

  animation: bg-clouds-noise-a 240s linear infinite;
}

.bg-clouds-noise-a.reflected {
  background-image: url("/assets/img/cloudNoise64.jpg");
}

@keyframes bg-clouds-noise-a {
  0% { transform: translate3d(0, 0, 0); }
  100% { 
    transform: translate3d(min(-300vw, -300vh), 0, 0);
    transform: translate3d(min(-300lvw, -300lvh), 0, 0); 
  }
}

.bg-clouds-noise-b {
  position: absolute;
  height: 100%;

  background-image: url("/assets/img/noise64.jpg");
  background-size: max(75vw, 75vh) max(10vw, 10vh);
  background-size: max(75lvw, 75lvh) max(10lvw, 10lvh);

  width: max(225vw, 225vh);
  width: max(225lvw, 225lvh);

  mix-blend-mode: color-dodge;
  opacity: 0.75;

  animation: bg-clouds-noise-b 25s linear infinite;
}

@keyframes bg-clouds-noise-b {
  0% { 
    transform: translate3d(min(-75vw, -75vh), 0, 0); 
    transform: translate3d(min(-75lvw, -75lvh), 0, 0);
  }
  100% { transform: translate3d(0, 0, 0); }
}

.bg-clouds-fade {
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(var(--bg-top-rgb), 0.65) 100%);
  mix-blend-mode: multiply;
}

/* CSS Snowflakes */
/* Based upon: https://pajasevi.github.io/CSSnowflakes/ */
.bg-snowflake {
  color: rgb(var(--bg-snow-rgb));
  font-size: min(2vh, 2vw);
  font-family: Arial, sans-serif;
  opacity: 0.75;
}
.bg-snowflake:nth-of-type(0) { font-size: min(1.9vh, 1.9vw); }
.bg-snowflake:nth-of-type(1) { font-size: min(1.7vh, 1.7vw); }
.bg-snowflake:nth-of-type(2) { font-size: min(1.7vh, 1.7vw); }
.bg-snowflake:nth-of-type(3) { font-size: min(1.8vh, 1.8vw); }
.bg-snowflake:nth-of-type(4) { font-size: min(1.8vh, 1.8vw); }
.bg-snowflake:nth-of-type(5) { font-size: min(1.6vh, 1.6vw); }
.bg-snowflake:nth-of-type(6) { font-size: min(2vh, 2vw); }
.bg-snowflake:nth-of-type(7) { font-size: min(1.9vh, 1.9vw); }
.bg-snowflake:nth-of-type(8) { font-size: min(1.5vh, 1.5vw); }
.bg-snowflake:nth-of-type(9) { font-size: min(1.8vh, 1.8vw); }
.bg-snowflake:nth-of-type(10) { font-size: min(1.9vh, 1.9vw); }
.bg-snowflake:nth-of-type(11) { font-size: min(1.9vh, 1.9vw); }
.bg-snowflake:nth-of-type(12) { font-size: min(1.6vh, 1.6vw); }
.bg-snowflake:nth-of-type(13) { font-size: min(1.6vh, 1.6vw); }
.bg-snowflake:nth-of-type(14) { font-size: min(1.8vh, 1.8vw); }
.bg-snowflake:nth-of-type(15) { font-size: min(2vh, 2vw); }
.bg-snowflake:nth-of-type(16) { font-size: min(1.5vh, 1.5vw); }
.bg-snowflake:nth-of-type(17) { font-size: min(1.8vh, 1.8vw); }
.bg-snowflake:nth-of-type(18) { font-size: min(1.5vh, 1.5vw); }
.bg-snowflake:nth-of-type(19) { font-size: min(1.7vh, 1.7vw); }
.bg-snowflake:nth-of-type(20) { font-size: min(1.9vh, 1.9vw); }
.bg-snowflake:nth-of-type(21) { font-size: min(1.8vh, 1.8vw); }
.bg-snowflake:nth-of-type(22) { font-size: min(1.8vh, 1.8vw); }
.bg-snowflake:nth-of-type(23) { font-size: min(1.9vh, 1.9vw); }
.bg-snowflake:nth-of-type(24) { font-size: min(2vh, 2vw); }
.bg-snowflake:nth-of-type(25) { font-size: min(1.7vh, 1.7vw); }
.bg-snowflake:nth-of-type(26) { font-size: min(1.6vh, 1.6vw); }
.bg-snowflake:nth-of-type(27) { font-size: min(1.7vh, 1.7vw); }
.bg-snowflake:nth-of-type(28) { font-size: min(1.5vh, 1.5vw); }
.bg-snowflake:nth-of-type(29) { font-size: min(1.6vh, 1.6vw); }
.bg-snowflake:nth-of-type(30) { font-size: min(1.9vh, 1.9vw); }
.bg-snowflake:nth-of-type(31) { font-size: min(1.5vh, 1.5vw); }

.bg-snowflake,.bg-snowflake .inner{animation-iteration-count:infinite;animation-play-state:running}@keyframes snowflakes-fall{0%{transform:translateY(0)}100%{transform:translateY(110vh)}}@keyframes snowflakes-shake{0%,100%{transform:translateX(0)}50%{transform:translateX(80px)}}.bg-snowflake{position:fixed;top:-10%;z-index:9999;-webkit-user-select:none;user-select:none;cursor:default;pointer-events:none;animation-name:snowflakes-shake;animation-duration:3s;animation-timing-function:ease-in-out}.bg-snowflake .inner{animation-duration:10s;animation-name:snowflakes-fall;animation-timing-function:linear}
/* .bg-snowflake:nth-of-type(0){left:1%;animation-delay:0s}.bg-snowflake:nth-of-type(0) .inner{animation-delay:0s}.bg-snowflake:first-of-type{left:10%;animation-delay:1s}.bg-snowflake:first-of-type .inner,.bg-snowflake:nth-of-type(8) .inner{animation-delay:1s}.bg-snowflake:nth-of-type(2){left:20%;animation-delay:.5s}.bg-snowflake:nth-of-type(2) .inner,.bg-snowflake:nth-of-type(6) .inner{animation-delay:6s}.bg-snowflake:nth-of-type(3){left:30%;animation-delay:2s}.bg-snowflake:nth-of-type(11) .inner,.bg-snowflake:nth-of-type(3) .inner{animation-delay:4s}.bg-snowflake:nth-of-type(4){left:40%;animation-delay:2s}.bg-snowflake:nth-of-type(10) .inner,.bg-snowflake:nth-of-type(4) .inner{animation-delay:2s}.bg-snowflake:nth-of-type(5){left:50%;animation-delay:3s}.bg-snowflake:nth-of-type(5) .inner{animation-delay:8s}.bg-snowflake:nth-of-type(6){left:60%;animation-delay:2s}.bg-snowflake:nth-of-type(7){left:70%;animation-delay:1s}.bg-snowflake:nth-of-type(7) .inner{animation-delay:2.5s}.bg-snowflake:nth-of-type(8){left:80%;animation-delay:0s}.bg-snowflake:nth-of-type(9){left:90%;animation-delay:1.5s}.bg-snowflake:nth-of-type(9) .inner{animation-delay:3s}.bg-snowflake:nth-of-type(10){left:25%;animation-delay:0s}.bg-snowflake:nth-of-type(11){left:65%;animation-delay:2.5s} */
.bg-snowflake:nth-of-type(0){left:70.8333333333333%; animation-delay:0s}.bg-snowflake:nth-of-type(0) .inner{animation-delay:-2.5s}
.bg-snowflake:nth-of-type(1){left:95.8333333333333%; animation-delay:-0.416666666666667s}.bg-snowflake:nth-of-type(1) .inner{animation-delay:-7.91666666666667s}
.bg-snowflake:nth-of-type(2){left:50%; animation-delay:-0.833333333333333s}.bg-snowflake:nth-of-type(2) .inner{animation-delay:-5.83333333333333s}
.bg-snowflake:nth-of-type(3){left:8.33333333333333%; animation-delay:-1.25s}.bg-snowflake:nth-of-type(3) .inner{animation-delay:-4.16666666666667s}
.bg-snowflake:nth-of-type(4){left:75%; animation-delay:-1.66666666666667s}.bg-snowflake:nth-of-type(4) .inner{animation-delay:-5.41666666666667s}
.bg-snowflake:nth-of-type(5){left:45.8333333333333%; animation-delay:-2.08333333333333s}.bg-snowflake:nth-of-type(5) .inner{animation-delay:-1.25s}
.bg-snowflake:nth-of-type(6){left:29.1666666666667%; animation-delay:-2.5s}.bg-snowflake:nth-of-type(6) .inner{animation-delay:0s}
.bg-snowflake:nth-of-type(7){left:4.16666666666667%; animation-delay:-2.91666666666667s}.bg-snowflake:nth-of-type(7) .inner{animation-delay:-6.25s}
.bg-snowflake:nth-of-type(8){left:79.1666666666667%; animation-delay:-3.33333333333333s}.bg-snowflake:nth-of-type(8) .inner{animation-delay:-0.833333333333333s}
.bg-snowflake:nth-of-type(9){left:91.6666666666667%; animation-delay:-3.75s}.bg-snowflake:nth-of-type(9) .inner{animation-delay:-2.08333333333333s}
.bg-snowflake:nth-of-type(10){left:37.5%; animation-delay:-4.16666666666667s}.bg-snowflake:nth-of-type(10) .inner{animation-delay:-4.58333333333333s}
.bg-snowflake:nth-of-type(11){left:66.6666666666667%; animation-delay:-4.58333333333333s}.bg-snowflake:nth-of-type(11) .inner{animation-delay:-3.33333333333333s}
.bg-snowflake:nth-of-type(12){left:25%; animation-delay:-5s}.bg-snowflake:nth-of-type(12) .inner{animation-delay:-1.66666666666667s}
.bg-snowflake:nth-of-type(13){left:0%; animation-delay:-5.41666666666667s}.bg-snowflake:nth-of-type(13) .inner{animation-delay:-3.75s}
.bg-snowflake:nth-of-type(14){left:87.5%; animation-delay:-5.83333333333333s}.bg-snowflake:nth-of-type(14) .inner{animation-delay:-9.58333333333333s}
.bg-snowflake:nth-of-type(15){left:54.1666666666667%; animation-delay:-6.25s}.bg-snowflake:nth-of-type(15) .inner{animation-delay:-8.33333333333333s}
.bg-snowflake:nth-of-type(16){left:62.5%; animation-delay:-6.66666666666667s}.bg-snowflake:nth-of-type(16) .inner{animation-delay:-8.75s}
.bg-snowflake:nth-of-type(17){left:41.6666666666667%; animation-delay:-7.08333333333333s}.bg-snowflake:nth-of-type(17) .inner{animation-delay:-9.16666666666667s}
.bg-snowflake:nth-of-type(18){left:16.6666666666667%; animation-delay:-7.5s}.bg-snowflake:nth-of-type(18) .inner{animation-delay:-7.08333333333333s}
.bg-snowflake:nth-of-type(19){left:33.3333333333333%; animation-delay:-7.91666666666667s}.bg-snowflake:nth-of-type(19) .inner{animation-delay:-2.91666666666667s}
.bg-snowflake:nth-of-type(20){left:20.8333333333333%; animation-delay:-8.33333333333333s}.bg-snowflake:nth-of-type(20) .inner{animation-delay:-6.66666666666667s}
.bg-snowflake:nth-of-type(21){left:83.3333333333333%; animation-delay:-8.75s}.bg-snowflake:nth-of-type(21) .inner{animation-delay:-0.416666666666667s}
.bg-snowflake:nth-of-type(22){left:58.3333333333333%; animation-delay:-9.16666666666667s}.bg-snowflake:nth-of-type(22) .inner{animation-delay:-7.5s}
.bg-snowflake:nth-of-type(23){left:12.5%; animation-delay:-9.58333333333333s}.bg-snowflake:nth-of-type(23) .inner{animation-delay:-5s}