@import url('https://fonts.googleapis.com/css?family=Antic');
/*!
 * Bootswatch v3.1.1+1
 * Homepage: http://bootswatch.com
 * Copyright 2012-2014 Thomas Park
 * Licensed under MIT
 * Based on Bootstrap
*/
/*! normalize.css v3.0.0 | MIT License | git.io/normalize */
body, html {
    height: 100%;
}

html {
  font-family: 'Antic', sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  font-size: 48px;
}



::-webkit-scrollbar-track
{
  border-radius: 0px;
  border: 0px solid #073459;
  background-color: white;
}

::-webkit-scrollbar
{
  width: 11px;
}

::-webkit-scrollbar-thumb
{
  border-radius: 6px;
  background-color: #073459;
}

::-webkit-scrollbar-thumb:hover {
  background: #4A5D7C;
}
::-webkit-scrollbar-thumb:active {
  background: #4A5D7C;
}

/*

Main

*/

#app > #main-toolbar-switcher div > button span[class^="cl-organizationPreviewTextContainer"] > span {
  -webkit-text-size-adjust: 100%;
  user-select: none;
  cursor: pointer;
  text-align: left;
  box-sizing: border-box;
  margin: 0px;
  font-size: 0.8125rem;
  font-family: inherit;
  letter-spacing: normal;
  font-weight: 500;
  line-height: 1.38462;
  color: white;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

/* 

OrgDetails

*/


[id^=":r"] div[class^="cl-modalBackdrop"] div[class^="cl-modalContent"] div:not([class^="cl-signIn-root"])  div[class^="cl-rootBox"] div[class^="cl-cardBox"]  {
  box-sizing: border-box;
  -webkit-box-align: stretch;
  align-items: stretch;
  -webkit-box-pack: center;
  justify-content: center;
  flex-flow: row;
  isolation: isolate;
  border-style: solid;
  border-color: rgba(0, 0, 0, 0.07);
  border-radius: 0.75rem;
  color: rgb(33, 33, 38);
  width: 90%;
  max-width: 90%;
  margin: 0 auto;
  position: relative;
  display: grid;
  grid-template-columns: 1fr 6fr;
  height: 90%;
  overflow: hidden;
  border-width: 0px;
  box-shadow: rgba(0, 0, 0, 0.08) 0px 5px 15px 0px, rgba(25, 28, 33, 0.2) 0px 15px 35px -5px, rgba(0, 0, 0, 0.07) 0px 0px 0px 1px;
}
/*

LinearProgress

*/

#testcaseProgress {
  --stripe-color: 'white';
  background-color: #eceff1;
  margin: 0;
  padding: 0;
  margin-right: 2px;
  height: 8px;
  box-shadow: none;
}

/*

#testcaseProgressX .MuiLinearProgress-bar {
  background-image: -webkit-linear-gradient(45deg, var(--stripe-color) 25%, transparent 25%, transparent 50%, var(--stripe-color) 50%, var(--stripe-color) 75%, transparent 75%, transparent);
  background-image: -o-linear-gradient(45deg, var(--stripe-color) 25%, transparent 25%, transparent 50%, var(--stripe-color) 50%, var(--stripe-color) 75%, transparent 75%, transparent);
  background-image: linear-gradient(45deg, var(--stripe-color) 25%, transparent 25%, transparent 50%, var(--stripe-color) 50%, var(--stripe-color) 75%, transparent 75%, transparent);
  background-size: 30px 30px;
  animation: stripe-animation 3s linear infinite;
}

@keyframes stripe-animation {
  from {
    background-position: 30px 0;
  }
  to {
    background-position: 0 0;
  }
}
*/


/* 

Start CSS Sunrise
Source: https://codepen.io/msaetre/pen/JjqPby

*/


#sunsetBody {
  background-color: inherit;
  overflow: hidden;
}

