问:
What is wrong with my MultiPartFormData Encoder? Swift 4
Hello) This is my MultiPartFormDataEncoder:

            let boundary =  "Boundary-\(UUID().uuidString)"

            var body = ""

            if let parameters = parameters {
                for (key, value) in parameters {
                    body += "--\(boundary)\r\n"
                    body += "Content-Disposition:form-data; name=\"\(String(describing: key))\"\r\n\r\n"
                    body += "\(String(describing: value))\r\n"
                }
            }

            if let files = files {
                for file in files {
                    body += "--\(boundary)\r\n"
                    body += "Content-Disposition: form-data; name=\"\(file.key)\"; filename=\"\(file.name)\"\r\n"
                    body += "Content-Type: \(file.type)\r\n\r\n"
                    body += "\(file.data)\r\n"
                }
            }

            body += "--".appending(boundary.appending("--"))

            urlRequest.httpBody = body.data(using: .utf8)

            if urlRequest.value(forHTTPHeaderField: "Content-Type") == nil {
                urlRequest.setValue("multipart/form-data; charset=utf8; boundary=\(boundary)", forHTTPHeaderField: "Content-Type")
            }
            urlRequest.timeoutInterval = 60
            urlRequest.httpShouldHandleCookies = false
```

After sending request to server I getting "Bad Request". When I try to do that in postman request is success.
All parameters and files have correct names, types and keys. I checked a for sure.
So problem is not in BackEnd because it get my request and see correct body but it breaks after getting.

I think it is something wrong with headers.

So, what do you think?

Edit:
After correct response parsing I see next message:

{"image":["Upload a valid image. The file you uploaded was either not an image or a corrupted image."]}

答:
So, I found problem and solution.

Error was in this line:

body += "\(file.data)\r\n"
```

<p>As says @Larme, we can't put data and string in one line.</p>

<p>Better <strong>solution</strong> will be add data and string separately, for example:</p>

<pre class="lang-swift prettyprint-override"><code>// old body += "\(file.data)\r\n"

// new:
var body: Data = Data()

body.append(file.data)
body.append("\r\n".data(using: .utf8)!)
</code>```

In my case MultiPartFormDataParameterEncoder will look like:

func encode(urlRequest: inout URLRequest, with parameters: Parameters?, files: Files?) throws {
        do {
            let boundary =  "Boundary-\(UUID().uuidString)"

            var body: Data = Data()

            if let parameters = parameters {
                for (key, value) in parameters {
                    try body.appendString("--\(boundary)\r\n")
                    try body.appendString("Content-Disposition:form-data; name=\"\(String(describing: key))\"\r\n\r\n")
                    try body.appendString("\(String(describing: value))\r\n")
                }
            }

            if let files = files {
                for file in files {
                    try body.appendString("--\(boundary)\r\n")
                    try body.appendString("Content-Disposition: form-data; name=\"\(file.key)\"; filename=\"\(file.name)\"\r\n")
                    try body.appendString("Content-Type: \"\(file.type)\"\r\n\r\n")
                    body.append(file.data)
                    try body.appendString("\r\n")
                }
            }

            try body.appendString("--".appending(boundary.appending("--")))

            urlRequest.httpBody = body

            if urlRequest.value(forHTTPHeaderField: "Content-Type") == nil {
                urlRequest.addValue("multipart/form-data; boundary=\(boundary)", forHTTPHeaderField: "Content-Type")
            }
        } catch {
            throw NetworkError.encodingMultiPartFormDataFailed
        }
    }

public enum NetworkError: String, Error {
    case encodingMultiPartFormDataFailed = "Parameter encoding in MultiPartFormData failed ..."
}
```

<p>Also have to add Files and Parameters models:</p>

<pre class="lang-swift prettyprint-override"><code>public typealias Parameters = [String:Any]
public typealias Files = [FileModel]

public struct FileModel {
    let name: String
    let key: String
    let data: Data
    let type: String

    init(name: String, type: FileType, data: Data) {
        self.name = name
        self.key = type.key // will be image or audio
        self.data = data
        self.type = type.rawValue // will be "audio/mp3" or "image/jpeg"
    }
}

extension FileModel {
    enum FileType: String {
        case image = "image/jpeg"
        case audio = "audio/mp3"

        var key: String {
            return String(describing: self)
        }
    }
}

// USAGE EXAMPLE
FileModel(name: name, type: .image, data: imageJpegData)
</code>```

Also don't forgot Data extension to make more safety:

extension Data {
    private enum DataError: String, Error {
        case encodingStringToDataFailed = "Encoding String to Data failed ..."
    }

    mutating func appendString(_ string: String) throws {
        guard let data: Data = string.data(using: String.Encoding.utf8, allowLossyConversion: false) else {
            throw DataError.encodingStringToDataFailed
        }
        append(data)
    }
}
```

Thanks ^_^

Body:
Hello) This is my MultiPartFormDataEncoder:

            let boundary =  "Boundary-\(UUID().uuidString)"

            var body = ""

            if let parameters = parameters {
                for (key, value) in parameters {
                    body += "--\(boundary)\r\n"
                    body += "Content-Disposition:form-data; name=\"\(String(describing: key))\"\r\n\r\n"
                    body += "\(String(describing: value))\r\n"
                }
            }

            if let files = files {
                for file in files {
                    body += "--\(boundary)\r\n"
                    body += "Content-Disposition: form-data; name=\"\(file.key)\"; filename=\"\(file.name)\"\r\n"
                    body += "Content-Type: \(file.type)\r\n\r\n"
                    body += "\(file.data)\r\n"
                }
            }

            body += "--".appending(boundary.appending("--"))

            urlRequest.httpBody = body.data(using: .utf8)

            if urlRequest.value(forHTTPHeaderField: "Content-Type") == nil {
                urlRequest.setValue("multipart/form-data; charset=utf8; boundary=\(boundary)", forHTTPHeaderField: "Content-Type")
            }
            urlRequest.timeoutInterval = 60
            urlRequest.httpShouldHandleCookies = false

After sending request to server I getting "Bad Request". When I try to do that in postman request is success.
All parameters and files have correct names, types and keys. I checked a for sure.
So problem is not in BackEnd because it get my request and see correct body but it breaks after getting.

I think it is something wrong with headers.

So, what do you think?

Edit:
After correct response parsing I see next message:

{"image":["Upload a valid image. The file you uploaded was either not an image or a corrupted image."]}

Body:
So, I found problem and solution.

Error was in this line:

body += "\(file.data)\r\n"

As says @Larme, we can't put data and string in one line.

Better solution will be add data and string separately, for example:

// old body += "\(file.data)\r\n"

// new:
var body: Data = Data()

body.append(file.data)
body.append("\r\n".data(using: .utf8)!)

In my case MultiPartFormDataParameterEncoder will look like:

func encode(urlRequest: inout URLRequest, with parameters: Parameters?, files: Files?) throws {
        do {
            let boundary =  "Boundary-\(UUID().uuidString)"

            var body: Data = Data()

            if let parameters = parameters {
                for (key, value) in parameters {
                    try body.appendString("--\(boundary)\r\n")
                    try body.appendString("Content-Disposition:form-data; name=\"\(String(describing: key))\"\r\n\r\n")
                    try body.appendString("\(String(describing: value))\r\n")
                }
            }

            if let files = files {
                for file in files {
                    try body.appendString("--\(boundary)\r\n")
                    try body.appendString("Content-Disposition: form-data; name=\"\(file.key)\"; filename=\"\(file.name)\"\r\n")
                    try body.appendString("Content-Type: \"\(file.type)\"\r\n\r\n")
                    body.append(file.data)
                    try body.appendString("\r\n")
                }
            }

            try body.appendString("--".appending(boundary.appending("--")))

            urlRequest.httpBody = body

            if urlRequest.value(forHTTPHeaderField: "Content-Type") == nil {
                urlRequest.addValue("multipart/form-data; boundary=\(boundary)", forHTTPHeaderField: "Content-Type")
            }
        } catch {
            throw NetworkError.encodingMultiPartFormDataFailed
        }
    }

public enum NetworkError: String, Error {
    case encodingMultiPartFormDataFailed = "Parameter encoding in MultiPartFormData failed ..."
}

Also have to add Files and Parameters models:

public typealias Parameters = [String:Any]
public typealias Files = [FileModel]

public struct FileModel {
    let name: String
    let key: String
    let data: Data
    let type: String

    init(name: String, type: FileType, data: Data) {
        self.name = name
        self.key = type.key // will be image or audio
        self.data = data
        self.type = type.rawValue // will be "audio/mp3" or "image/jpeg"
    }
}

extension FileModel {
    enum FileType: String {
        case image = "image/jpeg"
        case audio = "audio/mp3"

        var key: String {
            return String(describing: self)
        }
    }
}

// USAGE EXAMPLE
FileModel(name: name, type: .image, data: imageJpegData)

Also don't forgot Data extension to make more safety:

extension Data {
    private enum DataError: String, Error {
        case encodingStringToDataFailed = "Encoding String to Data failed ..."
    }

    mutating func appendString(_ string: String) throws {
        guard let data: Data = string.data(using: String.Encoding.utf8, allowLossyConversion: false) else {
            throw DataError.encodingStringToDataFailed
        }
        append(data)
    }
}

Thanks ^_^


来源: stackexchange

问:
Spring Data Geode register interest is not receiving events
Related to this question I've setup a Spring Data Geode Client application with

@EnableClusterDefinedRegions(clientRegionShortcut=ClientRegionShortcut.CACHING_PROXY)

and by ensuring all classes are autowired then using the @Resource the Geode server regions are setup and instantiated on the client.

```<code>@Resource(name = "request")
private Region<String, Request> request;
</code>```

I can put and get on the regions like this. However when I try and register interest in a key on the server the updates from other clients to the server are received by the spring boot client. The register interest code:

```<code>request.registerInterestForAllKeys();
request.getAttributesMutator().addCacheListener(new myListener());
</code>```

The logs show the interest is added to the region:

```<code>DEBUG [main] org.apach.geode.inter.cache.GemFireCacheImpl 4388 registerInterestStarted: registerInterestsStarted: new count = 1
TRACE [main] org.apach.geode.inter.InternalDataSerializer 2194 basicWriteObject: basicWriteObject: KEYS_VALUES
TRACE [main] org.apach.geode.inter.InternalDataSerializer 1535 writeDSFID: writeDSFID 37 class=class org.apache.geode.internal.cache.tier.sockets.InterestResultPolicyImpl
TRACE [main] org.apach.geode.cache.clien.inter.OpExecutorImpl 568 executeOnQueuesAndReturnPrimaryResult: sending org.apache.geode.cache.client.internal.RegisterInterestOp$RegisterInterestOpImpl@5e1a7d3 to backups: []
TRACE [main] org.apach.geode.cache.clien.inter.OpExecutorImpl 584 executeOnQueuesAndReturnPrimaryResult: sending org.apache.geode.cache.client.internal.RegisterInterestOp$RegisterInterestOpImpl@5e1a7d3 to primary: Connection[1.2.3.4:40404]@613231852
TRACE [main] org.apach.geode.cache.clien.inter.AbstractOp 85 attemptSend: Sending op=RegisterInterestOp$RegisterInterestOpImpl using Connection[1.2.3.4:40404]@613231852
</code>```

When another client adds or changes a value on the server region that event is not getting to the spring boot client. The CacheListenerAdapter with usual afterCreate and afterUpdate overrides is not called.

The use case is to register and unregister to lots of different keys on the fly.

If I use the spring boot app itself to put to the local region, then the event handler is being called. So it's not an issue with the spring boot code this is a connection pool & server registration issue of some kind.

答:
The problem was my application.properties had

spring.data.gemfire.cache.client.durable-client-id=myListener

For some reason a durable client cannot run a CacheListenerAdapter

ContentLicense: CC BY-SA 4.0

Body:
Related to this question I've setup a Spring Data Geode Client application with

@EnableClusterDefinedRegions(clientRegionShortcut=ClientRegionShortcut.CACHING_PROXY)

and by ensuring all classes are autowired then using the @Resource the Geode server regions are setup and instantiated on the client.

@Resource(name = "request")
private Region<String, Request> request;

I can put and get on the regions like this. However when I try and register interest in a key on the server the updates from other clients to the server are received by the spring boot client. The register interest code:

request.registerInterestForAllKeys();
request.getAttributesMutator().addCacheListener(new myListener());

The logs show the interest is added to the region:

DEBUG [main] org.apach.geode.inter.cache.GemFireCacheImpl 4388 registerInterestStarted: registerInterestsStarted: new count = 1
TRACE [main] org.apach.geode.inter.InternalDataSerializer 2194 basicWriteObject: basicWriteObject: KEYS_VALUES
TRACE [main] org.apach.geode.inter.InternalDataSerializer 1535 writeDSFID: writeDSFID 37 class=class org.apache.geode.internal.cache.tier.sockets.InterestResultPolicyImpl
TRACE [main] org.apach.geode.cache.clien.inter.OpExecutorImpl 568 executeOnQueuesAndReturnPrimaryResult: sending org.apache.geode.cache.client.internal.RegisterInterestOp$RegisterInterestOpImpl@5e1a7d3 to backups: []
TRACE [main] org.apach.geode.cache.clien.inter.OpExecutorImpl 584 executeOnQueuesAndReturnPrimaryResult: sending org.apache.geode.cache.client.internal.RegisterInterestOp$RegisterInterestOpImpl@5e1a7d3 to primary: Connection[1.2.3.4:40404]@613231852
TRACE [main] org.apach.geode.cache.clien.inter.AbstractOp 85 attemptSend: Sending op=RegisterInterestOp$RegisterInterestOpImpl using Connection[1.2.3.4:40404]@613231852

When another client adds or changes a value on the server region that event is not getting to the spring boot client. The CacheListenerAdapter with usual afterCreate and afterUpdate overrides is not called.

The use case is to register and unregister to lots of different keys on the fly.

If I use the spring boot app itself to put to the local region, then the event handler is being called. So it's not an issue with the spring boot code this is a connection pool & server registration issue of some kind.


问:
Laravel get collection orderBy relation
I have a table chart

```<code>-compet_id
-team_id
-score
</code>```

table rencontre

```<code>-rencontre_id
-team_1_id
-team_2_id
-compet_id
</code>```

Rencontre model relation :

```<code>public function compet(){

        return $this->belongsTo('App\Compet' , 'compet_id');

    }
</code>```

here the begin of my query :

```<code>public function getRencontresByChart(){

       $rencontres = Rencontres::all();

}
</code>```

I need to get a collection of rencontres orderBy the best teams score.

I'm not sure how to achieve that with this model design

