Angular 11 How to convert HTML to image?

Angular 11 How to convert HTML to image

Angular 11 How to convert HTML to image, This article will tell the developer how to change over HTML into an image utilizing the html-to-image NPM bundle. developer can change over any Dom components into a image, Dom components like div, length, table, and so forth

By utilizing html-to-image bundle client can change HTML over to an image, a developer can change HTML over to JPEG, PNG, SVG, BLOB(Binary Large Object), This model gives you a straightforward and simple approach to change Angular 11 HTML over to Image.

Angular 11 How to convert HTML to Image Example

  • Step 1 – Create a new Angular 11 app
  • Step 2 – Install html-to-image Package
  • Step 3 – Add HTML into a view file
  • Step 4 – Add code in Component .ts file
  • Step 5 – Run Angular app

Step 1 – Create a new Angular 11 app

First of all, open your command prompt and execute the following command to create a new Angular 11 app.

ng new htmltoImage

Step 2 – Install html-to-image Package

In this step, We will install html-to-image using node package module, open the terminal and execute the following command in the terminal.

npm install --save html-to-image

Step 3 – Add HTML into a view file

In this step, We will add HTML code in a view file so visit the src/app/app.component.html file and add your HTML code

 

<div id="image-section">
  <h1>Hello world!</h1>
</div>
 
<button type="button" (click)="generateImg()">GenerateImage</button>

In the above code, I have added the id attribute because this package will access the DOM Elements and generate an image.

Step 4 – Add code in Component .ts file

import { Component } from '@angular/core';
import * as htmlToImage from 'html-to-image';
 
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'htmltoImage';
 
  generateImg(){
    var node:any = document.getElementById('image-section');
    htmlToImage.toPng(node)
      .then(function (dataUrl) {
        var img = new Image();
        img.src = dataUrl;
        document.body.appendChild(img);
      })
      .catch(function (error) {
        console.error('Error, something is missing!', error);
      });
  }
}
Step 5 –

Step 5 – Run Angular app

ng serve

How to create new components in Angular using the CLI

How to create new components in Angular using the CLI

How to create new components in Angular using the CLI : It just so happens, when creating your own new components in Angular, you can finish the cycle totally by hand. That was useful for learning the subtleties of what goes in to an Angular Component. Well we as a whole like automation, and you can really build another Angular command automatically using the Angular CLI, That sounds magnificent as less composing code is a reward in my book. How about we take a stab at building another Angular Component yet this time, we’ll utilize that extremely helpful Angular command line interface.

So before you start generating component using the CLI, please setup Angular app locally on your system. if you already setup angular app skip this step and move to Step 2 : CLI Component Generation

Step 1: Angular App Installation :

See how to install Angular 
after installation move to Step 2 below.

Step  2 : CLI Component Generation

You’ll want to have the ng serve process already running in a command line window for your application. Then, you can open another instance of the command line and type ng generate component edit-new-corporate to create a new edit-new-corporate component.

PS D:\corporateApp> ng g c components/edit-new-corporate
or 
PS D:\corporateApp> ng genarte component components/edit-new-corporate

> corporateApp@0.0.0 ng D:\corporateApp
> ng "g" "c" "components/edit-new-corporate"

CREATE src/app/components/edit-new-corporate/edit-new-corporate.component.html (33 bytes)
CREATE src/app/components/edit-new-corporate/edit-new-corporate.component.spec.ts (700 bytes)
CREATE src/app/components/edit-new-corporate/edit-new-corporate.component.ts (322 bytes)
CREATE src/app/components/edit-new-corporate/edit-new-corporate.component.scss (0 bytes)

Alright exceptionally interesting! It seems as though the CLI naturally made the new folder to hold our new component in src/components/edit-corporate. Likewise we see four new files related with the naturally created component.

edit-new-corporate.component.html

<p>
  edit-new-corporate works!
</p>

edit-new-corporate.component.spec.ts

import { async, ComponentFixture, TestBed } from '@angular/core/testing';

import { EditNewCorporateComponent } from './edit-new-corporate.component';

describe('EditNewCorporateComponent', () => {
  let component: EditNewCorporateComponent;
  let fixture: ComponentFixture<EditNewCorporateComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ EditNewCorporateComponent ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(EditNewCorporateComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

edit-new-corporate.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-edit-new-corporate',
  templateUrl: './edit-new-corporate.component.html',
  styleUrls: ['./edit-new-corporate.component.scss']
})
export class EditNewCorporateComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

edit-new-corporate.component.css

/* todo: add your styles here */

How to Add Bootstrap to Angular

How to Add Bootstrap to Angular

How to Add Bootstrap to Angular : In this article , we will tell you the best way to add Bootstrap to the Angular application. This instructional exercise utilizes Bootstrap 4 and Angular 9. We will tell you the best way to introduce the bootstrap CSS.

What is Bootstrap:

The bootstrap is a responsive mobile-first CSS framework for building Web Applications. It is open source and has all the features like Sass variables, mixings, responsive grid system, prebuilt components, and powerful JavaScript plugins.

Bootstrap consists of few CSS files & JS files.

The CSS files contains all the styles definitions.

Many of bootstrap components require the use of JavaScript to function. For Example, carousels, drop-down menus, auto-suggest, etc require bootstraps.js file. It also has dependency on jQueryPopper.js.

Step 1 : Create a new Angular Application

ng new Bootstrap-example

Step 2 : Adding Bootstrap CSS File –

Assuming you are not utilizing any of the components that utilization JavaScript, you don’t have to introduce JS documents. There are a couple of manners by which you can add the CSS Files.

We can introduce the Bootstrap CSS document in one of the accompanying ways

  • You can use the CSS file from a CDN
  • Also, copy the bootstrap.min.css file to a local folder
  • Install the bootstrap npm package

Once introduced, you can remember it for the application by utilizing the one of the techniques

  • You can add it in index.html using the link tag
  • Alos, include it in angular.json
  • Import it in styles.css

Add Bootstrap using the CDN –

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" crossorigin="anonymous">
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Bootstrap CSS Example</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"  crossorigin="anonymous">
</head>
<body>
  <app-root></app-root>
</body>
</html>

Alternatively, you can use the @import directive in the styles.css file

@import "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"

Install the bootstrap package :

This way is recommended to everyone to add Bootstrap to Angular :

Run the following command to install the latest version of Bootstrap to your Application.

npm install --save bootstrap

This will add the bootstrap files to the node_modules/bootstrap directory.

Open the angular.json file and locate the projects -> Bootstrap-example (your project name) -> architect -> build -> styles node.

"styles": [
     "./node_modules/bootstrap/dist/css/bootstrap.min.css",
     "src/styles.css"
],

Also, you can just add the @import directive to import it in the styles.css

@import "~../node_modules/bootstrap/dist/css/bootstrap.min.css";

Step 3: Run your app using the following command

ng serve

 

Angular Google Bar Chart Example

Angular Google Bar Chart

Angular Google Bar Chart :

Google chart tools are powerful, simple to use, and free. Try out our rich gallery of interactive charts and data tools. Get started Chart Gallery. insert_chart Rich Gallery Choose from a variety of charts. From simple scatter plots to hierarchical treemaps, find the best fit for your data.

This instructional exercise shows you Angular google bar graph model. it’s straightforward illustration of Angular google bar graph npm. This post will give you straightforward illustration of Angular precise google-graphs google bar diagram . Here you will figure out how to add google bar graph in Angular .

you can without much of a stretch add google programming interface bar graph in Angular 6, Angular 7, Angular 8, Angular 9, Angular 10, Angular 11 and Angular 12 form application.

In this model we will utilize Angular google-graphs npm bundle to make google programming interface bar outline model in Angular 11 application. we will essentially introduce that Angular google-graphs npm bundle and use GoogleChartsModule module to make code.

Along these lines, we should see cry step and get qr code as like roar screen capture:

Step 1: Create New App

ng new myNewApp

Step 2: Install angular-google-charts npm Package

Add angular-google-charts in our angular application by using following command.

npm install angular-google-charts

Step 3: Import GoogleChartsModule

src/app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
  
import { AppComponent } from './app.component';
import { GoogleChartsModule } from 'angular-google-charts';
   
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    GoogleChartsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 4: Update Ts File

src/app/app.component.ts

import { Component } from '@angular/core';
   
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
    
  chartData = {
      type: 'BarChart',
      data: [
      ["Pendrive",  500],
      ["Hard Disk",  800],
      ["Charger",  400],
   ],
   chartColumns: ['Sweets', 'Sell'],
   width: 1000,
   height: 400
  };
     
}

Step 5: Update HTML File

<google-chart 
    [type]="chartData.type" 
    [data]="chartData.data" 
    [columns]="chartData.chartColumns" 
    [width]="chartData.width"
    [height]="chartData.height">     
</google-chart>

Now run your application using the following command

ng serve

 

Javascript Interview Questions

Basic JS questions :

1. What are the different data types present in JavaScript?
2. Explain Hoisting in JavaScript.
3. Difference between “==” and “===” operators.
4. Explain Implicit Type Coercion in JavaScript.
5. Is JavaScript a statically typed or a dynamically typed language?
6. What is NaN property in JavaScript?
7. What is an Immediately Invoked Function in JavaScript?
8. Explain Higher Order Functions in JavaScript.
9. Explain “this” keyword.
10. Explain call(), apply() and, bind() methods.
11. What is Currying in JavaScript?
12. Explain Scope and Scope Chain in JavaScript.
13. Explain Closures in JavaScript.
14. What are object prototypes?
15. What are callbacks?
16. What is memorization?
17. What is recursion in a programming language?
18. What is the use of a constructor function in JavaScript?
19. What is DOM?
20. What are arrow functions?
21. Differences between declaring variables using var, let and const.
22. What is the rest parameter and spread operator?
23. What is the use of promises in JavaScript?
24. What are classes in JavaScript?
25. What are generator functions?
26. Explain WeakSet in JavaScript.
27. Explain WeakMap in JavaScript.
28. What is Object Destructuring?
29. What is a Temporal Dead Zone?

Primitive types :

String :  A string will be represented using a single or a double quote. It will also represents a series of characters.

let a= "Rohit Gautam"; //using double quotes
let b= 'Ajit Singh'; //using single quotes

Number – It will represent a number and can be written with or without decimals.

let a = 3; // Without decimal
let b = 3.6; // With decimal

BigInt – The number which is above the limitation of Number data type, BigInt store that number. It can store large integers and is represented by adding “n” to an integer literal.

const bigInt =  90123456789023452345678678901230145678923234;

Boolean – It will have only two values : true or false. Booleans are generally used for conditional testing in any application.

let a = 7;
let b =  7;
let c =  4;
let d =  4;
(a == b) // returns true
(a == c) //returns false
(c == d) //returns true

Undefined – When any value is not assigned to a declared variable, it will have the value of undefined and it’s type is also undefined.

var a; // value of a is undefined
var b = undefined; // we can also set the value of a variable as undefined

Null – It represents a non-existent or a invalid value.

var a = null;

Symbol – It is a new data type which is introduced in the ES6 version of JavaScript. It is used to store an unique value.

let a = Symbol('symbol');

typeof of primitive types :

typeof "Ajit Singh" // Returns "string"
typeof 34.4 // Returns "number"
typeof true // Returns "boolean"
typeof 21234567890123453456789012345678906789012345678901234567890 // Returns bigint
typeof undefined // Returns "undefined"
typeof null // Returns "object" (It is a bug in JavaScript)
typeof Symbol('symbol') // Returns Symbol

Non-primitive types : 

As we have used Primitive data types can store only a single value. To store multiple values, non-primitive data types will be used.

Object – Used to store collection of data.

// Collection of data in form of key-value pairs

var object1 = {
   a:  12,
   b:  "JavaScript",
   c: function(){
      return this.a;
   }
}
      
// Collection of data as an ordered list
      
var arr1 = [9, "JavaScript", true, 5.5, false];

2. Explain Hoisting in JavaScript.

Hoisting is a default way of JavaScript where all the variable and function declarations are continued on top.

This means variables and functions are declared, they will moved on top of the scope. The scope can be both local and global.

hoistedVariable = 6;
console.log(hoistedVariable); // outputs 6 even when the variable is declared after it is initialized	
var hoistedVariable;
var a = 2021;
var b = "Online Portfolio";
a + b    // Returns "2021Online Portfolio";

 

ators.

These both are the comparison operators where ‘==’ only compare value whereas, ‘===’ used to compare both value and type.

var a = 5;
var b = "5";
(a == b)  // Returns true since the value of both a and b is the same

(a === b) // Returns false since the typeof a is "number" and typeof b is "string"

4. Explain Implicit Type Coercion in JavaScript.

Implicit type coercion in JavaScript is process of automatic conversion of value from one data type to another. It takes place when the operands of an expression are of different data types.

String coercion :

While using the ‘ + ‘ operator between 2 different value. When a number is added to a string, the number type is always converted to the string type.

var a = 21;
var b = "online-portoflioin";
a + b   // Returns "21Helloonline-portoflioin";

5. Is JavaScript a statically typed or a dynamically typed language?

It is a dynamically typed language and  the type of a variable is checked during run-time in contrast to statically typed language, where the type of a variable is checked during compile-time.

Since JavaScript is a loosely(dynamically) composed language, factors in JS are not related with any sort. A variable can hold the worth of any information type.

For instance, a variable which is alloted a number kind can be changed over to a string type:

var a = 13;
var a = "online-portfolioin";

6. What is NaN property in JavaScript?

NaN stands for Not a Number, It will check if value is not a legal number. NaN type return number, To check if a value is NaN, we use the isNaN() function.

isNaN("onlineportfolio")  // Returns true
isNaN(555)   // Returns false
isNaN('10')  // Returns false, since '10' is converted to Number type which results in 0 ( a number) 
isNaN(true) // Returns false, since true converted to Number type results in 1 ( a number)
isNaN(false) // Returns false
isNaN(undefined) // Returns true

7. What is an Immediately Invoked Function in JavaScript?

Syntax of IIFE :