#sun {
	position: absolute;
	top: 0px;
	left: 0%;
	width: 100%;
	height: 50%;
	background-repeat: no-repeat;   
  background: -webkit-radial-gradient(bottom, circle, rgba(242,248,247,1) 0%,rgba(249,249,28,1) 3%,rgba(247,214,46,1) 8%, rgba(248,200,95,1) 12%,rgba(201,165,132,1) 30%,rgba(115,130,133,1) 51%,rgba(46,97,122,1) 85%,rgba(24,75,106,1) 100%);
  background: -moz-radial-gradient(bottom, circle, rgba(242,248,247,1) 0%,rgba(249,249,28,1) 3%,rgba(247,214,46,1) 8%, rgba(248,200,95,1) 12%,rgba(201,165,132,1) 30%,rgba(115,130,133,1) 51%,rgba(46,97,122,1) 85%,rgba(24,75,106,1) 100%);
  background: -ms-radial-gradient(bottom, circle, rgba(242,248,247,1) 0%,rgba(249,249,28,1) 3%,rgba(247,214,46,1) 8%, rgba(248,200,95,1) 12%,rgba(201,165,132,1) 30%,rgba(115,130,133,1) 51%,rgba(46,97,122,1) 85%,rgba(24,75,106,1) 100%);
  
  z-index: 10;
  opacity: 0.5;
  }

#sunDay {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 50%;
  background-repeat: no-repeat;   
  background: -webkit-radial-gradient(bottom, circle, rgba(252,255,251,0.9) 0%,rgba(253,250,219,0.4) 30%,rgba(226,219,197,0.01) 70%, rgba(226,219,197,0.0) 70%,rgba(201,165,132,0) 100%);
  background: -moz-radial-gradient(bottom, circle, rgba(252,255,251,0.9) 0%,rgba(253,250,219,0.4) 30%,rgba(226,219,197,0.01) 70%, rgba(226,219,197,0.0) 70%,rgba(201,165,132,0) 100%);
  background: -ms-radial-gradient(bottom, circle, rgba(252,255,251,0.9) 0%,rgba(253,250,219,0.4) 30%,rgba(226,219,197,0.01) 70%, rgba(226,219,197,0.0) 70%,rgba(201,165,132,0) 100%);
  z-index: 999;
  opacity: 0.5;
}

#moon {
  position: absolute;
  display: inline-block;
  overflow: -moz-hidden-unscrollable;
  background-color: #bbb;
  background-repeat: no-repeat;   
  background: -webkit-radial-gradient(30% 50%, circle, rgba(249,249,250,1) 0.1%, rgba(189,255,254,1) 0.5%, rgba(8,49,78,1) 0.5%, rgba(8,26,56,1) 10%, rgba(4,16,46,1) 40%, rgba(2,8,13,1) 70%);
  background: -moz-radial-gradient(30% 55%, circle, rgba(249,249,250,1) 0.1%, rgba(189,255,254,1) 1%, rgba(8,49,78,1) 1%, rgba(8,26,56,1) 10%, rgba(4,16,46,1) 40%, rgba(2,8,13,1) 70%);
  background: -ms-radial-gradient(30% 55%, circle, rgba(249,249,250,1) 0.1%, rgba(189,255,254,1) 1%, rgba(8,49,78,1) 1%, rgba(8,26,56,1) 10%, rgba(4,16,46,1) 40%, rgba(2,8,13,1) 70%);
  z-index: 1000;
}

#sunSet {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 50%;
  background-repeat: no-repeat;   
    background: -webkit-radial-gradient(bottom, circle, rgba(254,255,255,0.8) 5%,rgba(236,255,0,1) 10%,rgba(253,50,41,1) 25%, rgba(243,0,0,1) 40%,rgba(93,0,0,1) 100%);
    background: -moz-radial-gradient(bottom, circle, rgba(254,255,255,0.8) 5%,rgba(236,255,0,1) 10%,rgba(253,50,41,1) 25%, rgba(243,0,0,1) 40%,rgba(93,0,0,1) 100%);
    background: -ms-radial-gradient(bottom, circle, rgba(254,255,255,0.8) 5%,rgba(236,255,0,1) 10%,rgba(253,50,41,1) 25%, rgba(243,0,0,1) 40%,rgba(93,0,0,1) 100%);   
  z-index: 999;
  opacity: 0.3;
}

#sky {
  cursor: pointer;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 50%;
  z-index: 5; 
   background: -webkit-linear-gradient(bottom, rgba(249,251,240,1) 10%, rgba(215,253,254,1) 20%, rgba(167,222,253,1) 40%, rgba(110,175,255,1) 100%); 
   background: -moz-linear-gradient(bottom, rgba(249,251,240,1) 10%, rgba(215,253,254,1) 20%, rgba(167,222,253,1) 40%, rgba(110,175,255,1) 100%); 
   background: -ms-linear-gradient(bottom, rgba(249,251,240,1) 10%, rgba(215,253,254,1) 20%, rgba(167,222,253,1) 40%, rgba(110,175,255,1) 100%); 
   background: linear-gradient(bottom, rgba(249,251,240,1) 10%, rgba(215,253,254,1) 20%, rgba(167,222,253,1) 40%, rgba(110,175,255,1) 100%); 
   opacity: 0.52;
}