答:
There is several ways to achive. Eg.

```<code>$rencontres = Rencontres::orderBy('score')->get();
</code>```

or using sortBy:

```<code>$rencontres = Rencontres::all()->sortBy('score');
$rencontres = Rencontres::all()->sortByDesc('score');
</code>```

EDIT: maybe I don't have the whole picture by looking the original post. If you want to order by an aux model, you can do this:

```<code>$rencontres = Rencontres::with('compet')->get()->sortBy('compet.score');
</code>```

Title: Laravel get collection orderBy relation

Body:
I have a table chart

-compet_id
-team_id
-score

table rencontre

-rencontre_id
-team_1_id
-team_2_id
-compet_id

Rencontre model relation :

public function compet(){

        return $this->belongsTo('App\Compet' , 'compet_id');

    }

here the begin of my query :

public function getRencontresByChart(){

       $rencontres = Rencontres::all();

}

I need to get a collection of rencontres orderBy the best teams score.

I'm not sure how to achieve that with this model design

Body:
There is several ways to achive. Eg.

$rencontres = Rencontres::orderBy('score')->get();

or using sortBy:

$rencontres = Rencontres::all()->sortBy('score');
$rencontres = Rencontres::all()->sortByDesc('score');

EDIT: maybe I don't have the whole picture by looking the original post. If you want to order by an aux model, you can do this:

$rencontres = Rencontres::with('compet')->get()->sortBy('compet.score');


问:
Can we pass class name as parameter?
```<code>private void passClassName(String className) {
    JSONArray jsonArray = <ReadSomeJsonFile>;
    String dataSet = jsonArray.toString();
    List<className> testData = new Gson().fromJson(dataSet, new TypeToken<List<className>>() {}.getType());
}
</code>```

<p>Here I want to pass ClassName as parameter. But as that class will not be accessible with parameter. So it will not work. I already tried similar solutions. Nothing worked for me till now. </p>

答:
You cannot make this dynamic, with class given at runtime. For this to work, the compiler must be able to create an anonymous class for new TypeToken<List<MyClass>>() {}. That cannot be done at runtime.

Well, it can, but now you're into dynamic bytecode creation at runtime, so let's skip that super complex option. Ask another question if you want to explore that route.

Which means that the caller must create the TypeToken anonymous class, e.g. like this:

```<code>private <E> List<E> readJsonList(TypeToken<List<E>> typeToken) {
    JSONArray jsonArray = <ReadSomeJsonFile>;
    String dataSet = jsonArray.toString();
    List<E> testData = new Gson().fromJson(dataSet, typeToken.getType());
    return testData;
}
</code>```

Caller

```<code>List<Integer> list = readJsonList(new TypeToken<List<Integer>>() {});
</code>```

Title: Can we pass class name as parameter?

Body:
private void passClassName(String className) {
    JSONArray jsonArray = <ReadSomeJsonFile>;
    String dataSet = jsonArray.toString();
    List<className> testData = new Gson().fromJson(dataSet, new TypeToken<List<className>>() {}.getType());
}

Here I want to pass ClassName as parameter. But as that class will not be accessible with parameter. So it will not work. I already tried similar solutions. Nothing worked for me till now.

Body:
You cannot make this dynamic, with class given at runtime. For this to work, the compiler must be able to create an anonymous class for new TypeToken<List<MyClass>>() {}. That cannot be done at runtime.

Well, it can, but now you're into dynamic bytecode creation at runtime, so let's skip that super complex option. Ask another question if you want to explore that route.

Which means that the caller must create the TypeToken anonymous class, e.g. like this:

private <E> List<E> readJsonList(TypeToken<List<E>> typeToken) {
    JSONArray jsonArray = <ReadSomeJsonFile>;
    String dataSet = jsonArray.toString();
    List<E> testData = new Gson().fromJson(dataSet, typeToken.getType());
    return testData;
}

Caller

List<Integer> list = readJsonList(new TypeToken<List<Integer>>() {});


问:
How to view data "$content" in HTML using JS
I want to display the data coming to the "table" in HTML, but I can't understand what's wrong</p>

```<code>function renderUI(table) {
    $content = '<div><table>'

    table.forEach((row, index) => {
        $content = `<tr>
            <td>${index}</td>
            ${ row.forEach((innerRow, index2) => {
                return `<td>${innerRow.time}</td> <td>${innerRow.route}</td>`
            }) }
        </tr>`
    });

    $content += '</table></div>'

    $('#app').append($content);
</code>```

答:
Problem 1

