/* README : */
/* WIP, svp trust the process */
    @import "compass";


    /* n is number of stars required */
    @function multiple-box-shadow ($n) 
        $value: '#{random(2000)}px #{random(2000)}px #FFF
        @for $i from 2 through $n
            $value: '#{$value} , #{random(2000)}px #{random(2000)}px #FFF

        @return unquote($value)

    $shadows-small:  multiple-box-shadow(700)
    $shadows-medium: multiple-box-shadow(200)
    $shadows-big:    multiple-box-shadow(100)

    html
        height: 100%
        background: radial-gradient(ellipse at bottom, #1B2735 0%, #090A0F 100%)
        overflow: hidden
        
    #stars
        width: 1px
        height: 1px
        background: transparent
        box-shadow: $shadows-small
        animation			: animStar 50s linear infinite
        
        &:after
            content: " "
            position: absolute
            top: 2000px
            width: 1px
            height: 1px
            background: transparent
            box-shadow: $shadows-small
        
    #stars2
        width: 2px
        height: 2px
        background: transparent
        box-shadow: $shadows-medium
        animation			: animStar 100s linear infinite
        
        &:after
            content: " "
            position: absolute
            top: 2000px
            width: 2px
            height: 2px
            background: transparent
            box-shadow: $shadows-medium
        
    #stars3
        width: 3px
        height: 3px
        background: transparent
        box-shadow: $shadows-big
        animation			: animStar 150s linear infinite
        
        &:after
            content: " "
            position: absolute
            top: 2000px
            width: 3px
            height: 3px
            background: transparent
            box-shadow: $shadows-big

    #title
        position: absolute
        top: 50%
        left: 0
        right: 0
        
        color: #FFF
        text-align: center
        font-family: 'lato',sans-serif
        font-weight: 300
        font-size: 50px
        letter-spacing: 10px
        
        margin-top: -60px
        padding-left: 10px
    
        span
            background: -webkit-linear-gradient(white, #38495a)
            -webkit-background-clip: text
            -webkit-text-fill-color: transparent
        
    @keyframes animStar
        from	
            transform: translateY(0px)
        to		
            transform: translateY(-2000px)