#starsContainer {
  -webkit-perspective: 350;
  -moz-perspective: 350;
  perspective: 350;
  -webkit-perspective-origin: 50% 300%;
  perspective-origin: 50% 300%;
  -moz-perspective-origin: 50% 300%;
  overflow: hidden;
  position: absolute;
  top: 0px;
  left: -50%;
  width: 200%;
  height: 50%;
  z-index: 10000;
  opacity: 0;
  display:none;
}

#stars {
  background-repeat: repeat;
  background: url(stars.jpg);
  position: absolute;
  width: 200%;
  height: 200%;
  left: -50%;
  bottom: 0px;
  opacity: 0.5;
    -webkit-transform: rotateX(-90eg); 
    transform: rotateX(-90deg);
    -moz-transform: rotateX(-90deg);
    -ms-transform: rotateX(-90deg);
}

#mountainRange {
  position: absolute;
  left: 0px;
  width: 100%;
  bottom: 50%;
  display:none;
  z-index: 999;
}

.star {
   position: absolute;
   display: block;
   color: #fff;
   width: 0px;
   height: 0px;
   border-right:  10px solid transparent;
   border-bottom: 7px  solid #fff;
   border-left:   10px solid transparent;
   -moz-transform:    rotate(35deg);
   -webkit-transform: rotate(35deg);
   -ms-transform:     rotate(35deg);
   -o-transform:      rotate(35deg);
   z-index: 999;
   opacity: 0.09;
   display:none;
}

.star:before {
   border-bottom: 8px solid #fff;
   border-left: 3px solid transparent;
   border-right: 3px solid transparent;
   position: absolute;
   height: 0;
   width: 0;
   top: -5px;
   left: -6px;
   display: block;
   content: '';
   -webkit-transform: rotate(-35deg);
   -moz-transform:    rotate(-35deg);
   -ms-transform:     rotate(-35deg);
   -o-transform:      rotate(-35deg);
}
.star:after {
   position: absolute;
   display: block;
   color: #fff;
   top: 0px;
   left: -10px;
   width: 0px;
   height: 0px;
   border-right: 10px solid transparent;
   border-bottom: 7px solid #fff;
   border-left: 10px solid transparent;
   -webkit-transform: rotate(-70deg);
   -moz-transform:    rotate(-70deg);
   -ms-transform:     rotate(-70deg);
   -o-transform:      rotate(-70deg);
   content: '';
}

#mountain {
  border-bottom: 100px solid #000;
  border-right: 100px solid transparent;
  border-width-right: 50%;
  width: 0px;
  height: 0px;
  position: absolute;
  left: 0px;
  bottom: 50%;
  z-index: 999;
}

#horizon {
  cursor: pointer;
  position: absolute;
  top: 0px;
  left: 0;
  width: 100%;
  height: 50%;
  background-repeat: no-repeat;  
  z-index: 5; 
   background: -webkit-linear-gradient(bottom, rgba(212,87,43,0.9) 0%, rgba(246,149,52,0.8) 20%,rgba(24,75,106,0) 100%);
   background: -moz-linear-gradient(bottom, rgba(212,87,43,0.9) 0%, rgba(246,149,52,0.8) 20%,rgba(24,75,106,0) 100%);
   background: -ms-linear-gradient(bottom, rgba(212,87,43,0.9) 0%, rgba(246,149,52,0.8) 20%,rgba(24,75,106,0) 100%);
   background: linear-gradient(bottom, rgba(212,87,43,0.9) 0%, rgba(246,149,52,0.8) 20%,rgba(24,75,106,0) 100%);
   opacity: 0.99;
}

#horizonNight {
  cursor: pointer;
  position: absolute;
  top: 0px;
  left: 0;
  width: 100%;
  height: 50%;
  background-repeat: no-repeat;  
  z-index: 10000; 
  background: -webkit-linear-gradient(bottom, rgb(3, 92, 100) 0%, rgb(4, 40, 103) 10%,rgba(5, 2, 40, 0.852) 30%);
  background: -moz-linear-gradient(bottom, rgba(57,167,255,1) 0%, rgba(13,98,245,1) 20%,rgba(0,11,22,0.1) 60%);
  background: -ms-linear-gradient(bottom, rgba(57,167,255,1) 0%, rgba(13,98,245,1) 20%,rgba(0,11,22,0.1) 60%);
  background: linear-gradient(bottom, rgba(57,167,255,1) 0%, rgba(13,98,245,1) 20%,rgba(0,11,22,0.1) 60%);
  opacity: 0;
}