```<code>$content = `<tr>
</code>```

That's an assignment, not an append. You got it right on the penultimate line. You need to change it in the middle too.

Problem 2

```<code>${ row.forEach((innerRow, index2) => {  … return
</code>```

Returning from forEach doesn't do anything. forEach always returns undefined.

You need to use map instead. That will return an array which you can call .join("\n") on to give you a string containing all the chunks of HTML you generate

Body:
I want to display the data coming to the "table" in HTML, but I can't understand what's wrong

function renderUI(table) {
    $content = '

'

    table.forEach((row, index) => {
        $content = `

            ${index}
            ${ row.forEach((innerRow, index2) => {
                return `<td>${innerRow.time}</td> <td>${innerRow.route}</td>`
            }) }

`
    });

    $content += '

'

    $('#app').append($content);

Body:
Problem 1

$content = `<tr>

That's an assignment, not an append. You got it right on the penultimate line. You need to change it in the middle too.

Problem 2

${ row.forEach((innerRow, index2) => {  … return

Returning from forEach doesn't do anything. forEach always returns undefined.

You need to use map instead. That will return an array which you can call .join("\n") on to give you a string containing all the chunks of HTML you generate


问:
Adding moving elements in the background using CSS
I am new in CSS and trying to add interesting elements to my template. I found such an solution. I'm trying to add them to my background photo. But I still can't adjust it properly. No floating item is displayed.

The effect is trying to add only to the main section that is extended to the entire screen, it looks something like this:

 #stars {
  width: 1px;
  height: 1px;
  background: transparent;
  box-shadow: 1971px 456px #FFF , 1577px 1437px #FFF , 476px 393px #FFF , 803px 1228px #FFF , 7px 1062px #FFF , 1700px 1956px #FFF , 338px 1912px #FFF , 1336px 88px #FFF , 1015px 1865px #FFF , 592px 1019px #FFF , 1311px 1452px #FFF , 555px 1351px #FFF , 860px 661px #FFF , 588px 1593px #FFF , 618px 1711px #FFF , 226px 1186px #FFF , 1719px 1774px #FFF , 1382px 346px #FFF , 399px 738px #FFF , 1746px 1062px #FFF , 204px 895px #FFF , 1008px 217px #FFF , 911px 1350px #FFF , 962px 788px #FFF , 660px 85px #FFF , 1682px 911px #FFF , 1707px 1875px #FFF , 397px 751px #FFF , 1384px 551px #FFF , 764px 77px #FFF , 1133px 16px #FFF , 1305px 630px #FFF , 1366px 1973px #FFF , 1212px 754px #FFF , 1265px 1663px #FFF , 478px 416px #FFF , 540px 549px #FFF , 691px 1775px #FFF , 478px 11px #FFF , 748px 971px #FFF , 1264px 139px #FFF , 1875px 1032px #FFF , 406px 1696px #FFF , 1109px 107px #FFF , 846px 1611px #FFF , 849px 679px #FFF , 1322px 1004px #FFF , 1543px 652px #FFF , 1830px 1347px #FFF , 688px 1066px #FFF , 1140px 1691px #FFF , 471px 401px #FFF , 460px 1665px #FFF , 1560px 32px #FFF , 1413px 1384px #FFF , 1487px 1900px #FFF , 1154px 265px #FFF , 182px 199px #FFF , 765px 82px #FFF , 915px 1414px #FFF , 1812px 1724px #FFF , 113px 58px #FFF , 1312px 1790px #FFF , 714px 475px #FFF , 1766px 163px #FFF , 1312px 1149px #FFF , 828px 1303px #FFF , 1398px 573px #FFF , 1595px 867px #FFF , 1193px 1775px #FFF , 397px 815px #FFF , 1786px 895px #FFF , 1831px 444px #FFF , 980px 768px #FFF , 1456px 159px #FFF , 1240px 968px #FFF , 1894px 384px #FFF , 410px 1472px #FFF , 384px 659px #FFF , 569px 279px #FFF , 1339px 85px #FFF , 570px 1521px #FFF , 790px 1537px #FFF , 210px 334px #FFF , 1067px 1533px #FFF , 850px 1549px #FFF , 139px 923px #FFF , 1590px 1122px #FFF , 1603px 1528px #FFF , 348px 1030px #FFF , 360px 185px #FFF , 1405px 1176px #FFF , 299px 908px #FFF , 32px 595px #FFF , 1041px 1102px #FFF , 1674px 866px #FFF , 244px 1386px #FFF , 600px 1288px #FFF , 739px 1653px #FFF , 500px 953px #FFF , 1050px 843px #FFF , 584px 1005px #FFF , 1883px 1018px #FFF , 1414px 1979px #FFF , 1316px 229px #FFF , 1358px 1862px #FFF , 1645px 452px #FFF , 554px 1108px #FFF , 1217px 1134px #FFF , 1473px 1265px #FFF , 902px 130px #FFF , 595px 79px #FFF , 1023px 1240px #FFF , 294px 203px #FFF , 620px 1414px #FFF , 213px 460px #FFF , 1999px 1780px #FFF , 1654px 1829px #FFF , 1630px 1636px #FFF , 143px 1117px #FFF , 341px 450px #FFF , 856px 544px #FFF , 1598px 1550px #FFF , 1897px 1093px #FFF , 1428px 542px #FFF , 195px 1328px #FFF , 1169px 1743px #FFF , 879px 618px #FFF , 660px 1447px #FFF , 1700px 479px #FFF , 1436px 1990px #FFF , 1286px 1496px #FFF , 879px 1114px #FFF , 291px 1942px #FFF , 569px 1302px #FFF , 762px 1432px #FFF , 1547px 1432px #FFF , 366px 1288px #FFF , 82px 1840px #FFF , 17px 1413px #FFF , 667px 121px #FFF , 1840px 295px #FFF , 489px 1707px #FFF , 1628px 1525px #FFF , 138px 537px #FFF , 1596px 1410px #FFF , 644px 977px #FFF , 694px 1223px #FFF , 132px 1825px #FFF , 379px 1316px #FFF , 1687px 1832px #FFF , 1856px 1084px #FFF , 693px 920px #FFF , 1772px 167px #FFF , 1740px 1037px #FFF , 1339px 1763px #FFF , 1768px 382px #FFF , 1265px 1171px #FFF , 174px 983px #FFF , 404px 456px #FFF , 980px 618px #FFF , 1654px 1167px #FFF , 1570px 1042px #FFF , 128px 1630px #FFF , 152px 734px #FFF , 203px 886px #FFF , 1820px 191px #FFF , 1581px 10px #FFF , 276px 1374px #FFF , 1398px 106px #FFF , 1712px 362px #FFF , 1717px 1465px #FFF , 1206px 748px #FFF , 1077px 1363px #FFF , 136px 802px #FFF , 1968px 380px #FFF , 1081px 729px #FFF , 1164px 574px #FFF , 551px 9px #FFF , 511px 1727px #FFF , 981px 1755px #FFF , 879px 917px #FFF , 1317px 165px #FFF , 1331px 685px #FFF , 1125px 1274px #FFF , 825px 1033px #FFF , 246px 1750px #FFF , 1619px 1504px #FFF , 25px 255px #FFF , 314px 774px #FFF , 810px 1304px #FFF , 1210px 930px #FFF , 117px 722px #FFF , 218px 382px #FFF , 779px 200px #FFF , 1275px 772px #FFF , 651px 1646px #FFF , 753px 1930px #FFF , 362px 967px #FFF , 1416px 1474px #FFF , 1400px 944px #FFF , 1742px 1047px #FFF , 1113px 1022px #FFF , 1497px 1722px #FFF , 637px 1606px #FFF , 242px 385px #FFF , 322px 1995px #FFF , 109px 1162px #FFF , 694px 995px #FFF , 1206px 483px #FFF , 17px 998px #FFF , 1862px 1148px #FFF , 1061px 322px #FFF , 29px 49px #FFF , 1799px 1692px #FFF , 822px 1996px #FFF , 490px 862px #FFF , 1046px 521px #FFF , 2px 565px #FFF , 1393px 412px #FFF , 354px 1627px #FFF , 1134px 421px #FFF , 1726px 540px #FFF , 413px 1303px #FFF , 891px 1376px #FFF , 135px 1196px #FFF , 935px 1712px #FFF , 1217px 1260px #FFF , 1640px 998px #FFF , 1870px 465px #FFF , 1887px 599px #FFF , 1396px 548px #FFF , 944px 1836px #FFF , 1012px 533px #FFF , 1116px 1229px #FFF , 349px 411px #FFF , 78px 191px #FFF , 1864px 1586px #FFF , 1798px 537px #FFF , 1850px 527px #FFF , 1809px 591px #FFF , 1541px 468px #FFF , 594px 1415px #FFF , 1188px 848px #FFF , 780px 443px #FFF , 1413px 1961px #FFF , 1367px 1859px #FFF , 1822px 1231px #FFF , 932px 562px #FFF , 1101px 292px #FFF , 1072px 987px #FFF , 411px 1745px #FFF , 621px 1092px #FFF , 447px 1326px #FFF , 1186px 1087px #FFF , 137px 591px #FFF , 829px 1006px #FFF , 107px 1524px #FFF , 1880px 229px #FFF , 573px 24px #FFF , 1467px 950px #FFF , 1336px 430px #FFF , 1239px 1577px #FFF , 194px 563px #FFF , 1147px 1182px #FFF , 1749px 770px #FFF , 781px 1261px #FFF , 134px 4px #FFF , 1227px 1601px #FFF , 1377px 1518px #FFF , 905px 1283px #FFF , 636px 267px #FFF , 215px 653px #FFF , 361px 1138px #FFF , 383px 1213px #FFF , 333px 1180px #FFF , 691px 1052px #FFF , 225px 565px #FFF , 1301px 438px #FFF , 121px 1568px #FFF , 1293px 590px #FFF , 72px 977px #FFF , 912px 1305px #FFF , 333px 1070px #FFF , 151px 1593px #FFF , 1832px 839px #FFF , 126px 490px #FFF , 432px 1973px #FFF , 1857px 1288px #FFF , 1779px 297px #FFF , 1218px 391px #FFF , 508px 595px #FFF , 1920px 845px #FFF , 454px 1847px #FFF , 1500px 1503px #FFF , 154px 33px #FFF , 1611px 1368px #FFF , 786px 862px #FFF , 290px 1695px #FFF , 434px 5px #FFF , 559px 1699px #FFF , 469px 1148px #FFF , 539px 1227px #FFF , 400px 743px #FFF , 753px 1002px #FFF , 1623px 1359px #FFF , 177px 575px #FFF , 1667px 1914px #FFF , 842px 642px #FFF , 317px 1943px #FFF , 620px 1040px #FFF , 134px 1489px #FFF , 1152px 1326px #FFF , 1603px 487px #FFF , 936px 1027px #FFF , 623px 1295px #FFF , 1360px 1586px #FFF , 665px 715px #FFF , 1158px 45px #FFF , 487px 1715px #FFF , 1063px 309px #FFF , 1318px 1008px #FFF , 928px 396px #FFF , 80px 1989px #FFF , 1095px 581px #FFF , 1510px 546px #FFF , 1389px 999px #FFF , 1990px 399px #FFF , 749px 620px #FFF , 335px 59px #FFF , 1465px 1626px #FFF , 42px 1499px #FFF , 1288px 1666px #FFF , 1086px 293px #FFF , 635px 188px #FFF , 1333px 1468px #FFF , 668px 834px #FFF , 1862px 100px #FFF , 566px 9px #FFF , 1504px 1805px #FFF , 1555px 1527px #FFF , 713px 1593px #FFF , 625px 262px #FFF , 1354px 230px #FFF , 215px 137px #FFF , 1715px 544px #FFF , 1454px 1450px #FFF , 515px 1417px #FFF , 89px 967px #FFF , 1793px 1939px #FFF , 1273px 1859px #FFF , 1217px 545px #FFF , 607px 128px #FFF , 1637px 989px #FFF , 450px 19px #FFF , 1208px 989px #FFF , 1863px 1888px #FFF , 818px 48px #FFF , 852px 732px #FFF , 1694px 711px #FFF , 1618px 915px #FFF , 1017px 1899px #FFF , 1434px 1773px #FFF , 1715px 1404px #FFF , 52px 53px #FFF , 58px 1259px #FFF , 412px 412px #FFF , 255px 26px #FFF , 1685px 1385px #FFF , 1339px 1362px #FFF , 1722px 1793px #FFF , 276px 1610px #FFF , 659px 758px #FFF , 512px 1265px #FFF , 805px 1229px #FFF , 447px 775px #FFF , 1290px 330px #FFF , 333px 817px #FFF , 1490px 559px #FFF , 1920px 1513px #FFF , 135px 267px #FFF , 296px 328px #FFF , 969px 1630px #FFF , 1242px 73px #FFF , 287px 1974px #FFF , 902px 662px #FFF , 176px 1040px #FFF , 1949px 1290px #FFF , 1499px 740px #FFF , 1124px 913px #FFF , 881px 1907px #FFF , 1000px 664px #FFF , 1476px 1442px #FFF , 736px 167px #FFF , 513px 1128px #FFF , 660px 377px #FFF , 1130px 1540px #FFF , 733px 537px #FFF , 302px 682px #FFF , 905px 99px #FFF , 280px 974px #FFF , 1904px 1086px #FFF , 1547px 663px #FFF , 438px 976px #FFF , 1514px 1713px #FFF , 1987px 71px #FFF , 1567px 939px #FFF , 451px 1396px #FFF , 872px 460px #FFF , 1558px 881px #FFF , 922px 156px #FFF , 1614px 326px #FFF , 1524px 1036px #FFF , 734px 507px #FFF , 501px 810px #FFF , 1238px 384px #FFF , 1160px 1130px #FFF , 1859px 1010px #FFF , 787px 820px #FFF , 1363px 1953px #FFF , 32px 737px #FFF , 610px 510px #FFF , 200px 470px #FFF , 1725px 556px #FFF , 1266px 604px #FFF , 853px 430px #FFF , 1166px 1872px #FFF , 866px 276px #FFF , 559px 1302px #FFF , 1110px 406px #FFF , 634px 187px #FFF , 1772px 872px #FFF , 1293px 1235px #FFF , 334px 750px #FFF , 82px 1737px #FFF , 846px 1828px #FFF , 374px 1524px #FFF , 611px 166px #FFF , 1051px 709px #FFF , 356px 1195px #FFF , 1352px 301px #FFF , 122px 1930px #FFF , 1331px 80px #FFF , 334px 1507px #FFF , 1169px 1509px #FFF , 273px 1704px #FFF , 976px 364px #FFF , 1586px 1204px #FFF , 500px 246px #FFF , 1934px 1171px #FFF , 581px 413px #FFF , 1308px 665px #FFF , 1946px 1576px #FFF , 1403px 1775px #FFF , 1625px 81px #FFF , 883px 1421px #FFF , 331px 479px #FFF , 1740px 526px #FFF , 1456px 1518px #FFF , 1205px 1976px #FFF , 1239px 1547px #FFF , 1746px 1621px #FFF , 174px 1228px #FFF , 434px 512px #FFF , 1019px 1700px #FFF , 577px 1459px #FFF , 247px 1594px #FFF , 338px 187px #FFF , 1251px 5px #FFF , 1440px 1410px #FFF , 883px 1238px #FFF , 372px 1728px #FFF , 1598px 1960px #FFF , 1871px 1524px #FFF , 1501px 1656px #FFF , 1053px 1655px #FFF , 1246px 1145px #FFF , 545px 1929px #FFF , 881px 1681px #FFF , 1003px 934px #FFF , 186px 29px #FFF , 1108px 766px #FFF , 685px 1099px #FFF , 865px 1391px #FFF , 191px 881px #FFF , 1112px 1565px #FFF , 1354px 1479px #FFF , 1546px 131px #FFF , 869px 487px #FFF , 883px 840px #FFF , 1915px 1843px #FFF , 121px 1446px #FFF , 301px 270px #FFF , 179px 806px #FFF , 972px 617px #FFF , 1311px 1174px #FFF , 577px 357px #FFF , 826px 540px #FFF , 91px 879px #FFF , 1696px 413px #FFF , 1945px 726px #FFF , 200px 1134px #FFF , 965px 241px #FFF , 1968px 1932px #FFF , 185px 1438px #FFF , 980px 1160px #FFF , 1097px 1753px #FFF , 666px 1639px #FFF , 1320px 210px #FFF , 1833px 1049px #FFF , 1967px 1214px #FFF , 1397px 672px #FFF , 1825px 1054px #FFF;
  animation: animStar 50s linear infinite;
}
#stars:after {
  content: " ";
  position: absolute;
  top: 2000px;
  width: 1px;
  height: 1px;
  background: transparent;
  box-shadow: 1971px 456px #FFF , 1577px 1437px #FFF , 476px 393px #FFF , 803px 1228px #FFF , 7px 1062px #FFF , 1700px 1956px #FFF , 338px 1912px #FFF , 1336px 88px #FFF , 1015px 1865px #FFF , 592px 1019px #FFF , 1311px 1452px #FFF , 555px 1351px #FFF , 860px 661px #FFF , 588px 1593px #FFF , 618px 1711px #FFF , 226px 1186px #FFF , 1719px 1774px #FFF , 1382px 346px #FFF , 399px 738px #FFF , 1746px 1062px #FFF , 204px 895px #FFF , 1008px 217px #FFF , 911px 1350px #FFF , 962px 788px #FFF , 660px 85px #FFF , 1682px 911px #FFF , 1707px 1875px #FFF , 397px 751px #FFF , 1384px 551px #FFF , 764px 77px #FFF , 1133px 16px #FFF , 1305px 630px #FFF , 1366px 1973px #FFF , 1212px 754px #FFF , 1265px 1663px #FFF , 478px 416px #FFF , 540px 549px #FFF , 691px 1775px #FFF , 478px 11px #FFF , 748px 971px #FFF , 1264px 139px #FFF , 1875px 1032px #FFF , 406px 1696px #FFF , 1109px 107px #FFF , 846px 1611px #FFF , 849px 679px #FFF , 1322px 1004px #FFF , 1543px 652px #FFF , 1830px 1347px #FFF , 688px 1066px #FFF , 1140px 1691px #FFF , 471px 401px #FFF , 460px 1665px #FFF , 1560px 32px #FFF , 1413px 1384px #FFF , 1487px 1900px #FFF , 1154px 265px #FFF , 182px 199px #FFF , 765px 82px #FFF , 915px 1414px #FFF , 1812px 1724px #FFF , 113px 58px #FFF , 1312px 1790px #FFF , 714px 475px #FFF , 1766px 163px #FFF , 1312px 1149px #FFF , 828px 1303px #FFF , 1398px 573px #FFF , 1595px 867px #FFF , 1193px 1775px #FFF , 397px 815px #FFF , 1786px 895px #FFF , 1831px 444px #FFF , 980px 768px #FFF , 1456px 159px #FFF , 1240px 968px #FFF , 1894px 384px #FFF , 410px 1472px #FFF , 384px 659px #FFF , 569px 279px #FFF , 1339px 85px #FFF , 570px 1521px #FFF , 790px 1537px #FFF , 210px 334px #FFF , 1067px 1533px #FFF , 850px 1549px #FFF , 139px 923px #FFF , 1590px 1122px #FFF , 1603px 1528px #FFF , 348px 1030px #FFF , 360px 185px #FFF , 1405px 1176px #FFF , 299px 908px #FFF , 32px 595px #FFF , 1041px 1102px #FFF , 1674px 866px #FFF , 244px 1386px #FFF , 600px 1288px #FFF , 739px 1653px #FFF , 500px 953px #FFF , 1050px 843px #FFF , 584px 1005px #FFF , 1883px 1018px #FFF , 1414px 1979px #FFF , 1316px 229px #FFF , 1358px 1862px #FFF , 1645px 452px #FFF , 554px 1108px #FFF , 1217px 1134px #FFF , 1473px 1265px #FFF , 902px 130px #FFF , 595px 79px #FFF , 1023px 1240px #FFF , 294px 203px #FFF , 620px 1414px #FFF , 213px 460px #FFF , 1999px 1780px #FFF , 1654px 1829px #FFF , 1630px 1636px #FFF , 143px 1117px #FFF , 341px 450px #FFF , 856px 544px #FFF , 1598px 1550px #FFF , 1897px 1093px #FFF , 1428px 542px #FFF , 195px 1328px #FFF , 1169px 1743px #FFF , 879px 618px #FFF , 660px 1447px #FFF , 1700px 479px #FFF , 1436px 1990px #FFF , 1286px 1496px #FFF , 879px 1114px #FFF , 291px 1942px #FFF , 569px 1302px #FFF , 762px 1432px #FFF , 1547px 1432px #FFF , 366px 1288px #FFF , 82px 1840px #FFF , 17px 1413px #FFF , 667px 121px #FFF , 1840px 295px #FFF , 489px 1707px #FFF , 1628px 1525px #FFF , 138px 537px #FFF , 1596px 1410px #FFF , 644px 977px #FFF , 694px 1223px #FFF , 132px 1825px #FFF , 379px 1316px #FFF , 1687px 1832px #FFF , 1856px 1084px #FFF , 693px 920px #FFF , 1772px 167px #FFF , 1740px 1037px #FFF , 1339px 1763px #FFF , 1768px 382px #FFF , 1265px 1171px #FFF , 174px 983px #FFF , 404px 456px #FFF , 980px 618px #FFF , 1654px 1167px #FFF , 1570px 1042px #FFF , 128px 1630px #FFF , 152px 734px #FFF , 203px 886px #FFF , 1820px 191px #FFF , 1581px 10px #FFF , 276px 1374px #FFF , 1398px 106px #FFF , 1712px 362px #FFF , 1717px 1465px #FFF , 1206px 748px #FFF , 1077px 1363px #FFF , 136px 802px #FFF , 1968px 380px #FFF , 1081px 729px #FFF , 1164px 574px #FFF , 551px 9px #FFF , 511px 1727px #FFF , 981px 1755px #FFF , 879px 917px #FFF , 1317px 165px #FFF , 1331px 685px #FFF , 1125px 1274px #FFF , 825px 1033px #FFF , 246px 1750px #FFF , 1619px 1504px #FFF , 25px 255px #FFF , 314px 774px #FFF , 810px 1304px #FFF , 1210px 930px #FFF , 117px 722px #FFF , 218px 382px #FFF , 779px 200px #FFF , 1275px 772px #FFF , 651px 1646px #FFF , 753px 1930px #FFF , 362px 967px #FFF , 1416px 1474px #FFF , 1400px 944px #FFF , 1742px 1047px #FFF , 1113px 1022px #FFF , 1497px 1722px #FFF , 637px 1606px #FFF , 242px 385px #FFF , 322px 1995px #FFF , 109px 1162px #FFF , 694px 995px #FFF , 1206px 483px #FFF , 17px 998px #FFF , 1862px 1148px #FFF , 1061px 322px #FFF , 29px 49px #FFF , 1799px 1692px #FFF , 822px 1996px #FFF , 490px 862px #FFF , 1046px 521px #FFF , 2px 565px #FFF , 1393px 412px #FFF , 354px 1627px #FFF , 1134px 421px #FFF , 1726px 540px #FFF , 413px 1303px #FFF , 891px 1376px #FFF , 135px 1196px #FFF , 935px 1712px #FFF , 1217px 1260px #FFF , 1640px 998px #FFF , 1870px 465px #FFF , 1887px 599px #FFF , 1396px 548px #FFF , 944px 1836px #FFF , 1012px 533px #FFF , 1116px 1229px #FFF , 349px 411px #FFF , 78px 191px #FFF , 1864px 1586px #FFF , 1798px 537px #FFF , 1850px 527px #FFF , 1809px 591px #FFF , 1541px 468px #FFF , 594px 1415px #FFF , 1188px 848px #FFF , 780px 443px #FFF , 1413px 1961px #FFF , 1367px 1859px #FFF , 1822px 1231px #FFF , 932px 562px #FFF , 1101px 292px #FFF , 1072px 987px #FFF , 411px 1745px #FFF , 621px 1092px #FFF , 447px 1326px #FFF , 1186px 1087px #FFF , 137px 591px #FFF , 829px 1006px #FFF , 107px 1524px #FFF , 1880px 229px #FFF , 573px 24px #FFF;
}

#stars2 {
  width: 2px;
  height: 2px;
  background: transparent;
  box-shadow: 103px 593px #FFF , 1142px 470px #FFF , 1758px 274px #FFF , 610px 389px #FFF , 1236px 296px #FFF , 84px 1643px #FFF , 987px 1271px #FFF , 58px 1864px #FFF , 1888px 1759px #FFF , 1936px 1193px #FFF , 1431px 872px #FFF , 1189px 1570px #FFF , 1520px 1526px #FFF , 1104px 457px #FFF , 1314px 40px #FFF , 869px 1860px #FFF , 862px 545px #FFF , 916px 1496px #FFF , 105px 242px #FFF , 251px 1319px #FFF , 1095px 1930px #FFF , 393px 516px #FFF , 1857px 1579px #FFF , 1847px 1733px #FFF , 1707px 458px #FFF , 1024px 221px #FFF , 880px 759px #FFF , 1933px 588px #FFF , 1356px 368px #FFF , 443px 622px #FFF , 12px 986px #FFF , 646px 172px #FFF , 900px 905px #FFF , 1417px 1330px #FFF , 936px 1051px #FFF , 808px 572px #FFF , 1986px 371px #FFF , 1310px 937px #FFF , 1114px 1937px #FFF , 1720px 507px #FFF , 933px 1928px #FFF , 1543px 852px #FFF , 476px 1461px #FFF , 424px 698px #FFF , 1915px 1522px #FFF , 1418px 1011px #FFF , 1768px 1656px #FFF , 381px 141px #FFF , 789px 865px #FFF , 633px 12px #FFF , 196px 633px #FFF , 965px 432px #FFF , 1522px 491px #FFF , 1377px 1231px #FFF , 686px 259px #FFF , 1625px 1449px #FFF , 1516px 1780px #FFF , 998px 423px #FFF , 1511px 1905px #FFF , 418px 50px #FFF , 704px 614px #FFF , 427px 1422px #FFF , 795px 1421px #FFF , 231px 541px #FFF , 452px 1701px #FFF , 545px 913px #FFF , 1071px 1201px #FFF , 1768px 604px #FFF , 361px 1854px #FFF , 150px 1041px #FFF , 1392px 711px #FFF , 1722px 401px #FFF , 366px 737px #FFF , 1814px 1466px #FFF , 1675px 292px #FFF , 1202px 625px #FFF , 383px 492px #FFF , 1656px 554px #FFF , 593px 1419px #FFF , 249px 1573px #FFF , 1794px 1220px #FFF , 11px 201px #FFF , 806px 978px #FFF , 1967px 454px #FFF , 753px 1451px #FFF , 723px 934px #FFF , 1310px 908px #FFF , 188px 687px #FFF , 88px 323px #FFF , 1361px 1098px #FFF , 793px 1339px #FFF , 972px 1475px #FFF , 1608px 1323px #FFF , 85px 71px #FFF , 1615px 1877px #FFF , 919px 1436px #FFF , 1262px 1002px #FFF , 1367px 371px #FFF , 701px 1588px #FFF , 906px 289px #FFF , 647px 1172px #FFF , 411px 1206px #FFF , 1044px 1419px #FFF , 252px 505px #FFF , 236px 962px #FFF , 655px 761px #FFF , 831px 643px #FFF , 1262px 595px #FFF , 649px 997px #FFF , 368px 350px #FFF , 366px 1992px #FFF , 38px 971px #FFF , 648px 1670px #FFF , 97px 736px #FFF , 1933px 478px #FFF , 1109px 779px #FFF , 1792px 987px #FFF , 1959px 1205px #FFF , 1908px 679px #FFF , 39px 1460px #FFF , 820px 1190px #FFF , 1574px 426px #FFF , 578px 951px #FFF , 732px 771px #FFF , 17px 913px #FFF , 650px 1034px #FFF , 1981px 204px #FFF , 953px 1683px #FFF , 1787px 1036px #FFF , 1311px 1381px #FFF , 1932px 66px #FFF , 353px 1852px #FFF , 1840px 1528px #FFF , 1833px 43px #FFF , 1509px 1720px #FFF , 770px 1195px #FFF , 1315px 173px #FFF , 655px 639px #FFF , 820px 914px #FFF , 1109px 1901px #FFF , 1338px 1852px #FFF , 260px 386px #FFF , 228px 837px #FFF , 460px 1381px #FFF , 637px 650px #FFF , 450px 669px #FFF , 1189px 1002px #FFF , 1240px 1631px #FFF , 1285px 94px #FFF , 402px 449px #FFF , 1497px 466px #FFF , 494px 1879px #FFF , 262px 1224px #FFF , 1155px 393px #FFF , 459px 1501px #FFF , 515px 136px #FFF , 1082px 543px #FFF , 1902px 1935px #FFF , 1491px 1789px #FFF , 1553px 975px #FFF , 561px 412px #FFF , 456px 1767px #FFF , 1089px 1146px #FFF , 714px 314px #FFF , 718px 116px #FFF , 1420px 1122px #FFF , 424px 1259px #FFF , 388px 997px #FFF , 535px 1096px #FFF , 1394px 1853px #FFF , 1473px 393px #FFF , 315px 1612px #FFF , 1220px 1808px #FFF , 1955px 1016px #FFF , 1432px 1779px #FFF , 562px 759px #FFF , 869px 37px #FFF , 548px 673px #FFF , 1759px 569px #FFF , 293px 1666px #FFF , 1713px 78px #FFF , 865px 309px #FFF , 1845px 1329px #FFF , 545px 1693px #FFF , 1322px 1852px #FFF , 690px 926px #FFF , 226px 1023px #FFF , 498px 1143px #FFF , 1419px 1630px #FFF , 330px 111px #FFF , 1789px 67px #FFF , 1788px 570px #FFF , 776px 930px #FFF , 1191px 835px #FFF , 1502px 529px #FFF , 637px 245px #FFF , 1135px 215px #FFF , 42px 690px #FFF , 1991px 1650px #FFF , 621px 230px #FFF;
  animation: animStar 100s linear infinite;
}
#stars2:after {
  content: " ";
  position: absolute;
  top: 2000px;
  width: 2px;
  height: 2px;
  background: transparent;
  box-shadow: 103px 593px #FFF , 1142px 470px #FFF , 1758px 274px #FFF , 610px 389px #FFF , 1236px 296px #FFF , 84px 1643px #FFF , 987px 1271px #FFF , 58px 1864px #FFF , 1888px 1759px #FFF , 1936px 1193px #FFF , 1431px 872px #FFF , 1189px 1570px #FFF , 1520px 1526px #FFF , 1104px 457px #FFF , 1314px 40px #FFF , 869px 1860px #FFF , 862px 545px #FFF , 916px 1496px #FFF , 105px 242px #FFF , 251px 1319px #FFF , 1095px 1930px #FFF , 393px 516px #FFF , 1857px 1579px #FFF , 1847px 1733px #FFF , 1707px 458px #FFF , 1024px 221px #FFF , 880px 759px #FFF , 1933px 588px #FFF , 1356px 368px #FFF , 443px 622px #FFF , 12px 986px #FFF , 646px 172px #FFF , 900px 905px #FFF , 1417px 1330px #FFF , 936px 1051px #FFF , 808px 572px #FFF , 1986px 371px #FFF , 1310px 937px #FFF , 1114px 1937px #FFF , 1720px 507px #FFF , 933px 1928px #FFF , 1543px 852px #FFF , 476px 1461px #FFF , 424px 698px #FFF , 1915px 1522px #FFF , 1418px 1011px #FFF , 1768px 1656px #FFF , 381px 141px #FFF , 789px 865px #FFF , 633px 12px #FFF , 196px 633px #FFF , 965px 432px #FFF , 1522px 491px #FFF , 1377px 1231px #FFF , 686px 259px #FFF , 1625px 1449px #FFF , 1516px 1780px #FFF , 998px 423px #FFF , 1511px 1905px #FFF , 418px 50px #FFF , 704px 614px #FFF , 427px 1422px #FFF , 795px 1421px #FFF , 231px 541px #FFF , 452px 1701px #FFF , 545px 913px #FFF , 1071px 1201px #FFF , 1768px 604px #FFF , 361px 1854px #FFF , 150px 1041px #FFF , 1392px 711px #FFF , 1722px 401px #FFF , 366px 737px #FFF , 1814px 1466px #FFF , 1675px 292px #FFF , 1202px 625px #FFF , 383px 492px #FFF , 1656px 554px #FFF , 593px 1419px #FFF , 249px 1573px #FFF , 1794px 1220px #FFF , 11px 201px #FFF , 806px 978px #FFF , 1967px 454px #FFF , 753px 1451px #FFF , 723px 934px #FFF , 1310px 908px #FFF , 188px 687px #FFF , 88px 323px #FFF , 1361px 1098px #FFF , 793px 1339px #FFF , 972px 1475px #FFF , 1608px 1323px #FFF , 85px 71px #FFF , 1615px 1877px #FFF , 919px 1436px #FFF , 1262px 1002px #FFF , 1367px 371px #FFF , 701px 1588px #FFF , 906px 289px #FFF , 647px 1172px #FFF , 411px 1206px #FFF , 1044px 1419px #FFF , 252px 505px #FFF , 236px 962px #FFF , 655px 761px #FFF , 831px 643px #FFF , 1262px 595px #FFF , 649px 997px #FFF , 368px 350px #FFF , 366px 1992px #FFF , 38px 971px #FFF , 648px 1670px #FFF , 97px 736px #FFF , 1933px 478px #FFF , 1109px 779px #FFF , 1792px 987px #FFF , 1959px 1205px #FFF , 1908px 679px #FFF , 39px 1460px #FFF , 820px 1190px #FFF , 1574px 426px #FFF , 578px 951px #FFF , 732px 771px #FFF , 17px 913px #FFF , 650px 1034px #FFF , 1981px 204px #FFF , 953px 1683px #FFF , 1787px 1036px #FFF , 1311px 1381px #FFF , 1932px 66px #FFF , 353px 1852px #FFF;
}

#stars3 {
  width: 3px;
  height: 3px;
  background: transparent;
  box-shadow: 667px 320px #FFF , 178px 1273px #FFF , 1245px 1230px #FFF , 465px 859px #FFF , 821px 965px #FFF , 250px 1151px #FFF , 500px 1601px #FFF , 1900px 1707px #FFF , 1175px 1409px #FFF , 1534px 910px #FFF , 413px 756px #FFF , 689px 1341px #FFF , 1408px 860px #FFF , 1625px 1180px #FFF , 1871px 1199px #FFF , 1578px 1986px #FFF , 743px 62px #FFF , 275px 160px #FFF , 1624px 881px #FFF , 1256px 993px #FFF , 406px 1538px #FFF , 1511px 154px #FFF , 1153px 297px #FFF , 43px 785px #FFF , 909px 1392px #FFF , 89px 684px #FFF , 777px 1732px #FFF , 1110px 913px #FFF , 95px 1077px #FFF , 1807px 776px #FFF , 17px 622px #FFF , 1615px 459px #FFF , 705px 1635px #FFF , 700px 1776px #FFF , 1441px 1705px #FFF , 1170px 378px #FFF , 824px 1799px #FFF , 960px 518px #FFF , 1566px 1994px #FFF , 853px 1419px #FFF , 1177px 901px #FFF , 1642px 1902px #FFF , 1736px 778px #FFF , 297px 1864px #FFF , 46px 1927px #FFF , 1302px 870px #FFF , 1472px 1079px #FFF , 1139px 1005px #FFF , 1825px 601px #FFF , 597px 1703px #FFF , 1159px 689px #FFF , 356px 1048px #FFF , 1498px 843px #FFF , 696px 960px #FFF , 289px 1542px #FFF , 736px 208px #FFF , 68px 1499px #FFF , 489px 1687px #FFF , 1309px 964px #FFF , 732px 132px #FFF , 1806px 951px #FFF , 744px 1969px #FFF , 1980px 1214px #FFF , 2000px 1622px #FFF , 1213px 1236px #FFF , 782px 1100px #FFF , 1765px 875px #FFF , 652px 875px #FFF , 966px 1469px #FFF , 785px 416px #FFF , 48px 1365px #FFF , 813px 774px #FFF , 1056px 1958px #FFF , 270px 258px #FFF , 1940px 1847px #FFF , 1671px 1647px #FFF , 1500px 1606px #FFF , 1693px 1711px #FFF , 1408px 812px #FFF , 1050px 562px #FFF , 558px 909px #FFF , 23px 430px #FFF , 1582px 1657px #FFF , 1984px 779px #FFF;
  animation: animStar 150s linear infinite;
}
#stars3:after {
  content: " ";
  position: absolute;
  top: 2000px;
  width: 3px;
  height: 3px;
  background: transparent;
  box-shadow: 667px 320px #FFF , 178px 1273px #FFF , 1245px 1230px #FFF , 465px 859px #FFF , 821px 965px #FFF , 250px 1151px #FFF , 500px 1601px #FFF , 1900px 1707px #FFF , 1175px 1409px #FFF , 1534px 910px #FFF , 413px 756px #FFF , 689px 1341px #FFF , 1408px 860px #FFF , 1625px 1180px #FFF , 1871px 1199px #FFF , 1578px 1986px #FFF , 743px 62px #FFF , 275px 160px #FFF , 1624px 881px #FFF , 1256px 993px #FFF , 406px 1538px #FFF , 1511px 154px #FFF , 1153px 297px #FFF , 43px 785px #FFF , 909px 1392px #FFF , 89px 684px #FFF , 777px 1732px #FFF , 1110px 913px #FFF , 95px 1077px #FFF , 1807px 776px #FFF , 17px 622px #FFF , 1615px 459px #FFF , 705px 1635px #FFF , 700px 1776px #FFF , 1441px 1705px #FFF , 1170px 378px #FFF , 824px 1799px #FFF , 960px 518px #FFF , 1566px 1994px #FFF , 853px 1419px #FFF , 1177px 901px #FFF , 1642px 1902px #FFF , 1736px 778px #FFF , 297px 1864px #FFF , 46px 1927px #FFF , 1302px 870px #FFF , 1472px 1079px #FFF , 1139px 1005px #FFF , 1825px 601px #FFF , 597px 1703px #FFF , 1159px 689px #FFF , 356px 1048px #FFF , 1498px 843px #FFF , 696px 960px #FFF , 289px 1542px #FFF , 736px 208px #FFF , 68px 1499px #FFF , 489px 1687px #FFF , 1309px 964px #FFF , 732px 132px #FFF , 1806px 951px #FFF , 744px 1969px #FFF , 1980px 1214px #FFF , 2000px 1622px #FFF , 1213px 1236px #FFF , 782px 1100px #FFF , 1765px 875px #FFF , 652px 875px #FFF , 966px 1469px #FFF , 785px 416px #FFF , 48px 1365px #FFF , 813px 774px #FFF , 1056px 1958px #FFF , 270px 258px #FFF , 1940px 1847px #FFF , 1671px 1647px #FFF , 1500px 1606px #FFF , 1693px 1711px #FFF , 1408px 812px #FFF , 1050px 562px #FFF , 558px 909px #FFF , 23px 430px #FFF , 1582px 1657px #FFF , 1984px 779px #FFF , 652px 1133px #FFF , 1541px 551px #FFF , 1194px 700px #FFF , 1758px 23px #FFF , 403px 1986px #FFF , 829px 567px #FFF , 787px 926px #FFF , 443px 1214px #FFF , 149px 159px #FFF , 506px 1388px #FFF , 503px 422px #FFF , 1463px 419px #FFF , 1329px 1238px #FFF , 1025px 1264px #FFF , 1868px 275px #FFF , 209px 330px #FFF;
}