(function()
{ // Do something; })();

To understand IIFE, we need to understand the two sets of parentheses which are added while creating an IIFE :

First set of parenthesis:

(function (){ //Do something; })

While executing JavaScript code, whenever the compiler sees the word “function”, it assumes that we are declaring a function in the code. Therefore, if we do not use the first set of parentheses, the compiler throws an error because it thinks we are declaring a function, and by the syntax of declaring a function, a function should always have a name.

function() {
  //Do something;
}
// Compiler gives an error since the syntax of declaring a function is wrong in the code above.

To remove this error, we add the first set of parenthesis that tells the compiler that the function is not a function declaration, instead, it’s a function expression.

Second set of parenthesis:

(function (){
  //Do something;
})();
From the definition of an IIFE, we know that our code should run as soon as it is defined. A function runs only when it is invoked. If we do not invoke the function, the function declaration is returned:

(function (){ // Do something; }) // Returns the function declaration
Therefore to invoke the function, we use the second set of parenthesis. . 

9. Explain Higher Order Functions in javascript.

Functions that operate on other functions, either by taking them as arguments or by returning them, are called higher-order functions.

Higher order functions are a result of functions being first-class citizens in javascript.

Examples of higher order functions:

function higherOrder(fn) {
  fn();
}
     
higherOrder(function() { console.log("Hello world") }); 
function higherOrder2() {
  return function() {
    return "Do something";
  }
}
        
var x = higherOrder2();
x()   // Returns "Do something"

10. Explain “this” keyword.

The “this” keyword refers to the object that the function is a property of.

The value of “this” keyword will always depend on the object that is invoking the function.

Confused? Let’s understand the above statements by examples:

function doSomething() {
  console.log(this);
}
        
doSomething();

What do you think the output of the above code will be?

**Note – Observe the line where we are invoking the function.

Check the definition again:

The “this” keyword refers to the object that the function is a property of.

In the above code, function is a property of which object?

Since the function is invoked in the global context, the function is a property of the global object.

Therefore, the output of the above code will be the global object. Since we ran the above code inside the browser, the global object is the window object.

Example 2:

var obj = {
    name:  "vivek",
    getName: function(){
    console.log(this.name);
  }
}
        
obj.getName();

In the above code, at the time of invocation, the getName function is a property of the object obj , therefore, the this keyword will refer to the object obj , and hence the output will be “vivek”.

Example 3:

 var obj = {
    name:  "vivek",
    getName: function(){
    console.log(this.name);
  }
        
}
        
var getName = obj.getName;
        
var obj2 = {name:"akshay", getName };
obj2.getName();

Can you guess the output here?

The output will be “akshay”.

Although the getName function is declared inside the object obj , at the time of invocation, getName() is a property of obj2 , therefore the “this” keyword will refer to obj2 .

The silly way to understanding the this keyword is, whenever the function is invoked, check the object before the dot . The value of this . keyword will always be the object before the dot .

If there is no object before the dot like in example1, the value of this keyword will be the global object.

Example 4:

var obj1 = {
    address : "Mumbai,India",
    getAddress: function(){
    console.log(this.address); 
  }
}
       
var getAddress = obj1.getAddress;
var obj2 = {name:"akshay"};
obj2.getAddress();    

Can you guess the output?

The output will be an error.

Although in the code above, the this keyword refers to the object obj2 , obj2 does not have the property “address”‘, hence the getAddress function throws an error.

11. Explain call(), apply() and, bind() methods.

call()It’s a predefined method in javascript.

This method invokes a method (function) by specifying the owner object.

Example 1:

function sayHello(){
  return "Hello " + this.name;
}
        
var obj = {name: "Sandy"};
        
sayHello.call(obj);
        
// Returns "Hello Sandy"
          

call() method allows an object to use the method (function) of another object.

Example 2:

var person = {
  age: 23,
  getAge: function(){
    return this.age;
  }
}
        
var person2 = {age:  54};
person.getAge.call(person2);
        
// Returns 54  

call() accepts arguments:

function saySomething(message){
  return this.name + " is " + message;
}
        
var person4 = {name:  "John"};
        
saySomething.call(person4, "awesome");
// Returns "John is awesome"    

apply()

The apply method is similar to the call() method. The only difference is that,

call() method takes arguments separately whereas, apply() method takes arguments as an array.

function saySomething(message){
  return this.name + " is " + message;
}
        
var person4 = {name:  "John"};
        
saySomething.apply(person4, ["awesome"]);

bind()

This method returns a new function, where the value of “this” skeyword will be bound to the owner object, which is provided as a parameter.

Example with arguments:

var bikeDetails = {
    displayDetails: function(registrationNumber,brandName){
    return this.name+ " , "+ "bike details: "+ registrationNumber + " , " + brandName;
  }
}
        
var person1 = {name:  "Vivek"};
        
var detailsOfPerson1 = bikeDetails.displayDetails.bind(person1, "TS0122", "Bullet");
        
// Binds the displayDetails function to the person1 object
        
        
detailsOfPerson1();
// Returns Vivek, bike details: TS0452, Thunderbird

12. What is currying in JavaScript?

Currying is an advanced technique to transform a function of arguments n, to n functions of one or less arguments.Example of a curried function:

function add (a) {
  return function(b){
    return a + b;
  }
}

add(3)(4)

For Example, if we have a function f(a,b) , then the function after currying, will be transformed to f(a)(b).

By using the currying technique, we do not change the functionality of a function, we just change the way it is invoked.

Let’s see currying in action:

function multiply(a,b){
  return a*b;
}

function currying(fn){
  return function(a){
    return function(b){
      return fn(a,b);
    }
  }
}

var curriedMultiply = currying(multiply);

multiply(4, 3); // Returns 12

curriedMultiply(4)(3); // Also returns 12

As one can see in the code above, we have transformed the function multiply(a,b) to a function curriedMultiply , which takes in one parameter at a time.

13. Explain Scope and Scope Chain in javascript.

Scope in JS, determines the accessibility of variables and functions at various parts in one’s code.

In general terms, the scope will let us know at a given part of code, what are the variables and functions that we can or cannot access.

There are three types of scopes in JS:

  • Global Scope
  • Local or Function Scope
  • Block Scope

Global Scope

Variables or functions declared in the global namespace have global scope, which means all the variables and functions having global scope can be accessed from anywhere inside the code

var globalVariable = "Hello world";

function sendMessage(){
  return globalVariable; // can access globalVariable since it's written in global space
}

function sendMessage2(){
  return sendMessage(); // Can access sendMessage function since it's written in global space
}

sendMessage2();  // Returns “Hello world”

Function Scope

Any variables or functions declared inside a function have local/function scope, which means that all the variables and functions declared inside a function, can be accessed from within the function and not outside of it.

function awesomeFunction(){
  var a = 2;

  var multiplyBy2 = function(){
    console.log(a*2); // Can access variable "a" since a and multiplyBy2 both are written inside the same function
  }
}
console.log(a); // Throws reference error since a is written in local scope and cannot be accessed outside

multiplyBy2(); // Throws reference error since multiplyBy2 is written in local scope

Block Scope

Block scope is related to the variables declared using let and const. Variables declared with var do not have block scope.

Block scope tells us that any variable declared inside a block { }, can be accessed only inside that block and cannot be accessed outside of it.

{
  let x = 45;
}

console.log(x); // Gives reference error since x cannot be accessed outside of the block

for(let i=0; i<2; i++){
  // do something
}

console.log(i); // Gives reference error since i cannot be accessed outside of the for loop block

Scope Chain

JavaScript engine also uses Scope to find variables.

Let’s understand that using an example:

var y = 24;

function favFunction(){
  var x = 667;
  var anotherFavFunction = function(){
    console.log(x); // Does not find x inside anotherFavFunction, so looks for variable inside favFunction, outputs 667
  }

  var yetAnotherFavFunction = function(){
    console.log(y); // Does not find y inside yetAnotherFavFunction, so looks for variable inside favFunction and does not find it, so looks for variable in global scope, finds it and outputs 24
  }

  anotherFavFunction();
  yetAnotherFavFunction();
}


favFunction();

As you can see in the code above, if the javascript engine does not find the variable in local scope, it tries to check for the variable in the outer scope. If the variable does not exist in the outer scope, it tries to find the variable in the global scope.

If the variable is not found in the global space as well, reference error is thrown.

14. Explain Closures in JavaScript.


Closures is an ability of a function to remember the variables and functions that are declared in its outer scope.

var Person = function(pName){
  var name = pName;

  this.getName = function(){
    return name;
  }
}

var person = new Person("Neelesh");
console.log(person.getName());

Let’s understand closures by example:

function randomFunc(){
  var obj1 = {name:"Vivian", age:45};

  return function(){
    console.log(obj1.name + " is "+ "awesome"); // Has access to obj1 even when the randomFunc function is executed

  }
}

var initialiseClosure = randomFunc(); // Returns a function

initialiseClosure(); 

Let’s understand the code above,

The function randomFunc() gets executed and returns a function when we assign it to a variable:

var initialiseClosure = randomFunc();

The returned function is then executed when we invoke initialiseClosure:

 initialiseClosure(); 

The line of code above outputs “Vivian is awesome” and this is possible because of closure.

When the function randomFunc() runs, it sees that the returning function is using the variable obj1 inside it:

console.log(obj1.name + " is "+ "awesome");

Therefore randomFunc(), instead of destroying the value of obj1 after execution, saves the value in the memory for further reference. This is the reason why the returning function is able to use the variable declared in the outer scope even after the function is already executed.

This ability of a function to store a variable for further reference even after it is executed, is called Closure.

15. What are object prototypes?

All javascript objects inherit properties from a prototype.

For example,

Date objects inherit properties from the Date prototype

Math objects inherit properties from the Math prototype

Array objects inherit properties from the Array prototype.

On top of the chain is Object.prototype. Every prototype inherits properties and methods from the Object.prototype.

A prototype is a blueprint of an object. Prototype allows us to use properties and methods on an object even if the properties and methods do not exist on the current object.

Let’s see prototypes help us use methods and properties:

var arr = [];
arr.push(2);

console.log(arr); // Outputs [2]

In the code above, as one can see, we have not defined any property or method called push on the array “arr” but the javascript engine does not throw an error.

The reason being the use of prototypes. As we discussed before, Array objects inherit properties from the Array prototype.

The javascript engine sees that the method push does not exist on the current array object and therefore, looks for the method push inside the Array prototype and it finds the method.

Whenever the property or method is not found on the current object, the javascript engine will always try to look in its prototype and if it still does not exist, it looks inside the prototype’s prototype and so on.

16. What are callbacks?

A callback is a function that will be executed after another function gets executed.

In javascript, functions are treated as first-class citizens, they can be used as an argument of another function, can be returned by another function and can be used as a property of an object.

Functions that are used as an argument to another function are called callback functions.

Example:

function divideByHalf(sum){
  console.log(Math.floor(sum / 2));
}

function multiplyBy2(sum){
  console.log(sum * 2);
}

function operationOnSum(num1,num2,operation){
  var sum = num1 + num2;
  operation(sum);
}

operationOnSum(3, 3, divideByHalf); // Outputs 3

operationOnSum(5, 5, multiplyBy2); // Outputs 20

In the code above, we are performing mathematical operations on the sum of two numbers.

The operationOnSum function takes 3 arguments, first number, second number, and the operation that is to be performed on their sum (callback) .

Both divideByHalf and multiplyBy2 functions are used as callback functions in the code above.

These callback functions will be executed only after the function operationOnSum is executed.

Therefore, callback is a function that will be executed after another function gets executed.

17.What is memoization?

Memoization is a form of caching where the return value of a function is cached based on its parameters. If the parameter of that function is not changed, the cached version of the function is returned.

Let’s understand memoization, by converting a simple function to a memoized function:

**Note- Memoization is used for expensive function calls but in the following example, we are considering a simple function for understanding the concept of memoization better.

Consider the following function:

function addTo256(num){
  return num + 256;
}

addTo256(20); // Returns 276
addTo256(40); // Returns 296
addTo256(20); // Returns 276

In the code above, we have written a function that adds the parameter to 256 and returns it.

When we are calling the function addTo256 again with the same parameter (“20” in the case above), we are computing the result again for the same parameter.

Computing the result with the same parameter again and again is not a big deal in the above case, but imagine if the function does some heavy duty work, then, computing the result again and again with the same parameter will lead to wastage of time.

This is where memoization comes in, by using memoization we can store(cache) the computed results based on the parameters. If the same parameter is used again while invoking the function, instead of computing the result, we directly return the stored (cached) value.

Let’s convert the above function addTo256, to a memoized function:

function memoizedAddTo256(){
  var cache = {};

  return function(num){
    if(num in cache){
      console.log("cached value");
      return cache[num]

    }
    else{
      cache[num] = num + 256;
      return cache[num];
    }
  }
}

var memoizedFunc = memoizedAddTo256();

memoizedFunc(20); // Normal return
memoizedFunc(20); // Cached return

In the code above, if we run memoizedFunc function with the same parameter, instead of computing the result again, it returns the cached result.

**Note- Although using memoization saves time, it results in larger consumption of memory since we are storing all the computed results.

18. What is recursion in a programming language?

Recursion is a technique to iterate over an operation by having a function call itself repeatedly until it arrives at a result.

function add(number) {
  if (number <= 0) {
    return 0;
  } else {
    return number + add(number - 1);
  }
}

add(3) => 3 + add(2)
          3 + 2 + add(1)
          3 + 2 + 1 + add(0)
          3 + 2 + 1 + 0 = 6  

Example of a recursive function:

The following function calculates the sum of all the elements in an array by using recursion:

function computeSum(arr){
  if(arr.length === 1){
    return arr[0];
  }
  else{
    return arr.pop() + computeSum(arr);
  }
}

computeSum([7, 8, 9, 99]); // Returns 123

19. What is the use of a constructor function in javascript?

Constructor functions are used to create objects in javascript.

When do we use constructor functions?

If we want to create multiple objects having similar properties and methods, constructor functions are used.

**Note- Name of a constructor function should always be written in Pascal Notation: every word should start with a capital letter.

Example:

function Person(name,age,gender){
  this.name = name;
  this.age = age;
  this.gender = gender;
}


var person1 = new Person("Vivek", 76, "male");
console.log(person1);

var person2 = new Person("Courtney", 34, "female");
console.log(person2);

In the code above, we have created a constructor function named Person.

Whenever we want to create a new object of the type Person,

We need to create it using the new keyword:

var person3 = new Person("Lilly", 17, "female");

The above line of code will create a new object of the type Person.

Constructor functions allow us to group similar objects.

20. What is DOM?

DOM stands for Document Object Model.

DOM is a programming interface for HTML and XML documents.

When the browser tries to render a HTML document, it creates an object based on the HTML document called DOM. Using this DOM, we can manipulate or change various elements inside the HTML document.

Example of how HTML code gets converted to DOM:

Advanced Javascript Interview Questions:

 

21. What are arrow functions?

Arrow functions were introduced in the ES6 version of javascript.

They provide us with a new and shorter syntax for declaring functions.

Arrow functions can only be used as a function expression.

Let’s compare the normal function declaration and the arrow function declaration in detail:

// Traditional Function Expression
var add = function(a,b){
  return a + b;
}

// Arrow Function Expression
var arrowAdd = (a,b) => a + b;

Arrow functions are declared without the function keyword. If there is only one returning expression then we don’t need to use the return keyword as well in an arrow function as shown in the example above. Also, for functions having just one line of code, curly braces { } can be omitted.

// Traditional function expression
var multiplyBy2 = function(num){
  return num * 2;
}
// Arrow function expression
var arrowMultiplyBy2 = num => num * 2;

If the function takes in only one argument, then the parenthesis () around the parameter can be omitted as shown in the code above.

var obj1 = {
  valueOfThis: function(){
    return this;
  }
}
var obj2 = {
  valueOfThis: ()=>{
    return this;
  }
}

obj1.valueOfThis(); // Will return the object obj1
obj2.valueOfThis(); // Will return window/global object

The biggest difference between the traditional function expression and the arrow function, is the handling of the this keyword.

By general definition, the this keyword always refers to the object that is calling the function.

As you can see in the code above, obj1.valueOfThis() returns obj1, since this keyword refers to the object calling the function.

In the arrow functions, there is no binding of the this keyword.

The this keyword inside an arrow function, does not refer to the object calling it. It rather inherits its value from the parent scope which is the window object in this case.

Therefore, in the code above, obj2.valueOfThis() returns the window object.

22. Differences between declaring variables using var, let and const.

Before the ES6 version of javascript, only the keyword var was used to declare variables.

With the ES6 Version, keywords let and const were introduced to declare variables.

keyword const let var
global scope no no yes
function scope yes yes yes
block scope yes yes no
can be reassigned no yes yes

Let’s understand the differences with examples:

Let’s understand the differences with examples:

var variable1 = 23;

let variable2 = 89;

function catchValues(){
  console.log(variable1);
  console.log(variable2);

// Both the variables can be accessed anywhere since they are declared in the global scope
}

window.variable1; // Returns the value 23

window.variable2; // Returns undefined    

The variables declared with the let keyword in the global scope behave just like the variable declared with the var keyword in the global scope.

Variables declared in the global scope with var and let keywords can be accessed from anywhere in the code.

But, there is one difference !

Variables that are declared with the var keyword in the global scope are added to the window/global object. Therefore, they can be accessed using window.variableName.

Whereas, the variables declared with the let keyword are not added to the global object, therefore, trying to access such variables using window.variableName results in an error.

var vs let in functional scope

function varVsLetFunction(){
  let awesomeCar1 = "Audi";
  var awesomeCar2 = "Mercedes";
}

console.log(awesomeCar1); // Throws an error
console.log(awesomeCar2); // Throws an error

Variables declared in a functional/local scope using var and let keywords behave exactly the same, meaning , they cannot be accessed from outside of the scope.

{
  var variable3 = [1, 2, 3, 4];
}

console.log(variable3); // Outputs [1,2,3,4]

{
  let variable4 = [6, 55, -1, 2];
}

console.log(variable4); // Throws error

for(let i = 0; i < 2; i++){
  //Do something
}

console.log(i); // Throws error

for(var j = 0; j < 2; i++){
  // Do something
}

console.log(j) // Outputs 2

In javascript, a block means the code written inside the curly braces {} .

Variables declared with var keyword do not have block scope. It means a variable declared in block scope {} with the var keyword is the same as declaring the variable in the global scope.

Variables declared with let keyword inside the block scope cannot be accessed from outside of the block.

Const keyword

Variables with the const keyword behave exactly like a variable declared with the let keyword with only one difference, any variable declared with the const keyword cannot be reassigned.

Example:

const x = {name:"Vivek"};

x = {address: "India"}; // Throws an error

x.name = "Nikhil"; // No error is thrown

const y = 23;

y = 44; // Throws an error

In the code above, although we can change the value of a property inside the variable declared with const keyword, we cannot completely reassign the variable itself.

23. What is the rest parameter and spread operator?

Both rest parameter and spread operator were introduced in the ES6 version of javascript.

Rest parameter ( … )

It provides an improved way of handling parameters of a function.

Using the rest parameter syntax, we can create functions that can take a variable number of arguments.

Any number of arguments will be converted into an array using the rest parameter.

It also helps in extracting all or some parts of the arguments.

Rest parameter can be used by applying three dots (…) before the parameters.

function extractingArgs(...args){
  return args[1];
}

// extractingArgs(8,9,1); // Returns 9

function addAllArgs(...args){
  let sumOfArgs = 0;
  let i = 0;
  while(i < args.length){
    sumOfArgs += args[i];
    i++;
  }
  return sumOfArgs;
}

addAllArgs(6, 5, 7, 99); // Returns 117
addAllArgs(1, 3, 4); // Returns 8

**Note- Rest parameter should always be used at the last parameter of a function:

// Incorrect way to use rest parameter
function randomFunc(a,...args,c){
//Do something
}

// Correct way to use rest parameter
function randomFunc2(a,b,...args){
//Do something
}

Spread operator (…)

Although the syntax of spread operator is exactly the same as the rest parameter, spread operator is used to spread an array, and object literals. We also use spread operators where one or more arguments are expected in a function call.

function addFourNumbers(num1,num2,num3,num4){
  return num1 + num2 + num3 + num4;
}

let fourNumbers = [5, 6, 7, 8];


addFourNumbers(...fourNumbers);
// Spreads [5,6,7,8] as 5,6,7,8

let array1 = [3, 4, 5, 6];
let clonedArray1 = [...array1];
// Spreads the array into 3,4,5,6
console.log(clonedArray1); // Outputs [3,4,5,6]


let obj1 = {x:'Hello', y:'Bye'};
let clonedObj1 = {...obj1}; // Spreads and clones obj1
console.log(obj1);

let obj2 = {z:'Yes', a:'No'};
let mergedObj = {...obj1, ...obj2}; // Spreads both the objects and merges it
console.log(mergedObj);
// Outputs {x:'Hello', y:'Bye',z:'Yes',a:'No'};

***Note- Key differences between rest parameter and spread operator:

  • Rest parameter is used to take a variable number of arguments and turns into an array while the spread operator takes an array or an object and spreads it
  • Rest parameter is used in function declaration whereas the spread operator is used in function calls.

24. What is the use of promises in javascript?

Promises are used to handle asynchronous operations in javascript.

Before promises, callbacks were used to handle asynchronous operations. But due to limited functionality of callback, using multiple callbacks to handle asynchronous code can lead to unmanageable code.

Promise object has four states –

  • Pending – Initial state of promise. This state represents that the promise has neither been fulfilled nor been rejected, it is in the pending state.
  • Fulfilled – This state represents that the promise has been fulfilled, meaning the async operation is completed.
  • Rejected – This state represents that the promise has been rejected for some reason, meaning the async operation has failed.
  • Settled – This state represents that the promise has been either rejected or fulfilled.

A promise is created using the Promise constructor which takes in a callback function with two parameters, resolve and reject respectively.

resolve is a function that will be called, when the async operation has been successfully completed.

reject is a function that will be called, when the async operation fails or if some error occurs.

Example of a promise:

Promises are used to handle asynchronous operations like server requests, for the ease of understanding, we are using an operation to calculate the sum of three elements.

In the function below, we are returning a promise inside a function:

function sumOfThreeElements(...elements){
  return new Promise((resolve,reject)=>{
    if(elements.length > 3 ){
      reject("Only three elements or less are allowed");
    }
    else{
      let sum = 0;
      let i = 0;
      while(i < elements.length){
        sum += elements[i];
        i++;
      }
      resolve("Sum has been calculated: "+sum);
    }
  })
}

In the code above, we are calculating the sum of three elements, if the length of elements array is more than 3, promise is rejected, else the promise is resolved and the sum is returned.

We can consume any promise by attaching then() and catch() methods to the consumer.

then() method is used to access the result when the promise is fulfilled.

catch() method is used to access the result/error when the promise is rejected.

In the code below, we are consuming the promise:

sumOfThreeElements(4, 5, 6)
.then(result=> console.log(result))
.catch(error=> console.log(error));
// In the code above, the promise is fulfilled so the then() method gets executed

sumOfThreeElements(7, 0, 33, 41)
.then(result => console.log(result))
.catch(error=> console.log(error));
// In the code above, the promise is rejected hence the catch() method gets executed

25.What are classes in javascript?

Introduced in the ES6 version, classes are nothing but syntactic sugars for constructor functions.

They provide a new way of declaring constructor functions in javascript.

Below are the examples of how classes are declared and used:

// Before ES6 version, using constructor functions
function Student(name,rollNumber,grade,section){
  this.name = name;
  this.rollNumber = rollNumber;
  this.grade = grade;
  this.section = section;
}

// Way to add methods to a constructor function
Student.prototype.getDetails = function(){
  return 'Name: ${this.name}, Roll no: ${this.rollNumber}, Grade: ${this.grade}, Section:${this.section}';
}


let student1 = new Student("Vivek", 354, "6th", "A");
student1.getDetails();
// Returns Name: Vivek, Roll no:354, Grade: 6th, Section:A

// ES6 version classes
class Student{
  constructor(name,rollNumber,grade,section){
    this.name = name;
    this.rollNumber = rollNumber;
    this.grade = grade;
    this.section = section;
  }

  // Methods can be directly added inside the class
  getDetails(){
    return 'Name: ${this.name}, Roll no: ${this.rollNumber}, Grade:${this.grade}, Section:${this.section}';
  }
}

let student2 = new Student("Garry", 673, "7th", "C");
student2.getDetails();
// Returns Name: Garry, Roll no:673, Grade: 7th, Section:C

Key points to remember about classes:

  • Unlike functions, classes are not hoisted. A class cannot be used before it is declared.
  • A class can inherit properties and methods from other classes by using the extend keyword.
  • All the syntaxes inside the class must follow the strict mode(‘use strict’) of javascript. Error will be thrown if the strict mode rules are not followed.

26. What are generator functions?

Introduced in ES6 version, generator functions are a special class of functions.

They can be stopped midway and then continue from where it had stopped.

Generator functions are declared with the function* keyword instead of the normal function keyword:

function* genFunc(){
  // Perform operation
}

In normal functions, we use the return keyword to return a value and as soon as the return statement gets executed, the function execution stops:

function normalFunc(){
  return 22;
  console.log(2); // This line of code does not get executed
}

In the case of generator functions, when called, they do not execute the code, instead they return a generator object . This generator object handles the execution.

function* genFunc(){
  yield 3;
  yield 4;
}
genFunc(); // Returns Object [Generator] {}

The generator object consists of a method called next() , this method when called, executes the code until the nearest yield statement, and returns the yield value.

For example if we run the next() method on the above code:

genFunc().next(); // Returns {value: 3, done:false}

As one can see the next method returns an object consisting of value and done properties.
Value property represents the yielded value.
Done property tells us whether the function code is finished or not. (Returns true if finished)
Generator functions are used to return iterators. Let’s see an example where an iterator is returned:

function* iteratorFunc() {
  let count = 0;
  for (let i = 0; i < 2; i++) {
      count++;
      yield i;
  }
  return count;
}

let iterator = iteratorFunc();
console.log(iterator.next()); // {value:0,done:false}
console.log(iterator.next()); // {value:1,done:false}
console.log(iterator.next()); // {value:2,done:true}

As you can see in the code above, the last line returns done:true , since the code reaches the return statement.

27. Explain WeakSet in javascript.

In javascript, Set is a collection of unique and ordered elements.

Just like Set, WeakSet is also a collection of unique and ordered elements with some key differences:

  • Weakset contains only objects and no other type.
  • An object inside the weakset is referenced weakly. This means, if the object inside the weakset does not have a reference, it will be garbage collected.
  • Unlike Set, WeakSet only has three methods, add() delete() and has() .
const newSet = new Set([4, 5, 6, 7]);
console.log(newSet);// Outputs Set {4,5,6,7}

const newSet2 = new WeakSet([3, 4, 5]); //Throws an error


let obj1 = {message:"Hello world"};
const newSet3 = new WeakSet([obj1]);
console.log(newSet3.has(obj1)); // true

28. Explain WeakMap in javascript.

In javascript, Map is used to store key-value pairs. The key-value pairs can be of both primitive and non-primitive types.

WeakMap is similar to Map with key differences:

  • The keys and values in weakmap should always be an object.
  • If there are no references to the object, the object will be garbage collected.
const map1 = new Map();
map1.set('Value', 1);

const map2 = new WeakMap();
map2.set('Value', 2.3); // Throws an error

let obj = {name:"Vivek"};
const map3 = new WeakMap();
map3.set(obj, {age:23});

29. What is Object Destructuring?

Object destructuring is a new way to extract elements from an object or an array.

Object destructuring:

Before ES6 version:

const classDetails = {
  strength: 78,
  benches: 39,
  blackBoard:1
}

const classStrength = classDetails.strength;
const classBenches = classDetails.benches;
const classBlackBoard = classDetails.blackBoard;

The same example using object destructuring:

const classDetails = {
  strength: 78,
  benches: 39,
  blackBoard:1
}

const {strength:classStrength, benches:classBenches,blackBoard:classBlackBoard} = classDetails;

console.log(classStrength); // Outputs 78
console.log(classBenches); // Outputs 39
console.log(classBlackBoard); // Outputs 1

As one can see, using object destructuring we have extracted all the elements inside an object in one line of code.

If we want our new variable to have the same name as the property of an object we can remove the colon:

const {strength:strength} = classDetails;
// The above line of code can be written as:
const {strength} = classDetails;

Array destructuring:

Before ES6 version:

const arr = [1, 2, 3, 4];
const first = arr[0];
const second = arr[1];
const third = arr[2];
const fourth = arr[3];

The same example using object destructuring:

const arr = [1, 2, 3, 4];
const [first,second,third,fourth] = arr;

console.log(first); // Outputs 1
console.log(second); // Outputs 2
console.log(third); // Outputs 3
console.log(fourth); // Outputs 4

30. What is a Temporal Dead Zone?

Temporal Dead Zone is a behaviour that occurs with variables declared using let and const keywords.

It is a behaviour where we try to access a variable before it is initialized.

Examples of temporal dead zone:

x = 23; // Gives reference error

let x;


function anotherRandomFunc(){
  message = "Hello"; // Throws a reference error

  let message;
}
anotherRandomFunc();

In the code above, both in global scope and functional scope, we are trying to access variables which have not been declared yet. This is called the Temporal Dead Zone .

Coding problems:

 

31. Guess the outputs of the following codes:

// Code 1:

function func1(){
  setTimeout(()=>{
    console.log(x);
    console.log(y);
  },3000);

  var x = 2;
  let y = 12;
}

func1();

// Code 2:

function func2(){
  for(var i = 0; i < 3; i++){
    setTimeout(()=> console.log(i),2000);
}

}

func2();


// Code 3:


(function(){
  setTimeout(()=> console.log(1),2000);
  console.log(2);
  setTimeout(()=> console.log(3),0);
  console.log(4);
})();

Answers:

Code 1 – Outputs and 12 . Since, even though let variables are not hoisted, due to async nature of javascript, the complete function code runs before the setTimeout function. Therefore, it has access to both x and y.

Code 2 – Outputs , three times since variable declared with var keyword does not have block scope. Also, inside the for loop, the variable i is incremented first and then checked.

Code 3 – Output in the following order:

2
4
3
1 // After two seconds

Even though the second timeout function has a waiting time of zero seconds, the javascript engine always evaluates the setTimeout function using the Web API and therefore, the complete function executes before the setTimeout function can execute.

32.Guess the outputs of the following code:

// Code 1:

let x= {}, y = {name:"Ronny"},z = {name:"John"};

x[y] = {name:"Vivek"};
x[z] = {name:"Akki"};

console.log(x[y]);



// Code 2:

function runFunc(){
  console.log("1" + 1);
  console.log("A" - 1);
  console.log(2 + "-2" + "2");
  console.log("Hello" - "World" + 78);
  console.log("Hello"+ "78");
}

runFunc();


// Code 3:

let a = 0;
let b = false;
console.log((a == b));
console.log((a === b));

Answers:

Code 1 – Output will be {name: “Akki”}.

Adding objects as properties of another object should be done carefully.

Writing x[y] = {name:”Vivek”} , is same as writing x[‘object Object’] = {name:”Vivek”} ,

While setting a property of an object, javascript coerces the parameter into a string.

Therefore, since is an object, it will be converted to ‘object Object’.

Both x[y] and x[z] are referencing the same property.

Code 2 – Outputs in the following order:

11
Nan
2-22
NaN
Hello78

Code 3 – Output in the following order due to equality coercion:

true
false

33. Guess the output of the following code:

var x = 23;

(function(){
  var x = 43;
  (function random(){
    x++;
    console.log(x);
    var x = 21;
  })();
})();

Answer:

Output is NaN .

random() function has functional scope, since x is declared and hoisted in the functional scope.

Rewriting the random function will give a better idea about the output:

function random(){
  var x; // x is hoisted
  x++; // x is not a number since it is not initialized yet
  console.log(x); // Outputs NaN
  x = 21; // Initialization of x
}

34. Guess the outputs of the following code:

// Code 1

  let hero = {
    powerLevel: 99,
    getPower(){
      return this.powerLevel;
    }
  }
  
  let getPower = hero.getPower;
  
  let hero2 = {powerLevel:42};
  console.log(getPower());
  console.log(getPower.apply(hero2));
  
  
  
  // Code 2
  
  const a = function(){
    console.log(this);
  
    const b = {
      func1: function(){
        console.log(this);
      }  
    }
  
    const c = {
      func2: ()=>{
        console.log(this);
      }
    }
  
    b.func1();
    c.func2();
  }
  
  a();
  
  
  
  // Code 3
  
  const b = {
    name:"Vivek",
    f: function(){
      var self = this;
      console.log(this.name);
      (function(){
        console.log(this.name);
        console.log(self.name);
      })();
    }
  }
  
  b.f();

Answers:

Code 1 – Output in the following order:

undefined
42  

Reason – The first output is undefined since when the function is invoked, it is invoked referencing the global object:

window.getPower() = getPower();

Code 2 – Outputs in the following order:

global/window object
object "b"
global/window object

Since we are using arrow function inside func2, this keyword refers to the global object.

Code 3 – Outputs in the following order:

"Vivek"
undefined
"Vivek" 

Only in the IIFE inside the function , the this keyword refers to the global/window object.

35. Guess the outputs of the following code:

**Note – Code 2 and Code 3 require you to modify the code, instead of guessing the output.

// Code 1

(function(a){
  return (function(){
    console.log(a);
    a = 23;
  })()
})(45);


// Code 2

// Each time bigFunc is called, an array of size 700 is being created,
// Modify the code so that we don't create the same array again and again

function bigFunc(element){
  let newArray = new Array(700).fill('♥');
  return newArray[element];
}

console.log(bigFunc(599)); // Array is created
console.log(bigFunc(670)); // Array is created again



// Code 3

// The following code outputs 2 and 2 after waiting for one second
// Modify the code to output 0 and 1 after one second.

function randomFunc(){
  for(var i = 0; i < 2; i++){
    setTimeout(()=> console.log(i),1000);
  }
}

randomFunc();
                    

Answers –

Code 1 – Outputs 45 .

Even though a is defined in the outer function, due to closure the inner functions have access to it.

Code 2 – This code can be modified by using closures,

function bigFunc(){
  let newArray = new Array(700).fill('♥');
  return (element) => newArray[element];
}

let getElement = bigFunc(); // Array is created only once
getElement(599);
getElement(670);  

Code 3 – Can be modified in two ways:

Using let keyword:

function randomFunc(){
  for(let i = 0; i < 2; i++){
    setTimeout(()=> console.log(i),1000);
  }
}

randomFunc(); 

Using closure:

function randomFunc(){
  for(var i = 0; i < 2; i++){
  (function(i){
      setTimeout(()=>console.log(i),1000);
    })(i);
  }
}

randomFunc();  

36. Write a function that performs binary search on a sorted array.

Answer:

function binarySearch(arr,value,startPos,endPos){
  if(startPos > endPos) return -1;

  let middleIndex = Math.floor(startPos+endPos)/2;

  if(arr[middleIndex] === value) return middleIndex;

  elsif(arr[middleIndex > value]){
    return binarySearch(arr,value,startPos,middleIndex-1);
  }
  else{
    return binarySearch(arr,value,middleIndex+1,endPos);
  }
}   

37. Implement a function that returns an updated array with right rotations on an array of integers .

Example:

Given the following array:

[2,3,4,5,7]

Perform right rotations:

First rotation : [7,2,3,4,5] , Second rotation : [5,7,2,3,4] and, Third rotation: [4,5,7,2,3]

return [4,5,7,2,3]

Answer:

function rotateRight(arr,rotations){
  if(rotations == 0) return arr;
  for(let i = 0; i < rotations;i++){
    let element = arr.pop();
    arr.unshift(element);
  }

  return arr;
}


rotateRight([2, 3, 4, 5, 7], 3); // Return [4,5,7,2,3]
rotateRight([44, 1, 22, 111], 5); // Returns [111,44,1,22]

Solved – can’t bind to ‘formgroup’ since it isn’t a known property of ‘form’

can’t bind to ‘formgroup’ since it isn’t a known property of ‘form’

Can’t bind to ‘formgroup’ since it isn’t a known property of ‘form’ :  Whenever start with Angular App, everyone needs to start with form kind of information, So In most of the cases we start collect user information using form in Angular. Creating form and giving it name is the process of Angular, We declare the form name and use it in the HTML form. While executing the application It start throwing an error.  Let’s checkout this with code example.

app.component.html

<form [formGroup]="myForm">
  Naam: <input type="text" formControlName="name"><br>
  Age: <input type="number" formControlName="age">

  <button>Submit</button>
</form>

app.component.ts

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
    myForm: FormGroup;

    constructor(private fb: FormBuilder) { }

    ngOnInit() {
        this.myForm = this.fb.group({
            name: ['', Validators.required],
            age: ['', Validators.required]
        });
    }
}

Error after running app

Can't bind to 'formgroup' since it isn't a known property of 'form'

In order to solve can’t bind to ‘formgroup’ since it isn’t a known property of ‘form’ error you need to import ReactiveFormsModule in each submodule file.

app.module.ts

 import { FormsModule, ReactiveFormsModule } from '@angular/forms';`

@NgModule({
  declarations: [
    AppComponent,
  ]
  imports: [
    FormsModule,
    ReactiveFormsModule,
    yourModule,
],
...

You will have to import ReactiveFormsModule in your yourModule like this:

...
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

...

@NgModule({
  imports: [
    ...,
    FormsModule,    //import here
    ReactiveFormsModule //import here
  ],
  declarations: [...],
  providers: [...]
})

export class yourModule {}

 

Like us on facebook

React Color Picker Tutorial Example

React Color Picker Tutorial Example

React Color Picker Tutorial Example : In this instructional exercise, you will figure out how to execute color picker in React JS applications.

You more likely than not seen in many web and applications that you can pick the shading straightforwardly on color picker. You need to add basic color picker to your React JS application. So in this instructional exercise you will get bit by bit guide. With the assistance of which you can add your React JS application basic color picker.

Live demo : See here

Create Color Picker in React :

  • Step 1 – Create React App
  • Step 2 – Add Bootstrap Library
  • Step 3 – Add Color Picker Library
  • Step 4 – Create Color Picker Component
  • Step 5 – Add Color Picker Component in App.js

Step 1 – Create React App :

npx create-react-app my-colorpicker-app

Run app now:

npm start

Go to URL: localhost:3000

Step 2 – Add Bootstrap Library :

Install bootstrap:

npm install bootstrap --save

Add bootstrap.min.css file in src/App.js file:

import React, { Component } from 'react'
 
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
 
function App() {
  return (
    <div>
      <h2>How to create color picker in React</h2>
    </div>
  );
}
 
export default App;

Step 3 – Add Color Picker Library :

npm install react-color --save

Step 4 – Create Color Picker Component :

Make ColorPickerComponent.js document. Along these lines, visit the src directory of your application and make a table component document named ColorPickerComponent.js. What’s more, add the accompanying code into it :

'use strict'
 
import React from 'react'
import reactCSS from 'reactcss'
import { SketchPicker } from 'react-color'
 
class ColorPickerComponent extends React.Component {
    state = {
      displayColorPicker: false,
      color: {
        r: '241',
        g: '112',
        b: '19',
        a: '1',
      },
    };
 
    handleClick = () => {
      this.setState({ displayColorPicker: !this.state.displayColorPicker })
    };
 
    handleClose = () => {
      this.setState({ displayColorPicker: false })
    };
 
    handleChange = (color) => {
      this.setState({ color: color.rgb })
    };
 
    render() {
 
      const styles = reactCSS({
        'default': {
          color: {
            width: '36px',
            height: '14px',
            borderRadius: '2px',
            background: `rgba(${ this.state.color.r }, ${ this.state.color.g }, ${ this.state.color.b }, ${ this.state.color.a })`,
          },
          swatch: {
            padding: '5px',
            background: '#fff',
            borderRadius: '1px',
            boxShadow: '0 0 0 1px rgba(0,0,0,.1)',
            display: 'inline-block',
            cursor: 'pointer',
          },
          popover: {
            position: 'absolute',
            zIndex: '2',
          },
          cover: {
            position: 'fixed',
            top: '0px',
            right: '0px',
            bottom: '0px',
            left: '0px',
          },
        },
      });
 
      return (
        <div>
          <div style={ styles.swatch } onClick={ this.handleClick }>
            <div style={ styles.color } />
          </div>
          { this.state.displayColorPicker ? <div style={ styles.popover }>
            <div style={ styles.cover } onClick={ this.handleClose }/>
            <SketchPicker color={ this.state.color } onChange={ this.handleChange } />
          </div> : null }
 
        </div>
      )
    }
}
 
export default ColorPickerComponent

Step 5 – Add Color Picker Component in App.js

In this progression, you need to add ColorPickerComponent.js document in src/App.js record:

import React from 'react';
 
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
 
import ColorPickerComponent from './ColorPickerComponent'
 
function App() {  
     
  return (  
    <div className="App">  
      <ColorPickerComponent />  
    </div>  
  );  
}  
 
export default App;

Angular Crop Image Before Upload with Preview

Angular Crop Image Before Upload with Preview

Angular Crop Image Before Upload with Preview : In this article, we will talk about Angular crop picture before upload to the application . This post will give you straightforward illustration of Angular cropper model. you’ll learn picture upload with crop in Angular. This article goes in nitty gritty on Angular  picture upload with crop utilizing cropper.

In the event that you need to utilize picture transfer with crop, you can undoubtedly utilize ngx-image-cropper npm package. it will give you Cropping, Zooming, Scaling, and Preview usefulness while uploading time. it’s effectively use with your Angular.

In this model, I will give you bit by bit clarification how you can upload transfer in crop in Angular application.

Step 1: Create New App

Create Angular app using the following command :

ng new ngPicCrop

Step 2: Install Npm Packages : 

In this progression, we will introduce ngx-image-cropper npm package for upload picture crop work in precise.

npm install ngx-image-cropper --save

Step 3: Import ImageCropperModule

Now, here we will import ImageCropperModule from ngx-image-cropper and then we add on declarations part. so let’s update app.module.ts file as like bellow:

src/app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
  
import { AppComponent } from './app.component';
  
import { ImageCropperModule } from 'ngx-image-cropper';
  
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    ImageCropperModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

 

Step 4: Update Component ts File : 

Here, we will refresh app.component.ts document here, in this record we will compose fileChangeEvent(), imageCropped(), imageLoaded(), cropperReady() and loadImageFailed() that gave by ngx-image-cropper.

You can refresh as howl app.component.ts document.

src/app/app.component.ts

import { Component } from '@angular/core';
import { ImageCroppedEvent } from 'ngx-image-cropper';
  
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'ngImageCrop';
  
  imageChangedEvent: any = '';
    croppedImage: any = '';
  
    fileChangeEvent(event: any): void {
        this.imageChangedEvent = event;
    }
    imageCropped(event: ImageCroppedEvent) {
        this.croppedImage = event.base64;
    }
    imageLoaded() {
        /* show cropper */
    }
    cropperReady() {
        /* cropper ready */
    }
    loadImageFailed() {
        /* show message */
    }

Step 5: Update HTML File : 

<div class="container">
    <div class="card">
      <div class="card-header">
          Angular Crop Image Tutorial Example - ItSolutionStuff.com
      </div>
      <div class="card-body">
        <input type="file" (change)="fileChangeEvent($event)" />
        <div class="row" style="margin-top: 15px;">
            <div class="text-center col-md-8">
                <h5>Crop Image</h5>
                <image-cropper 
                [imageChangedEvent]="imageChangedEvent" 
                [maintainAspectRatio]="true" 
                [aspectRatio]="4 / 4"
                [resizeToWidth]="256" 
                format="png" 
                (imageCropped)="imageCropped($event)" 
                (imageLoaded)="imageLoaded()"
                (cropperReady)="cropperReady()" 
                (loadImageFailed)="loadImageFailed()"></image-cropper>
            </div>
            <div class="text-center col-md-4">
                <h5>Preview</h5>
                <img [src]="croppedImage" />
            </div>
        </div>
      </div>
    </div>
</div>

Now you run your Angular app by following command :

ng serve

 

Output :

Angular Crop Image Before Upload with Preview

Angular Crop Image Before Upload with Preview

Angular Display JSON Data in Table Example

Angular Display JSON Data in Table Example

Angular Display JSON Data in Table : This instructional exercise will give you illustration of Angular showcase json data in table. you can comprehend an idea of how to show information in Angular . this model will help you Angular show information in table. I disclosed just about how to show information in Angular. Okay, how about we plunge into the means.

At some point we need to show our information in table arrangement for front end. we will utilize *ngfor mandate for show information in table. we will likewise utilize bootstrap for showing information in Angular application.

JSON is an abbreviation for JavaScript Object Notation, is an open standard organization, which is lightweight and text-based, planned expressly for intelligible information exchange. It is a language-free information design. It upholds pretty much every sort of language, structure, and library.

How about we see straightforward after advance to done basic model that will help you to showing information in Angular application.

 

Create New App

Assuming you are doing model without any preparation, You can undoubtedly make your Angular application utilizing cry order:

ng new my-app

In this record we will make understudies object cluster utilizing Student interface. so how about we see howl record code.

src/app/app.component.ts

import { Component } from '@angular/core';
  
interface Employee{
    id: Number;
    name: String;
    email: String;
    gender: String;
}
  
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
    
  students: Employee[] = [
    {
      id: 1,
      emp_code : "3505",
      name: "Rohit",
      email: "rohit@gmail.com",
      gender: "male"
      
    },
    {
      id: 2,
      emp_code : "3506",
      name: "Amit",
      email: "amit@gmail.com",
      gender: "male"
    },
    {
      id: 3,
      emp_code : "3507",
      name: "Kumkum",
      email: "kumkum@gmail.com",
      gender: "female"
    },
    {
      id: 4,
      emp_code : "3508",
      name: "Ajit",
      email: "ajit@gmail.com",
      gender: "male"
    },
    {
      id: 5,
      emp_code : "3509",
      name: "Mohit",
      email: "mohit@gmail.com",
      gender: "male"
    },
  ]
}

In this step, we will write code for display data of employee object array variable using ngfor directive.

I have used bootstrap class.

src/app/app.component.html

<div class="container"> 
  <table class="table table-striped">
    <thead>
        <tr>
          <th>S.no</th>
          <th>Name</th>
          <th>Employee Code</th>
          <th>Email</th>
          <th>Gender</th>
        </tr>
    </thead>
    <tbody>
      <tr *ngFor="let emp of employee">
        <td>{{ emp.id }}</td>       
        <td>{{ emp.name }}</td>
        <td>{{ emp.emp_code}}</td>       
        <td>{{ emp.email }}</td>  
        <td>{{ emp.gender }}</td>     
      </tr>
    </tbody>
  </table>
</div>

Presently you can run your application using following command.

ng serve

 

Output :

Angular Display JSON Data in Table Example

Snowfall with Pure CSS

Snowfall with Pure CSS

Introduction to the blog

Snowfall with Pure CSS : Playing around CSS is fun, with the help of CSS many things can be done using transition animation and a lot more. There are more property of CSS to work with

A site’s visual style and design are directed by CSS or Cascading Style Sheets. These are records that shape a site page’s HTML markup, giving internet browsers guidelines on the most proficient method to show the pages that outcome from that markup. CSS handles a page’s format, just as shading, foundation pictures, typography, thus considerably more.

On the off chance that you take a gander at a CSS record, you will see that, similar to any markup or coding language, these documents have a particular punctuation to them. Each template is comprised of various CSS rules. These standards, when taken in full, are what styles the site.

At the point when you compose CSS properties, you can’t just make them up as you see fit. For example, “shading” is a real CSS property, so you can utilize it. This property is the thing that decides the content shade of a component. In the event that you attempted to utilize “text-shading” or “textual style tone” as CSS properties, these would come up short since they are not genuine pieces of the CSS language.

So, in this blog you will know how to create snowfall effect with Pure CSS no jQuery and JavaScript is required:

Step 1 : HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Snofall Effect</title>

</head>
<body>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
<div class="snowdot"></div>
</body>
</html>

 

Step 2 : CSS

body {
  height: 100vh;
  background: url(./snow-bg.jpg);
  overflow: hidden;
  filter: drop-shadow(0 0 10px white);
}

.snowdot {
  position: absolute;
  width: 10px;
  height: 10px;
  background: white;
  border-radius: 50%;
}
.snowdot:nth-child(1) {
  opacity: 0.6889;
  transform: translate(30.7543vw, -10px) scale(0.618);
  animation: fall-1 16s -6s linear infinite;
}
@keyframes fall-1 {
  36.024% {
    transform: translate(37.3153vw, 36.024vh) scale(0.618);
  }
  to {
    transform: translate(34.0348vw, 100vh) scale(0.618);
  }
}
.snowdot:nth-child(2) {
  opacity: 0.5463;
  transform: translate(13.3186vw, -10px) scale(0.1242);
  animation: fall-2 13s -21s linear infinite;
}
@keyframes fall-2 {
  55.682% {
    transform: translate(16.3764vw, 55.682vh) scale(0.1242);
  }
  to {
    transform: translate(14.8475vw, 100vh) scale(0.1242);
  }
}
.snowdot:nth-child(3) {
  opacity: 0.7949;
  transform: translate(35.7772vw, -10px) scale(0.3812);
  animation: fall-3 27s -14s linear infinite;
}
@keyframes fall-3 {
  43.662% {
    transform: translate(34.09vw, 43.662vh) scale(0.3812);
  }
  to {
    transform: translate(34.9336vw, 100vh) scale(0.3812);
  }
}
.snowdot:nth-child(4) {
  opacity: 0.6365;
  transform: translate(22.1872vw, -10px) scale(0.3654);
  animation: fall-4 18s -23s linear infinite;
}
@keyframes fall-4 {
  36.92% {
    transform: translate(16.4547vw, 36.92vh) scale(0.3654);
  }
  to {
    transform: translate(19.32095vw, 100vh) scale(0.3654);
  }
}
.snowdot:nth-child(5) {
  opacity: 0.6352;
  transform: translate(63.1565vw, -10px) scale(0.083);
  animation: fall-5 25s -14s linear infinite;
}
@keyframes fall-5 {
  68.916% {
    transform: translate(56.3248vw, 68.916vh) scale(0.083);
  }
  to {
    transform: translate(59.74065vw, 100vh) scale(0.083);
  }
}
.snowdot:nth-child(6) {
  opacity: 0.8465;
  transform: translate(2.2081vw, -10px) scale(0.6326);
  animation: fall-6 25s -18s linear infinite;
}
@keyframes fall-6 {
  67.203% {
    transform: translate(0.9089vw, 67.203vh) scale(0.6326);
  }
  to {
    transform: translate(1.5585vw, 100vh) scale(0.6326);
  }
}
.snowdot:nth-child(7) {
  opacity: 0.0499;
  transform: translate(25.1378vw, -10px) scale(0.4473);
  animation: fall-7 13s -24s linear infinite;
}
@keyframes fall-7 {
  61.55% {
    transform: translate(23.4783vw, 61.55vh) scale(0.4473);
  }
  to {
    transform: translate(24.30805vw, 100vh) scale(0.4473);
  }
}
.snowdot:nth-child(8) {
  opacity: 0.1631;
  transform: translate(87.5335vw, -10px) scale(0.429);
  animation: fall-8 26s -3s linear infinite;
}
@keyframes fall-8 {
  55.725% {
    transform: translate(82.4vw, 55.725vh) scale(0.429);
  }
  to {
    transform: translate(84.96675vw, 100vh) scale(0.429);
  }
}
.snowdot:nth-child(9) {
  opacity: 0.975;
  transform: translate(42.4408vw, -10px) scale(0.9024);
  animation: fall-9 29s -22s linear infinite;
}
@keyframes fall-9 {
  45.862% {
    transform: translate(41.838vw, 45.862vh) scale(0.9024);
  }
  to {
    transform: translate(42.1394vw, 100vh) scale(0.9024);
  }
}
.snowdot:nth-child(10) {
  opacity: 0.3361;
  transform: translate(78.7775vw, -10px) scale(0.1956);
  animation: fall-10 10s -23s linear infinite;
}
@keyframes fall-10 {
  37.599% {
    transform: translate(73.0556vw, 37.599vh) scale(0.1956);
  }
  to {
    transform: translate(75.91655vw, 100vh) scale(0.1956);
  }
}
.snowdot:nth-child(11) {
  opacity: 0.785;
  transform: translate(43.0434vw, -10px) scale(0.2422);
  animation: fall-11 27s -30s linear infinite;
}
@keyframes fall-11 {
  72.141% {
    transform: translate(33.662vw, 72.141vh) scale(0.2422);
  }
  to {
    transform: translate(38.3527vw, 100vh) scale(0.2422);
  }
}
.snowdot:nth-child(12) {
  opacity: 0.2391;
  transform: translate(17.75vw, -10px) scale(0.6132);
  animation: fall-12 15s -4s linear infinite;
}
@keyframes fall-12 {
  30.034% {
    transform: translate(19.3818vw, 30.034vh) scale(0.6132);
  }
  to {
    transform: translate(18.5659vw, 100vh) scale(0.6132);
  }
}
.snowdot:nth-child(13) {
  opacity: 0.9322;
  transform: translate(83.6105vw, -10px) scale(0.5942);
  animation: fall-13 24s -23s linear infinite;
}
@keyframes fall-13 {
  79.063% {
    transform: translate(78.7181vw, 79.063vh) scale(0.5942);
  }
  to {
    transform: translate(81.1643vw, 100vh) scale(0.5942);
  }
}
.snowdot:nth-child(14) {
  opacity: 0.4371;
  transform: translate(48.5671vw, -10px) scale(0.4509);
  animation: fall-14 24s -2s linear infinite;
}
@keyframes fall-14 {
  69.307% {
    transform: translate(39.5419vw, 69.307vh) scale(0.4509);
  }
  to {
    transform: translate(44.0545vw, 100vh) scale(0.4509);
  }
}
.snowdot:nth-child(15) {
  opacity: 0.4472;
  transform: translate(37.7903vw, -10px) scale(0.9735);
  animation: fall-15 19s -19s linear infinite;
}
@keyframes fall-15 {
  31.872% {
    transform: translate(35.3002vw, 31.872vh) scale(0.9735);
  }
  to {
    transform: translate(36.54525vw, 100vh) scale(0.9735);
  }
}
.snowdot:nth-child(16) {
  opacity: 0.799;
  transform: translate(53.5716vw, -10px) scale(0.5875);
  animation: fall-16 10s -4s linear infinite;
}
@keyframes fall-16 {
  58.149% {
    transform: translate(44.8808vw, 58.149vh) scale(0.5875);
  }
  to {
    transform: translate(49.2262vw, 100vh) scale(0.5875);
  }
}
.snowdot:nth-child(17) {
  opacity: 0.9686;
  transform: translate(60.3792vw, -10px) scale(0.1798);
  animation: fall-17 27s -20s linear infinite;
}
@keyframes fall-17 {
  61.309% {
    transform: translate(54.0186vw, 61.309vh) scale(0.1798);
  }
  to {
    transform: translate(57.1989vw, 100vh) scale(0.1798);
  }
}
.snowdot:nth-child(18) {
  opacity: 0.8476;
  transform: translate(93.5252vw, -10px) scale(0.077);
  animation: fall-18 16s -22s linear infinite;
}
@keyframes fall-18 {
  51.812% {
    transform: translate(90.0046vw, 51.812vh) scale(0.077);
  }
  to {
    transform: translate(91.7649vw, 100vh) scale(0.077);
  }
}
.snowdot:nth-child(19) {
  opacity: 0.216;
  transform: translate(23.3224vw, -10px) scale(0.318);
  animation: fall-19 25s -21s linear infinite;
}
@keyframes fall-19 {
  74.711% {
    transform: translate(18.3764vw, 74.711vh) scale(0.318);
  }
  to {
    transform: translate(20.8494vw, 100vh) scale(0.318);
  }
}
.snowdot:nth-child(20) {
  opacity: 0.81;
  transform: translate(4.8588vw, -10px) scale(0.1435);
  animation: fall-20 22s -23s linear infinite;
}
@keyframes fall-20 {
  52.502% {
    transform: translate(-0.999vw, 52.502vh) scale(0.1435);
  }
  to {
    transform: translate(1.9299vw, 100vh) scale(0.1435);
  }
}
.snowdot:nth-child(21) {
  opacity: 0.5251;
  transform: translate(73.9603vw, -10px) scale(0.3108);
  animation: fall-21 30s -25s linear infinite;
}
@keyframes fall-21 {
  54.262% {
    transform: translate(68.1337vw, 54.262vh) scale(0.3108);
  }
  to {
    transform: translate(71.047vw, 100vh) scale(0.3108);
  }
}
.snowdot:nth-child(22) {
  opacity: 0.9928;
  transform: translate(4.6531vw, -10px) scale(0.2918);
  animation: fall-22 28s -29s linear infinite;
}
@keyframes fall-22 {
  75.167% {
    transform: translate(10.4631vw, 75.167vh) scale(0.2918);
  }
  to {
    transform: translate(7.5581vw, 100vh) scale(0.2918);
  }
}
.snowdot:nth-child(23) {
  opacity: 0.879;
  transform: translate(15.8708vw, -10px) scale(0.5441);
  animation: fall-23 17s -21s linear infinite;
}
@keyframes fall-23 {
  49.929% {
    transform: translate(12.7058vw, 49.929vh) scale(0.5441);
  }
  to {
    transform: translate(14.2883vw, 100vh) scale(0.5441);
  }
}
.snowdot:nth-child(24) {
  opacity: 0.9969;
  transform: translate(45.2942vw, -10px) scale(0.6611);
  animation: fall-24 10s -23s linear infinite;
}
@keyframes fall-24 {
  40.841% {
    transform: translate(55.1631vw, 40.841vh) scale(0.6611);
  }
  to {
    transform: translate(50.22865vw, 100vh) scale(0.6611);
  }
}
.snowdot:nth-child(25) {
  opacity: 0.2059;
  transform: translate(34.2078vw, -10px) scale(0.8644);
  animation: fall-25 13s -1s linear infinite;
}
@keyframes fall-25 {
  75.502% {
    transform: translate(34.0938vw, 75.502vh) scale(0.8644);
  }
  to {
    transform: translate(34.1508vw, 100vh) scale(0.8644);
  }
}
.snowdot:nth-child(26) {
  opacity: 0.5561;
  transform: translate(84.2094vw, -10px) scale(0.2961);
  animation: fall-26 12s -8s linear infinite;
}
@keyframes fall-26 {
  74.147% {
    transform: translate(89.1048vw, 74.147vh) scale(0.2961);
  }
  to {
    transform: translate(86.6571vw, 100vh) scale(0.2961);
  }
}
.snowdot:nth-child(27) {
  opacity: 0.4053;
  transform: translate(98.0698vw, -10px) scale(0.3986);
  animation: fall-27 27s -14s linear infinite;
}
@keyframes fall-27 {
  60.217% {
    transform: translate(94.1621vw, 60.217vh) scale(0.3986);
  }
  to {
    transform: translate(96.11595vw, 100vh) scale(0.3986);
  }
}
.snowdot:nth-child(28) {
  opacity: 0.5631;
  transform: translate(27.146vw, -10px) scale(0.8285);
  animation: fall-28 19s -13s linear infinite;
}
@keyframes fall-28 {
  58.305% {
    transform: translate(33.2433vw, 58.305vh) scale(0.8285);
  }
  to {
    transform: translate(30.19465vw, 100vh) scale(0.8285);
  }
}
.snowdot:nth-child(29) {
  opacity: 0.7025;
  transform: translate(38.4808vw, -10px) scale(0.2398);
  animation: fall-29 20s -1s linear infinite;
}
@keyframes fall-29 {
  59.4% {
    transform: translate(48.1908vw, 59.4vh) scale(0.2398);
  }
  to {
    transform: translate(43.3358vw, 100vh) scale(0.2398);
  }
}
.snowdot:nth-child(30) {
  opacity: 0.735;
  transform: translate(65.1571vw, -10px) scale(0.1493);
  animation: fall-30 30s -17s linear infinite;
}
@keyframes fall-30 {
  42.633% {
    transform: translate(68.72vw, 42.633vh) scale(0.1493);
  }
  to {
    transform: translate(66.93855vw, 100vh) scale(0.1493);
  }
}
.snowdot:nth-child(31) {
  opacity: 0.0481;
  transform: translate(12.7454vw, -10px) scale(0.8663);
  animation: fall-31 18s -9s linear infinite;
}
@keyframes fall-31 {
  73.392% {
    transform: translate(5.4269vw, 73.392vh) scale(0.8663);
  }
  to {
    transform: translate(9.08615vw, 100vh) scale(0.8663);
  }
}
.snowdot:nth-child(32) {
  opacity: 0.3114;
  transform: translate(61.544vw, -10px) scale(0.6776);
  animation: fall-32 13s -17s linear infinite;
}
@keyframes fall-32 {
  79.748% {
    transform: translate(68.6762vw, 79.748vh) scale(0.6776);
  }
  to {
    transform: translate(65.1101vw, 100vh) scale(0.6776);
  }
}
.snowdot:nth-child(33) {
  opacity: 0.8053;
  transform: translate(42.1033vw, -10px) scale(0.0871);
  animation: fall-33 22s -6s linear infinite;
}
@keyframes fall-33 {
  52.599% {
    transform: translate(41.467vw, 52.599vh) scale(0.0871);
  }
  to {
    transform: translate(41.78515vw, 100vh) scale(0.0871);
  }
}
.snowdot:nth-child(34) {
  opacity: 0.5135;
  transform: translate(10.2237vw, -10px) scale(0.8038);
  animation: fall-34 24s -6s linear infinite;
}
@keyframes fall-34 {
  39.401% {
    transform: translate(3.0768vw, 39.401vh) scale(0.8038);
  }
  to {
    transform: translate(6.65025vw, 100vh) scale(0.8038);
  }
}
.snowdot:nth-child(35) {
  opacity: 0.2478;
  transform: translate(87.3627vw, -10px) scale(0.4996);
  animation: fall-35 19s -20s linear infinite;
}
@keyframes fall-35 {
  43.153% {
    transform: translate(88.5063vw, 43.153vh) scale(0.4996);
  }
  to {
    transform: translate(87.9345vw, 100vh) scale(0.4996);
  }
}
.snowdot:nth-child(36) {
  opacity: 0.0403;
  transform: translate(99.0492vw, -10px) scale(0.8184);
  animation: fall-36 11s -8s linear infinite;
}
@keyframes fall-36 {
  70.744% {
    transform: translate(101.2317vw, 70.744vh) scale(0.8184);
  }
  to {
    transform: translate(100.14045vw, 100vh) scale(0.8184);
  }
}
.snowdot:nth-child(37) {
  opacity: 0.3355;
  transform: translate(36.4019vw, -10px) scale(0.6828);
  animation: fall-37 15s -7s linear infinite;
}
@keyframes fall-37 {
  35.065% {
    transform: translate(37.4162vw, 35.065vh) scale(0.6828);
  }
  to {
    transform: translate(36.90905vw, 100vh) scale(0.6828);
  }
}
.snowdot:nth-child(38) {
  opacity: 0.9094;
  transform: translate(68.5879vw, -10px) scale(0.2917);
  animation: fall-38 13s -14s linear infinite;
}
@keyframes fall-38 {
  51.32% {
    transform: translate(66.9977vw, 51.32vh) scale(0.2917);
  }
  to {
    transform: translate(67.7928vw, 100vh) scale(0.2917);
  }
}
.snowdot:nth-child(39) {
  opacity: 0.0857;
  transform: translate(78.1739vw, -10px) scale(0.9082);
  animation: fall-39 16s -3s linear infinite;
}
@keyframes fall-39 {
  43.734% {
    transform: translate(74.8314vw, 43.734vh) scale(0.9082);
  }
  to {
    transform: translate(76.50265vw, 100vh) scale(0.9082);
  }
}
.snowdot:nth-child(40) {
  opacity: 0.2228;
  transform: translate(56.7612vw, -10px) scale(0.5203);
  animation: fall-40 13s -17s linear infinite;
}
@keyframes fall-40 {
  76.444% {
    transform: translate(62.7995vw, 76.444vh) scale(0.5203);
  }
  to {
    transform: translate(59.78035vw, 100vh) scale(0.5203);
  }
}
.snowdot:nth-child(41) {
  opacity: 0.3379;
  transform: translate(7.4798vw, -10px) scale(0.1121);
  animation: fall-41 26s -28s linear infinite;
}
@keyframes fall-41 {
  59.889% {
    transform: translate(6.6573vw, 59.889vh) scale(0.1121);
  }
  to {
    transform: translate(7.06855vw, 100vh) scale(0.1121);
  }
}
.snowdot:nth-child(42) {
  opacity: 0.478;
  transform: translate(0.3175vw, -10px) scale(0.8465);
  animation: fall-42 20s -30s linear infinite;
}
@keyframes fall-42 {
  54.988% {
    transform: translate(4.5026vw, 54.988vh) scale(0.8465);
  }
  to {
    transform: translate(2.41005vw, 100vh) scale(0.8465);
  }
}
.snowdot:nth-child(43) {
  opacity: 0.4541;
  transform: translate(38.1393vw, -10px) scale(0.2143);
  animation: fall-43 18s -3s linear infinite;
}
@keyframes fall-43 {
  50.795% {
    transform: translate(40.2192vw, 50.795vh) scale(0.2143);
  }
  to {
    transform: translate(39.17925vw, 100vh) scale(0.2143);
  }
}
.snowdot:nth-child(44) {
  opacity: 0.4751;
  transform: translate(72.9946vw, -10px) scale(0.7616);
  animation: fall-44 23s -23s linear infinite;
}
@keyframes fall-44 {
  41.196% {
    transform: translate(68.3354vw, 41.196vh) scale(0.7616);
  }
  to {
    transform: translate(70.665vw, 100vh) scale(0.7616);
  }
}
.snowdot:nth-child(45) {
  opacity: 0.9259;
  transform: translate(33.1852vw, -10px) scale(0.7521);
  animation: fall-45 14s -18s linear infinite;
}
@keyframes fall-45 {
  57.03% {
    transform: translate(41.3935vw, 57.03vh) scale(0.7521);
  }
  to {
    transform: translate(37.28935vw, 100vh) scale(0.7521);
  }
}
.snowdot:nth-child(46) {
  opacity: 0.3197;
  transform: translate(57.6235vw, -10px) scale(0.5397);
  animation: fall-46 21s -26s linear infinite;
}
@keyframes fall-46 {
  72.531% {
    transform: translate(65.5051vw, 72.531vh) scale(0.5397);
  }
  to {
    transform: translate(61.5643vw, 100vh) scale(0.5397);
  }
}
.snowdot:nth-child(47) {
  opacity: 0.2397;
  transform: translate(51.337vw, -10px) scale(0.6894);
  animation: fall-47 19s -19s linear infinite;
}
@keyframes fall-47 {
  79.863% {
    transform: translate(53.4694vw, 79.863vh) scale(0.6894);
  }
  to {
    transform: translate(52.4032vw, 100vh) scale(0.6894);
  }
}
.snowdot:nth-child(48) {
  opacity: 0.4152;
  transform: translate(75.2991vw, -10px) scale(0.6796);
  animation: fall-48 12s -30s linear infinite;
}
@keyframes fall-48 {
  56.281% {
    transform: translate(70.287vw, 56.281vh) scale(0.6796);
  }
  to {
    transform: translate(72.79305vw, 100vh) scale(0.6796);
  }
}
.snowdot:nth-child(49) {
  opacity: 0.0176;
  transform: translate(89.1994vw, -10px) scale(0.1318);
  animation: fall-49 27s -20s linear infinite;
}
@keyframes fall-49 {
  70.243% {
    transform: translate(93.7676vw, 70.243vh) scale(0.1318);
  }
  to {
    transform: translate(91.4835vw, 100vh) scale(0.1318);
  }
}
.snowdot:nth-child(50) {
  opacity: 0.1704;
  transform: translate(58.6467vw, -10px) scale(0.7875);
  animation: fall-50 11s -27s linear infinite;
}
@keyframes fall-50 {
  47.829% {
    transform: translate(68.1382vw, 47.829vh) scale(0.7875);
  }
  to {
    transform: translate(63.39245vw, 100vh) scale(0.7875);
  }
}
.snowdot:nth-child(51) {
  opacity: 0.7727;
  transform: translate(25.188vw, -10px) scale(0.6132);
  animation: fall-51 24s -22s linear infinite;
}
@keyframes fall-51 {
  63.256% {
    transform: translate(33.4275vw, 63.256vh) scale(0.6132);
  }
  to {
    transform: translate(29.30775vw, 100vh) scale(0.6132);
  }
}
.snowdot:nth-child(52) {
  opacity: 0.5272;
  transform: translate(34.4986vw, -10px) scale(0.9318);
  animation: fall-52 11s -13s linear infinite;
}
@keyframes fall-52 {
  55.245% {
    transform: translate(29.7725vw, 55.245vh) scale(0.9318);
  }
  to {
    transform: translate(32.13555vw, 100vh) scale(0.9318);
  }
}
.snowdot:nth-child(53) {
  opacity: 0.2244;
  transform: translate(54.4019vw, -10px) scale(0.3568);
  animation: fall-53 24s -7s linear infinite;
}
@keyframes fall-53 {
  34.685% {
    transform: translate(60.1439vw, 34.685vh) scale(0.3568);
  }
  to {
    transform: translate(57.2729vw, 100vh) scale(0.3568);
  }
}
.snowdot:nth-child(54) {
  opacity: 0.9293;
  transform: translate(10.4204vw, -10px) scale(0.6416);
  animation: fall-54 18s -27s linear infinite;
}
@keyframes fall-54 {
  39.942% {
    transform: translate(0.4413vw, 39.942vh) scale(0.6416);
  }
  to {
    transform: translate(5.43085vw, 100vh) scale(0.6416);
  }
}
.snowdot:nth-child(55) {
  opacity: 0.1339;
  transform: translate(40.9497vw, -10px) scale(0.8111);
  animation: fall-55 16s -14s linear infinite;
}
@keyframes fall-55 {
  54.566% {
    transform: translate(39.3945vw, 54.566vh) scale(0.8111);
  }
  to {
    transform: translate(40.1721vw, 100vh) scale(0.8111);
  }
}
.snowdot:nth-child(56) {
  opacity: 0.3563;
  transform: translate(29.7237vw, -10px) scale(0.4314);
  animation: fall-56 15s -10s linear infinite;
}
@keyframes fall-56 {
  49.548% {
    transform: translate(26.7606vw, 49.548vh) scale(0.4314);
  }
  to {
    transform: translate(28.24215vw, 100vh) scale(0.4314);
  }
}
.snowdot:nth-child(57) {
  opacity: 0.0633;
  transform: translate(24.6799vw, -10px) scale(0.5501);
  animation: fall-57 17s -20s linear infinite;
}
@keyframes fall-57 {
  35.738% {
    transform: translate(16.7552vw, 35.738vh) scale(0.5501);
  }
  to {
    transform: translate(20.71755vw, 100vh) scale(0.5501);
  }
}
.snowdot:nth-child(58) {
  opacity: 0.6226;
  transform: translate(27.2441vw, -10px) scale(0.4687);
  animation: fall-58 21s -19s linear infinite;
}
@keyframes fall-58 {
  73.786% {
    transform: translate(36.421vw, 73.786vh) scale(0.4687);
  }
  to {
    transform: translate(31.83255vw, 100vh) scale(0.4687);
  }
}
.snowdot:nth-child(59) {
  opacity: 0.1141;
  transform: translate(82.232vw, -10px) scale(0.1403);
  animation: fall-59 10s -2s linear infinite;
}
@keyframes fall-59 {
  69.087% {
    transform: translate(88.063vw, 69.087vh) scale(0.1403);
  }
  to {
    transform: translate(85.1475vw, 100vh) scale(0.1403);
  }
}
.snowdot:nth-child(60) {
  opacity: 0.2248;
  transform: translate(99.3693vw, -10px) scale(0.1215);
  animation: fall-60 12s -24s linear infinite;
}
@keyframes fall-60 {
  48.06% {
    transform: translate(96.5207vw, 48.06vh) scale(0.1215);
  }
  to {
    transform: translate(97.945vw, 100vh) scale(0.1215);
  }
}
.snowdot:nth-child(61) {
  opacity: 0.4644;
  transform: translate(63.7059vw, -10px) scale(0.9111);
  animation: fall-61 16s -4s linear infinite;
}
@keyframes fall-61 {
  73.767% {
    transform: translate(69.2223vw, 73.767vh) scale(0.9111);
  }
  to {
    transform: translate(66.4641vw, 100vh) scale(0.9111);
  }
}
.snowdot:nth-child(62) {
  opacity: 0.3828;
  transform: translate(89.48vw, -10px) scale(0.4984);
  animation: fall-62 29s -14s linear infinite;
}
@keyframes fall-62 {
  43.199% {
    transform: translate(91.536vw, 43.199vh) scale(0.4984);
  }
  to {
    transform: translate(90.508vw, 100vh) scale(0.4984);
  }
}
.snowdot:nth-child(63) {
  opacity: 0.6973;
  transform: translate(70.4643vw, -10px) scale(0.8025);
  animation: fall-63 13s -9s linear infinite;
}
@keyframes fall-63 {
  40.304% {
    transform: translate(67.1033vw, 40.304vh) scale(0.8025);
  }
  to {
    transform: translate(68.7838vw, 100vh) scale(0.8025);
  }
}
.snowdot:nth-child(64) {
  opacity: 0.9;
  transform: translate(75.5485vw, -10px) scale(0.9844);
  animation: fall-64 14s -26s linear infinite;
}
@keyframes fall-64 {
  39.432% {
    transform: translate(67.0187vw, 39.432vh) scale(0.9844);
  }
  to {
    transform: translate(71.2836vw, 100vh) scale(0.9844);
  }
}
.snowdot:nth-child(65) {
  opacity: 0.2064;
  transform: translate(45.1067vw, -10px) scale(0.6251);
  animation: fall-65 30s -3s linear infinite;
}
@keyframes fall-65 {
  58.202% {
    transform: translate(44.3032vw, 58.202vh) scale(0.6251);
  }
  to {
    transform: translate(44.70495vw, 100vh) scale(0.6251);
  }
}
.snowdot:nth-child(66) {
  opacity: 0.6817;
  transform: translate(34.5771vw, -10px) scale(0.8723);
  animation: fall-66 24s -25s linear infinite;
}
@keyframes fall-66 {
  40.99% {
    transform: translate(31.2768vw, 40.99vh) scale(0.8723);
  }
  to {
    transform: translate(32.92695vw, 100vh) scale(0.8723);
  }
}
.snowdot:nth-child(67) {
  opacity: 0.5111;
  transform: translate(43.2249vw, -10px) scale(0.2363);
  animation: fall-67 17s -21s linear infinite;
}
@keyframes fall-67 {
  65.106% {
    transform: translate(36.6148vw, 65.106vh) scale(0.2363);
  }
  to {
    transform: translate(39.91985vw, 100vh) scale(0.2363);
  }
}
.snowdot:nth-child(68) {
  opacity: 0.7352;
  transform: translate(38.2109vw, -10px) scale(0.1631);
  animation: fall-68 15s -25s linear infinite;
}
@keyframes fall-68 {
  73.41% {
    transform: translate(36.5856vw, 73.41vh) scale(0.1631);
  }
  to {
    transform: translate(37.39825vw, 100vh) scale(0.1631);
  }
}
.snowdot:nth-child(69) {
  opacity: 0.6635;
  transform: translate(37.3401vw, -10px) scale(0.0332);
  animation: fall-69 15s -19s linear infinite;
}
@keyframes fall-69 {
  37.661% {
    transform: translate(35.3414vw, 37.661vh) scale(0.0332);
  }
  to {
    transform: translate(36.34075vw, 100vh) scale(0.0332);
  }
}
.snowdot:nth-child(70) {
  opacity: 0.3773;
  transform: translate(71.4604vw, -10px) scale(0.0733);
  animation: fall-70 21s -8s linear infinite;
}
@keyframes fall-70 {
  68.748% {
    transform: translate(65.3275vw, 68.748vh) scale(0.0733);
  }
  to {
    transform: translate(68.39395vw, 100vh) scale(0.0733);
  }
}
.snowdot:nth-child(71) {
  opacity: 0.4444;
  transform: translate(86.5045vw, -10px) scale(0.0017);
  animation: fall-71 12s -28s linear infinite;
}
@keyframes fall-71 {
  73.617% {
    transform: translate(93.4177vw, 73.617vh) scale(0.0017);
  }
  to {
    transform: translate(89.9611vw, 100vh) scale(0.0017);
  }
}
.snowdot:nth-child(72) {
  opacity: 0.3794;
  transform: translate(15.0016vw, -10px) scale(0.9998);
  animation: fall-72 12s -15s linear infinite;
}
@keyframes fall-72 {
  58.121% {
    transform: translate(13.0754vw, 58.121vh) scale(0.9998);
  }
  to {
    transform: translate(14.0385vw, 100vh) scale(0.9998);
  }
}
.snowdot:nth-child(73) {
  opacity: 0.8136;
  transform: translate(15.9973vw, -10px) scale(0.736);
  animation: fall-73 14s -29s linear infinite;
}
@keyframes fall-73 {
  30.209% {
    transform: translate(24.4556vw, 30.209vh) scale(0.736);
  }
  to {
    transform: translate(20.22645vw, 100vh) scale(0.736);
  }
}
.snowdot:nth-child(74) {
  opacity: 0.1845;
  transform: translate(45.0215vw, -10px) scale(0.7459);
  animation: fall-74 19s -18s linear infinite;
}
@keyframes fall-74 {
  60.221% {
    transform: translate(51.4077vw, 60.221vh) scale(0.7459);
  }
  to {
    transform: translate(48.2146vw, 100vh) scale(0.7459);
  }
}
.snowdot:nth-child(75) {
  opacity: 0.3434;
  transform: translate(29.1851vw, -10px) scale(0.1018);
  animation: fall-75 14s -29s linear infinite;
}
@keyframes fall-75 {
  34.865% {
    transform: translate(35.1939vw, 34.865vh) scale(0.1018);
  }
  to {
    transform: translate(32.1895vw, 100vh) scale(0.1018);
  }
}
.snowdot:nth-child(76) {
  opacity: 0.874;
  transform: translate(55.2834vw, -10px) scale(0.642);
  animation: fall-76 16s -11s linear infinite;
}
@keyframes fall-76 {
  72.086% {
    transform: translate(56.0366vw, 72.086vh) scale(0.642);
  }
  to {
    transform: translate(55.66vw, 100vh) scale(0.642);
  }
}
.snowdot:nth-child(77) {
  opacity: 0.5459;
  transform: translate(50.9485vw, -10px) scale(0.0328);
  animation: fall-77 12s -21s linear infinite;
}
@keyframes fall-77 {
  76.278% {
    transform: translate(52.8427vw, 76.278vh) scale(0.0328);
  }
  to {
    transform: translate(51.8956vw, 100vh) scale(0.0328);
  }
}
.snowdot:nth-child(78) {
  opacity: 0.0375;
  transform: translate(30.9678vw, -10px) scale(0.012);
  animation: fall-78 14s -13s linear infinite;
}
@keyframes fall-78 {
  47.342% {
    transform: translate(33.5108vw, 47.342vh) scale(0.012);
  }
  to {
    transform: translate(32.2393vw, 100vh) scale(0.012);
  }
}
.snowdot:nth-child(79) {
  opacity: 0.8309;
  transform: translate(85.9396vw, -10px) scale(0.2649);
  animation: fall-79 16s -8s linear infinite;
}
@keyframes fall-79 {
  32.007% {
    transform: translate(88.1825vw, 32.007vh) scale(0.2649);
  }
  to {
    transform: translate(87.06105vw, 100vh) scale(0.2649);
  }
}
.snowdot:nth-child(80) {
  opacity: 0.1923;
  transform: translate(85.3993vw, -10px) scale(0.3482);
  animation: fall-80 21s -27s linear infinite;
}
@keyframes fall-80 {
  52.848% {
    transform: translate(76.784vw, 52.848vh) scale(0.3482);
  }
  to {
    transform: translate(81.09165vw, 100vh) scale(0.3482);
  }
}
.snowdot:nth-child(81) {
  opacity: 0.8656;
  transform: translate(83.0564vw, -10px) scale(0.5488);
  animation: fall-81 28s -5s linear infinite;
}
@keyframes fall-81 {
  55.508% {
    transform: translate(82.8148vw, 55.508vh) scale(0.5488);
  }
  to {
    transform: translate(82.9356vw, 100vh) scale(0.5488);
  }
}
.snowdot:nth-child(82) {
  opacity: 0.3156;
  transform: translate(77.1699vw, -10px) scale(0.5333);
  animation: fall-82 14s -1s linear infinite;
}
@keyframes fall-82 {
  35.266% {
    transform: translate(80.8497vw, 35.266vh) scale(0.5333);
  }
  to {
    transform: translate(79.0098vw, 100vh) scale(0.5333);
  }
}
.snowdot:nth-child(83) {
  opacity: 0.2871;
  transform: translate(73.9318vw, -10px) scale(0.9002);
  animation: fall-83 21s -30s linear infinite;
}
@keyframes fall-83 {
  63.572% {
    transform: translate(82.9028vw, 63.572vh) scale(0.9002);
  }
  to {
    transform: translate(78.4173vw, 100vh) scale(0.9002);
  }
}
.snowdot:nth-child(84) {
  opacity: 0.019;
  transform: translate(47.1242vw, -10px) scale(0.8318);
  animation: fall-84 19s -24s linear infinite;
}
@keyframes fall-84 {
  34.562% {
    transform: translate(43.4054vw, 34.562vh) scale(0.8318);
  }
  to {
    transform: translate(45.2648vw, 100vh) scale(0.8318);
  }
}
.snowdot:nth-child(85) {
  opacity: 0.7221;
  transform: translate(78.2772vw, -10px) scale(0.545);
  animation: fall-85 29s -1s linear infinite;
}
@keyframes fall-85 {
  66.334% {
    transform: translate(81.4462vw, 66.334vh) scale(0.545);
  }
  to {
    transform: translate(79.8617vw, 100vh) scale(0.545);
  }
}
.snowdot:nth-child(86) {
  opacity: 0.2226;
  transform: translate(55.4394vw, -10px) scale(0.855);
  animation: fall-86 21s -15s linear infinite;
}
@keyframes fall-86 {
  43.017% {
    transform: translate(56.2679vw, 43.017vh) scale(0.855);
  }
  to {
    transform: translate(55.85365vw, 100vh) scale(0.855);
  }
}
.snowdot:nth-child(87) {
  opacity: 0.5698;
  transform: translate(37.4007vw, -10px) scale(0.4992);
  animation: fall-87 28s -4s linear infinite;
}
@keyframes fall-87 {
  72.179% {
    transform: translate(46.5485vw, 72.179vh) scale(0.4992);
  }
  to {
    transform: translate(41.9746vw, 100vh) scale(0.4992);
  }
}
.snowdot:nth-child(88) {
  opacity: 0.7181;
  transform: translate(15.8831vw, -10px) scale(0.8312);
  animation: fall-88 11s -26s linear infinite;
}
@keyframes fall-88 {
  55.855% {
    transform: translate(12.4424vw, 55.855vh) scale(0.8312);
  }
  to {
    transform: translate(14.16275vw, 100vh) scale(0.8312);
  }
}
.snowdot:nth-child(89) {
  opacity: 0.147;
  transform: translate(18.7926vw, -10px) scale(0.9022);
  animation: fall-89 27s -17s linear infinite;
}
@keyframes fall-89 {
  65.403% {
    transform: translate(25.8314vw, 65.403vh) scale(0.9022);
  }
  to {
    transform: translate(22.312vw, 100vh) scale(0.9022);
  }
}
.snowdot:nth-child(90) {
  opacity: 0.584;
  transform: translate(77.4319vw, -10px) scale(0.5997);
  animation: fall-90 16s -29s linear infinite;
}
@keyframes fall-90 {
  72.913% {
    transform: translate(81.9108vw, 72.913vh) scale(0.5997);
  }
  to {
    transform: translate(79.67135vw, 100vh) scale(0.5997);
  }
}
.snowdot:nth-child(91) {
  opacity: 0.7838;
  transform: translate(17.9317vw, -10px) scale(0.4642);
  animation: fall-91 17s -18s linear infinite;
}
@keyframes fall-91 {
  35.171% {
    transform: translate(22.7536vw, 35.171vh) scale(0.4642);
  }
  to {
    transform: translate(20.34265vw, 100vh) scale(0.4642);
  }
}
.snowdot:nth-child(92) {
  opacity: 0.7703;
  transform: translate(84.3051vw, -10px) scale(0.2701);
  animation: fall-92 27s -22s linear infinite;
}
@keyframes fall-92 {
  36.852% {
    transform: translate(84.818vw, 36.852vh) scale(0.2701);
  }
  to {
    transform: translate(84.56155vw, 100vh) scale(0.2701);
  }
}
.snowdot:nth-child(93) {
  opacity: 0.4725;
  transform: translate(31.1114vw, -10px) scale(0.3651);
  animation: fall-93 11s -8s linear infinite;
}
@keyframes fall-93 {
  79.368% {
    transform: translate(29.9328vw, 79.368vh) scale(0.3651);
  }
  to {
    transform: translate(30.5221vw, 100vh) scale(0.3651);
  }
}
.snowdot:nth-child(94) {
  opacity: 0.7992;
  transform: translate(48.0293vw, -10px) scale(0.5804);
  animation: fall-94 13s -6s linear infinite;
}
@keyframes fall-94 {
  40.239% {
    transform: translate(39.5037vw, 40.239vh) scale(0.5804);
  }
  to {
    transform: translate(43.7665vw, 100vh) scale(0.5804);
  }
}
.snowdot:nth-child(95) {
  opacity: 0.0511;
  transform: translate(18.2337vw, -10px) scale(0.9099);
  animation: fall-95 20s -27s linear infinite;
}
@keyframes fall-95 {
  59.041% {
    transform: translate(10.044vw, 59.041vh) scale(0.9099);
  }
  to {
    transform: translate(14.13885vw, 100vh) scale(0.9099);
  }
}
.snowdot:nth-child(96) {
  opacity: 0.0092;
  transform: translate(27.4472vw, -10px) scale(0.9153);
  animation: fall-96 18s -27s linear infinite;
}
@keyframes fall-96 {
  66.226% {
    transform: translate(36.2489vw, 66.226vh) scale(0.9153);
  }
  to {
    transform: translate(31.84805vw, 100vh) scale(0.9153);
  }
}
.snowdot:nth-child(97) {
  opacity: 0.8979;
  transform: translate(53.0258vw, -10px) scale(0.1645);
  animation: fall-97 29s -19s linear infinite;
}
@keyframes fall-97 {
  77.786% {
    transform: translate(61.6525vw, 77.786vh) scale(0.1645);
  }
  to {
    transform: translate(57.33915vw, 100vh) scale(0.1645);
  }
}
.snowdot:nth-child(98) {
  opacity: 0.7299;
  transform: translate(29.8107vw, -10px) scale(0.0337);
  animation: fall-98 25s -7s linear infinite;
}
@keyframes fall-98 {
  71.325% {
    transform: translate(25.594vw, 71.325vh) scale(0.0337);
  }
  to {
    transform: translate(27.70235vw, 100vh) scale(0.0337);
  }
}
.snowdot:nth-child(99) {
  opacity: 0.6602;
  transform: translate(87.4938vw, -10px) scale(0.1662);
  animation: fall-99 26s -7s linear infinite;
}
@keyframes fall-99 {
  58.148% {
    transform: translate(87.6502vw, 58.148vh) scale(0.1662);
  }
  to {
    transform: translate(87.572vw, 100vh) scale(0.1662);
  }
}
.snowdot:nth-child(100) {
  opacity: 0.3082;
  transform: translate(83.6971vw, -10px) scale(0.591);
  animation: fall-100 17s -17s linear infinite;
}
@keyframes fall-100 {
  40.313% {
    transform: translate(84.2532vw, 40.313vh) scale(0.591);
  }
  to {
    transform: translate(83.97515vw, 100vh) scale(0.591);
  }
}
.snowdot:nth-child(101) {
  opacity: 0.7868;
  transform: translate(49.5073vw, -10px) scale(0.9603);
  animation: fall-101 29s -26s linear infinite;
}
@keyframes fall-101 {
  59.275% {
    transform: translate(45.6409vw, 59.275vh) scale(0.9603);
  }
  to {
    transform: translate(47.5741vw, 100vh) scale(0.9603);
  }
}
.snowdot:nth-child(102) {
  opacity: 0.0768;
  transform: translate(77.6426vw, -10px) scale(0.8373);
  animation: fall-102 20s -19s linear infinite;
}
@keyframes fall-102 {
  36.677% {
    transform: translate(68.5345vw, 36.677vh) scale(0.8373);
  }
  to {
    transform: translate(73.08855vw, 100vh) scale(0.8373);
  }
}
.snowdot:nth-child(103) {
  opacity: 0.8395;
  transform: translate(18.2343vw, -10px) scale(0.4953);
  animation: fall-103 19s -15s linear infinite;
}
@keyframes fall-103 {
  31.697% {
    transform: translate(8.8775vw, 31.697vh) scale(0.4953);
  }
  to {
    transform: translate(13.5559vw, 100vh) scale(0.4953);
  }
}
.snowdot:nth-child(104) {
  opacity: 0.5866;
  transform: translate(60.0369vw, -10px) scale(0.4119);
  animation: fall-104 14s -19s linear infinite;
}
@keyframes fall-104 {
  35.86% {
    transform: translate(52.9841vw, 35.86vh) scale(0.4119);
  }
  to {
    transform: translate(56.5105vw, 100vh) scale(0.4119);
  }
}
.snowdot:nth-child(105) {
  opacity: 0.4912;
  transform: translate(62.7519vw, -10px) scale(0.5233);
  animation: fall-105 30s -17s linear infinite;
}
@keyframes fall-105 {
  52.963% {
    transform: translate(62.3243vw, 52.963vh) scale(0.5233);
  }
  to {
    transform: translate(62.5381vw, 100vh) scale(0.5233);
  }
}
.snowdot:nth-child(106) {
  opacity: 0.9404;
  transform: translate(32.2165vw, -10px) scale(0.0367);
  animation: fall-106 24s -23s linear infinite;
}
@keyframes fall-106 {
  34.355% {
    transform: translate(36.5216vw, 34.355vh) scale(0.0367);
  }
  to {
    transform: translate(34.36905vw, 100vh) scale(0.0367);
  }
}
.snowdot:nth-child(107) {
  opacity: 0.616;
  transform: translate(38.69vw, -10px) scale(0.5938);
  animation: fall-107 10s -20s linear infinite;
}
@keyframes fall-107 {
  62.264% {
    transform: translate(31.0368vw, 62.264vh) scale(0.5938);
  }
  to {
    transform: translate(34.8634vw, 100vh) scale(0.5938);
  }
}
.snowdot:nth-child(108) {
  opacity: 0.7376;
  transform: translate(45.4863vw, -10px) scale(0.3018);
  animation: fall-108 25s -24s linear infinite;
}
@keyframes fall-108 {
  41.407% {
    transform: translate(43.3613vw, 41.407vh) scale(0.3018);
  }
  to {
    transform: translate(44.4238vw, 100vh) scale(0.3018);
  }
}
.snowdot:nth-child(109) {
  opacity: 0.0698;
  transform: translate(28.6717vw, -10px) scale(0.9455);
  animation: fall-109 13s -10s linear infinite;
}
@keyframes fall-109 {
  36.641% {
    transform: translate(31.7995vw, 36.641vh) scale(0.9455);
  }
  to {
    transform: translate(30.2356vw, 100vh) scale(0.9455);
  }
}
.snowdot:nth-child(110) {
  opacity: 0.0411;
  transform: translate(65.8744vw, -10px) scale(0.3776);
  animation: fall-110 14s -12s linear infinite;
}
@keyframes fall-110 {
  73.575% {
    transform: translate(66.0709vw, 73.575vh) scale(0.3776);
  }
  to {
    transform: translate(65.97265vw, 100vh) scale(0.3776);
  }
}
.snowdot:nth-child(111) {
  opacity: 0.4325;
  transform: translate(57.5081vw, -10px) scale(0.97);
  animation: fall-111 18s -7s linear infinite;
}
@keyframes fall-111 {
  38.976% {
    transform: translate(53.3169vw, 38.976vh) scale(0.97);
  }
  to {
    transform: translate(55.4125vw, 100vh) scale(0.97);
  }
}
.snowdot:nth-child(112) {
  opacity: 0.9485;
  transform: translate(9.1889vw, -10px) scale(0.1769);
  animation: fall-112 22s -12s linear infinite;
}
@keyframes fall-112 {
  48.375% {
    transform: translate(15.8068vw, 48.375vh) scale(0.1769);
  }
  to {
    transform: translate(12.49785vw, 100vh) scale(0.1769);
  }
}
.snowdot:nth-child(113) {
  opacity: 0.0593;
  transform: translate(42.043vw, -10px) scale(0.4514);
  animation: fall-113 18s -3s linear infinite;
}
@keyframes fall-113 {
  78.699% {
    transform: translate(47.9656vw, 78.699vh) scale(0.4514);
  }
  to {
    transform: translate(45.0043vw, 100vh) scale(0.4514);
  }
}
.snowdot:nth-child(114) {
  opacity: 0.4349;
  transform: translate(19.186vw, -10px) scale(0.1255);
  animation: fall-114 16s -1s linear infinite;
}
@keyframes fall-114 {
  46.45% {
    transform: translate(10.8335vw, 46.45vh) scale(0.1255);
  }
  to {
    transform: translate(15.00975vw, 100vh) scale(0.1255);
  }
}
.snowdot:nth-child(115) {
  opacity: 0.9326;
  transform: translate(92.9794vw, -10px) scale(0.5649);
  animation: fall-115 30s -4s linear infinite;
}
@keyframes fall-115 {
  74.312% {
    transform: translate(87.5845vw, 74.312vh) scale(0.5649);
  }
  to {
    transform: translate(90.28195vw, 100vh) scale(0.5649);
  }
}
.snowdot:nth-child(116) {
  opacity: 0.8436;
  transform: translate(52.7595vw, -10px) scale(0.8938);
  animation: fall-116 30s -8s linear infinite;
}
@keyframes fall-116 {
  55.612% {
    transform: translate(48.8356vw, 55.612vh) scale(0.8938);
  }
  to {
    transform: translate(50.79755vw, 100vh) scale(0.8938);
  }
}
.snowdot:nth-child(117) {
  opacity: 0.6046;
  transform: translate(48.7454vw, -10px) scale(0.1244);
  animation: fall-117 21s -17s linear infinite;
}
@keyframes fall-117 {
  70.715% {
    transform: translate(57.6883vw, 70.715vh) scale(0.1244);
  }
  to {
    transform: translate(53.21685vw, 100vh) scale(0.1244);
  }
}
.snowdot:nth-child(118) {
  opacity: 0.7904;
  transform: translate(65.3848vw, -10px) scale(0.1934);
  animation: fall-118 26s -21s linear infinite;
}
@keyframes fall-118 {
  49.423% {
    transform: translate(71.9809vw, 49.423vh) scale(0.1934);
  }
  to {
    transform: translate(68.68285vw, 100vh) scale(0.1934);
  }
}
.snowdot:nth-child(119) {
  opacity: 0.2161;
  transform: translate(63.2494vw, -10px) scale(0.2325);
  animation: fall-119 23s -1s linear infinite;
}
@keyframes fall-119 {
  33.461% {
    transform: translate(65.1354vw, 33.461vh) scale(0.2325);
  }
  to {
    transform: translate(64.1924vw, 100vh) scale(0.2325);
  }
}
.snowdot:nth-child(120) {
  opacity: 0.9819;
  transform: translate(37.8449vw, -10px) scale(0.2902);
  animation: fall-120 28s -13s linear infinite;
}
@keyframes fall-120 {
  41.892% {
    transform: translate(30.5052vw, 41.892vh) scale(0.2902);
  }
  to {
    transform: translate(34.17505vw, 100vh) scale(0.2902);
  }
}
.snowdot:nth-child(121) {
  opacity: 0.1829;
  transform: translate(29.7158vw, -10px) scale(0.2768);
  animation: fall-121 15s -18s linear infinite;
}
@keyframes fall-121 {
  67.142% {
    transform: translate(22.0009vw, 67.142vh) scale(0.2768);
  }
  to {
    transform: translate(25.85835vw, 100vh) scale(0.2768);
  }
}
.snowdot:nth-child(122) {
  opacity: 0.1989;
  transform: translate(7.9007vw, -10px) scale(0.7511);
  animation: fall-122 21s -23s linear infinite;
}
@keyframes fall-122 {
  56.935% {
    transform: translate(5.5927vw, 56.935vh) scale(0.7511);
  }
  to {
    transform: translate(6.7467vw, 100vh) scale(0.7511);
  }
}
.snowdot:nth-child(123) {
  opacity: 0.6687;
  transform: translate(80.2318vw, -10px) scale(0.248);
  animation: fall-123 20s -15s linear infinite;
}
@keyframes fall-123 {
  55.051% {
    transform: translate(72.0134vw, 55.051vh) scale(0.248);
  }
  to {
    transform: translate(76.1226vw, 100vh) scale(0.248);
  }
}
.snowdot:nth-child(124) {
  opacity: 0.1675;
  transform: translate(5.9723vw, -10px) scale(0.568);
  animation: fall-124 25s -8s linear infinite;
}
@keyframes fall-124 {
  74.657% {
    transform: translate(5.2711vw, 74.657vh) scale(0.568);
  }
  to {
    transform: translate(5.6217vw, 100vh) scale(0.568);
  }
}
.snowdot:nth-child(125) {
  opacity: 0.0047;
  transform: translate(10.7104vw, -10px) scale(0.7867);
  animation: fall-125 11s -22s linear infinite;
}
@keyframes fall-125 {
  49.102% {
    transform: translate(17.5161vw, 49.102vh) scale(0.7867);
  }
  to {
    transform: translate(14.11325vw, 100vh) scale(0.7867);
  }
}
.snowdot:nth-child(126) {
  opacity: 0.1881;
  transform: translate(58.2921vw, -10px) scale(0.6377);
  animation: fall-126 10s -20s linear infinite;
}
@keyframes fall-126 {
  59.395% {
    transform: translate(66.9835vw, 59.395vh) scale(0.6377);
  }
  to {
    transform: translate(62.6378vw, 100vh) scale(0.6377);
  }
}
.snowdot:nth-child(127) {
  opacity: 0.1646;
  transform: translate(77.9337vw, -10px) scale(0.6994);
  animation: fall-127 26s -2s linear infinite;
}
@keyframes fall-127 {
  36.51% {
    transform: translate(76.5563vw, 36.51vh) scale(0.6994);
  }
  to {
    transform: translate(77.245vw, 100vh) scale(0.6994);
  }
}
.snowdot:nth-child(128) {
  opacity: 0.4332;
  transform: translate(49.2022vw, -10px) scale(0.2752);
  animation: fall-128 13s -14s linear infinite;
}
@keyframes fall-128 {
  69.888% {
    transform: translate(43.0476vw, 69.888vh) scale(0.2752);
  }
  to {
    transform: translate(46.1249vw, 100vh) scale(0.2752);
  }
}
.snowdot:nth-child(129) {
  opacity: 0.2043;
  transform: translate(7.0243vw, -10px) scale(0.0912);
  animation: fall-129 18s -17s linear infinite;
}
@keyframes fall-129 {
  77.359% {
    transform: translate(-2.9049vw, 77.359vh) scale(0.0912);
  }
  to {
    transform: translate(2.0597vw, 100vh) scale(0.0912);
  }
}
.snowdot:nth-child(130) {
  opacity: 0.653;
  transform: translate(23.4745vw, -10px) scale(0.988);
  animation: fall-130 11s -13s linear infinite;
}
@keyframes fall-130 {
  47.609% {
    transform: translate(25.7998vw, 47.609vh) scale(0.988);
  }
  to {
    transform: translate(24.63715vw, 100vh) scale(0.988);
  }
}
.snowdot:nth-child(131) {
  opacity: 0.0762;
  transform: translate(21.304vw, -10px) scale(0.0824);
  animation: fall-131 17s -27s linear infinite;
}
@keyframes fall-131 {
  58.543% {
    transform: translate(16.637vw, 58.543vh) scale(0.0824);
  }
  to {
    transform: translate(18.9705vw, 100vh) scale(0.0824);
  }
}
.snowdot:nth-child(132) {
  opacity: 0.7751;
  transform: translate(35.8084vw, -10px) scale(0.6474);
  animation: fall-132 30s -3s linear infinite;
}
@keyframes fall-132 {
  37.66% {
    transform: translate(39.2264vw, 37.66vh) scale(0.6474);
  }
  to {
    transform: translate(37.5174vw, 100vh) scale(0.6474);
  }
}
.snowdot:nth-child(133) {
  opacity: 0.0111;
  transform: translate(28.2485vw, -10px) scale(0.9542);
  animation: fall-133 24s -14s linear infinite;
}
@keyframes fall-133 {
  30.923% {
    transform: translate(28.8265vw, 30.923vh) scale(0.9542);
  }
  to {
    transform: translate(28.5375vw, 100vh) scale(0.9542);
  }
}
.snowdot:nth-child(134) {
  opacity: 0.707;
  transform: translate(36.1078vw, -10px) scale(0.3576);
  animation: fall-134 26s -15s linear infinite;
}
@keyframes fall-134 {
  45.549% {
    transform: translate(41.5398vw, 45.549vh) scale(0.3576);
  }
  to {
    transform: translate(38.8238vw, 100vh) scale(0.3576);
  }
}
.snowdot:nth-child(135) {
  opacity: 0.8739;
  transform: translate(50.0526vw, -10px) scale(0.7216);
  animation: fall-135 25s -30s linear infinite;
}
@keyframes fall-135 {
  59.566% {
    transform: translate(43.7411vw, 59.566vh) scale(0.7216);
  }
  to {
    transform: translate(46.89685vw, 100vh) scale(0.7216);
  }
}
.snowdot:nth-child(136) {
  opacity: 0.443;
  transform: translate(14.7477vw, -10px) scale(0.9289);
  animation: fall-136 27s -28s linear infinite;
}
@keyframes fall-136 {
  49.077% {
    transform: translate(10.3758vw, 49.077vh) scale(0.9289);
  }
  to {
    transform: translate(12.56175vw, 100vh) scale(0.9289);
  }
}
.snowdot:nth-child(137) {
  opacity: 0.8895;
  transform: translate(42.6784vw, -10px) scale(0.074);
  animation: fall-137 11s -13s linear infinite;
}
@keyframes fall-137 {
  59.466% {
    transform: translate(48.513vw, 59.466vh) scale(0.074);
  }
  to {
    transform: translate(45.5957vw, 100vh) scale(0.074);
  }
}
.snowdot:nth-child(138) {
  opacity: 0.0421;
  transform: translate(48.8353vw, -10px) scale(0.0391);
  animation: fall-138 29s -26s linear infinite;
}
@keyframes fall-138 {
  36.776% {
    transform: translate(58.0751vw, 36.776vh) scale(0.0391);
  }
  to {
    transform: translate(53.4552vw, 100vh) scale(0.0391);
  }
}
.snowdot:nth-child(139) {
  opacity: 0.2185;
  transform: translate(43.4093vw, -10px) scale(0.541);
  animation: fall-139 27s -28s linear infinite;
}
@keyframes fall-139 {
  36.25% {
    transform: translate(37.3286vw, 36.25vh) scale(0.541);
  }
  to {
    transform: translate(40.36895vw, 100vh) scale(0.541);
  }
}
.snowdot:nth-child(140) {
  opacity: 0.7502;
  transform: translate(8.7927vw, -10px) scale(0.5536);
  animation: fall-140 30s -29s linear infinite;
}
@keyframes fall-140 {
  37.544% {
    transform: translate(5.0786vw, 37.544vh) scale(0.5536);
  }
  to {
    transform: translate(6.93565vw, 100vh) scale(0.5536);
  }
}
.snowdot:nth-child(141) {
  opacity: 0.3862;
  transform: translate(33.1975vw, -10px) scale(0.282);
  animation: fall-141 28s -4s linear infinite;
}
@keyframes fall-141 {
  68.358% {
    transform: translate(33.0841vw, 68.358vh) scale(0.282);
  }
  to {
    transform: translate(33.1408vw, 100vh) scale(0.282);
  }
}
.snowdot:nth-child(142) {
  opacity: 0.9299;
  transform: translate(49.0224vw, -10px) scale(0.5774);
  animation: fall-142 18s -24s linear infinite;
}
@keyframes fall-142 {
  71.018% {
    transform: translate(47.3601vw, 71.018vh) scale(0.5774);
  }
  to {
    transform: translate(48.19125vw, 100vh) scale(0.5774);
  }
}
.snowdot:nth-child(143) {
  opacity: 0.1317;
  transform: translate(37.5856vw, -10px) scale(0.4082);
  animation: fall-143 14s -3s linear infinite;
}
@keyframes fall-143 {
  71.641% {
    transform: translate(38.5452vw, 71.641vh) scale(0.4082);
  }
  to {
    transform: translate(38.0654vw, 100vh) scale(0.4082);
  }
}
.snowdot:nth-child(144) {
  opacity: 0.6027;
  transform: translate(62.4546vw, -10px) scale(0.7631);
  animation: fall-144 14s -19s linear infinite;
}
@keyframes fall-144 {
  79.465% {
    transform: translate(62.4553vw, 79.465vh) scale(0.7631);
  }
  to {
    transform: translate(62.45495vw, 100vh) scale(0.7631);
  }
}
.snowdot:nth-child(145) {
  opacity: 0.0412;
  transform: translate(62.7216vw, -10px) scale(0.5121);
  animation: fall-145 24s -14s linear infinite;
}
@keyframes fall-145 {
  34.118% {
    transform: translate(54.8194vw, 34.118vh) scale(0.5121);
  }
  to {
    transform: translate(58.7705vw, 100vh) scale(0.5121);
  }
}
.snowdot:nth-child(146) {
  opacity: 0.9037;
  transform: translate(57.353vw, -10px) scale(0.9859);
  animation: fall-146 15s -22s linear infinite;
}
@keyframes fall-146 {
  33.115% {
    transform: translate(58.8449vw, 33.115vh) scale(0.9859);
  }
  to {
    transform: translate(58.09895vw, 100vh) scale(0.9859);
  }
}
.snowdot:nth-child(147) {
  opacity: 0.5652;
  transform: translate(28.2891vw, -10px) scale(0.1073);
  animation: fall-147 26s -23s linear infinite;
}
@keyframes fall-147 {
  68.727% {
    transform: translate(33.3045vw, 68.727vh) scale(0.1073);
  }
  to {
    transform: translate(30.7968vw, 100vh) scale(0.1073);
  }
}
.snowdot:nth-child(148) {
  opacity: 0.5048;
  transform: translate(7.5785vw, -10px) scale(0.3217);
  animation: fall-148 17s -12s linear infinite;
}
@keyframes fall-148 {
  68.579% {
    transform: translate(13.9222vw, 68.579vh) scale(0.3217);
  }
  to {
    transform: translate(10.75035vw, 100vh) scale(0.3217);
  }
}
.snowdot:nth-child(149) {
  opacity: 0.4061;
  transform: translate(77.9576vw, -10px) scale(0.1266);
  animation: fall-149 15s -19s linear infinite;
}
@keyframes fall-149 {
  49.269% {
    transform: translate(73.9337vw, 49.269vh) scale(0.1266);
  }
  to {
    transform: translate(75.94565vw, 100vh) scale(0.1266);
  }
}
.snowdot:nth-child(150) {
  opacity: 0.1083;
  transform: translate(21.7749vw, -10px) scale(0.822);
  animation: fall-150 13s -29s linear infinite;
}
@keyframes fall-150 {
  31.594% {
    transform: translate(23.7995vw, 31.594vh) scale(0.822);
  }
  to {
    transform: translate(22.7872vw, 100vh) scale(0.822);
  }
}
.snowdot:nth-child(151) {
  opacity: 0.5677;
  transform: translate(82.5511vw, -10px) scale(0.9556);
  animation: fall-151 28s -14s linear infinite;
}
@keyframes fall-151 {
  49.147% {
    transform: translate(75.3703vw, 49.147vh) scale(0.9556);
  }
  to {
    transform: translate(78.9607vw, 100vh) scale(0.9556);
  }
}
.snowdot:nth-child(152) {
  opacity: 0.8578;
  transform: translate(58.9051vw, -10px) scale(0.7867);
  animation: fall-152 22s -16s linear infinite;
}
@keyframes fall-152 {
  37.962% {
    transform: translate(62.0854vw, 37.962vh) scale(0.7867);
  }
  to {
    transform: translate(60.49525vw, 100vh) scale(0.7867);
  }
}
.snowdot:nth-child(153) {
  opacity: 0.1859;
  transform: translate(28.4534vw, -10px) scale(0.4011);
  animation: fall-153 22s -26s linear infinite;
}
@keyframes fall-153 {
  49.435% {
    transform: translate(23.5031vw, 49.435vh) scale(0.4011);
  }
  to {
    transform: translate(25.97825vw, 100vh) scale(0.4011);
  }
}
.snowdot:nth-child(154) {
  opacity: 0.7264;
  transform: translate(10.1362vw, -10px) scale(0.8844);
  animation: fall-154 14s -20s linear infinite;
}
@keyframes fall-154 {
  48.287% {
    transform: translate(2.314vw, 48.287vh) scale(0.8844);
  }
  to {
    transform: translate(6.2251vw, 100vh) scale(0.8844);
  }
}
.snowdot:nth-child(155) {
  opacity: 0.2265;
  transform: translate(26.0983vw, -10px) scale(0.1735);
  animation: fall-155 11s -13s linear infinite;
}
@keyframes fall-155 {
  77.253% {
    transform: translate(23.4196vw, 77.253vh) scale(0.1735);
  }
  to {
    transform: translate(24.75895vw, 100vh) scale(0.1735);
  }
}
.snowdot:nth-child(156) {
  opacity: 0.4909;
  transform: translate(71.3102vw, -10px) scale(0.2498);
  animation: fall-156 20s -4s linear infinite;
}
@keyframes fall-156 {
  72.203% {
    transform: translate(78.056vw, 72.203vh) scale(0.2498);
  }
  to {
    transform: translate(74.6831vw, 100vh) scale(0.2498);
  }
}
.snowdot:nth-child(157) {
  opacity: 0.9549;
  transform: translate(65.4243vw, -10px) scale(0.6395);
  animation: fall-157 17s -27s linear infinite;
}
@keyframes fall-157 {
  44.477% {
    transform: translate(64.0654vw, 44.477vh) scale(0.6395);
  }
  to {
    transform: translate(64.74485vw, 100vh) scale(0.6395);
  }
}
.snowdot:nth-child(158) {
  opacity: 0.6713;
  transform: translate(95.5191vw, -10px) scale(0.3045);
  animation: fall-158 24s -28s linear infinite;
}
@keyframes fall-158 {
  75.022% {
    transform: translate(88.4154vw, 75.022vh) scale(0.3045);
  }
  to {
    transform: translate(91.96725vw, 100vh) scale(0.3045);
  }
}
.snowdot:nth-child(159) {
  opacity: 0.4176;
  transform: translate(97.3215vw, -10px) scale(0.5439);
  animation: fall-159 26s -17s linear infinite;
}
@keyframes fall-159 {
  42.334% {
    transform: translate(92.135vw, 42.334vh) scale(0.5439);
  }
  to {
    transform: translate(94.72825vw, 100vh) scale(0.5439);
  }
}
.snowdot:nth-child(160) {
  opacity: 0.549;
  transform: translate(92.4106vw, -10px) scale(0.6128);
  animation: fall-160 26s -18s linear infinite;
}
@keyframes fall-160 {
  69.662% {
    transform: translate(87.1774vw, 69.662vh) scale(0.6128);
  }
  to {
    transform: translate(89.794vw, 100vh) scale(0.6128);
  }
}
.snowdot:nth-child(161) {
  opacity: 0.7208;
  transform: translate(97.0266vw, -10px) scale(0.9506);
  animation: fall-161 29s -17s linear infinite;
}
@keyframes fall-161 {
  68.881% {
    transform: translate(100.3272vw, 68.881vh) scale(0.9506);
  }
  to {
    transform: translate(98.6769vw, 100vh) scale(0.9506);
  }
}
.snowdot:nth-child(162) {
  opacity: 0.5475;
  transform: translate(52.7884vw, -10px) scale(0.2135);
  animation: fall-162 16s -29s linear infinite;
}
@keyframes fall-162 {
  54.408% {
    transform: translate(59.0884vw, 54.408vh) scale(0.2135);
  }
  to {
    transform: translate(55.9384vw, 100vh) scale(0.2135);
  }
}
.snowdot:nth-child(163) {
  opacity: 0.1915;
  transform: translate(32.1631vw, -10px) scale(0.445);
  animation: fall-163 23s -16s linear infinite;
}
@keyframes fall-163 {
  42.577% {
    transform: translate(38.0498vw, 42.577vh) scale(0.445);
  }
  to {
    transform: translate(35.10645vw, 100vh) scale(0.445);
  }
}
.snowdot:nth-child(164) {
  opacity: 0.2863;
  transform: translate(57.0803vw, -10px) scale(0.339);
  animation: fall-164 24s -10s linear infinite;
}
@keyframes fall-164 {
  54.955% {
    transform: translate(58.4002vw, 54.955vh) scale(0.339);
  }
  to {
    transform: translate(57.74025vw, 100vh) scale(0.339);
  }
}
.snowdot:nth-child(165) {
  opacity: 0.2373;
  transform: translate(17.6113vw, -10px) scale(0.0026);
  animation: fall-165 29s -5s linear infinite;
}
@keyframes fall-165 {
  41.187% {
    transform: translate(10.4879vw, 41.187vh) scale(0.0026);
  }
  to {
    transform: translate(14.0496vw, 100vh) scale(0.0026);
  }
}
.snowdot:nth-child(166) {
  opacity: 0.138;
  transform: translate(33.3845vw, -10px) scale(0.0467);
  animation: fall-166 17s -7s linear infinite;
}
@keyframes fall-166 {
  40.173% {
    transform: translate(34.1638vw, 40.173vh) scale(0.0467);
  }
  to {
    transform: translate(33.77415vw, 100vh) scale(0.0467);
  }
}
.snowdot:nth-child(167) {
  opacity: 0.6187;
  transform: translate(74.1974vw, -10px) scale(0.2062);
  animation: fall-167 29s -2s linear infinite;
}
@keyframes fall-167 {
  58.359% {
    transform: translate(73.6478vw, 58.359vh) scale(0.2062);
  }
  to {
    transform: translate(73.9226vw, 100vh) scale(0.2062);
  }
}
.snowdot:nth-child(168) {
  opacity: 0.0763;
  transform: translate(38.7521vw, -10px) scale(0.6782);
  animation: fall-168 19s -11s linear infinite;
}
@keyframes fall-168 {
  48.917% {
    transform: translate(46.3329vw, 48.917vh) scale(0.6782);
  }
  to {
    transform: translate(42.5425vw, 100vh) scale(0.6782);
  }
}
.snowdot:nth-child(169) {
  opacity: 0.5374;
  transform: translate(87.3537vw, -10px) scale(0.1298);
  animation: fall-169 21s -11s linear infinite;
}
@keyframes fall-169 {
  44.487% {
    transform: translate(82.2124vw, 44.487vh) scale(0.1298);
  }
  to {
    transform: translate(84.78305vw, 100vh) scale(0.1298);
  }
}
.snowdot:nth-child(170) {
  opacity: 0.9761;
  transform: translate(26.5382vw, -10px) scale(0.6716);
  animation: fall-170 20s -17s linear infinite;
}
@keyframes fall-170 {
  35.879% {
    transform: translate(18.2798vw, 35.879vh) scale(0.6716);
  }
  to {
    transform: translate(22.409vw, 100vh) scale(0.6716);
  }
}
.snowdot:nth-child(171) {
  opacity: 0.4313;
  transform: translate(33.9246vw, -10px) scale(0.8143);
  animation: fall-171 18s -17s linear infinite;
}
@keyframes fall-171 {
  46.997% {
    transform: translate(31.8765vw, 46.997vh) scale(0.8143);
  }
  to {
    transform: translate(32.90055vw, 100vh) scale(0.8143);
  }
}
.snowdot:nth-child(172) {
  opacity: 0.3438;
  transform: translate(54.6927vw, -10px) scale(0.3289);
  animation: fall-172 22s -18s linear infinite;
}
@keyframes fall-172 {
  64.805% {
    transform: translate(58.1468vw, 64.805vh) scale(0.3289);
  }
  to {
    transform: translate(56.41975vw, 100vh) scale(0.3289);
  }
}
.snowdot:nth-child(173) {
  opacity: 0.7846;
  transform: translate(37.2687vw, -10px) scale(0.3106);
  animation: fall-173 15s -9s linear infinite;
}
@keyframes fall-173 {
  43.035% {
    transform: translate(38.8743vw, 43.035vh) scale(0.3106);
  }
  to {
    transform: translate(38.0715vw, 100vh) scale(0.3106);
  }
}
.snowdot:nth-child(174) {
  opacity: 0.2062;
  transform: translate(7.7049vw, -10px) scale(0.95);
  animation: fall-174 10s -4s linear infinite;
}
@keyframes fall-174 {
  67.279% {
    transform: translate(5.9776vw, 67.279vh) scale(0.95);
  }
  to {
    transform: translate(6.84125vw, 100vh) scale(0.95);
  }
}
.snowdot:nth-child(175) {
  opacity: 0.8115;
  transform: translate(9.936vw, -10px) scale(0.903);
  animation: fall-175 24s -25s linear infinite;
}
@keyframes fall-175 {
  58.279% {
    transform: translate(16.5448vw, 58.279vh) scale(0.903);
  }
  to {
    transform: translate(13.2404vw, 100vh) scale(0.903);
  }
}
.snowdot:nth-child(176) {
  opacity: 0.3775;
  transform: translate(39.2358vw, -10px) scale(0.3205);
  animation: fall-176 20s -14s linear infinite;
}
@keyframes fall-176 {
  70.607% {
    transform: translate(32.0294vw, 70.607vh) scale(0.3205);
  }
  to {
    transform: translate(35.6326vw, 100vh) scale(0.3205);
  }
}
.snowdot:nth-child(177) {
  opacity: 0.3556;
  transform: translate(98.9037vw, -10px) scale(0.0364);
  animation: fall-177 27s -14s linear infinite;
}
@keyframes fall-177 {
  32.054% {
    transform: translate(103.9562vw, 32.054vh) scale(0.0364);
  }
  to {
    transform: translate(101.42995vw, 100vh) scale(0.0364);
  }
}
.snowdot:nth-child(178) {
  opacity: 0.6072;
  transform: translate(70.4337vw, -10px) scale(0.7809);
  animation: fall-178 13s -16s linear infinite;
}
@keyframes fall-178 {
  33.249% {
    transform: translate(73.6394vw, 33.249vh) scale(0.7809);
  }
  to {
    transform: translate(72.03655vw, 100vh) scale(0.7809);
  }
}
.snowdot:nth-child(179) {
  opacity: 0.6831;
  transform: translate(25.3529vw, -10px) scale(0.2155);
  animation: fall-179 19s -3s linear infinite;
}
@keyframes fall-179 {
  61.704% {
    transform: translate(30.1704vw, 61.704vh) scale(0.2155);
  }
  to {
    transform: translate(27.76165vw, 100vh) scale(0.2155);
  }
}
.snowdot:nth-child(180) {
  opacity: 0.1521;
  transform: translate(84.3817vw, -10px) scale(0.7897);
  animation: fall-180 12s -22s linear infinite;
}
@keyframes fall-180 {
  43.612% {
    transform: translate(89.9586vw, 43.612vh) scale(0.7897);
  }
  to {
    transform: translate(87.17015vw, 100vh) scale(0.7897);
  }
}
.snowdot:nth-child(181) {
  opacity: 0.357;
  transform: translate(29.0409vw, -10px) scale(0.5523);
  animation: fall-181 13s -27s linear infinite;
}
@keyframes fall-181 {
  64.391% {
    transform: translate(23.6891vw, 64.391vh) scale(0.5523);
  }
  to {
    transform: translate(26.365vw, 100vh) scale(0.5523);
  }
}
.snowdot:nth-child(182) {
  opacity: 0.866;
  transform: translate(74.207vw, -10px) scale(0.762);
  animation: fall-182 13s -21s linear infinite;
}
@keyframes fall-182 {
  35.186% {
    transform: translate(79.147vw, 35.186vh) scale(0.762);
  }
  to {
    transform: translate(76.677vw, 100vh) scale(0.762);
  }
}
.snowdot:nth-child(183) {
  opacity: 0.1948;
  transform: translate(39.2323vw, -10px) scale(0.6272);
  animation: fall-183 24s -17s linear infinite;
}
@keyframes fall-183 {
  66.028% {
    transform: translate(42.0527vw, 66.028vh) scale(0.6272);
  }
  to {
    transform: translate(40.6425vw, 100vh) scale(0.6272);
  }
}
.snowdot:nth-child(184) {
  opacity: 0.6447;
  transform: translate(50.2824vw, -10px) scale(0.7949);
  animation: fall-184 20s -9s linear infinite;
}
@keyframes fall-184 {
  31.489% {
    transform: translate(48.9266vw, 31.489vh) scale(0.7949);
  }
  to {
    transform: translate(49.6045vw, 100vh) scale(0.7949);
  }
}
.snowdot:nth-child(185) {
  opacity: 0.3272;
  transform: translate(94.1651vw, -10px) scale(0.6664);
  animation: fall-185 30s -8s linear infinite;
}
@keyframes fall-185 {
  49.016% {
    transform: translate(92.2088vw, 49.016vh) scale(0.6664);
  }
  to {
    transform: translate(93.18695vw, 100vh) scale(0.6664);
  }
}
.snowdot:nth-child(186) {
  opacity: 0.3445;
  transform: translate(37.4138vw, -10px) scale(0.4171);
  animation: fall-186 15s -24s linear infinite;
}
@keyframes fall-186 {
  52.472% {
    transform: translate(34.0836vw, 52.472vh) scale(0.4171);
  }
  to {
    transform: translate(35.7487vw, 100vh) scale(0.4171);
  }
}
.snowdot:nth-child(187) {
  opacity: 0.6438;
  transform: translate(11.3699vw, -10px) scale(0.8383);
  animation: fall-187 26s -27s linear infinite;
}
@keyframes fall-187 {
  79.431% {
    transform: translate(13.7753vw, 79.431vh) scale(0.8383);
  }
  to {
    transform: translate(12.5726vw, 100vh) scale(0.8383);
  }
}
.snowdot:nth-child(188) {
  opacity: 0.9835;
  transform: translate(25.1713vw, -10px) scale(0.4286);
  animation: fall-188 29s -1s linear infinite;
}
@keyframes fall-188 {
  31.489% {
    transform: translate(26.0184vw, 31.489vh) scale(0.4286);
  }
  to {
    transform: translate(25.59485vw, 100vh) scale(0.4286);
  }
}
.snowdot:nth-child(189) {
  opacity: 0.7081;
  transform: translate(59.8883vw, -10px) scale(0.1939);
  animation: fall-189 16s -15s linear infinite;
}
@keyframes fall-189 {
  66.621% {
    transform: translate(54.3938vw, 66.621vh) scale(0.1939);
  }
  to {
    transform: translate(57.14105vw, 100vh) scale(0.1939);
  }
}
.snowdot:nth-child(190) {
  opacity: 0.9142;
  transform: translate(51.1011vw, -10px) scale(0.85);
  animation: fall-190 27s -6s linear infinite;
}
@keyframes fall-190 {
  69.634% {
    transform: translate(57.4487vw, 69.634vh) scale(0.85);
  }
  to {
    transform: translate(54.2749vw, 100vh) scale(0.85);
  }
}
.snowdot:nth-child(191) {
  opacity: 0.6545;
  transform: translate(94.8413vw, -10px) scale(0.068);
  animation: fall-191 21s -1s linear infinite;
}
@keyframes fall-191 {
  70.404% {
    transform: translate(103.4705vw, 70.404vh) scale(0.068);
  }
  to {
    transform: translate(99.1559vw, 100vh) scale(0.068);
  }
}
.snowdot:nth-child(192) {
  opacity: 0.3814;
  transform: translate(54.5538vw, -10px) scale(0.2282);
  animation: fall-192 10s -27s linear infinite;
}
@keyframes fall-192 {
  59.996% {
    transform: translate(53.6683vw, 59.996vh) scale(0.2282);
  }
  to {
    transform: translate(54.11105vw, 100vh) scale(0.2282);
  }
}
.snowdot:nth-child(193) {
  opacity: 0.2672;
  transform: translate(96.3814vw, -10px) scale(0.8448);
  animation: fall-193 19s -4s linear infinite;
}
@keyframes fall-193 {
  51.643% {
    transform: translate(88.4065vw, 51.643vh) scale(0.8448);
  }
  to {
    transform: translate(92.39395vw, 100vh) scale(0.8448);
  }
}
.snowdot:nth-child(194) {
  opacity: 0.8208;
  transform: translate(19.8884vw, -10px) scale(0.7156);
  animation: fall-194 27s -26s linear infinite;
}
@keyframes fall-194 {
  53.202% {
    transform: translate(20.5137vw, 53.202vh) scale(0.7156);
  }
  to {
    transform: translate(20.20105vw, 100vh) scale(0.7156);
  }
}
.snowdot:nth-child(195) {
  opacity: 0.0345;
  transform: translate(17.1508vw, -10px) scale(0.1011);
  animation: fall-195 15s -18s linear infinite;
}
@keyframes fall-195 {
  46.492% {
    transform: translate(11.4173vw, 46.492vh) scale(0.1011);
  }
  to {
    transform: translate(14.28405vw, 100vh) scale(0.1011);
  }
}