#darknessOverlaySky {
  background-color: #000;
  opacity: 0;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 50%;
  z-index: 9999;
}

#darknessOverlay {
  cursor: default;
  background-color: #000;
  opacity: 0;
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: 50%;
  z-index: 99;
}

#waterDistance {
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: 50%;
  background-repeat: no-repeat; 
   background: -webkit-linear-gradient(90deg, rgba(0,0,0,0.0) 10%,rgba(0,0,0,0.20) 44%,rgba(0,0,0,0.65) 95%,rgba(0,0,0,0.62) 100%);  
   background: -moz-linear-gradient(90deg, rgba(0,0,0,0.0) 10%,rgba(0,0,0,0.20) 44%,rgba(0,0,0,0.65) 95%,rgba(0,0,0,0.62) 100%); 
   background: -ms-linear-gradient(90deg, rgba(0,0,0,0.0) 10%,rgba(0,0,0,0.20) 44%,rgba(0,0,0,0.65) 95%,rgba(0,0,0,0.62) 100%); 
  z-index: 20;
}

#water {
  overflow: hidden;
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: 50%;
  background-repeat: no-repeat;   
    background: -webkit-linear-gradient(bottom, rgba(0,25,45,1) 0%,rgba(14,71,117,1) 35%, rgba(26,126,174,1) 70%, rgba(62,168,220,1) 100%); 
    background: -moz-linear-gradient(bottom, rgba(0,25,45,1) 0%,rgba(14,71,117,1) 35%, rgba(26,126,174,1) 70%, rgba(62,168,220,1) 100%); 
    background: -ms-linear-gradient(bottom, rgba(0,25,45,1) 0%,rgba(14,71,117,1) 35%, rgba(26,126,174,1) 70%, rgba(62,168,220,1) 100%); 
    background: linear-gradient(bottom, rgba(0,25,45,1) 0%,rgba(14,71,117,1) 35%, rgba(26,126,174,1) 70%, rgba(62,168,220,1) 100%); 

  z-index: 10;
}

#waterReflectionContainer {
  -webkit-perspective: 30;
  perspective: 30;
  -webkit-perspective-origin: 50% -12%;
  perspective-origin: 50% -12%;
  overflow: hidden;
  position: absolute;
  top: 50%;
  left: -3%;
  width: 103%;
  height: 50%;
  z-index: 25;
}

#waterReflectionMiddle {
  position: absolute;
  top: 0px;
  left: -50%;
  width: 200%;
  height: 55%;
  background-repeat: no-repeat;   
   background: -webkit-radial-gradient(50% 0px, rgba(247,177,72,1) 3%,rgba(248,175,65,1) 6%,rgba(207,62,30,0.4) 35%,rgba(176,91,48,0.1) 45%,rgba(141,88,47,0.0) 60%,rgba(116,82,63,0.0) 70%,rgba(44,65,68,0.0) 80%,rgba(7,19,31,0.0) 100%); 
   background: -moz-radial-gradient(50% 0px, rgba(247,177,72,1) 3%,rgba(248,175,65,1) 6%,rgba(207,62,30,0.4) 35%,rgba(176,91,48,0.1) 45%,rgba(141,88,47,0.0) 60%,rgba(116,82,63,0.0) 70%,rgba(44,65,68,0.0) 80%,rgba(7,19,31,0.0) 100%); 
   background: -ms-radial-gradient(50% 0px, rgba(247,177,72,1) 3%,rgba(248,175,65,1) 6%,rgba(207,62,30,0.4) 35%,rgba(176,91,48,0.1) 45%,rgba(141,88,47,0.0) 60%,rgba(116,82,63,0.0) 70%,rgba(44,65,68,0.0) 80%,rgba(7,19,31,0.0) 100%); 
   
  z-index: 999;
  opacity: 0.7;
  -webkit-transform: rotateX(45deg); 
}