#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;
}
#title 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);
  }
}```
<pre class="snippet-code-html lang-html prettyprint-override"><code> <div id="stars">
  <div id="stars2">
    <div id="stars3">
      <section class="spotlight bg-cover bg-size--cover" data-spotlight="fullscreen" style="background-image: url('{% static 'assets/img/backgrounds/2.jpg' %}');">
        [...content and title section...]
      </section>
    </div>
  </div>
</div></code>```

How can I add moving stars in the background in my photo?

答:
Using particles.js with full customization and lot of more feature.

Browse here for more

/* ---- particles.js config ---- */

particlesJS("particle-container", {
  "particles": {
    "number": {
      "value": 80,
      "density": {
        "enable": true,
        "value_area": 800
      }
    },
    "color": {
      "value": "random"
    },
    "shape": {
      "type": "circle",
      "stroke": {
        "width": 0,
        "color": "#000000"
      },
      "polygon": {
        "nb_sides": 5
      },
      "image": {
        "src": "img/github.svg",
        "width": 100,
        "height": 100
      }
    },
    "opacity": {
      "value": 0.5,
      "random": false,
      "anim": {
        "enable": false,
        "speed": 1,
        "opacity_min": 0.1,
        "sync": false
      }
    },
    "size": {
      "value": 3,
      "random": true,
      "anim": {
        "enable": false,
        "speed": 40,
        "size_min": 0.1,
        "sync": false
      }
    },
    "line_linked": {
      "enable": false,
      "distance": 150,
      "color": "#ffffff",
      "opacity": 0.4,
      "width": 1
    },
    "move": {
      "enable": true,
      "speed": 1,
      "direction": "none",
      "random": false,
      "straight": false,
      "out_mode": "out",
      "bounce": false,
      "attract": {
        "enable": false,
        "rotateX": 600,
        "rotateY": 1200
      }
    }
  },
  "interactivity": {
    "detect_on": "canvas",
    "events": {
      "onhover": {
        "enable": false,
        "mode": "repulse"
      },
      "onclick": {
        "enable": false,
        "mode": "push"
      },
      "resize": true
    },
    "modes": {
      "grab": {
        "distance": 400,
        "line_linked": {
          "opacity": 1
        }
      },
      "bubble": {
        "distance": 400,
        "size": 40,
        "duration": 2,
        "opacity": 8,
        "speed": 3
      },
      "repulse": {
        "distance": 200,
        "duration": 0.4
      },
      "push": {
        "particles_nb": 4
      },
      "remove": {
        "particles_nb": 2
      }
    }
  },
  "retina_detect": true
});```
<pre class="snippet-code-css lang-css prettyprint-override"><code>/* Reset. */
body {
  margin: 0;
  background: #ecf3f3;
}

canvas {
  display: block;
  vertical-align: bottom;
}

/* Particle container. */
#particle-container {
  position: absolute;
  width: 100%;
  height: 100%;
}</code>```

