
.starbox {
    position: absolute;
    container-type: size;
    top: -50px;
    width: 60px;
    height: 3000px;
    z-index: -1;
    /* border: 1px solid black; */
}

#colorbar1 {
    position: fixed;
    width: 100%;
    height: 12px;
    top: 50px;
    background-color:  rgba(23, 23, 23, 1);
}

#colorbar2 {
    width: 100%;
    height: 12px;
    bottom: 50px;
    background-color:  rgba(23, 23, 23, 1);
}

.star {
    position: relative;
    
    display: inline-block;
    width: 0;
    height: 0;
    
    margin-left: .9em;
    margin-right: .9em;
    margin-bottom: 1.2em;
    
    border-right:  .3em solid transparent;
    border-bottom: .7em  solid rgb(148, 181, 239);
    border-left:   .3em solid transparent;
  
    /* Controlls the size of the stars. */
    font-size: 12px;

    animation-name: falling;
    animation-duration: 60s;       
    animation-timing-function: linear;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    
    &:before, &:after {
      content: '';
      
      display: block;
      width: 0;
      height: 0;
      
      position: absolute;
      top: .6em;
      left: -1em;
    
      border-right:  1em solid transparent;
      border-bottom: .7em  solid rgb(148, 181, 239);
      border-left:   1em solid transparent;
    
      transform: rotate(-35deg);
    }
    
    &:after {  
      transform: rotate(35deg);
    } 
}

@keyframes falling {
	0% {transform: translatey(-20px);
	}
    100% {transform: translatey(100cqh);
	}
}

#shine {
    animation-name: barshine;
    animation-duration: 5s;
    animation-direction: normal;
    animation-fill-mode: forwards;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    left: -500px;
    top: 0px;
    height: 12px;
    width: 500px;
    position: absolute;
    background: linear-gradient(to left, rgba(255,255,255,0) 0%, rgba(25, 52, 67, 0.35) 50%, rgba(255,255,255,0) 100%); /* FF3.6+ */
    z-index: 3;
}

@keyframes barshine {
    0% { left: -500px;}    
    30% { left: -500px;}  
    100% {left: 100%;}
}

 