#waterReflectionMiddleThin {
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;   
   background: -webkit-linear-gradient(left, rgba(69,70,61,0.0) 3%,rgba(216,100,38,0.10) 32%,rgba(252,176,48,0.35) 35%,rgba(253,215,79,1) 45%,rgba(253,254,225,1) 48%,rgba(253,254,225,1) 52%, rgba(024,194,214,1) 55%, rgba(034,204,234,0.10) 65%, rgba(034,204,234,0.10) 60%, rgba(034,204,234,0.0) 97%); 
   background: -moz-linear-gradient(left, rgba(69,70,61,0.0) 3%,rgba(216,100,38,0.10) 32%,rgba(252,176,48,0.35) 35%,rgba(253,215,79,1) 45%,rgba(253,254,225,1) 48%,rgba(253,254,225,1) 52%, rgba(024,194,214,1) 55%, rgba(034,204,234,0.10) 65%, rgba(034,204,234,0.10) 60%, rgba(034,204,234,0.0) 97%); 
   background: -ms-linear-gradient(left, rgba(69,70,61,0.0) 3%,rgba(216,100,38,0.10) 32%,rgba(252,176,48,0.35) 35%,rgba(253,215,79,1) 45%,rgba(253,254,225,1) 48%,rgba(253,254,225,1) 52%, rgba(024,194,214,1) 55%, rgba(034,204,234,0.10) 65%, rgba(034,204,234,0.10) 60%, rgba(034,204,234,0.0) 97%); 
   background: linear-gradient(left, rgba(69,70,61,0.0) 3%,rgba(216,100,38,0.10) 32%,rgba(252,176,48,0.35) 35%,rgba(253,215,79,1) 45%,rgba(253,254,225,1) 48%,rgba(253,254,225,1) 52%, rgba(024,194,214,1) 55%, rgba(034,204,234,0.10) 65%, rgba(034,204,234,0.10) 60%, rgba(034,204,234,0.0) 97%); 

  z-index: 999;

  -webkit-transform: rotateX(45deg);
  -moz-transform: rotateX(45deg);
  -ms-transform: rotateX(45deg);
  transform: rotateX(45deg);
}

#division {
  height: 5px;
  width: 100%;
  position: absolute;
  top: 50%;
  bottom: 50%;
  background-color: rgba(000,14,24,0.0);
  z-index: 9999;
  cursor: ns-resize;
}

#coor {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 999;
  color: #fff;
}

#oceanRipple {
  background-image: repeating-linear-gradient(175deg,rgba(165,165,165,0.08) 43%, rgba(175,175,175,0.08) 45%, rgba(235,235,235,0.08) 49%, rgba(195,195,195,0.08) 50%, rgba(165,165,165,0.08) 54%);
  opacity: 0.5;
  position: absolute;
  left: 0%;
  bottom: 0px;
  width: 100%;
  height: 50%;
  z-index: 10;
}

/* Override styles for Clerk's SignIn modal */

[id^=":r"] .cl-modalBackdrop { /* Prevent modal backdrop overlay */
  background: inherit !important;
}


/* [id^=":r"] :not([class="cl-modalBackdrop"]) [class^="cl-"]{background: rgba(255, 255, 255, 0) !important;  backdrop-filter: blur(10px); } */
/* MuiTypography-root MuiTypography-h6 MuiDialogTitle-root css-bqu9k8-MuiTypography-root-MuiDialogTitle-root */
/* MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root sunrise-modal css-bhp9pd-MuiPaper-root-MuiCard-root */

[id^=":r"] > .sunrise-modal {  
  border-radius: 15px; /* Rounded corners */    
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); /* Subtle shadow */
  border: 1px solid rgba(255, 255, 255, 0.3); /* Light border for the glass effect */
  position: fixed;
  z-index: 100000 !important;
}

[id^=":r"] [class^="cl-rootBox"] [class^="cl-card"] /* Semi-transparent background */
{
  background: rgba(255, 255, 255, 0.20) !important; 
  backdrop-filter: blur(10px);
  z-index: 10000000 !important;
}

[id^=":r"] [class^="cl-rootBox"] [class^="cl-card cl-signIn-start"]
{
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}

[id^=":r"] [class^="cl-rootBox"] [class^="cl-card"] > .cl-main .cl-socialButtons > button { 
  background: rgba(255,255,255,0.6)
}

[id^=":r"] [class^="cl-rootBox"] [class^="cl-card"] > .cl-main .cl-form > button { 
  background: rgba(13,98,245,0.7)
}