```

Body:
I am new in CSS and trying to add interesting elements to my template. I found such an solution. I'm trying to add them to my background photo. But I still can't adjust it properly. No floating item is displayed.

The effect is trying to add only to the main section that is extended to the entire screen, it looks something like this:

 #stars {
  width: 1px;
  height: 1px;
  background: transparent;
  box-shadow: 1971px 456px #FFF , 1577px 1437px #FFF , 476px 393px #FFF , 803px 1228px #FFF , 7px 1062px #FFF , 1700px 1956px #FFF , 338px 1912px #FFF , 1336px 88px #FFF , 1015px 1865px #FFF , 592px 1019px #FFF , 1311px 1452px #FFF , 555px 1351px #FFF , 860px 661px #FFF , 588px 1593px #FFF , 618px 1711px #FFF , 226px 1186px #FFF , 1719px 1774px #FFF , 1382px 346px #FFF , 399px 738px #FFF , 1746px 1062px #FFF , 204px 895px #FFF , 1008px 217px #FFF , 911px 1350px #FFF , 962px 788px #FFF , 660px 85px #FFF , 1682px 911px #FFF , 1707px 1875px #FFF , 397px 751px #FFF , 1384px 551px #FFF , 764px 77px #FFF , 1133px 16px #FFF , 1305px 630px #FFF , 1366px 1973px #FFF , 1212px 754px #FFF , 1265px 1663px #FFF , 478px 416px #FFF , 540px 549px #FFF , 691px 1775px #FFF , 478px 11px #FFF , 748px 971px #FFF , 1264px 139px #FFF , 1875px 1032px #FFF , 406px 1696px #FFF , 1109px 107px #FFF , 846px 1611px #FFF , 849px 679px #FFF , 1322px 1004px #FFF , 1543px 652px #FFF , 1830px 1347px #FFF , 688px 1066px #FFF , 1140px 1691px #FFF , 471px 401px #FFF , 460px 1665px #FFF , 1560px 32px #FFF , 1413px 1384px #FFF , 1487px 1900px #FFF , 1154px 265px #FFF , 182px 199px #FFF , 765px 82px #FFF , 915px 1414px #FFF , 1812px 1724px #FFF , 113px 58px #FFF , 1312px 1790px #FFF , 714px 475px #FFF , 1766px 163px #FFF , 1312px 1149px #FFF , 828px 1303px #FFF , 1398px 573px #FFF , 1595px 867px #FFF , 1193px 1775px #FFF , 397px 815px #FFF , 1786px 895px #FFF , 1831px 444px #FFF , 980px 768px #FFF , 1456px 159px #FFF , 1240px 968px #FFF , 1894px 384px #FFF , 410px 1472px #FFF , 384px 659px #FFF , 569px 279px #FFF , 1339px 85px #FFF , 570px 1521px #FFF , 790px 1537px #FFF , 210px 334px #FFF , 1067px 1533px #FFF , 850px 1549px #FFF , 139px 923px #FFF , 1590px 1122px #FFF , 1603px 1528px #FFF , 348px 1030px #FFF , 360px 185px #FFF , 1405px 1176px #FFF , 299px 908px #FFF , 32px 595px #FFF , 1041px 1102px #FFF , 1674px 866px #FFF , 244px 1386px #FFF , 600px 1288px #FFF , 739px 1653px #FFF , 500px 953px #FFF , 1050px 843px #FFF , 584px 1005px #FFF , 1883px 1018px #FFF , 1414px 1979px #FFF , 1316px 229px #FFF , 1358px 1862px #FFF , 1645px 452px #FFF , 554px 1108px #FFF , 1217px 1134px #FFF , 1473px 1265px #FFF , 902px 130px #FFF , 595px 79px #FFF , 1023px 1240px #FFF , 294px 203px #FFF , 620px 1414px #FFF , 213px 460px #FFF , 1999px 1780px #FFF , 1654px 1829px #FFF , 1630px 1636px #FFF , 143px 1117px #FFF , 341px 450px #FFF , 856px 544px #FFF , 1598px 1550px #FFF , 1897px 1093px #FFF , 1428px 542px #FFF , 195px 1328px #FFF , 1169px 1743px #FFF , 879px 618px #FFF , 660px 1447px #FFF , 1700px 479px #FFF , 1436px 1990px #FFF , 1286px 1496px #FFF , 879px 1114px #FFF , 291px 1942px #FFF , 569px 1302px #FFF , 762px 1432px #FFF , 1547px 1432px #FFF , 366px 1288px #FFF , 82px 1840px #FFF , 17px 1413px #FFF , 667px 121px #FFF , 1840px 295px #FFF , 489px 1707px #FFF , 1628px 1525px #FFF , 138px 537px #FFF , 1596px 1410px #FFF , 644px 977px #FFF , 694px 1223px #FFF , 132px 1825px #FFF , 379px 1316px #FFF , 1687px 1832px #FFF , 1856px 1084px #FFF , 693px 920px #FFF , 1772px 167px #FFF , 1740px 1037px #FFF , 1339px 1763px #FFF , 1768px 382px #FFF , 1265px 1171px #FFF , 174px 983px #FFF , 404px 456px #FFF , 980px 618px #FFF , 1654px 1167px #FFF , 1570px 1042px #FFF , 128px 1630px #FFF , 152px 734px #FFF , 203px 886px #FFF , 1820px 191px #FFF , 1581px 10px #FFF , 276px 1374px #FFF , 1398px 106px #FFF , 1712px 362px #FFF , 1717px 1465px #FFF , 1206px 748px #FFF , 1077px 1363px #FFF , 136px 802px #FFF , 1968px 380px #FFF , 1081px 729px #FFF , 1164px 574px #FFF , 551px 9px #FFF , 511px 1727px #FFF , 981px 1755px #FFF , 879px 917px #FFF , 1317px 165px #FFF , 1331px 685px #FFF , 1125px 1274px #FFF , 825px 1033px #FFF , 246px 1750px #FFF , 1619px 1504px #FFF , 25px 255px #FFF , 314px 774px #FFF , 810px 1304px #FFF , 1210px 930px #FFF , 117px 722px #FFF , 218px 382px #FFF , 779px 200px #FFF , 1275px 772px #FFF , 651px 1646px #FFF , 753px 1930px #FFF , 362px 967px #FFF , 1416px 1474px #FFF , 1400px 944px #FFF , 1742px 1047px #FFF , 1113px 1022px #FFF , 1497px 1722px #FFF , 637px 1606px #FFF , 242px 385px #FFF , 322px 1995px #FFF , 109px 1162px #FFF , 694px 995px #FFF , 1206px 483px #FFF , 17px 998px #FFF , 1862px 1148px #FFF , 1061px 322px #FFF , 29px 49px #FFF , 1799px 1692px #FFF , 822px 1996px #FFF , 490px 862px #FFF , 1046px 521px #FFF , 2px 565px #FFF , 1393px 412px #FFF , 354px 1627px #FFF , 1134px 421px #FFF , 1726px 540px #FFF , 413px 1303px #FFF , 891px 1376px #FFF , 135px 1196px #FFF , 935px 1712px #FFF , 1217px 1260px #FFF , 1640px 998px #FFF , 1870px 465px #FFF , 1887px 599px #FFF , 1396px 548px #FFF , 944px 1836px #FFF , 1012px 533px #FFF , 1116px 1229px #FFF , 349px 411px #FFF , 78px 191px #FFF , 1864px 1586px #FFF , 1798px 537px #FFF , 1850px 527px #FFF , 1809px 591px #FFF , 1541px 468px #FFF , 594px 1415px #FFF , 1188px 848px #FFF , 780px 443px #FFF , 1413px 1961px #FFF , 1367px 1859px #FFF , 1822px 1231px #FFF , 932px 562px #FFF , 1101px 292px #FFF , 1072px 987px #FFF , 411px 1745px #FFF , 621px 1092px #FFF , 447px 1326px #FFF , 1186px 1087px #FFF , 137px 591px #FFF , 829px 1006px #FFF , 107px 1524px #FFF , 1880px 229px #FFF , 573px 24px #FFF , 1467px 950px #FFF , 1336px 430px #FFF , 1239px 1577px #FFF , 194px 563px #FFF , 1147px 1182px #FFF , 1749px 770px #FFF , 781px 1261px #FFF , 134px 4px #FFF , 1227px 1601px #FFF , 1377px 1518px #FFF , 905px 1283px #FFF , 636px 267px #FFF , 215px 653px #FFF , 361px 1138px #FFF , 383px 1213px #FFF , 333px 1180px #FFF , 691px 1052px #FFF , 225px 565px #FFF , 1301px 438px #FFF , 121px 1568px #FFF , 1293px 590px #FFF , 72px 977px #FFF , 912px 1305px #FFF , 333px 1070px #FFF , 151px 1593px #FFF , 1832px 839px #FFF , 126px 490px #FFF , 432px 1973px #FFF , 1857px 1288px #FFF , 1779px 297px #FFF , 1218px 391px #FFF , 508px 595px #FFF , 1920px 845px #FFF , 454px 1847px #FFF , 1500px 1503px #FFF , 154px 33px #FFF , 1611px 1368px #FFF , 786px 862px #FFF , 290px 1695px #FFF , 434px 5px #FFF , 559px 1699px #FFF , 469px 1148px #FFF , 539px 1227px #FFF , 400px 743px #FFF , 753px 1002px #FFF , 1623px 1359px #FFF , 177px 575px #FFF , 1667px 1914px #FFF , 842px 642px #FFF , 317px 1943px #FFF , 620px 1040px #FFF , 134px 1489px #FFF , 1152px 1326px #FFF , 1603px 487px #FFF , 936px 1027px #FFF , 623px 1295px #FFF , 1360px 1586px #FFF , 665px 715px #FFF , 1158px 45px #FFF , 487px 1715px #FFF , 1063px 309px #FFF , 1318px 1008px #FFF , 928px 396px #FFF , 80px 1989px #FFF , 1095px 581px #FFF , 1510px 546px #FFF , 1389px 999px #FFF , 1990px 399px #FFF , 749px 620px #FFF , 335px 59px #FFF , 1465px 1626px #FFF , 42px 1499px #FFF , 1288px 1666px #FFF , 1086px 293px #FFF , 635px 188px #FFF , 1333px 1468px #FFF , 668px 834px #FFF , 1862px 100px #FFF , 566px 9px #FFF , 1504px 1805px #FFF , 1555px 1527px #FFF , 713px 1593px #FFF , 625px 262px #FFF , 1354px 230px #FFF , 215px 137px #FFF , 1715px 544px #FFF , 1454px 1450px #FFF , 515px 1417px #FFF , 89px 967px #FFF , 1793px 1939px #FFF , 1273px 1859px #FFF , 1217px 545px #FFF , 607px 128px #FFF , 1637px 989px #FFF , 450px 19px #FFF , 1208px 989px #FFF , 1863px 1888px #FFF , 818px 48px #FFF , 852px 732px #FFF , 1694px 711px #FFF , 1618px 915px #FFF , 1017px 1899px #FFF , 1434px 1773px #FFF , 1715px 1404px #FFF , 52px 53px #FFF , 58px 1259px #FFF , 412px 412px #FFF , 255px 26px #FFF , 1685px 1385px #FFF , 1339px 1362px #FFF , 1722px 1793px #FFF , 276px 1610px #FFF , 659px 758px #FFF , 512px 1265px #FFF , 805px 1229px #FFF , 447px 775px #FFF , 1290px 330px #FFF , 333px 817px #FFF , 1490px 559px #FFF , 1920px 1513px #FFF , 135px 267px #FFF , 296px 328px #FFF , 969px 1630px #FFF , 1242px 73px #FFF , 287px 1974px #FFF , 902px 662px #FFF , 176px 1040px #FFF , 1949px 1290px #FFF , 1499px 740px #FFF , 1124px 913px #FFF , 881px 1907px #FFF , 1000px 664px #FFF , 1476px 1442px #FFF , 736px 167px #FFF , 513px 1128px #FFF , 660px 377px #FFF , 1130px 1540px #FFF , 733px 537px #FFF , 302px 682px #FFF , 905px 99px #FFF , 280px 974px #FFF , 1904px 1086px #FFF , 1547px 663px #FFF , 438px 976px #FFF , 1514px 1713px #FFF , 1987px 71px #FFF , 1567px 939px #FFF , 451px 1396px #FFF , 872px 460px #FFF , 1558px 881px #FFF , 922px 156px #FFF , 1614px 326px #FFF , 1524px 1036px #FFF , 734px 507px #FFF , 501px 810px #FFF , 1238px 384px #FFF , 1160px 1130px #FFF , 1859px 1010px #FFF , 787px 820px #FFF , 1363px 1953px #FFF , 32px 737px #FFF , 610px 510px #FFF , 200px 470px #FFF , 1725px 556px #FFF , 1266px 604px #FFF , 853px 430px #FFF , 1166px 1872px #FFF , 866px 276px #FFF , 559px 1302px #FFF , 1110px 406px #FFF , 634px 187px #FFF , 1772px 872px #FFF , 1293px 1235px #FFF , 334px 750px #FFF , 82px 1737px #FFF , 846px 1828px #FFF , 374px 1524px #FFF , 611px 166px #FFF , 1051px 709px #FFF , 356px 1195px #FFF , 1352px 301px #FFF , 122px 1930px #FFF , 1331px 80px #FFF , 334px 1507px #FFF , 1169px 1509px #FFF , 273px 1704px #FFF , 976px 364px #FFF , 1586px 1204px #FFF , 500px 246px #FFF , 1934px 1171px #FFF , 581px 413px #FFF , 1308px 665px #FFF , 1946px 1576px #FFF , 1403px 1775px #FFF , 1625px 81px #FFF , 883px 1421px #FFF , 331px 479px #FFF , 1740px 526px #FFF , 1456px 1518px #FFF , 1205px 1976px #FFF , 1239px 1547px #FFF , 1746px 1621px #FFF , 174px 1228px #FFF , 434px 512px #FFF , 1019px 1700px #FFF , 577px 1459px #FFF , 247px 1594px #FFF , 338px 187px #FFF , 1251px 5px #FFF , 1440px 1410px #FFF , 883px 1238px #FFF , 372px 1728px #FFF , 1598px 1960px #FFF , 1871px 1524px #FFF , 1501px 1656px #FFF , 1053px 1655px #FFF , 1246px 1145px #FFF , 545px 1929px #FFF , 881px 1681px #FFF , 1003px 934px #FFF , 186px 29px #FFF , 1108px 766px #FFF , 685px 1099px #FFF , 865px 1391px #FFF , 191px 881px #FFF , 1112px 1565px #FFF , 1354px 1479px #FFF , 1546px 131px #FFF , 869px 487px #FFF , 883px 840px #FFF , 1915px 1843px #FFF , 121px 1446px #FFF , 301px 270px #FFF , 179px 806px #FFF , 972px 617px #FFF , 1311px 1174px #FFF , 577px 357px #FFF , 826px 540px #FFF , 91px 879px #FFF , 1696px 413px #FFF , 1945px 726px #FFF , 200px 1134px #FFF , 965px 241px #FFF , 1968px 1932px #FFF , 185px 1438px #FFF , 980px 1160px #FFF , 1097px 1753px #FFF , 666px 1639px #FFF , 1320px 210px #FFF , 1833px 1049px #FFF , 1967px 1214px #FFF , 1397px 672px #FFF , 1825px 1054px #FFF;
  animation: animStar 50s linear infinite;
}
#stars:after {
  content: " ";
  position: absolute;
  top: 2000px;
  width: 1px;
  height: 1px;
  background: transparent;
  box-shadow: 1971px 456px #FFF , 1577px 1437px #FFF , 476px 393px #FFF , 803px 1228px #FFF , 7px 1062px #FFF , 1700px 1956px #FFF , 338px 1912px #FFF , 1336px 88px #FFF , 1015px 1865px #FFF , 592px 1019px #FFF , 1311px 1452px #FFF , 555px 1351px #FFF , 860px 661px #FFF , 588px 1593px #FFF , 618px 1711px #FFF , 226px 1186px #FFF , 1719px 1774px #FFF , 1382px 346px #FFF , 399px 738px #FFF , 1746px 1062px #FFF , 204px 895px #FFF , 1008px 217px #FFF , 911px 1350px #FFF , 962px 788px #FFF , 660px 85px #FFF , 1682px 911px #FFF , 1707px 1875px #FFF , 397px 751px #FFF , 1384px 551px #FFF , 764px 77px #FFF , 1133px 16px #FFF , 1305px 630px #FFF , 1366px 1973px #FFF , 1212px 754px #FFF , 1265px 1663px #FFF , 478px 416px #FFF , 540px 549px #FFF , 691px 1775px #FFF , 478px 11px #FFF , 748px 971px #FFF , 1264px 139px #FFF , 1875px 1032px #FFF , 406px 1696px #FFF , 1109px 107px #FFF , 846px 1611px #FFF , 849px 679px #FFF , 1322px 1004px #FFF , 1543px 652px #FFF , 1830px 1347px #FFF , 688px 1066px #FFF , 1140px 1691px #FFF , 471px 401px #FFF , 460px 1665px #FFF , 1560px 32px #FFF , 1413px 1384px #FFF , 1487px 1900px #FFF , 1154px 265px #FFF , 182px 199px #FFF , 765px 82px #FFF , 915px 1414px #FFF , 1812px 1724px #FFF , 113px 58px #FFF , 1312px 1790px #FFF , 714px 475px #FFF , 1766px 163px #FFF , 1312px 1149px #FFF , 828px 1303px #FFF , 1398px 573px #FFF , 1595px 867px #FFF , 1193px 1775px #FFF , 397px 815px #FFF , 1786px 895px #FFF , 1831px 444px #FFF , 980px 768px #FFF , 1456px 159px #FFF , 1240px 968px #FFF , 1894px 384px #FFF , 410px 1472px #FFF , 384px 659px #FFF , 569px 279px #FFF , 1339px 85px #FFF , 570px 1521px #FFF , 790px 1537px #FFF , 210px 334px #FFF , 1067px 1533px #FFF , 850px 1549px #FFF , 139px 923px #FFF , 1590px 1122px #FFF , 1603px 1528px #FFF , 348px 1030px #FFF , 360px 185px #FFF , 1405px 1176px #FFF , 299px 908px #FFF , 32px 595px #FFF , 1041px 1102px #FFF , 1674px 866px #FFF , 244px 1386px #FFF , 600px 1288px #FFF , 739px 1653px #FFF , 500px 953px #FFF , 1050px 843px #FFF , 584px 1005px #FFF , 1883px 1018px #FFF , 1414px 1979px #FFF , 1316px 229px #FFF , 1358px 1862px #FFF , 1645px 452px #FFF , 554px 1108px #FFF , 1217px 1134px #FFF , 1473px 1265px #FFF , 902px 130px #FFF , 595px 79px #FFF , 1023px 1240px #FFF , 294px 203px #FFF , 620px 1414px #FFF , 213px 460px #FFF , 1999px 1780px #FFF , 1654px 1829px #FFF , 1630px 1636px #FFF , 143px 1117px #FFF , 341px 450px #FFF , 856px 544px #FFF , 1598px 1550px #FFF , 1897px 1093px #FFF , 1428px 542px #FFF , 195px 1328px #FFF , 1169px 1743px #FFF , 879px 618px #FFF , 660px 1447px #FFF , 1700px 479px #FFF , 1436px 1990px #FFF , 1286px 1496px #FFF , 879px 1114px #FFF , 291px 1942px #FFF , 569px 1302px #FFF , 762px 1432px #FFF , 1547px 1432px #FFF , 366px 1288px #FFF , 82px 1840px #FFF , 17px 1413px #FFF , 667px 121px #FFF , 1840px 295px #FFF , 489px 1707px #FFF , 1628px 1525px #FFF , 138px 537px #FFF , 1596px 1410px #FFF , 644px 977px #FFF , 694px 1223px #FFF , 132px 1825px #FFF , 379px 1316px #FFF , 1687px 1832px #FFF , 1856px 1084px #FFF , 693px 920px #FFF , 1772px 167px #FFF , 1740px 1037px #FFF , 1339px 1763px #FFF , 1768px 382px #FFF , 1265px 1171px #FFF , 174px 983px #FFF , 404px 456px #FFF , 980px 618px #FFF , 1654px 1167px #FFF , 1570px 1042px #FFF , 128px 1630px #FFF , 152px 734px #FFF , 203px 886px #FFF , 1820px 191px #FFF , 1581px 10px #FFF , 276px 1374px #FFF , 1398px 106px #FFF , 1712px 362px #FFF , 1717px 1465px #FFF , 1206px 748px #FFF , 1077px 1363px #FFF , 136px 802px #FFF , 1968px 380px #FFF , 1081px 729px #FFF , 1164px 574px #FFF , 551px 9px #FFF , 511px 1727px #FFF , 981px 1755px #FFF , 879px 917px #FFF , 1317px 165px #FFF , 1331px 685px #FFF , 1125px 1274px #FFF , 825px 1033px #FFF , 246px 1750px #FFF , 1619px 1504px #FFF , 25px 255px #FFF , 314px 774px #FFF , 810px 1304px #FFF , 1210px 930px #FFF , 117px 722px #FFF , 218px 382px #FFF , 779px 200px #FFF , 1275px 772px #FFF , 651px 1646px #FFF , 753px 1930px #FFF , 362px 967px #FFF , 1416px 1474px #FFF , 1400px 944px #FFF , 1742px 1047px #FFF , 1113px 1022px #FFF , 1497px 1722px #FFF , 637px 1606px #FFF , 242px 385px #FFF , 322px 1995px #FFF , 109px 1162px #FFF , 694px 995px #FFF , 1206px 483px #FFF , 17px 998px #FFF , 1862px 1148px #FFF , 1061px 322px #FFF , 29px 49px #FFF , 1799px 1692px #FFF , 822px 1996px #FFF , 490px 862px #FFF , 1046px 521px #FFF , 2px 565px #FFF , 1393px 412px #FFF , 354px 1627px #FFF , 1134px 421px #FFF , 1726px 540px #FFF , 413px 1303px #FFF , 891px 1376px #FFF , 135px 1196px #FFF , 935px 1712px #FFF , 1217px 1260px #FFF , 1640px 998px #FFF , 1870px 465px #FFF , 1887px 599px #FFF , 1396px 548px #FFF , 944px 1836px #FFF , 1012px 533px #FFF , 1116px 1229px #FFF , 349px 411px #FFF , 78px 191px #FFF , 1864px 1586px #FFF , 1798px 537px #FFF , 1850px 527px #FFF , 1809px 591px #FFF , 1541px 468px #FFF , 594px 1415px #FFF , 1188px 848px #FFF , 780px 443px #FFF , 1413px 1961px #FFF , 1367px 1859px #FFF , 1822px 1231px #FFF , 932px 562px #FFF , 1101px 292px #FFF , 1072px 987px #FFF , 411px 1745px #FFF , 621px 1092px #FFF , 447px 1326px #FFF , 1186px 1087px #FFF , 137px 591px #FFF , 829px 1006px #FFF , 107px 1524px #FFF , 1880px 229px #FFF , 573px 24px #FFF;
}

#stars2 {
  width: 2px;
  height: 2px;
  background: transparent;
  box-shadow: 103px 593px #FFF , 1142px 470px #FFF , 1758px 274px #FFF , 610px 389px #FFF , 1236px 296px #FFF , 84px 1643px #FFF , 987px 1271px #FFF , 58px 1864px #FFF , 1888px 1759px #FFF , 1936px 1193px #FFF , 1431px 872px #FFF , 1189px 1570px #FFF , 1520px 1526px #FFF , 1104px 457px #FFF , 1314px 40px #FFF , 869px 1860px #FFF , 862px 545px #FFF , 916px 1496px #FFF , 105px 242px #FFF , 251px 1319px #FFF , 1095px 1930px #FFF , 393px 516px #FFF , 1857px 1579px #FFF , 1847px 1733px #FFF , 1707px 458px #FFF , 1024px 221px #FFF , 880px 759px #FFF , 1933px 588px #FFF , 1356px 368px #FFF , 443px 622px #FFF , 12px 986px #FFF , 646px 172px #FFF , 900px 905px #FFF , 1417px 1330px #FFF , 936px 1051px #FFF , 808px 572px #FFF , 1986px 371px #FFF , 1310px 937px #FFF , 1114px 1937px #FFF , 1720px 507px #FFF , 933px 1928px #FFF , 1543px 852px #FFF , 476px 1461px #FFF , 424px 698px #FFF , 1915px 1522px #FFF , 1418px 1011px #FFF , 1768px 1656px #FFF , 381px 141px #FFF , 789px 865px #FFF , 633px 12px #FFF , 196px 633px #FFF , 965px 432px #FFF , 1522px 491px #FFF , 1377px 1231px #FFF , 686px 259px #FFF , 1625px 1449px #FFF , 1516px 1780px #FFF , 998px 423px #FFF , 1511px 1905px #FFF , 418px 50px #FFF , 704px 614px #FFF , 427px 1422px #FFF , 795px 1421px #FFF , 231px 541px #FFF , 452px 1701px #FFF , 545px 913px #FFF , 1071px 1201px #FFF , 1768px 604px #FFF , 361px 1854px #FFF , 150px 1041px #FFF , 1392px 711px #FFF , 1722px 401px #FFF , 366px 737px #FFF , 1814px 1466px #FFF , 1675px 292px #FFF , 1202px 625px #FFF , 383px 492px #FFF , 1656px 554px #FFF , 593px 1419px #FFF , 249px 1573px #FFF , 1794px 1220px #FFF , 11px 201px #FFF , 806px 978px #FFF , 1967px 454px #FFF , 753px 1451px #FFF , 723px 934px #FFF , 1310px 908px #FFF , 188px 687px #FFF , 88px 323px #FFF , 1361px 1098px #FFF , 793px 1339px #FFF , 972px 1475px #FFF , 1608px 1323px #FFF , 85px 71px #FFF , 1615px 1877px #FFF , 919px 1436px #FFF , 1262px 1002px #FFF , 1367px 371px #FFF , 701px 1588px #FFF , 906px 289px #FFF , 647px 1172px #FFF , 411px 1206px #FFF , 1044px 1419px #FFF , 252px 505px #FFF , 236px 962px #FFF , 655px 761px #FFF , 831px 643px #FFF , 1262px 595px #FFF , 649px 997px #FFF , 368px 350px #FFF , 366px 1992px #FFF , 38px 971px #FFF , 648px 1670px #FFF , 97px 736px #FFF , 1933px 478px #FFF , 1109px 779px #FFF , 1792px 987px #FFF , 1959px 1205px #FFF , 1908px 679px #FFF , 39px 1460px #FFF , 820px 1190px #FFF , 1574px 426px #FFF , 578px 951px #FFF , 732px 771px #FFF , 17px 913px #FFF , 650px 1034px #FFF , 1981px 204px #FFF , 953px 1683px #FFF , 1787px 1036px #FFF , 1311px 1381px #FFF , 1932px 66px #FFF , 353px 1852px #FFF , 1840px 1528px #FFF , 1833px 43px #FFF , 1509px 1720px #FFF , 770px 1195px #FFF , 1315px 173px #FFF , 655px 639px #FFF , 820px 914px #FFF , 1109px 1901px #FFF , 1338px 1852px #FFF , 260px 386px #FFF , 228px 837px #FFF , 460px 1381px #FFF , 637px 650px #FFF , 450px 669px #FFF , 1189px 1002px #FFF , 1240px 1631px #FFF , 1285px 94px #FFF , 402px 449px #FFF , 1497px 466px #FFF , 494px 1879px #FFF , 262px 1224px #FFF , 1155px 393px #FFF , 459px 1501px #FFF , 515px 136px #FFF , 1082px 543px #FFF , 1902px 1935px #FFF , 1491px 1789px #FFF , 1553px 975px #FFF , 561px 412px #FFF , 456px 1767px #FFF , 1089px 1146px #FFF , 714px 314px #FFF , 718px 116px #FFF , 1420px 1122px #FFF , 424px 1259px #FFF , 388px 997px #FFF , 535px 1096px #FFF , 1394px 1853px #FFF , 1473px 393px #FFF , 315px 1612px #FFF , 1220px 1808px #FFF , 1955px 1016px #FFF , 1432px 1779px #FFF , 562px 759px #FFF , 869px 37px #FFF , 548px 673px #FFF , 1759px 569px #FFF , 293px 1666px #FFF , 1713px 78px #FFF , 865px 309px #FFF , 1845px 1329px #FFF , 545px 1693px #FFF , 1322px 1852px #FFF , 690px 926px #FFF , 226px 1023px #FFF , 498px 1143px #FFF , 1419px 1630px #FFF , 330px 111px #FFF , 1789px 67px #FFF , 1788px 570px #FFF , 776px 930px #FFF , 1191px 835px #FFF , 1502px 529px #FFF , 637px 245px #FFF , 1135px 215px #FFF , 42px 690px #FFF , 1991px 1650px #FFF , 621px 230px #FFF;
  animation: animStar 100s linear infinite;
}
#stars2:after {
  content: " ";
  position: absolute;
  top: 2000px;
  width: 2px;
  height: 2px;
  background: transparent;
  box-shadow: 103px 593px #FFF , 1142px 470px #FFF , 1758px 274px #FFF , 610px 389px #FFF , 1236px 296px #FFF , 84px 1643px #FFF , 987px 1271px #FFF , 58px 1864px #FFF , 1888px 1759px #FFF , 1936px 1193px #FFF , 1431px 872px #FFF , 1189px 1570px #FFF , 1520px 1526px #FFF , 1104px 457px #FFF , 1314px 40px #FFF , 869px 1860px #FFF , 862px 545px #FFF , 916px 1496px #FFF , 105px 242px #FFF , 251px 1319px #FFF , 1095px 1930px #FFF , 393px 516px #FFF , 1857px 1579px #FFF , 1847px 1733px #FFF , 1707px 458px #FFF , 1024px 221px #FFF , 880px 759px #FFF , 1933px 588px #FFF , 1356px 368px #FFF , 443px 622px #FFF , 12px 986px #FFF , 646px 172px #FFF , 900px 905px #FFF , 1417px 1330px #FFF , 936px 1051px #FFF , 808px 572px #FFF , 1986px 371px #FFF , 1310px 937px #FFF , 1114px 1937px #FFF , 1720px 507px #FFF , 933px 1928px #FFF , 1543px 852px #FFF , 476px 1461px #FFF , 424px 698px #FFF , 1915px 1522px #FFF , 1418px 1011px #FFF , 1768px 1656px #FFF , 381px 141px #FFF , 789px 865px #FFF , 633px 12px #FFF , 196px 633px #FFF , 965px 432px #FFF , 1522px 491px #FFF , 1377px 1231px #FFF , 686px 259px #FFF , 1625px 1449px #FFF , 1516px 1780px #FFF , 998px 423px #FFF , 1511px 1905px #FFF , 418px 50px #FFF , 704px 614px #FFF , 427px 1422px #FFF , 795px 1421px #FFF , 231px 541px #FFF , 452px 1701px #FFF , 545px 913px #FFF , 1071px 1201px #FFF , 1768px 604px #FFF , 361px 1854px #FFF , 150px 1041px #FFF , 1392px 711px #FFF , 1722px 401px #FFF , 366px 737px #FFF , 1814px 1466px #FFF , 1675px 292px #FFF , 1202px 625px #FFF , 383px 492px #FFF , 1656px 554px #FFF , 593px 1419px #FFF , 249px 1573px #FFF , 1794px 1220px #FFF , 11px 201px #FFF , 806px 978px #FFF , 1967px 454px #FFF , 753px 1451px #FFF , 723px 934px #FFF , 1310px 908px #FFF , 188px 687px #FFF , 88px 323px #FFF , 1361px 1098px #FFF , 793px 1339px #FFF , 972px 1475px #FFF , 1608px 1323px #FFF , 85px 71px #FFF , 1615px 1877px #FFF , 919px 1436px #FFF , 1262px 1002px #FFF , 1367px 371px #FFF , 701px 1588px #FFF , 906px 289px #FFF , 647px 1172px #FFF , 411px 1206px #FFF , 1044px 1419px #FFF , 252px 505px #FFF , 236px 962px #FFF , 655px 761px #FFF , 831px 643px #FFF , 1262px 595px #FFF , 649px 997px #FFF , 368px 350px #FFF , 366px 1992px #FFF , 38px 971px #FFF , 648px 1670px #FFF , 97px 736px #FFF , 1933px 478px #FFF , 1109px 779px #FFF , 1792px 987px #FFF , 1959px 1205px #FFF , 1908px 679px #FFF , 39px 1460px #FFF , 820px 1190px #FFF , 1574px 426px #FFF , 578px 951px #FFF , 732px 771px #FFF , 17px 913px #FFF , 650px 1034px #FFF , 1981px 204px #FFF , 953px 1683px #FFF , 1787px 1036px #FFF , 1311px 1381px #FFF , 1932px 66px #FFF , 353px 1852px #FFF;
}

#stars3 {
  width: 3px;
  height: 3px;
  background: transparent;
  box-shadow: 667px 320px #FFF , 178px 1273px #FFF , 1245px 1230px #FFF , 465px 859px #FFF , 821px 965px #FFF , 250px 1151px #FFF , 500px 1601px #FFF , 1900px 1707px #FFF , 1175px 1409px #FFF , 1534px 910px #FFF , 413px 756px #FFF , 689px 1341px #FFF , 1408px 860px #FFF , 1625px 1180px #FFF , 1871px 1199px #FFF , 1578px 1986px #FFF , 743px 62px #FFF , 275px 160px #FFF , 1624px 881px #FFF , 1256px 993px #FFF , 406px 1538px #FFF , 1511px 154px #FFF , 1153px 297px #FFF , 43px 785px #FFF , 909px 1392px #FFF , 89px 684px #FFF , 777px 1732px #FFF , 1110px 913px #FFF , 95px 1077px #FFF , 1807px 776px #FFF , 17px 622px #FFF , 1615px 459px #FFF , 705px 1635px #FFF , 700px 1776px #FFF , 1441px 1705px #FFF , 1170px 378px #FFF , 824px 1799px #FFF , 960px 518px #FFF , 1566px 1994px #FFF , 853px 1419px #FFF , 1177px 901px #FFF , 1642px 1902px #FFF , 1736px 778px #FFF , 297px 1864px #FFF , 46px 1927px #FFF , 1302px 870px #FFF , 1472px 1079px #FFF , 1139px 1005px #FFF , 1825px 601px #FFF , 597px 1703px #FFF , 1159px 689px #FFF , 356px 1048px #FFF , 1498px 843px #FFF , 696px 960px #FFF , 289px 1542px #FFF , 736px 208px #FFF , 68px 1499px #FFF , 489px 1687px #FFF , 1309px 964px #FFF , 732px 132px #FFF , 1806px 951px #FFF , 744px 1969px #FFF , 1980px 1214px #FFF , 2000px 1622px #FFF , 1213px 1236px #FFF , 782px 1100px #FFF , 1765px 875px #FFF , 652px 875px #FFF , 966px 1469px #FFF , 785px 416px #FFF , 48px 1365px #FFF , 813px 774px #FFF , 1056px 1958px #FFF , 270px 258px #FFF , 1940px 1847px #FFF , 1671px 1647px #FFF , 1500px 1606px #FFF , 1693px 1711px #FFF , 1408px 812px #FFF , 1050px 562px #FFF , 558px 909px #FFF , 23px 430px #FFF , 1582px 1657px #FFF , 1984px 779px #FFF;
  animation: animStar 150s linear infinite;
}
#stars3:after {
  content: " ";
  position: absolute;
  top: 2000px;
  width: 3px;
  height: 3px;
  background: transparent;
  box-shadow: 667px 320px #FFF , 178px 1273px #FFF , 1245px 1230px #FFF , 465px 859px #FFF , 821px 965px #FFF , 250px 1151px #FFF , 500px 1601px #FFF , 1900px 1707px #FFF , 1175px 1409px #FFF , 1534px 910px #FFF , 413px 756px #FFF , 689px 1341px #FFF , 1408px 860px #FFF , 1625px 1180px #FFF , 1871px 1199px #FFF , 1578px 1986px #FFF , 743px 62px #FFF , 275px 160px #FFF , 1624px 881px #FFF , 1256px 993px #FFF , 406px 1538px #FFF , 1511px 154px #FFF , 1153px 297px #FFF , 43px 785px #FFF , 909px 1392px #FFF , 89px 684px #FFF , 777px 1732px #FFF , 1110px 913px #FFF , 95px 1077px #FFF , 1807px 776px #FFF , 17px 622px #FFF , 1615px 459px #FFF , 705px 1635px #FFF , 700px 1776px #FFF , 1441px 1705px #FFF , 1170px 378px #FFF , 824px 1799px #FFF , 960px 518px #FFF , 1566px 1994px #FFF , 853px 1419px #FFF , 1177px 901px #FFF , 1642px 1902px #FFF , 1736px 778px #FFF , 297px 1864px #FFF , 46px 1927px #FFF , 1302px 870px #FFF , 1472px 1079px #FFF , 1139px 1005px #FFF , 1825px 601px #FFF , 597px 1703px #FFF , 1159px 689px #FFF , 356px 1048px #FFF , 1498px 843px #FFF , 696px 960px #FFF , 289px 1542px #FFF , 736px 208px #FFF , 68px 1499px #FFF , 489px 1687px #FFF , 1309px 964px #FFF , 732px 132px #FFF , 1806px 951px #FFF , 744px 1969px #FFF , 1980px 1214px #FFF , 2000px 1622px #FFF , 1213px 1236px #FFF , 782px 1100px #FFF , 1765px 875px #FFF , 652px 875px #FFF , 966px 1469px #FFF , 785px 416px #FFF , 48px 1365px #FFF , 813px 774px #FFF , 1056px 1958px #FFF , 270px 258px #FFF , 1940px 1847px #FFF , 1671px 1647px #FFF , 1500px 1606px #FFF , 1693px 1711px #FFF , 1408px 812px #FFF , 1050px 562px #FFF , 558px 909px #FFF , 23px 430px #FFF , 1582px 1657px #FFF , 1984px 779px #FFF , 652px 1133px #FFF , 1541px 551px #FFF , 1194px 700px #FFF , 1758px 23px #FFF , 403px 1986px #FFF , 829px 567px #FFF , 787px 926px #FFF , 443px 1214px #FFF , 149px 159px #FFF , 506px 1388px #FFF , 503px 422px #FFF , 1463px 419px #FFF , 1329px 1238px #FFF , 1025px 1264px #FFF , 1868px 275px #FFF , 209px 330px #FFF;
}

#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;
}
#title 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);
  }
}

        [...content and title section...]

How can I add moving stars in the background in my photo?

Body:
Using particles.js with full customization and lot of more feature.

Browse here for more

/* ---- particles.js config ---- */

particlesJS("particle-container", {
  "particles": {
    "number": {
      "value": 80,
      "density": {
        "enable": true,
        "value_area": 800
      }
    },
    "color": {
      "value": "random"
    },
    "shape": {
      "type": "circle",
      "stroke": {
        "width": 0,
        "color": "#000000"
      },
      "polygon": {
        "nb_sides": 5
      },
      "image": {
        "src": "img/github.svg",
        "width": 100,
        "height": 100
      }
    },
    "opacity": {
      "value": 0.5,
      "random": false,
      "anim": {
        "enable": false,
        "speed": 1,
        "opacity_min": 0.1,
        "sync": false
      }
    },
    "size": {
      "value": 3,
      "random": true,
      "anim": {
        "enable": false,
        "speed": 40,
        "size_min": 0.1,
        "sync": false
      }
    },
    "line_linked": {
      "enable": false,
      "distance": 150,
      "color": "#ffffff",
      "opacity": 0.4,
      "width": 1
    },
    "move": {
      "enable": true,
      "speed": 1,
      "direction": "none",
      "random": false,
      "straight": false,
      "out_mode": "out",
      "bounce": false,
      "attract": {
        "enable": false,
        "rotateX": 600,
        "rotateY": 1200
      }
    }
  },
  "interactivity": {
    "detect_on": "canvas",
    "events": {
      "onhover": {
        "enable": false,
        "mode": "repulse"
      },
      "onclick": {
        "enable": false,
        "mode": "push"
      },
      "resize": true
    },
    "modes": {
      "grab": {
        "distance": 400,
        "line_linked": {
          "opacity": 1
        }
      },
      "bubble": {
        "distance": 400,
        "size": 40,
        "duration": 2,
        "opacity": 8,
        "speed": 3
      },
      "repulse": {
        "distance": 200,
        "duration": 0.4
      },
      "push": {
        "particles_nb": 4
      },
      "remove": {
        "particles_nb": 2
      }
    }
  },
  "retina_detect": true
});

/* Reset. */
body {
  margin: 0;
  background: #ecf3f3;
}

canvas {
  display: block;
  vertical-align: bottom;
}

/* Particle container. */
#particle-container {
  position: absolute;
  width: 100%;
  height: 100%;
}

<script src="https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="particle-container"></div>


问:
Distinct repeated timeouts for UIView.animate
The UIKit's UIView.animate() method appears to be useful when implementing many animations. However, I recently ran into a problem while implementing a series of repeated animations with different timeouts.

Suppose, we have a list of images let images: [UIImage] and an image view @IBOutlet weak var presentingImageView: UIImageView!. We want to make it change its image every 3.0 seconds, for that case we would write the following code:

```<code>Timer.scheduledTimer(withTimeInterval: 3.0, repeats: true) { _ in
    self.index += 1
}