[id^=":r"] [class^="cl-rootBox"] [class^="cl-card"] > .cl-main .cl-form input { 
  background: rgba(255,255,255,0.6)
}

[id^=":r"] [class^="cl-rootBox"] [class^="cl-card"] [class^="cl-footer"]{ 
  margin-top: 0px;
  padding: 6px !important;
  background: inherit;
  /* background: rgba(136, 175, 241, 0.7);  inherit; /* Semi-transparent background */
  backdrop-filter: blur(20px);
}

[id^=":r"] [class^="cl-rootBox"] [class^="cl-card"] [class^="cl-footer"] [class^="cl-footerAction"]{
  background: transparent;
  backdrop-filter: none;
}

[id^=":r"] [class^="cl-rootBox"] [class^="cl-card"] [class^="cl-footer"] [class^="cl-internal"] div > p[class^="cl-internal"] /* hide "development mode" text */
{
  font-size: 0px;
  display: hidden !important;
}

[id^=":r"] [class^="cl-rootBox"] [class^="cl-card"] [class^="cl-footer"] [class^="cl-internal"] div > a[class^="cl-internal"] /* hide "development mode" text */
{
  color: rgba(0,0,0,0.8);
}

/* Adjust the inner content padding */
.cl-sign-in__content {
  padding: 20px !important;
}

/* End CSS Sunrise */