UIView.animate(withDuration: 3.0,
               delay: 0.1,
               options: .repeat,
               animations: {
                   self.presentingImageView.image = images[index]
               })
</code>```

And it would work, but what if we also have an array of durations let durations: [TimeInterval] and we want to change images every duration[index] seconds?

答:
Instead of timer, you can call 'changeImage' function every 'durations[Index]'.</p>

```<code>func changeImage() {
    let duration = durations[index]
    UIView.animate(withDuration: duration,
                   delay: 0.1,
                   options: .repeat,
                   animations: {
                    self.presentingImageView.image = self.images[self.index]
                    DispatchQueue.main.asyncAfter(deadline: .now() + duration) {
                        self.changeImage()
                    }
    })
}
</code>```

Body:
The UIKit's UIView.animate() method appears to be useful when implementing many animations. However, I recently ran into a problem while implementing a series of repeated animations with different timeouts.

Suppose, we have a list of images let images: [UIImage] and an image view @IBOutlet weak var presentingImageView: UIImageView!. We want to make it change its image every 3.0 seconds, for that case we would write the following code:

Timer.scheduledTimer(withTimeInterval: 3.0, repeats: true) { _ in
    self.index += 1
}

UIView.animate(withDuration: 3.0,
               delay: 0.1,
               options: .repeat,
               animations: {
                   self.presentingImageView.image = images[index]
               })

And it would work, but what if we also have an array of durations let durations: [TimeInterval] and we want to change images every duration[index] seconds?

Body:
Instead of timer, you can call 'changeImage' function every 'durations[Index]'.

func changeImage() {
    let duration = durations[index]
    UIView.animate(withDuration: duration,
                   delay: 0.1,
                   options: .repeat,
                   animations: {
                    self.presentingImageView.image = self.images[self.index]
                    DispatchQueue.main.asyncAfter(deadline: .now() + duration) {
                        self.changeImage()
                    }
    })
}


问:
How can I format a DateTime in a Razor view?
I have variables like:

```<code>DateTime crd = a.CreationDate; (shown as a variable in C# but available in razor views)
</code>```

I want to show these as a date using the format: 11/06/2011 02:11

Ideally I would like to have some kind of HTML helper for this. Anyone out there already have something that might meet my needs?

答:
Try Razor View

@Html.Raw(item.Today_Date.Date.ToString("dd.MM.yyyy"))

ContentLicense: CC BY-SA 3.0

Body:
I have variables like:

DateTime crd = a.CreationDate; (shown as a variable in C# but available in razor views)

I want to show these as a date using the format: 11/06/2011 02:11

Ideally I would like to have some kind of HTML helper for this. Anyone out there already have something that might meet my needs?


问:
Laravel - Form select date - Only allow users to select between two dates send from database
I have two tables - 'Trips' and 'Events'. One trip can have many events.
I have a form which allows users to add events to their trip.
When selecting the start date and end date of the event I only want to allow the users to select a date that is from the trip start date and the trip end date.

For example if a trip to New York was created from the 1st March to the 14th March, users should only be able to add an event between those dates. Is there a good way to do this?

Trips Table
Events Table

addEvent.blade.php
`

```<code><div class="form-group">
    <div class="form-group">
        {!! Form::label('trip_id', 'Your Destinations:') !!}
        <select class="form-control" name="trip_id">
          @foreach($trips as $trip)
            <option value='{{ $trip->id}}'>{{$trip->destination}}</option>
          @endforeach
        </select>
      </div>
    </div>

<div class="form-group">
  <div class="form-group">
    {!! Form::label('event_name', 'Add Event:') !!}
    <div class="">
      {!! Form::text('event_name', null, ['class' => 'form-control']) !!}
      {!! $errors->first('event_name', '<p class="alert alert-danger">:message</p>') !!}
    </div>
  </div>
</div>

<div class="form-group">
  <div class="form-group">
    {!! Form::label('start_date', 'Start Date:') !!}
    <div class="">
      {!! Form::date('start_date', \Carbon\Carbon::now(), ['class' => 'form-control']) !!}
      {!! $errors->first('start_date', '<p class="alert alert-danger">:message</p>') !!}
    </div>
  </div>
</div>

<div class="form-group">
  <div class="form-group">
    {!! Form::label('end_date', 'End Date:') !!}
    <div class="">
      {!! Form::date('end_date', null, ['class' => 'form-control']) !!}
      {!! $errors->first('end_date', '<p class="alert alert-danger">:message</p>') !!}
    </div>
  </div>
</div>

<div class="form-group"  <br/>
{!! Form::submit('Add Event', ['class' => 'btn btn-primary']) !!}
</code>```

`

Event Controller

```<code>public function addEvent(Request $request)
{
  $validator = Validator::make($request->all(),[
    'event_name' => 'required',
    'start_date' => 'required',
    'end_date' => 'required',
    'trip_id'=> 'required',
  ]);

  if($validator->fails()) {
    \Session::flash('warning', 'Please enter the valid details');
    return redirect('/events')->with('input', Input::all());
  }

  $events = new Events;
  $trips = Trip::all();
  $events->event_name = $request['event_name'];
  $events->start_date = $request['start_date'];
  $events->end_date = $request['end_date'];
  $events->trip_id = $request['trip_id'];
  $events->save();

return redirect('trips')->with('success', 'The new event has been added to your trip')->with('trips', $trips);
}
</code>```

trip.blade.php

```<code><div class="form-group">
      <input type="text" name="destination" class="form-control" value="{{$trip->destination}}" placeholder="Destination" />
    </div>
    <h7>Trip Start Date: </h7>
    <div class="form-group">
      <input type="date" name="startdate" class="form-control" value="{{$trip->startdate}}" placeholder="Start Date" />
    </div>
    <h7>Trip End Date: </h7>
    <div class="form-group">
      <input type="date" name="enddate" class="form-control" value="{{$trip->enddate}}" placeholder="End Date" />
    </div>
    <div>
</code>```

trip controller

```<code>public function submit(Request $request){
  $this->validate($request, [
    'name'          => 'required',
    'email'         => 'required',
    'destination'   => 'required',
    'startdate'     => 'required',
    'enddate'       => 'required'
  ]);

  //Create new trips
  $trip = new Trip;
  $trip->name = $request->input('name');
  $trip->email = $request->input('email');
  $trip->destination = $request->input('destination');
  $trip->startdate = $request->input('startdate');
  $trip->enddate = $request->input('enddate');
  $trip->user_id = auth()->user()->id;

  //save trips
  $trip->save();

  //Rredirect
  return redirect('/home')->with('status', 'Trip Created Sucessfully');

}
</code>```

答:
in the addEvent.blade.php file you can add the "min" and "max" attributes to start_date and end_date based on existing trip dates

```<code>{!! Form::date('start_date', \Carbon\Carbon::now(), ['class' => 'form-control', 'min' => $trip->startdate, 'max' => $trip->enddate]) !!}

{!! Form::date('end_date', null, ['class' => 'form-control', 'min' => $trip->startdate, 'max' => $trip->enddate]) !!}
</code>```

and in the addEvent function you have to add validations for start_date and end_date so that they do not exceed the dates of the trip table

```<code>public function addEvent(Request $request)
{

  // first take data from the trip table
  $trip = Trip::find($request->trip_id);

  // if trip not found then error
  if( !$trip ){
    return redirect('trips')->with('fail', 'Trip not found');
  }

  // add validations for start_date and end_date so that they do not exceed the dates of the trip table
  // gte is for grather than equal
  // lte is  for less than equal
  // or you can use min max

  $validator = Validator::make($request->all(),[
    'event_name' => 'required',
    'start_date' => 'required|date|min:'.$trip->startdate.'|max:'.$trip->enddate, //
    'end_date' => 'required|date|gte:start_date|max:'.$trip->enddate,
    'trip_id'=> 'required',
  ]);

  if($validator->fails()) {
    \Session::flash('warning', 'Please enter the valid details');
    return redirect('/events')->with('input', Input::all());
  }

  $events = new Events;
  $trips = Trip::all();
  $events->event_name = $request['event_name'];
  $events->start_date = $request['start_date'];
  $events->end_date = $request['end_date'];
  $events->trip_id = $request['trip_id'];
  $events->save();

return redirect('trips')->with('success', 'The new event has been added to your trip')->with('trips', $trips);
}
</code>```

Body:
I have two tables - 'Trips' and 'Events'. One trip can have many events.
I have a form which allows users to add events to their trip.
When selecting the start date and end date of the event I only want to allow the users to select a date that is from the trip start date and the trip end date.

For example if a trip to New York was created from the 1st March to the 14th March, users should only be able to add an event between those dates. Is there a good way to do this?

Trips Table
Events Table

addEvent.blade.php
`

        {!! Form::label('trip_id', 'Your Destinations:') !!}
        <select class="form-control" name="trip_id">
          @foreach($trips as $trip)
            <option value='{{ $trip->id}}'>{{$trip->destination}}</option>
          @endforeach
        </select>

    {!! Form::label('event_name', 'Add Event:') !!}

      {!! Form::text('event_name', null, ['class' => 'form-control']) !!}
      {!! $errors->first('event_name', '
:message
') !!}

    {!! Form::label('start_date', 'Start Date:') !!}

      {!! Form::date('start_date', \Carbon\Carbon::now(), ['class' => 'form-control']) !!}
      {!! $errors->first('start_date', '
:message
') !!}

    {!! Form::label('end_date', 'End Date:') !!}

      {!! Form::date('end_date', null, ['class' => 'form-control']) !!}
      {!! $errors->first('end_date', '
:message
') !!}

 'btn btn-primary']) !!}

`

Event Controller

public function addEvent(Request $request)
{
  $validator = Validator::make($request->all(),[
    'event_name' => 'required',
    'start_date' => 'required',
    'end_date' => 'required',
    'trip_id'=> 'required',
  ]);

  if($validator->fails()) {
    \Session::flash('warning', 'Please enter the valid details');
    return redirect('/events')->with('input', Input::all());
  }

  $events = new Events;
  $trips = Trip::all();
  $events->event_name = $request['event_name'];
  $events->start_date = $request['start_date'];
  $events->end_date = $request['end_date'];
  $events->trip_id = $request['trip_id'];
  $events->save();

return redirect('trips')->with('success', 'The new event has been added to your trip')->with('trips', $trips);
}

trip.blade.php

      <input type="text" name="destination" class="form-control" value="{{$trip->destination}}" placeholder="Destination" />

    <h7>Trip Start Date: </h7>

      <input type="date" name="startdate" class="form-control" value="{{$trip->startdate}}" placeholder="Start Date" />

    <h7>Trip End Date: </h7>

      <input type="date" name="enddate" class="form-control" value="{{$trip->enddate}}" placeholder="End Date" />

trip controller

public function submit(Request $request){
  $this->validate($request, [
    'name'          => 'required',
    'email'         => 'required',
    'destination'   => 'required',
    'startdate'     => 'required',
    'enddate'       => 'required'
  ]);

  //Create new trips
  $trip = new Trip;
  $trip->name = $request->input('name');
  $trip->email = $request->input('email');
  $trip->destination = $request->input('destination');
  $trip->startdate = $request->input('startdate');
  $trip->enddate = $request->input('enddate');
  $trip->user_id = auth()->user()->id;

  //save trips
  $trip->save();

  //Rredirect
  return redirect('/home')->with('status', 'Trip Created Sucessfully');

}

Body:
in the addEvent.blade.php file you can add the "min" and "max" attributes to start_date and end_date based on existing trip dates

{!! Form::date('start_date', \Carbon\Carbon::now(), ['class' => 'form-control', 'min' => $trip->startdate, 'max' => $trip->enddate]) !!}

{!! Form::date('end_date', null, ['class' => 'form-control', 'min' => $trip->startdate, 'max' => $trip->enddate]) !!}

and in the addEvent function you have to add validations for start_date and end_date so that they do not exceed the dates of the trip table

public function addEvent(Request $request)
{

  // first take data from the trip table
  $trip = Trip::find($request->trip_id);

  // if trip not found then error
  if( !$trip ){
    return redirect('trips')->with('fail', 'Trip not found');
  }

  // add validations for start_date and end_date so that they do not exceed the dates of the trip table
  // gte is for grather than equal
  // lte is  for less than equal
  // or you can use min max

  $validator = Validator::make($request->all(),[
    'event_name' => 'required',
    'start_date' => 'required|date|min:'.$trip->startdate.'|max:'.$trip->enddate, //
    'end_date' => 'required|date|gte:start_date|max:'.$trip->enddate,
    'trip_id'=> 'required',
  ]);

  if($validator->fails()) {
    \Session::flash('warning', 'Please enter the valid details');
    return redirect('/events')->with('input', Input::all());
  }

  $events = new Events;
  $trips = Trip::all();
  $events->event_name = $request['event_name'];
  $events->start_date = $request['start_date'];
  $events->end_date = $request['end_date'];
  $events->trip_id = $request['trip_id'];
  $events->save();

return redirect('trips')->with('success', 'The new event has been added to your trip')->with('trips', $trips);
}