/* 
Start CSS Shooting Stars
Inspiration: https://codepen.io/alphardex/pen/RwrVoeL
https://codepen.io/baarbaracrr/pen/KKovmGb?editors=1111
https://freefrontend.com/css-animated-backgrounds/


.dashboard {  
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: radial-gradient(ellipse at bottom, rgba(101,0,94,1) 0%, #061776 100%);
  animation: gradient 15s ease infinite;
  background-size: 100% 100%;
  background-attachment: fixed;
  overflow: hidden;
}

.frosted {  
  background: 'inherit' !important;
  backdrop-filter: blur(10px) !important;
}

.stars {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 120%;
  transform: rotate(-45deg);
}

.star {
  --star-color: rgb(78, 192, 233) ;
  --star-tail-length: 6em;
  --star-tail-height: 2px;
  --star-width: calc(var(--star-tail-length) / 6);
  --fall-duration: 9s;
  --tail-fade-duration: var(--fall-duration);
  position: absolute;
  top: var(--top-offset);
  left: 0;
  width: var(--star-tail-length);
  height: var(--star-tail-height);
  color: var(--star-color);
  background: linear-gradient(45deg, currentColor, transparent);
  border-radius: 50%;
  filter: drop-shadow(0 0 6px currentColor);
  transform: translate3d(104em, 0, 0);
  animation: fall var(--fall-duration) var(--fall-delay) linear infinite, tail-fade var(--tail-fade-duration) var(--fall-delay) ease-out infinite;
}
@media screen and (max-width: 750px) {
  .star {
    animation: fall var(--fall-duration) var(--fall-delay) linear infinite;
  }
}
.star:nth-child(1) {
  --star-tail-length: 5.86em;
  --top-offset: 32.04vh;
  --fall-duration: 6.287s;
  --fall-delay: 1.394s;
}
.star:nth-child(2) {
  --star-tail-length: 7.02em;
  --top-offset: 40.56vh;
  --fall-duration: 7.79s;
  --fall-delay: 4.091s;
}
.star:nth-child(3) {
  --star-tail-length: 6.08em;
  --top-offset: 37.33vh;
  --fall-duration: 8.538s;
  --fall-delay: 6.372s;
}
.star:nth-child(4) {
  --star-tail-length: 7.03em;
  --top-offset: 11.06vh;
  --fall-duration: 9.227s;
  --fall-delay: 5.925s;
}
.star:nth-child(5) {
  --star-tail-length: 6.98em;
  --top-offset: 24.33vh;
  --fall-duration: 10.651s;
  --fall-delay: 4.434s;
}
.star:nth-child(6) {
  --star-tail-length: 6.73em;
  --top-offset: 75.83vh;
  --fall-duration: 7.182s;
  --fall-delay: 5.679s;
}
.star:nth-child(7) {
  --star-tail-length: 6.35em;
  --top-offset: 30.79vh;
  --fall-duration: 11.788s;
  --fall-delay: 2.536s;
}
.star:nth-child(8) {
  --star-tail-length: 5.79em;
  --top-offset: 17.01vh;
  --fall-duration: 10.411s;
  --fall-delay: 7.835s;
}
.star:nth-child(9) {
  --star-tail-length: 7.09em;
  --top-offset: 58.12vh;
  --fall-duration: 10.949s;
  --fall-delay: 8.102s;
}
.star:nth-child(10) {
  --star-tail-length: 7.21em;
  --top-offset: 49.28vh;
  --fall-duration: 10.28s;
  --fall-delay: 8.262s;
}
.star:nth-child(11) {
  --star-tail-length: 7.23em;
  --top-offset: 60.85vh;
  --fall-duration: 8.275s;
  --fall-delay: 9.528s;
}
.star:nth-child(12) {
  --star-tail-length: 7.3em;
  --top-offset: 35.24vh;
  --fall-duration: 8.801s;
  --fall-delay: 5.265s;
}
.star:nth-child(13) {
  --star-tail-length: 6.06em;
  --top-offset: 6.01vh;
  --fall-duration: 7.692s;
  --fall-delay: 2.185s;
}
.star:nth-child(14) {
  --star-tail-length: 5.08em;
  --top-offset: 86.23vh;
  --fall-duration: 11.005s;
  --fall-delay: 0.907s;
}
.star:nth-child(15) {
  --star-tail-length: 6.26em;
  --top-offset: 64.93vh;
  --fall-duration: 9.46s;
  --fall-delay: 8.93s;
}
.star:nth-child(16) {
  --star-tail-length: 7em;
  --top-offset: 96.21vh;
  --fall-duration: 10.858s;
  --fall-delay: 0.537s;
}
.star:nth-child(17) {
  --star-tail-length: 5.09em;
  --top-offset: 5.48vh;
  --fall-duration: 7.299s;
  --fall-delay: 0.36s;
}
.star:nth-child(18) {
  --star-tail-length: 6.35em;
  --top-offset: 9.73vh;
  --fall-duration: 6.548s;
  --fall-delay: 5.907s;
}
.star:nth-child(19) {
  --star-tail-length: 7.34em;
  --top-offset: 62.91vh;
  --fall-duration: 10.664s;
  --fall-delay: 2.123s;
}
.star:nth-child(20) {
  --star-tail-length: 6.81em;
  --top-offset: 86.4vh;
  --fall-duration: 11.021s;
  --fall-delay: 7.831s;
}
.star:nth-child(21) {
  --star-tail-length: 5.86em;
  --top-offset: 74.62vh;
  --fall-duration: 10.43s;
  --fall-delay: 5.583s;
}
.star:nth-child(22) {
  --star-tail-length: 7.19em;
  --top-offset: 42.78vh;
  --fall-duration: 6.238s;
  --fall-delay: 4.16s;
}
.star:nth-child(23) {
  --star-tail-length: 5.83em;
  --top-offset: 30.54vh;
  --fall-duration: 10.897s;
  --fall-delay: 1.156s;
}
.star:nth-child(24) {
  --star-tail-length: 5.34em;
  --top-offset: 63.81vh;
  --fall-duration: 9.058s;
  --fall-delay: 0.547s;
}
.star:nth-child(25) {
  --star-tail-length: 6.4em;
  --top-offset: 84.3vh;
  --fall-duration: 9.89s;
  --fall-delay: 2.314s;
}
.star:nth-child(26) {
  --star-tail-length: 7.09em;
  --top-offset: 22.07vh;
  --fall-duration: 6.722s;
  --fall-delay: 0.44s;
}
.star:nth-child(27) {
  --star-tail-length: 6.12em;
  --top-offset: 70.53vh;
  --fall-duration: 10.24s;
  --fall-delay: 3.668s;
}
.star:nth-child(28) {
  --star-tail-length: 6.73em;
  --top-offset: 22.89vh;
  --fall-duration: 11.178s;
  --fall-delay: 5.909s;
}
.star:nth-child(29) {
  --star-tail-length: 7.01em;
  --top-offset: 60.07vh;
  --fall-duration: 9.202s;
  --fall-delay: 1.921s;
}
.star:nth-child(30) {
  --star-tail-length: 5.42em;
  --top-offset: 2.75vh;
  --fall-duration: 10.97s;
  --fall-delay: 9.271s;
}
.star:nth-child(31) {
  --star-tail-length: 7.38em;
  --top-offset: 79.09vh;
  --fall-duration: 8.876s;
  --fall-delay: 3.148s;
}
.star:nth-child(32) {
  --star-tail-length: 6.29em;
  --top-offset: 70.15vh;
  --fall-duration: 9.803s;
  --fall-delay: 2.398s;
}
.star:nth-child(33) {
  --star-tail-length: 6.52em;
  --top-offset: 35.38vh;
  --fall-duration: 6.279s;
  --fall-delay: 1.032s;
}
.star:nth-child(34) {
  --star-tail-length: 7.05em;
  --top-offset: 62.55vh;
  --fall-duration: 7.831s;
  --fall-delay: 2.781s;
}
.star:nth-child(35) {
  --star-tail-length: 7.31em;
  --top-offset: 92.74vh;
  --fall-duration: 11.026s;
  --fall-delay: 3.203s;
}
.star:nth-child(36) {
  --star-tail-length: 7.37em;
  --top-offset: 29.57vh;
  --fall-duration: 6.215s;
  --fall-delay: 9.781s;
}
.star:nth-child(37) {
  --star-tail-length: 5.94em;
  --top-offset: 83.29vh;
  --fall-duration: 7.638s;
  --fall-delay: 5.94s;
}
.star:nth-child(38) {
  --star-tail-length: 5.04em;
  --top-offset: 79.97vh;
  --fall-duration: 10.609s;
  --fall-delay: 3.154s;
}
.star:nth-child(39) {
  --star-tail-length: 6.9em;
  --top-offset: 1.89vh;
  --fall-duration: 6.365s;
  --fall-delay: 2.154s;
}
.star:nth-child(40) {
  --star-tail-length: 6.56em;
  --top-offset: 33.29vh;
  --fall-duration: 9.921s;
  --fall-delay: 1.974s;
}
.star:nth-child(41) {
  --star-tail-length: 7.08em;
  --top-offset: 89.01vh;
  --fall-duration: 10.705s;
  --fall-delay: 9.569s;
}
.star:nth-child(42) {
  --star-tail-length: 7.39em;
  --top-offset: 75.58vh;
  --fall-duration: 8.528s;
  --fall-delay: 0.935s;
}
.star:nth-child(43) {
  --star-tail-length: 5.17em;
  --top-offset: 32.14vh;
  --fall-duration: 8.943s;
  --fall-delay: 1.251s;
}
.star:nth-child(44) {
  --star-tail-length: 6.36em;
  --top-offset: 49.8vh;
  --fall-duration: 6.243s;
  --fall-delay: 8.474s;
}
.star:nth-child(45) {
  --star-tail-length: 7.48em;
  --top-offset: 71.18vh;
  --fall-duration: 10.986s;
  --fall-delay: 3.114s;
}
.star:nth-child(46) {
  --star-tail-length: 6.53em;
  --top-offset: 13.91vh;
  --fall-duration: 9.951s;
  --fall-delay: 3.958s;
}
.star:nth-child(47) {
  --star-tail-length: 6.83em;
  --top-offset: 32.11vh;
  --fall-duration: 8.924s;
  --fall-delay: 4.085s;
}
.star:nth-child(48) {
  --star-tail-length: 5.45em;
  --top-offset: 59.28vh;
  --fall-duration: 9.663s;
  --fall-delay: 8.624s;
}
.star:nth-child(49) {
  --star-tail-length: 6.89em;
  --top-offset: 46.06vh;
  --fall-duration: 10.196s;
  --fall-delay: 4.871s;
}
.star:nth-child(50) {
  --star-tail-length: 6.78em;
  --top-offset: 75.96vh;
  --fall-duration: 6.63s;
  --fall-delay: 4.6s;
}
.star::before, .star::after {
  position: absolute;
  content: "";
  top: 0;
  left: calc(var(--star-width) / -2);
  width: var(--star-width);
  height: 100%;
  background: linear-gradient(45deg, transparent, currentColor, transparent);
  border-radius: inherit;
  animation: blink 2s linear infinite;
}
.star::before {
  transform: rotate(45deg);
}
.star::after {
  transform: rotate(-45deg);
}

@keyframes fall {
  to {
    transform: translate3d(-30em, 0, 0);
  }
}
@keyframes tail-fade {
  0%, 50% {
    width: var(--star-tail-length);
    opacity: 1;
  }
  70%, 80% {
    width: 0;
    opacity: 0.4;
  }
  100% {
    width: 0;
    opacity: 0;
  }
}
@keyframes blink {
  50% {
    opacity: 0.6;
  }
}

*/