Weather (markov chain).html

<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Weather (markov chain)</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
    <style>
    html,
    body,
    .container {
        height: 100%;
        width: 100%;
        background-color: black;
    }

    .container {
        max-width: 500px;
        margin: auto;
        display: flex;
        flex-direction: column;
    }

    .weather-info {
        display: grid;
        position: relative;
        grid-template-columns: repeat(5, 1fr);
        background-color: #182652;
        height: 50px;
    }

    .weather-info__icon {
        display: flex;
        justify-content: center;
        align-items: center;
        color: white;
        opacity: 0.2;
        transition: opacity 0.5s;
        cursor: pointer;
    }

    .weather-info__icon:hover {
        opacity: 0.4;
    }

    .weather-info__icon--active {
        opacity: 1;
    }

    .visualisation-container {
        height: 100%;
        position: relative;
    }

    .visualisation-container>div {
        width: 100%;
        height: 100%;
        opacity: 0;
        transition: all 3s;
        position: absolute;
        overflow: hidden;
    }

    [data-weather="sunny"] .visualisation-container--sunny {
        background: #2eb5e5;
        opacity: 1;
    }

    [data-weather="rainy"] .visualisation-container--rainy {
        background: #222222;
        opacity: 1;
    }

    [data-weather="cloudy"] .visualisation-container--cloudy {
        background: #2eb5e5;
        opacity: 1;
    }

    [data-weather="fog"] .visualisation-container--fog {
        background: #111;
        opacity: 1;
    }

    [data-weather="snow"] .visualisation-container--snow {
        background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
        opacity: 1;
    }

    .rain {
        background: white;
        background: linear-gradient(to top, rgba(222, 205, 205, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 100%);
        height: 50px;
        position: absolute;
        width: 1px;
    }

    .rain:nth-of-type(1) {
        -webkit-animation-name: rain-1;
        animation-name: rain-1;
        -webkit-animation-delay: 11s;
        animation-delay: 11s;
        -webkit-animation-duration: 9s;
        animation-duration: 9s;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
        left: 37%;
        opacity: 0.55;
        top: -65%;
    }

    @-webkit-keyframes rain-1 {
        0% {
            left: 37%;
            opacity: 0.55;
            top: -65%;
        }

        100% {
            opacity: 0;
            top: 105%;
        }
    }

    @keyframes rain-1 {
        0% {
            left: 37%;
            opacity: 0.55;
            top: -65%;
        }

        100% {
            opacity: 0;
            top: 105%;
        }
    }

    .rain:nth-of-type(2) {
        -webkit-animation-name: rain-2;
        animation-name: rain-2;
        -webkit-animation-delay: 3s;
        animation-delay: 3s;
        -webkit-animation-duration: 5s;
        animation-duration: 5s;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
        left: 39%;
        opacity: 0.53;
        top: -57%;
    }

    @-webkit-keyframes rain-2 {
        0% {
            left: 39%;
            opacity: 0.53;
            top: -57%;
        }

        100% {
            opacity: 0;
            top: 97%;
        }
    }

    @keyframes rain-2 {
        0% {
            left: 39%;
            opacity: 0.53;
            top: -57%;
        }

        100% {
            opacity: 0;
            top: 97%;
        }
    }

    .rain:nth-of-type(3) {
        -webkit-animation-name: rain-3;
        animation-name: rain-3;
        -webkit-animation-delay: 2s;
        animation-delay: 2s;
        -webkit-animation-duration: 9s;
        animation-duration: 9s;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
        left: 28%;
        opacity: 0.39;
        top: -56%;
    }

    @-webkit-keyframes rain-3 {
        0% {
            left: 28%;
            opacity: 0.39;
            top: -56%;
        }

        100% {
            opacity: 0;
            top: 96%;
        }
    }

    @keyframes rain-3 {
        0% {
            left: 28%;
            opacity: 0.39;
            top: -56%;
        }

        100% {
            opacity: 0;
            top: 96%;
        }
    }

    .rain:nth-of-type(4) {
        -webkit-animation-name: rain-4;
        animation-name: rain-4;
        -webkit-animation-delay: 17s;
        animation-delay: 17s;
        -webkit-animation-duration: 9s;
        animation-duration: 9s;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
        left: 83%;
        opacity: 0.42;
        top: -61%;
    }

    @-webkit-keyframes rain-4 {
        0% {
            left: 83%;
            opacity: 0.42;
            top: -61%;
        }

        100% {
            opacity: 0;
            top: 101%;
        }
    }

    @keyframes rain-4 {
        0% {
            left: 83%;
            opacity: 0.42;
            top: -61%;
        }

        100% {
            opacity: 0;
            top: 101%;
        }
    }

    .rain:nth-of-type(5) {
        -webkit-animation-name: rain-5;
        animation-name: rain-5;
        -webkit-animation-delay: 10s;
        animation-delay: 10s;
        -webkit-animation-duration: 5s;
        animation-duration: 5s;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
        left: 70%;
        opacity: 0.37;
        top: -90%;
    }

    @-webkit-keyframes rain-5 {
        0% {
            left: 70%;
            opacity: 0.37;
            top: -90%;
        }

        100% {
            opacity: 0;
            top: 130%;
        }
    }

    @keyframes rain-5 {
        0% {
            left: 70%;
            opacity: 0.37;
            top: -90%;
        }

        100% {
            opacity: 0;
            top: 130%;
        }
    }

    .rain:nth-of-type(6) {
        -webkit-animation-name: rain-6;
        animation-name: rain-6;
        -webkit-animation-delay: 17s;
        animation-delay: 17s;
        -webkit-animation-duration: 6s;
        animation-duration: 6s;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
        left: 63%;
        opacity: 0.38;
        top: -98%;
    }

    @-webkit-keyframes rain-6 {
        0% {
            left: 63%;
            opacity: 0.38;
            top: -98%;
        }

        100% {
            opacity: 0;
            top: 138%;
        }
    }

    @keyframes rain-6 {
        0% {
            left: 63%;
            opacity: 0.38;
            top: -98%;
        }

        100% {
            opacity: 0;
            top: 138%;
        }
    }

    .rain:nth-of-type(7) {
        -webkit-animation-name: rain-7;
        animation-name: rain-7;
        -webkit-animation-delay: 5s;
        animation-delay: 5s;
        -webkit-animation-duration: 9s;
        animation-duration: 9s;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
        left: 89%;
        opacity: 0.44;
        top: -70%;
    }

    @-webkit-keyframes rain-7 {
        0% {
            left: 89%;
            opacity: 0.44;
            top: -70%;
        }

        100% {
            opacity: 0;
            top: 110%;
        }
    }

    @keyframes rain-7 {
        0% {
            left: 89%;
            opacity: 0.44;
            top: -70%;
        }

        100% {
            opacity: 0;
            top: 110%;
        }
    }

    .rain:nth-of-type(8) {
        -webkit-animation-name: rain-8;
        animation-name: rain-8;
        -webkit-animation-delay: 13s;
        animation-delay: 13s;
        -webkit-animation-duration: 6s;
        animation-duration: 6s;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
        left: 88%;
        opacity: 0.46;
        top: -58%;
    }

    @-webkit-keyframes rain-8 {
        0% {
            left: 88%;
            opacity: 0.46;
            top: -58%;
        }

        100% {
            opacity: 0;
            top: 98%;
        }
    }

    @keyframes rain-8 {
        0% {
            left: 88%;
            opacity: 0.46;
            top: -58%;
        }

        100% {
            opacity: 0;
            top: 98%;
        }
    }

    .rain:nth-of-type(9) {
        -webkit-animation-name: rain-9;
        animation-name: rain-9;
        -webkit-animation-delay: 6s;
        animation-delay: 6s;
        -webkit-animation-duration: 9s;
        animation-duration: 9s;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
        left: 89%;
        opacity: 0.45;
        top: -92%;
    }

    @-webkit-keyframes rain-9 {
        0% {
            left: 89%;
            opacity: 0.45;
            top: -92%;
        }

        100% {
            opacity: 0;
            top: 132%;
        }
    }

    @keyframes rain-9 {
        0% {
            left: 89%;
            opacity: 0.45;
            top: -92%;
        }

        100% {
            opacity: 0;
            top: 132%;
        }
    }

    .rain:nth-of-type(10) {
        -webkit-animation-name: rain-10;
        animation-name: rain-10;
        -webkit-animation-delay: 15s;
        animation-delay: 15s;
        -webkit-animation-duration: 10s;
        animation-duration: 10s;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
        left: 9%;
        opacity: 0.48;
        top: -88%;
    }

    @-webkit-keyframes rain-10 {
        0% {
            left: 9%;
            opacity: 0.48;
            top: -88%;
        }

        100% {
            opacity: 0;
            top: 128%;
        }
    }

    @keyframes rain-10 {
        0% {
            left: 9%;
            opacity: 0.48;
            top: -88%;
        }

        100% {
            opacity: 0;
            top: 128%;
        }
    }

    .rain:nth-of-type(11) {
        -webkit-animation-name: rain-11;
        animation-name: rain-11;
        -webkit-animation-delay: 11s;
        animation-delay: 11s;
        -webkit-animation-duration: 9s;
        animation-duration: 9s;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
        left: 58%;
        opacity: 0.47;
        top: -90%;
    }

    @-webkit-keyframes rain-11 {
        0% {
            left: 58%;
            opacity: 0.47;
            top: -90%;
        }

        100% {
            opacity: 0;
            top: 130%;
        }
    }

    @keyframes rain-11 {
        0% {
            left: 58%;
            opacity: 0.47;
            top: -90%;
        }

        100% {
            opacity: 0;
            top: 130%;
        }
    }

    .rain:nth-of-type(12) {
        -webkit-animation-name: rain-12;
        animation-name: rain-12;
        -webkit-animation-delay: 8s;
        animation-delay: 8s;
        -webkit-animation-duration: 10s;
        animation-duration: 10s;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
        left: 36%;
        opacity: 0.36;
        top: -91%;
    }

    @-webkit-keyframes rain-12 {
        0% {
            left: 36%;
            opacity: 0.36;
            top: -91%;
        }

        100% {
            opacity: 0;
            top: 131%;
        }
    }

    @keyframes rain-12 {
        0% {
            left: 36%;
            opacity: 0.36;
            top: -91%;
        }

        100% {
            opacity: 0;
            top: 131%;
        }
    }

    .rain:nth-of-type(13) {
        -webkit-animation-name: rain-13;
        animation-name: rain-13;
        -webkit-animation-delay: 4s;
        animation-delay: 4s;
        -webkit-animation-duration: 8s;
        animation-duration: 8s;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
        left: 65%;
        opacity: 0.4;
        top: -100%;
    }

    @-webkit-keyframes rain-13 {
        0% {
            left: 65%;
            opacity: 0.4;
            top: -100%;
        }

        100% {
            opacity: 0;
            top: 140%;
        }
    }

    @keyframes rain-13 {
        0% {
            left: 65%;
            opacity: 0.4;
            top: -100%;
        }

        100% {
            opacity: 0;
            top: 140%;
        }
    }

    .rain:nth-of-type(14) {
        -webkit-animation-name: rain-14;
        animation-name: rain-14;
        -webkit-animation-delay: 3s;
        animation-delay: 3s;
        -webkit-animation-duration: 9s;
        animation-duration: 9s;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
        left: 41%;
        opacity: 0.44;
        top: -69%;
    }

    @-webkit-keyframes rain-14 {
        0% {
            left: 41%;
            opacity: 0.44;
            top: -69%;
        }

        100% {
            opacity: 0;
            top: 109%;
        }
    }

    @keyframes rain-14 {
        0% {
            left: 41%;
            opacity: 0.44;
            top: -69%;
        }

        100% {
            opacity: 0;
            top: 109%;
        }
    }

    .rain:nth-of-type(15) {
        -webkit-animation-name: rain-15;
        animation-name: rain-15;
        -webkit-animation-delay: 16s;
        animation-delay: 16s;
        -webkit-animation-duration: 10s;
        animation-duration: 10s;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
        left: 90%;
        opacity: 0.35;
        top: -65%;
    }

    @-webkit-keyframes rain-15 {
        0% {
            left: 90%;
            opacity: 0.35;
            top: -65%;
        }

        100% {
            opacity: 0;
            top: 105%;
        }
    }

    @keyframes rain-15 {
        0% {
            left: 90%;
            opacity: 0.35;
            top: -65%;
        }

        100% {
            opacity: 0;
            top: 105%;
        }
    }

    .rain:nth-of-type(16) {
        -webkit-animation-name: rain-16;
        animation-name: rain-16;
        -webkit-animation-delay: 0s;
        animation-delay: 0s;
        -webkit-animation-duration: 6s;
        animation-duration: 6s;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
        left: 83%;
        opacity: 0.32;
        top: -78%;
    }

    @-webkit-keyframes rain-16 {
        0% {
            left: 83%;
            opacity: 0.32;
            top: -78%;
        }

        100% {
            opacity: 0;
            top: 118%;
        }
    }

    @keyframes rain-16 {
        0% {
            left: 83%;
            opacity: 0.32;
            top: -78%;
        }

        100% {
            opacity: 0;
            top: 118%;
        }
    }

    .rain:nth-of-type(17) {
        -webkit-animation-name: rain-17;
        animation-name: rain-17;
        -webkit-animation-delay: 17s;
        animation-delay: 17s;
        -webkit-animation-duration: 9s;
        animation-duration: 9s;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
        left: 38%;
        opacity: 0.51;
        top: -78%;
    }

    @-webkit-keyframes rain-17 {
        0% {
            left: 38%;
            opacity: 0.51;
            top: -78%;
        }

        100% {
            opacity: 0;
            top: 118%;
        }
    }

    @keyframes rain-17 {
        0% {
            left: 38%;
            opacity: 0.51;
            top: -78%;
        }

        100% {
            opacity: 0;
            top: 118%;
        }
    }

    .rain:nth-of-type(18) {
        -webkit-animation-name: rain-18;
        animation-name: rain-18;
        -webkit-animation-delay: 11s;
        animation-delay: 11s;
        -webkit-animation-duration: 9s;
        animation-duration: 9s;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
        left: 99%;
        opacity: 0.39;
        top: -86%;
    }

    @-webkit-keyframes rain-18 {
        0% {
            left: 99%;
            opacity: 0.39;
            top: -86%;
        }

        100% {
            opacity: 0;
            top: 126%;
        }
    }

    @keyframes rain-18 {
        0% {
            left: 99%;
            opacity: 0.39;
            top: -86%;
        }

        100% {
            opacity: 0;
            top: 126%;
        }
    }

    .rain:nth-of-type(19) {
        -webkit-animation-name: rain-19;
        animation-name: rain-19;
        -webkit-animation-delay: 11s;
        animation-delay: 11s;
        -webkit-animation-duration: 7s;
        animation-duration: 7s;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
        left: 37%;
        opacity: 0.51;
        top: -71%;
    }

    @-webkit-keyframes rain-19 {
        0% {
            left: 37%;
            opacity: 0.51;
            top: -71%;
        }

        100% {
            opacity: 0;
            top: 111%;
        }
    }

    @keyframes rain-19 {
        0% {
            left: 37%;
            opacity: 0.51;
            top: -71%;
        }

        100% {
            opacity: 0;
            top: 111%;
        }
    }

    .rain:nth-of-type(20) {
        -webkit-animation-name: rain-20;
        animation-name: rain-20;
        -webkit-animation-delay: 6s;
        animation-delay: 6s;
        -webkit-animation-duration: 10s;
        animation-duration: 10s;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
        left: 77%;
        opacity: 0.38;
        top: -92%;
    }

    @-webkit-keyframes rain-20 {
        0% {
            left: 77%;
            opacity: 0.38;
            top: -92%;
        }

        100% {
            opacity: 0;
            top: 132%;
        }
    }

    @keyframes rain-20 {
        0% {
            left: 77%;
            opacity: 0.38;
            top: -92%;
        }

        100% {
            opacity: 0;
            top: 132%;
        }
    }

    .rain:nth-of-type(21) {
        -webkit-animation-name: rain-21;
        animation-name: rain-21;
        -webkit-animation-delay: 0s;
        animation-delay: 0s;
        -webkit-animation-duration: 5s;
        animation-duration: 5s;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
        left: 94%;
        opacity: 0.43;
        top: -72%;
    }

    @-webkit-keyframes rain-21 {
        0% {
            left: 94%;
            opacity: 0.43;
            top: -72%;
        }

        100% {
            opacity: 0;
            top: 112%;
        }
    }

    @keyframes rain-21 {
        0% {
            left: 94%;
            opacity: 0.43;
            top: -72%;
        }

        100% {
            opacity: 0;
            top: 112%;
        }
    }

    .rain:nth-of-type(22) {
        -webkit-animation-name: rain-22;
        animation-name: rain-22;
        -webkit-animation-delay: 17s;
        animation-delay: 17s;
        -webkit-animation-duration: 10s;
        animation-duration: 10s;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
        left: 49%;
        opacity: 0.33;
        top: -85%;
    }

    @-webkit-keyframes rain-22 {
        0% {
            left: 49%;
            opacity: 0.33;
            top: -85%;
        }

        100% {
            opacity: 0;
            top: 125%;
        }
    }

    @keyframes rain-22 {
        0% {
            left: 49%;
            opacity: 0.33;
            top: -85%;
        }

        100% {
            opacity: 0;
            top: 125%;
        }
    }

    .rain:nth-of-type(23) {
        -webkit-animation-name: rain-23;
        animation-name: rain-23;
        -webkit-animation-delay: 16s;
        animation-delay: 16s;
        -webkit-animation-duration: 8s;
        animation-duration: 8s;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
        left: 76%;
        opacity: 0.56;
        top: -85%;
    }

    @-webkit-keyframes rain-23 {
        0% {
            left: 76%;
            opacity: 0.56;
            top: -85%;
        }

        100% {
            opacity: 0;
            top: 125%;
        }
    }

    @keyframes rain-23 {
        0% {
            left: 76%;
            opacity: 0.56;
            top: -85%;
        }

        100% {
            opacity: 0;
            top: 125%;
        }
    }

    .rain:nth-of-type(24) {
        -webkit-animation-name: rain-24;
        animation-name: rain-24;
        -webkit-animation-delay: 0s;
        animation-delay: 0s;
        -webkit-animation-duration: 8s;
        animation-duration: 8s;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
        left: 18%;
        opacity: 0.38;
        top: -72%;
    }

    @-webkit-keyframes rain-24 {
        0% {
            left: 18%;
            opacity: 0.38;
            top: -72%;
        }

        100% {
            opacity: 0;
            top: 112%;
        }
    }

    @keyframes rain-24 {
        0% {
            left: 18%;
            opacity: 0.38;
            top: -72%;
        }

        100% {
            opacity: 0;
            top: 112%;
        }
    }

    .rain:nth-of-type(25) {
        -webkit-animation-name: rain-25;
        animation-name: rain-25;
        -webkit-animation-delay: 7s;
        animation-delay: 7s;
        -webkit-animation-duration: 5s;
        animation-duration: 5s;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
        left: 34%;
        opacity: 0.42;
        top: -65%;
    }

    @-webkit-keyframes rain-25 {
        0% {
            left: 34%;
            opacity: 0.42;
            top: -65%;
        }

        100% {
            opacity: 0;
            top: 105%;
        }
    }

    @keyframes rain-25 {
        0% {
            left: 34%;
            opacity: 0.42;
            top: -65%;
        }

        100% {
            opacity: 0;
            top: 105%;
        }
    }

    .rain:nth-of-type(26) {
        -webkit-animation-name: rain-26;
        animation-name: rain-26;
        -webkit-animation-delay: 0s;
        animation-delay: 0s;
        -webkit-animation-duration: 8s;
        animation-duration: 8s;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
        left: 69%;
        opacity: 0.5;
        top: -55%;
    }

    @-webkit-keyframes rain-26 {
        0% {
            left: 69%;
            opacity: 0.5;
            top: -55%;
        }

        100% {
            opacity: 0;
            top: 95%;
        }
    }

    @keyframes rain-26 {
        0% {
            left: 69%;
            opacity: 0.5;
            top: -55%;
        }

        100% {
            opacity: 0;
            top: 95%;
        }
    }

    .rain:nth-of-type(27) {
        -webkit-animation-name: rain-27;
        animation-name: rain-27;
        -webkit-animation-delay: 19s;
        animation-delay: 19s;
        -webkit-animation-duration: 9s;
        animation-duration: 9s;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
        left: 25%;
        opacity: 0.59;
        top: -85%;
    }

    @-webkit-keyframes rain-27 {
        0% {
            left: 25%;
            opacity: 0.59;
            top: -85%;
        }

        100% {
            opacity: 0;
            top: 125%;
        }
    }

    @keyframes rain-27 {
        0% {
            left: 25%;
            opacity: 0.59;
            top: -85%;
        }

        100% {
            opacity: 0;
            top: 125%;
        }
    }

    .rain:nth-of-type(28) {
        -webkit-animation-name: rain-28;
        animation-name: rain-28;
        -webkit-animation-delay: 12s;
        animation-delay: 12s;
        -webkit-animation-duration: 7s;
        animation-duration: 7s;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
        left: 94%;
        opacity: 0.48;
        top: -54%;
    }

    @-webkit-keyframes rain-28 {
        0% {
            left: 94%;
            opacity: 0.48;
            top: -54%;
        }

        100% {
            opacity: 0;
            top: 94%;
        }
    }

    @keyframes rain-28 {
        0% {
            left: 94%;
            opacity: 0.48;
            top: -54%;
        }

        100% {
            opacity: 0;
            top: 94%;
        }
    }

    .rain:nth-of-type(29) {
        -webkit-animation-name: rain-29;
        animation-name: rain-29;
        -webkit-animation-delay: 5s;
        animation-delay: 5s;
        -webkit-animation-duration: 8s;
        animation-duration: 8s;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
        left: 65%;
        opacity: 0.51;
        top: -91%;
    }

    @-webkit-keyframes rain-29 {
        0% {
            left: 65%;
            opacity: 0.51;
            top: -91%;
        }

        100% {
            opacity: 0;
            top: 131%;
        }
    }

    @keyframes rain-29 {
        0% {
            left: 65%;
            opacity: 0.51;
            top: -91%;
        }

        100% {
            opacity: 0;
            top: 131%;
        }
    }

    .rain:nth-of-type(30) {
        -webkit-animation-name: rain-30;
        animation-name: rain-30;
        -webkit-animation-delay: 7s;
        animation-delay: 7s;
        -webkit-animation-duration: 6s;
        animation-duration: 6s;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
        left: 1%;
        opacity: 0.5;
        top: -98%;
    }

    @-webkit-keyframes rain-30 {
        0% {
            left: 1%;
            opacity: 0.5;
            top: -98%;
        }

        100% {
            opacity: 0;
            top: 138%;
        }
    }

    @keyframes rain-30 {
        0% {
            left: 1%;
            opacity: 0.5;
            top: -98%;
        }

        100% {
            opacity: 0;
            top: 138%;
        }
    }

    .rain:nth-of-type(31) {
        -webkit-animation-name: rain-31;
        animation-name: rain-31;
        -webkit-animation-delay: 6s;
        animation-delay: 6s;
        -webkit-animation-duration: 10s;
        animation-duration: 10s;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
        left: 2%;
        opacity: 0.5;
        top: -55%;
    }

    @-webkit-keyframes rain-31 {
        0% {
            left: 2%;
            opacity: 0.5;
            top: -55%;
        }

        100% {
            opacity: 0;
            top: 95%;
        }
    }

    @keyframes rain-31 {
        0% {
            left: 2%;
            opacity: 0.5;
            top: -55%;
        }

        100% {
            opacity: 0;
            top: 95%;
        }
    }

    .rain:nth-of-type(32) {
        -webkit-animation-name: rain-32;
        animation-name: rain-32;
        -webkit-animation-delay: 19s;
        animation-delay: 19s;
        -webkit-animation-duration: 6s;
        animation-duration: 6s;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
        left: 37%;
        opacity: 0.41;
        top: -72%;
    }

    @-webkit-keyframes rain-32 {
        0% {
            left: 37%;
            opacity: 0.41;
            top: -72%;
        }

        100% {
            opacity: 0;
            top: 112%;
        }
    }

    @keyframes rain-32 {
        0% {
            left: 37%;
            opacity: 0.41;
            top: -72%;
        }

        100% {
            opacity: 0;
            top: 112%;
        }
    }

    .rain:nth-of-type(33) {
        -webkit-animation-name: rain-33;
        animation-name: rain-33;
        -webkit-animation-delay: 16s;
        animation-delay: 16s;
        -webkit-animation-duration: 6s;
        animation-duration: 6s;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
        left: 20%;
        opacity: 0.36;
        top: -51%;
    }

    @-webkit-keyframes rain-33 {
        0% {
            left: 20%;
            opacity: 0.36;
            top: -51%;
        }

        100% {
            opacity: 0;
            top: 91%;
        }
    }

    @keyframes rain-33 {
        0% {
            left: 20%;
            opacity: 0.36;
            top: -51%;
        }

        100% {
            opacity: 0;
            top: 91%;
        }
    }

    .rain:nth-of-type(34) {
        -webkit-animation-name: rain-34;
        animation-name: rain-34;
        -webkit-animation-delay: 17s;
        animation-delay: 17s;
        -webkit-animation-duration: 10s;
        animation-duration: 10s;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
        left: 28%;
        opacity: 0.34;
        top: -85%;
    }

    @-webkit-keyframes rain-34 {
        0% {
            left: 28%;
            opacity: 0.34;
            top: -85%;
        }

        100% {
            opacity: 0;
            top: 125%;
        }
    }

    @keyframes rain-34 {
        0% {
            left: 28%;
            opacity: 0.34;
            top: -85%;
        }

        100% {
            opacity: 0;
            top: 125%;
        }
    }

    .rain:nth-of-type(35) {
        -webkit-animation-name: rain-35;
        animation-name: rain-35;
        -webkit-animation-delay: 13s;
        animation-delay: 13s;
        -webkit-animation-duration: 5s;
        animation-duration: 5s;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
        left: 35%;
        opacity: 0.6;
        top: -100%;
    }

    @-webkit-keyframes rain-35 {
        0% {
            left: 35%;
            opacity: 0.6;
            top: -100%;
        }

        100% {
            opacity: 0;
            top: 140%;
        }
    }

    @keyframes rain-35 {
        0% {
            left: 35%;
            opacity: 0.6;
            top: -100%;
        }

        100% {
            opacity: 0;
            top: 140%;
        }
    }

    .rain:nth-of-type(36) {
        -webkit-animation-name: rain-36;
        animation-name: rain-36;
        -webkit-animation-delay: 17s;
        animation-delay: 17s;
        -webkit-animation-duration: 5s;
        animation-duration: 5s;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
        left: 82%;
        opacity: 0.49;
        top: -99%;
    }

    @-webkit-keyframes rain-36 {
        0% {
            left: 82%;
            opacity: 0.49;
            top: -99%;
        }

        100% {
            opacity: 0;
            top: 139%;
        }
    }

    @keyframes rain-36 {
        0% {
            left: 82%;
            opacity: 0.49;
            top: -99%;
        }

        100% {
            opacity: 0;
            top: 139%;
        }
    }

    .rain:nth-of-type(37) {
        -webkit-animation-name: rain-37;
        animation-name: rain-37;
        -webkit-animation-delay: 7s;
        animation-delay: 7s;
        -webkit-animation-duration: 5s;
        animation-duration: 5s;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
        left: 87%;
        opacity: 0.39;
        top: -63%;
    }

    @-webkit-keyframes rain-37 {
        0% {
            left: 87%;
            opacity: 0.39;
            top: -63%;
        }

        100% {
            opacity: 0;
            top: 103%;
        }
    }

    @keyframes rain-37 {
        0% {
            left: 87%;
            opacity: 0.39;
            top: -63%;
        }

        100% {
            opacity: 0;
            top: 103%;
        }
    }

    .rain:nth-of-type(38) {
        -webkit-animation-name: rain-38;
        animation-name: rain-38;
        -webkit-animation-delay: 19s;
        animation-delay: 19s;
        -webkit-animation-duration: 5s;
        animation-duration: 5s;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
        left: 45%;
        opacity: 0.5;
        top: -58%;
    }

    @-webkit-keyframes rain-38 {
        0% {
            left: 45%;
            opacity: 0.5;
            top: -58%;
        }

        100% {
            opacity: 0;
            top: 98%;
        }
    }

    @keyframes rain-38 {
        0% {
            left: 45%;
            opacity: 0.5;
            top: -58%;
        }

        100% {
            opacity: 0;
            top: 98%;
        }
    }

    .rain:nth-of-type(39) {
        -webkit-animation-name: rain-39;
        animation-name: rain-39;
        -webkit-animation-delay: 14s;
        animation-delay: 14s;
        -webkit-animation-duration: 8s;
        animation-duration: 8s;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
        left: 14%;
        opacity: 0.55;
        top: -55%;
    }

    @-webkit-keyframes rain-39 {
        0% {
            left: 14%;
            opacity: 0.55;
            top: -55%;
        }

        100% {
            opacity: 0;
            top: 95%;
        }
    }

    @keyframes rain-39 {
        0% {
            left: 14%;
            opacity: 0.55;
            top: -55%;
        }

        100% {
            opacity: 0;
            top: 95%;
        }
    }

    .rain:nth-of-type(40) {
        -webkit-animation-name: rain-40;
        animation-name: rain-40;
        -webkit-animation-delay: 12s;
        animation-delay: 12s;
        -webkit-animation-duration: 8s;
        animation-duration: 8s;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
        left: 31%;
        opacity: 0.5;
        top: -60%;
    }

    @-webkit-keyframes rain-40 {
        0% {
            left: 31%;
            opacity: 0.5;
            top: -60%;
        }

        100% {
            opacity: 0;
            top: 100%;
        }
    }

    @keyframes rain-40 {
        0% {
            left: 31%;
            opacity: 0.5;
            top: -60%;
        }

        100% {
            opacity: 0;
            top: 100%;
        }
    }

    .rain:nth-of-type(41) {
        -webkit-animation-name: rain-41;
        animation-name: rain-41;
        -webkit-animation-delay: 19s;
        animation-delay: 19s;
        -webkit-animation-duration: 5s;
        animation-duration: 5s;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
        left: 67%;
        opacity: 0.57;
        top: -62%;
    }

    @-webkit-keyframes rain-41 {
        0% {
            left: 67%;
            opacity: 0.57;
            top: -62%;
        }

        100% {
            opacity: 0;
            top: 102%;
        }
    }

    @keyframes rain-41 {
        0% {
            left: 67%;
            opacity: 0.57;
            top: -62%;
        }

        100% {
            opacity: 0;
            top: 102%;
        }
    }

    .rain:nth-of-type(42) {
        -webkit-animation-name: rain-42;
        animation-name: rain-42;
        -webkit-animation-delay: 16s;
        animation-delay: 16s;
        -webkit-animation-duration: 8s;
        animation-duration: 8s;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
        left: 32%;
        opacity: 0.44;
        top: -88%;
    }

    @-webkit-keyframes rain-42 {
        0% {
            left: 32%;
            opacity: 0.44;
            top: -88%;
        }

        100% {
            opacity: 0;
            top: 128%;
        }
    }

    @keyframes rain-42 {
        0% {
            left: 32%;
            opacity: 0.44;
            top: -88%;
        }

        100% {
            opacity: 0;
            top: 128%;
        }
    }

    .rain:nth-of-type(43) {
        -webkit-animation-name: rain-43;
        animation-name: rain-43;
        -webkit-animation-delay: 15s;
        animation-delay: 15s;
        -webkit-animation-duration: 9s;
        animation-duration: 9s;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
        left: 96%;
        opacity: 0.49;
        top: -70%;
    }

    @-webkit-keyframes rain-43 {
        0% {
            left: 96%;
            opacity: 0.49;
            top: -70%;
        }

        100% {
            opacity: 0;
            top: 110%;
        }
    }

    @keyframes rain-43 {
        0% {
            left: 96%;
            opacity: 0.49;
            top: -70%;
        }

        100% {
            opacity: 0;
            top: 110%;
        }
    }

    .rain:nth-of-type(44) {
        -webkit-animation-name: rain-44;
        animation-name: rain-44;
        -webkit-animation-delay: 5s;
        animation-delay: 5s;
        -webkit-animation-duration: 9s;
        animation-duration: 9s;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
        left: 44%;
        opacity: 0.37;
        top: -61%;
    }

    @-webkit-keyframes rain-44 {
        0% {
            left: 44%;
            opacity: 0.37;
            top: -61%;
        }

        100% {
            opacity: 0;
            top: 101%;
        }
    }

    @keyframes rain-44 {
        0% {
            left: 44%;
            opacity: 0.37;
            top: -61%;
        }

        100% {
            opacity: 0;
            top: 101%;
        }
    }

    .rain:nth-of-type(45) {
        -webkit-animation-name: rain-45;
        animation-name: rain-45;
        -webkit-animation-delay: 3s;
        animation-delay: 3s;
        -webkit-animation-duration: 8s;
        animation-duration: 8s;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
        left: 16%;
        opacity: 0.34;
        top: -95%;
    }

    @-webkit-keyframes rain-45 {
        0% {
            left: 16%;
            opacity: 0.34;
            top: -95%;
        }

        100% {
            opacity: 0;
            top: 135%;
        }
    }

    @keyframes rain-45 {
        0% {
            left: 16%;
            opacity: 0.34;
            top: -95%;
        }

        100% {
            opacity: 0;
            top: 135%;
        }
    }

    .rain:nth-of-type(46) {
        -webkit-animation-name: rain-46;
        animation-name: rain-46;
        -webkit-animation-delay: 17s;
        animation-delay: 17s;
        -webkit-animation-duration: 9s;
        animation-duration: 9s;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
        left: 81%;
        opacity: 0.45;
        top: -64%;
    }

    @-webkit-keyframes rain-46 {
        0% {
            left: 81%;
            opacity: 0.45;
            top: -64%;
        }

        100% {
            opacity: 0;
            top: 104%;
        }
    }

    @keyframes rain-46 {
        0% {
            left: 81%;
            opacity: 0.45;
            top: -64%;
        }

        100% {
            opacity: 0;
            top: 104%;
        }
    }

    .rain:nth-of-type(47) {
        -webkit-animation-name: rain-47;
        animation-name: rain-47;
        -webkit-animation-delay: 8s;
        animation-delay: 8s;
        -webkit-animation-duration: 8s;
        animation-duration: 8s;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
        left: 56%;
        opacity: 0.35;
        top: -75%;
    }

    @-webkit-keyframes rain-47 {
        0% {
            left: 56%;
            opacity: 0.35;
            top: -75%;
        }

        100% {
            opacity: 0;
            top: 115%;
        }
    }

    @keyframes rain-47 {
        0% {
            left: 56%;
            opacity: 0.35;
            top: -75%;
        }

        100% {
            opacity: 0;
            top: 115%;
        }
    }

    .rain:nth-of-type(48) {
        -webkit-animation-name: rain-48;
        animation-name: rain-48;
        -webkit-animation-delay: 11s;
        animation-delay: 11s;
        -webkit-animation-duration: 10s;
        animation-duration: 10s;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
        left: 88%;
        opacity: 0.49;
        top: -82%;
    }

    @-webkit-keyframes rain-48 {
        0% {
            left: 88%;
            opacity: 0.49;
            top: -82%;
        }

        100% {
            opacity: 0;
            top: 122%;
        }
    }

    @keyframes rain-48 {
        0% {
            left: 88%;
            opacity: 0.49;
            top: -82%;
        }

        100% {
            opacity: 0;
            top: 122%;
        }
    }

    .rain:nth-of-type(49) {
        -webkit-animation-name: rain-49;
        animation-name: rain-49;
        -webkit-animation-delay: 8s;
        animation-delay: 8s;
        -webkit-animation-duration: 8s;
        animation-duration: 8s;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
        left: 91%;
        opacity: 0.49;
        top: -73%;
    }

    @-webkit-keyframes rain-49 {
        0% {
            left: 91%;
            opacity: 0.49;
            top: -73%;
        }

        100% {
            opacity: 0;
            top: 113%;
        }
    }

    @keyframes rain-49 {
        0% {
            left: 91%;
            opacity: 0.49;
            top: -73%;
        }

        100% {
            opacity: 0;
            top: 113%;
        }
    }

    .rain:nth-of-type(50) {
        -webkit-animation-name: rain-50;
        animation-name: rain-50;
        -webkit-animation-delay: 10s;
        animation-delay: 10s;
        -webkit-animation-duration: 8s;
        animation-duration: 8s;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
        left: 69%;
        opacity: 0.43;
        top: -52%;
    }

    @-webkit-keyframes rain-50 {
        0% {
            left: 69%;
            opacity: 0.43;
            top: -52%;
        }

        100% {
            opacity: 0;
            top: 92%;
        }
    }

    @keyframes rain-50 {
        0% {
            left: 69%;
            opacity: 0.43;
            top: -52%;
        }

        100% {
            opacity: 0;
            top: 92%;
        }
    }

    .sun {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        width: 70px;
        height: 70px;
        border-radius: 50%;
        background: white;
        opacity: 0.9;
        box-shadow: 0px 0px 40px 15px white;
    }

    .ray_box {
        position: absolute;
        margin: auto;
        top: 0px;
        left: 0;
        right: 0;
        bottom: 0;
        width: 70px;
        -webkit-animation: ray_anim 60s linear infinite;
        animation: ray_anim 60s linear infinite;
    }

    .ray {
        background: linear-gradient(to top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 100%);
        margin-left: 10px;
        border-radius: 80% 80% 0 0;
        position: absolute;
        opacity: 0.1;
        left: 34%;
        -webkit-transform-origin: left;
        transform-origin: left;
    }

    .ray:nth-of-type(1) {
        width: 119px;
        height: 12px;
        top: calc(50% - 6px);
        -webkit-transform: rotate(36deg);
        transform: rotate(36deg);
    }

    .ray:nth-of-type(2) {
        width: 106px;
        height: 41px;
        top: calc(50% - 20.5px);
        -webkit-transform: rotate(72deg);
        transform: rotate(72deg);
    }

    .ray:nth-of-type(3) {
        width: 107px;
        height: 22px;
        top: calc(50% - 11px);
        -webkit-transform: rotate(108deg);
        transform: rotate(108deg);
    }

    .ray:nth-of-type(4) {
        width: 90px;
        height: 20px;
        top: calc(50% - 10px);
        -webkit-transform: rotate(144deg);
        transform: rotate(144deg);
    }

    .ray:nth-of-type(5) {
        width: 148px;
        height: 19px;
        top: calc(50% - 9.5px);
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }

    .ray:nth-of-type(6) {
        width: 150px;
        height: 46px;
        top: calc(50% - 23px);
        -webkit-transform: rotate(216deg);
        transform: rotate(216deg);
    }

    .ray:nth-of-type(7) {
        width: 119px;
        height: 30px;
        top: calc(50% - 15px);
        -webkit-transform: rotate(252deg);
        transform: rotate(252deg);
    }

    .ray:nth-of-type(8) {
        width: 102px;
        height: 19px;
        top: calc(50% - 9.5px);
        -webkit-transform: rotate(288deg);
        transform: rotate(288deg);
    }

    .ray:nth-of-type(9) {
        width: 144px;
        height: 19px;
        top: calc(50% - 9.5px);
        -webkit-transform: rotate(324deg);
        transform: rotate(324deg);
    }

    .ray:nth-of-type(10) {
        width: 134px;
        height: 55px;
        top: calc(50% - 27.5px);
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }

    .ray:nth-of-type(11) {
        width: 86px;
        height: 9px;
        top: calc(50% - 4.5px);
        -webkit-transform: rotate(396deg);
        transform: rotate(396deg);
    }

    .ray:nth-of-type(12) {
        width: 128px;
        height: 9px;
        top: calc(50% - 4.5px);
        -webkit-transform: rotate(432deg);
        transform: rotate(432deg);
    }

    .ray:nth-of-type(13) {
        width: 100px;
        height: 19px;
        top: calc(50% - 9.5px);
        -webkit-transform: rotate(468deg);
        transform: rotate(468deg);
    }

    .ray:nth-of-type(14) {
        width: 132px;
        height: 23px;
        top: calc(50% - 11.5px);
        -webkit-transform: rotate(504deg);
        transform: rotate(504deg);
    }

    .ray:nth-of-type(15) {
        width: 94px;
        height: 52px;
        top: calc(50% - 26px);
        -webkit-transform: rotate(540deg);
        transform: rotate(540deg);
    }

    .ray:nth-of-type(16) {
        width: 144px;
        height: 25px;
        top: calc(50% - 12.5px);
        -webkit-transform: rotate(576deg);
        transform: rotate(576deg);
    }

    .ray:nth-of-type(17) {
        width: 149px;
        height: 44px;
        top: calc(50% - 22px);
        -webkit-transform: rotate(612deg);
        transform: rotate(612deg);
    }

    .ray:nth-of-type(18) {
        width: 134px;
        height: 51px;
        top: calc(50% - 25.5px);
        -webkit-transform: rotate(648deg);
        transform: rotate(648deg);
    }

    .ray:nth-of-type(19) {
        width: 106px;
        height: 32px;
        top: calc(50% - 16px);
        -webkit-transform: rotate(684deg);
        transform: rotate(684deg);
    }

    .ray:nth-of-type(20) {
        width: 86px;
        height: 49px;
        top: calc(50% - 24.5px);
        -webkit-transform: rotate(720deg);
        transform: rotate(720deg);
    }

    @-webkit-keyframes ray_anim {
        0% {
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
        }

        100% {
            -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
        }
    }

    .cloud {
        background: #fff;
        background: linear-gradient(to top, #fff 5%, #f1f1f1 100%);
        border-radius: 100px;
        box-shadow: 0 8px 5px rgba(0, 0, 0, 0.1);
        height: 120px;
        position: absolute;
        width: 350px;
    }

    .cloud:after,
    .cloud:before {
        background: #fff;
        content: "";
        position: absolute;
        z-index: -1;
    }

    .cloud:after {
        border-radius: 100px;
        height: 100px;
        left: 50px;
        top: -50px;
        width: 100px;
    }

    .cloud:before {
        border-radius: 200px;
        width: 180px;
        height: 180px;
        right: 50px;
        top: -90px;
    }

    .cloud:nth-of-type(1) {
        -webkit-animation: animateCloud 35s linear infinite;
        animation: animateCloud 35s linear infinite;
        -webkit-transform: scale(0.06);
        transform: scale(0.06);
        top: 21%;
    }

    .cloud:nth-of-type(2) {
        -webkit-animation: animateCloud 7s linear infinite;
        animation: animateCloud 7s linear infinite;
        -webkit-transform: scale(0.1666666667);
        transform: scale(0.1666666667);
        top: 76%;
    }

    .cloud:nth-of-type(3) {
        -webkit-animation: animateCloud 40s linear infinite;
        animation: animateCloud 40s linear infinite;
        -webkit-transform: scale(0.23);
        transform: scale(0.23);
        top: 3%;
    }

    .cloud:nth-of-type(4) {
        -webkit-animation: animateCloud 13s linear infinite;
        animation: animateCloud 13s linear infinite;
        -webkit-transform: scale(0.26);
        transform: scale(0.26);
        top: 78%;
    }

    .cloud:nth-of-type(5) {
        -webkit-animation: animateCloud 15s linear infinite;
        animation: animateCloud 15s linear infinite;
        -webkit-transform: scale(0.1366666667);
        transform: scale(0.1366666667);
        top: 32%;
    }

    .cloud:nth-of-type(6) {
        -webkit-animation: animateCloud 32s linear infinite;
        animation: animateCloud 32s linear infinite;
        -webkit-transform: scale(0.2633333333);
        transform: scale(0.2633333333);
        top: 43%;
    }

    .cloud:nth-of-type(7) {
        -webkit-animation: animateCloud 18s linear infinite;
        animation: animateCloud 18s linear infinite;
        -webkit-transform: scale(0.19);
        transform: scale(0.19);
        top: 89%;
    }

    .cloud:nth-of-type(8) {
        -webkit-animation: animateCloud 20s linear infinite;
        animation: animateCloud 20s linear infinite;
        -webkit-transform: scale(0.3233333333);
        transform: scale(0.3233333333);
        top: 51%;
    }

    .cloud:nth-of-type(9) {
        -webkit-animation: animateCloud 6s linear infinite;
        animation: animateCloud 6s linear infinite;
        -webkit-transform: scale(0.2766666667);
        transform: scale(0.2766666667);
        top: 89%;
    }

    .cloud:nth-of-type(10) {
        -webkit-animation: animateCloud 21s linear infinite;
        animation: animateCloud 21s linear infinite;
        -webkit-transform: scale(0.2433333333);
        transform: scale(0.2433333333);
        top: 55%;
    }

    .cloud:nth-of-type(11) {
        -webkit-animation: animateCloud 35s linear infinite;
        animation: animateCloud 35s linear infinite;
        -webkit-transform: scale(0.2833333333);
        transform: scale(0.2833333333);
        top: 27%;
    }

    .cloud:nth-of-type(12) {
        -webkit-animation: animateCloud 12s linear infinite;
        animation: animateCloud 12s linear infinite;
        -webkit-transform: scale(0.3333333333);
        transform: scale(0.3333333333);
        top: 37%;
    }

    .cloud:nth-of-type(13) {
        -webkit-animation: animateCloud 25s linear infinite;
        animation: animateCloud 25s linear infinite;
        -webkit-transform: scale(0.1);
        transform: scale(0.1);
        top: 9%;
    }

    .cloud:nth-of-type(14) {
        -webkit-animation: animateCloud 9s linear infinite;
        animation: animateCloud 9s linear infinite;
        -webkit-transform: scale(0.1333333333);
        transform: scale(0.1333333333);
        top: 77%;
    }

    .cloud:nth-of-type(15) {
        -webkit-animation: animateCloud 16s linear infinite;
        animation: animateCloud 16s linear infinite;
        -webkit-transform: scale(0.25);
        transform: scale(0.25);
        top: 14%;
    }

    .cloud:nth-of-type(16) {
        -webkit-animation: animateCloud 41s linear infinite;
        animation: animateCloud 41s linear infinite;
        -webkit-transform: scale(0.1);
        transform: scale(0.1);
        top: 77%;
    }

    .cloud:nth-of-type(17) {
        -webkit-animation: animateCloud 14s linear infinite;
        animation: animateCloud 14s linear infinite;
        -webkit-transform: scale(0.1333333333);
        transform: scale(0.1333333333);
        top: 11%;
    }

    .cloud:nth-of-type(18) {
        -webkit-animation: animateCloud 38s linear infinite;
        animation: animateCloud 38s linear infinite;
        -webkit-transform: scale(0.1066666667);
        transform: scale(0.1066666667);
        top: 7%;
    }

    .cloud:nth-of-type(19) {
        -webkit-animation: animateCloud 18s linear infinite;
        animation: animateCloud 18s linear infinite;
        -webkit-transform: scale(0.0833333333);
        transform: scale(0.0833333333);
        top: 17%;
    }

    .cloud:nth-of-type(20) {
        -webkit-animation: animateCloud 13s linear infinite;
        animation: animateCloud 13s linear infinite;
        -webkit-transform: scale(0.3266666667);
        transform: scale(0.3266666667);
        top: 53%;
    }

    .cloud:nth-of-type(21) {
        -webkit-animation: animateCloud 41s linear infinite;
        animation: animateCloud 41s linear infinite;
        -webkit-transform: scale(0.05);
        transform: scale(0.05);
        top: -2%;
    }

    .cloud:nth-of-type(22) {
        -webkit-animation: animateCloud 31s linear infinite;
        animation: animateCloud 31s linear infinite;
        -webkit-transform: scale(0.0533333333);
        transform: scale(0.0533333333);
        top: 75%;
    }

    .cloud:nth-of-type(23) {
        -webkit-animation: animateCloud 16s linear infinite;
        animation: animateCloud 16s linear infinite;
        -webkit-transform: scale(0.2566666667);
        transform: scale(0.2566666667);
        top: 45%;
    }

    .cloud:nth-of-type(24) {
        -webkit-animation: animateCloud 37s linear infinite;
        animation: animateCloud 37s linear infinite;
        -webkit-transform: scale(0.3166666667);
        transform: scale(0.3166666667);
        top: 43%;
    }

    .cloud:nth-of-type(25) {
        -webkit-animation: animateCloud 17s linear infinite;
        animation: animateCloud 17s linear infinite;
        -webkit-transform: scale(0.3566666667);
        transform: scale(0.3566666667);
        top: 51%;
    }

    .cloud:nth-of-type(26) {
        -webkit-animation: animateCloud 22s linear infinite;
        animation: animateCloud 22s linear infinite;
        -webkit-transform: scale(0.32);
        transform: scale(0.32);
        top: 57%;
    }

    .cloud:nth-of-type(27) {
        -webkit-animation: animateCloud 24s linear infinite;
        animation: animateCloud 24s linear infinite;
        -webkit-transform: scale(0.2766666667);
        transform: scale(0.2766666667);
        top: 36%;
    }

    .cloud:nth-of-type(28) {
        -webkit-animation: animateCloud 26s linear infinite;
        animation: animateCloud 26s linear infinite;
        -webkit-transform: scale(0.27);
        transform: scale(0.27);
        top: 18%;
    }

    .cloud:nth-of-type(29) {
        -webkit-animation: animateCloud 39s linear infinite;
        animation: animateCloud 39s linear infinite;
        -webkit-transform: scale(0.0533333333);
        transform: scale(0.0533333333);
        top: 47%;
    }

    .cloud:nth-of-type(30) {
        -webkit-animation: animateCloud 22s linear infinite;
        animation: animateCloud 22s linear infinite;
        -webkit-transform: scale(0.0833333333);
        transform: scale(0.0833333333);
        top: 8%;
    }

    .cloud:nth-of-type(31) {
        -webkit-animation: animateCloud 35s linear infinite;
        animation: animateCloud 35s linear infinite;
        -webkit-transform: scale(0.17);
        transform: scale(0.17);
        top: 15%;
    }

    .cloud:nth-of-type(32) {
        -webkit-animation: animateCloud 45s linear infinite;
        animation: animateCloud 45s linear infinite;
        -webkit-transform: scale(0.23);
        transform: scale(0.23);
        top: -1%;
    }

    .cloud:nth-of-type(33) {
        -webkit-animation: animateCloud 19s linear infinite;
        animation: animateCloud 19s linear infinite;
        -webkit-transform: scale(0.1933333333);
        transform: scale(0.1933333333);
        top: -7%;
    }

    .cloud:nth-of-type(34) {
        -webkit-animation: animateCloud 42s linear infinite;
        animation: animateCloud 42s linear infinite;
        -webkit-transform: scale(0.1066666667);
        transform: scale(0.1066666667);
        top: 7%;
    }

    .cloud:nth-of-type(35) {
        -webkit-animation: animateCloud 16s linear infinite;
        animation: animateCloud 16s linear infinite;
        -webkit-transform: scale(0.08);
        transform: scale(0.08);
        top: 65%;
    }

    .cloud:nth-of-type(36) {
        -webkit-animation: animateCloud 40s linear infinite;
        animation: animateCloud 40s linear infinite;
        -webkit-transform: scale(0.23);
        transform: scale(0.23);
        top: 22%;
    }

    .cloud:nth-of-type(37) {
        -webkit-animation: animateCloud 12s linear infinite;
        animation: animateCloud 12s linear infinite;
        -webkit-transform: scale(0.31);
        transform: scale(0.31);
        top: 0%;
    }

    .cloud:nth-of-type(38) {
        -webkit-animation: animateCloud 16s linear infinite;
        animation: animateCloud 16s linear infinite;
        -webkit-transform: scale(0.3466666667);
        transform: scale(0.3466666667);
        top: 75%;
    }

    .cloud:nth-of-type(39) {
        -webkit-animation: animateCloud 6s linear infinite;
        animation: animateCloud 6s linear infinite;
        -webkit-transform: scale(0.1966666667);
        transform: scale(0.1966666667);
        top: 50%;
    }

    .cloud:nth-of-type(40) {
        -webkit-animation: animateCloud 32s linear infinite;
        animation: animateCloud 32s linear infinite;
        -webkit-transform: scale(0.3033333333);
        transform: scale(0.3033333333);
        top: 72%;
    }

    @-webkit-keyframes animateCloud {
        0% {
            margin-left: -100%;
        }

        100% {
            margin-left: 100%;
        }
    }

    @keyframes animateCloud {
        0% {
            margin-left: -100%;
        }

        100% {
            margin-left: 100%;
        }
    }

    .fog__img {
        position: absolute;
        height: 100vh;
        width: 300vw;
        background-size: contain;
        background-position: center;
    }

    .fog__img--first {
        background: url("https://res.cloudinary.com/dkr52htco/image/upload/v1536173269/fog-1.png") repeat-x;
        -webkit-animation: fog-two 210s linear infinite;
        animation: fog-two 210s linear infinite;
    }

    .fog__img--second {
        background: url("https://res.cloudinary.com/dkr52htco/image/upload/v1536173269/fog-2.png") repeat-x;
        -webkit-animation: fog-one 120s linear infinite;
        animation: fog-one 120s linear infinite;
        opacity: 0.65;
    }

    .fog__img--third {
        background: url("https://res.cloudinary.com/dkr52htco/image/upload/v1536173269/fog-2.png") repeat-x;
        -webkit-animation: fog-three 270s linear infinite;
        animation: fog-three 270s linear infinite;
    }

    @-webkit-keyframes fog-one {
        0% {
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
        }

        100% {
            -webkit-transform: translate3d(-200vw, 0, 0);
            transform: translate3d(-200vw, 0, 0);
        }
    }

    @keyframes fog-one {
        0% {
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
        }

        100% {
            -webkit-transform: translate3d(-200vw, 0, 0);
            transform: translate3d(-200vw, 0, 0);
        }
    }

    @-webkit-keyframes fog-two {
        0% {
            -webkit-transform: translate3d(-200vw, 0, 0);
            transform: translate3d(-200vw, 0, 0);
        }

        100% {
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
        }
    }

    @keyframes fog-two {
        0% {
            -webkit-transform: translate3d(-200vw, 0, 0);
            transform: translate3d(-200vw, 0, 0);
        }

        100% {
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
        }
    }

    @-webkit-keyframes fog-three {
        0% {
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
        }

        100% {
            -webkit-transform: translate3d(-200vw, 0, 0);
            transform: translate3d(-200vw, 0, 0);
        }
    }

    @keyframes fog-three {
        0% {
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
        }

        100% {
            -webkit-transform: translate3d(-200vw, 0, 0);
            transform: translate3d(-200vw, 0, 0);
        }
    }

    .snow {
        position: absolute;
        width: 10px;
        height: 10px;
        background: white;
        border-radius: 50%;
    }

    .snow:nth-child(1) {
        opacity: 0.4552;
        -webkit-transform: translate(42.603vw, -10px) scale(1.4644);
        transform: translate(42.603vw, -10px) scale(1.4644);
        -webkit-animation: fall-1 5s -5s linear infinite;
        animation: fall-1 5s -5s linear infinite;
    }

    @-webkit-keyframes fall-1 {
        34.641% {
            -webkit-transform: translate(40.6895vw, 34.641vh) scale(1.4644);
            transform: translate(40.6895vw, 34.641vh) scale(1.4644);
        }

        to {
            -webkit-transform: translate(41.64625vw, 100vh) scale(1.4644);
            transform: translate(41.64625vw, 100vh) scale(1.4644);
        }
    }

    @keyframes fall-1 {
        34.641% {
            -webkit-transform: translate(40.6895vw, 34.641vh) scale(1.4644);
            transform: translate(40.6895vw, 34.641vh) scale(1.4644);
        }

        to {
            -webkit-transform: translate(41.64625vw, 100vh) scale(1.4644);
            transform: translate(41.64625vw, 100vh) scale(1.4644);
        }
    }

    .snow:nth-child(2) {
        opacity: 0.2838;
        -webkit-transform: translate(88.6941vw, -10px) scale(0.5904);
        transform: translate(88.6941vw, -10px) scale(0.5904);
        -webkit-animation: fall-2 18s -30s linear infinite;
        animation: fall-2 18s -30s linear infinite;
    }

    @-webkit-keyframes fall-2 {
        43.18% {
            -webkit-transform: translate(89.06795vw, 43.18vh) scale(0.5904);
            transform: translate(89.06795vw, 43.18vh) scale(0.5904);
        }

        to {
            -webkit-transform: translate(88.881025vw, 100vh) scale(0.5904);
            transform: translate(88.881025vw, 100vh) scale(0.5904);
        }
    }

    @keyframes fall-2 {
        43.18% {
            -webkit-transform: translate(89.06795vw, 43.18vh) scale(0.5904);
            transform: translate(89.06795vw, 43.18vh) scale(0.5904);
        }

        to {
            -webkit-transform: translate(88.881025vw, 100vh) scale(0.5904);
            transform: translate(88.881025vw, 100vh) scale(0.5904);
        }
    }

    .snow:nth-child(3) {
        opacity: 0.5863;
        -webkit-transform: translate(92.1621vw, -10px) scale(0.046);
        transform: translate(92.1621vw, -10px) scale(0.046);
        -webkit-animation: fall-3 7s -4s linear infinite;
        animation: fall-3 7s -4s linear infinite;
    }

    @-webkit-keyframes fall-3 {
        73.96% {
            -webkit-transform: translate(89.7834vw, 73.96vh) scale(0.046);
            transform: translate(89.7834vw, 73.96vh) scale(0.046);
        }

        to {
            -webkit-transform: translate(90.97275vw, 100vh) scale(0.046);
            transform: translate(90.97275vw, 100vh) scale(0.046);
        }
    }

    @keyframes fall-3 {
        73.96% {
            -webkit-transform: translate(89.7834vw, 73.96vh) scale(0.046);
            transform: translate(89.7834vw, 73.96vh) scale(0.046);
        }

        to {
            -webkit-transform: translate(90.97275vw, 100vh) scale(0.046);
            transform: translate(90.97275vw, 100vh) scale(0.046);
        }
    }

    .snow:nth-child(4) {
        opacity: 0.0592;
        -webkit-transform: translate(10.8855vw, -10px) scale(1.7848);
        transform: translate(10.8855vw, -10px) scale(1.7848);
        -webkit-animation: fall-4 19s -17s linear infinite;
        animation: fall-4 19s -17s linear infinite;
    }

    @-webkit-keyframes fall-4 {
        32.782% {
            -webkit-transform: translate(12.63555vw, 32.782vh) scale(1.7848);
            transform: translate(12.63555vw, 32.782vh) scale(1.7848);
        }

        to {
            -webkit-transform: translate(11.760525vw, 100vh) scale(1.7848);
            transform: translate(11.760525vw, 100vh) scale(1.7848);
        }
    }

    @keyframes fall-4 {
        32.782% {
            -webkit-transform: translate(12.63555vw, 32.782vh) scale(1.7848);
            transform: translate(12.63555vw, 32.782vh) scale(1.7848);
        }

        to {
            -webkit-transform: translate(11.760525vw, 100vh) scale(1.7848);
            transform: translate(11.760525vw, 100vh) scale(1.7848);
        }
    }

    .snow:nth-child(5) {
        opacity: 0.7123;
        -webkit-transform: translate(80.6325vw, -10px) scale(1.3076);
        transform: translate(80.6325vw, -10px) scale(1.3076);
        -webkit-animation: fall-5 13s -29s linear infinite;
        animation: fall-5 13s -29s linear infinite;
    }

    @-webkit-keyframes fall-5 {
        63.804% {
            -webkit-transform: translate(78.4454vw, 63.804vh) scale(1.3076);
            transform: translate(78.4454vw, 63.804vh) scale(1.3076);
        }

        to {
            -webkit-transform: translate(79.53895vw, 100vh) scale(1.3076);
            transform: translate(79.53895vw, 100vh) scale(1.3076);
        }
    }

    @keyframes fall-5 {
        63.804% {
            -webkit-transform: translate(78.4454vw, 63.804vh) scale(1.3076);
            transform: translate(78.4454vw, 63.804vh) scale(1.3076);
        }

        to {
            -webkit-transform: translate(79.53895vw, 100vh) scale(1.3076);
            transform: translate(79.53895vw, 100vh) scale(1.3076);
        }
    }

    .snow:nth-child(6) {
        opacity: 0.4958;
        -webkit-transform: translate(96.6299vw, -10px) scale(0.0956);
        transform: translate(96.6299vw, -10px) scale(0.0956);
        -webkit-animation: fall-6 14s -19s linear infinite;
        animation: fall-6 14s -19s linear infinite;
    }

    @-webkit-keyframes fall-6 {
        44.722% {
            -webkit-transform: translate(98.2283vw, 44.722vh) scale(0.0956);
            transform: translate(98.2283vw, 44.722vh) scale(0.0956);
        }

        to {
            -webkit-transform: translate(97.4291vw, 100vh) scale(0.0956);
            transform: translate(97.4291vw, 100vh) scale(0.0956);
        }
    }

    @keyframes fall-6 {
        44.722% {
            -webkit-transform: translate(98.2283vw, 44.722vh) scale(0.0956);
            transform: translate(98.2283vw, 44.722vh) scale(0.0956);
        }

        to {
            -webkit-transform: translate(97.4291vw, 100vh) scale(0.0956);
            transform: translate(97.4291vw, 100vh) scale(0.0956);
        }
    }

    .snow:nth-child(7) {
        opacity: 0.3675;
        -webkit-transform: translate(74.5498vw, -10px) scale(0.4878);
        transform: translate(74.5498vw, -10px) scale(0.4878);
        -webkit-animation: fall-7 17s -15s linear infinite;
        animation: fall-7 17s -15s linear infinite;
    }

    @-webkit-keyframes fall-7 {
        52.961% {
            -webkit-transform: translate(71.663vw, 52.961vh) scale(0.4878);
            transform: translate(71.663vw, 52.961vh) scale(0.4878);
        }

        to {
            -webkit-transform: translate(73.1064vw, 100vh) scale(0.4878);
            transform: translate(73.1064vw, 100vh) scale(0.4878);
        }
    }

    @keyframes fall-7 {
        52.961% {
            -webkit-transform: translate(71.663vw, 52.961vh) scale(0.4878);
            transform: translate(71.663vw, 52.961vh) scale(0.4878);
        }

        to {
            -webkit-transform: translate(73.1064vw, 100vh) scale(0.4878);
            transform: translate(73.1064vw, 100vh) scale(0.4878);
        }
    }

    .snow:nth-child(8) {
        opacity: 0.188;
        -webkit-transform: translate(60.2681vw, -10px) scale(1.7888);
        transform: translate(60.2681vw, -10px) scale(1.7888);
        -webkit-animation: fall-8 10s -5s linear infinite;
        animation: fall-8 10s -5s linear infinite;
    }

    @-webkit-keyframes fall-8 {
        46.734% {
            -webkit-transform: translate(63.773vw, 46.734vh) scale(1.7888);
            transform: translate(63.773vw, 46.734vh) scale(1.7888);
        }

        to {
            -webkit-transform: translate(62.02055vw, 100vh) scale(1.7888);
            transform: translate(62.02055vw, 100vh) scale(1.7888);
        }
    }

    @keyframes fall-8 {
        46.734% {
            -webkit-transform: translate(63.773vw, 46.734vh) scale(1.7888);
            transform: translate(63.773vw, 46.734vh) scale(1.7888);
        }

        to {
            -webkit-transform: translate(62.02055vw, 100vh) scale(1.7888);
            transform: translate(62.02055vw, 100vh) scale(1.7888);
        }
    }

    .snow:nth-child(9) {
        opacity: 0.6319;
        -webkit-transform: translate(81.5464vw, -10px) scale(0.104);
        transform: translate(81.5464vw, -10px) scale(0.104);
        -webkit-animation: fall-9 13s -11s linear infinite;
        animation: fall-9 13s -11s linear infinite;
    }

    @-webkit-keyframes fall-9 {
        48.609% {
            -webkit-transform: translate(76.7405vw, 48.609vh) scale(0.104);
            transform: translate(76.7405vw, 48.609vh) scale(0.104);
        }

        to {
            -webkit-transform: translate(79.14345vw, 100vh) scale(0.104);
            transform: translate(79.14345vw, 100vh) scale(0.104);
        }
    }

    @keyframes fall-9 {
        48.609% {
            -webkit-transform: translate(76.7405vw, 48.609vh) scale(0.104);
            transform: translate(76.7405vw, 48.609vh) scale(0.104);
        }

        to {
            -webkit-transform: translate(79.14345vw, 100vh) scale(0.104);
            transform: translate(79.14345vw, 100vh) scale(0.104);
        }
    }

    .snow:nth-child(10) {
        opacity: 0.7311;
        -webkit-transform: translate(24.0896vw, -10px) scale(1.574);
        transform: translate(24.0896vw, -10px) scale(1.574);
        -webkit-animation: fall-10 11s -1s linear infinite;
        animation: fall-10 11s -1s linear infinite;
    }

    @-webkit-keyframes fall-10 {
        45.73% {
            -webkit-transform: translate(20.10985vw, 45.73vh) scale(1.574);
            transform: translate(20.10985vw, 45.73vh) scale(1.574);
        }

        to {
            -webkit-transform: translate(22.099725vw, 100vh) scale(1.574);
            transform: translate(22.099725vw, 100vh) scale(1.574);
        }
    }

    @keyframes fall-10 {
        45.73% {
            -webkit-transform: translate(20.10985vw, 45.73vh) scale(1.574);
            transform: translate(20.10985vw, 45.73vh) scale(1.574);
        }

        to {
            -webkit-transform: translate(22.099725vw, 100vh) scale(1.574);
            transform: translate(22.099725vw, 100vh) scale(1.574);
        }
    }

    .snow:nth-child(11) {
        opacity: 0.8553;
        -webkit-transform: translate(28.7677vw, -10px) scale(0.796);
        transform: translate(28.7677vw, -10px) scale(0.796);
        -webkit-animation: fall-11 17s -10s linear infinite;
        animation: fall-11 17s -10s linear infinite;
    }

    @-webkit-keyframes fall-11 {
        75.876% {
            -webkit-transform: translate(26.9939vw, 75.876vh) scale(0.796);
            transform: translate(26.9939vw, 75.876vh) scale(0.796);
        }

        to {
            -webkit-transform: translate(27.8808vw, 100vh) scale(0.796);
            transform: translate(27.8808vw, 100vh) scale(0.796);
        }
    }

    @keyframes fall-11 {
        75.876% {
            -webkit-transform: translate(26.9939vw, 75.876vh) scale(0.796);
            transform: translate(26.9939vw, 75.876vh) scale(0.796);
        }

        to {
            -webkit-transform: translate(27.8808vw, 100vh) scale(0.796);
            transform: translate(27.8808vw, 100vh) scale(0.796);
        }
    }

    .snow:nth-child(12) {
        opacity: 0.6452;
        -webkit-transform: translate(26.6155vw, -10px) scale(0.3466);
        transform: translate(26.6155vw, -10px) scale(0.3466);
        -webkit-animation: fall-12 5s -4s linear infinite;
        animation: fall-12 5s -4s linear infinite;
    }

    @-webkit-keyframes fall-12 {
        48.275% {
            -webkit-transform: translate(26.4349vw, 48.275vh) scale(0.3466);
            transform: translate(26.4349vw, 48.275vh) scale(0.3466);
        }

        to {
            -webkit-transform: translate(26.5252vw, 100vh) scale(0.3466);
            transform: translate(26.5252vw, 100vh) scale(0.3466);
        }
    }

    @keyframes fall-12 {
        48.275% {
            -webkit-transform: translate(26.4349vw, 48.275vh) scale(0.3466);
            transform: translate(26.4349vw, 48.275vh) scale(0.3466);
        }

        to {
            -webkit-transform: translate(26.5252vw, 100vh) scale(0.3466);
            transform: translate(26.5252vw, 100vh) scale(0.3466);
        }
    }

    .snow:nth-child(13) {
        opacity: 0.283;
        -webkit-transform: translate(81.2525vw, -10px) scale(1.1074);
        transform: translate(81.2525vw, -10px) scale(1.1074);
        -webkit-animation: fall-13 10s -30s linear infinite;
        animation: fall-13 10s -30s linear infinite;
    }

    @-webkit-keyframes fall-13 {
        42.365% {
            -webkit-transform: translate(76.9876vw, 42.365vh) scale(1.1074);
            transform: translate(76.9876vw, 42.365vh) scale(1.1074);
        }

        to {
            -webkit-transform: translate(79.12005vw, 100vh) scale(1.1074);
            transform: translate(79.12005vw, 100vh) scale(1.1074);
        }
    }

    @keyframes fall-13 {
        42.365% {
            -webkit-transform: translate(76.9876vw, 42.365vh) scale(1.1074);
            transform: translate(76.9876vw, 42.365vh) scale(1.1074);
        }

        to {
            -webkit-transform: translate(79.12005vw, 100vh) scale(1.1074);
            transform: translate(79.12005vw, 100vh) scale(1.1074);
        }
    }

    .snow:nth-child(14) {
        opacity: 0.8497;
        -webkit-transform: translate(21.587vw, -10px) scale(1.1842);
        transform: translate(21.587vw, -10px) scale(1.1842);
        -webkit-animation: fall-14 5s -2s linear infinite;
        animation: fall-14 5s -2s linear infinite;
    }

    @-webkit-keyframes fall-14 {
        36.113% {
            -webkit-transform: translate(23.19765vw, 36.113vh) scale(1.1842);
            transform: translate(23.19765vw, 36.113vh) scale(1.1842);
        }

        to {
            -webkit-transform: translate(22.392325vw, 100vh) scale(1.1842);
            transform: translate(22.392325vw, 100vh) scale(1.1842);
        }
    }

    @keyframes fall-14 {
        36.113% {
            -webkit-transform: translate(23.19765vw, 36.113vh) scale(1.1842);
            transform: translate(23.19765vw, 36.113vh) scale(1.1842);
        }

        to {
            -webkit-transform: translate(22.392325vw, 100vh) scale(1.1842);
            transform: translate(22.392325vw, 100vh) scale(1.1842);
        }
    }

    .snow:nth-child(15) {
        opacity: 0.5686;
        -webkit-transform: translate(82.8318vw, -10px) scale(0.4554);
        transform: translate(82.8318vw, -10px) scale(0.4554);
        -webkit-animation: fall-15 6s -20s linear infinite;
        animation: fall-15 6s -20s linear infinite;
    }

    @-webkit-keyframes fall-15 {
        35.804% {
            -webkit-transform: translate(84.82215vw, 35.804vh) scale(0.4554);
            transform: translate(84.82215vw, 35.804vh) scale(0.4554);
        }

        to {
            -webkit-transform: translate(83.826975vw, 100vh) scale(0.4554);
            transform: translate(83.826975vw, 100vh) scale(0.4554);
        }
    }

    @keyframes fall-15 {
        35.804% {
            -webkit-transform: translate(84.82215vw, 35.804vh) scale(0.4554);
            transform: translate(84.82215vw, 35.804vh) scale(0.4554);
        }

        to {
            -webkit-transform: translate(83.826975vw, 100vh) scale(0.4554);
            transform: translate(83.826975vw, 100vh) scale(0.4554);
        }
    }

    .snow:nth-child(16) {
        opacity: 0.6924;
        -webkit-transform: translate(80.5761vw, -10px) scale(1.187);
        transform: translate(80.5761vw, -10px) scale(1.187);
        -webkit-animation: fall-16 11s -30s linear infinite;
        animation: fall-16 11s -30s linear infinite;
    }

    @-webkit-keyframes fall-16 {
        48.377% {
            -webkit-transform: translate(84.41185vw, 48.377vh) scale(1.187);
            transform: translate(84.41185vw, 48.377vh) scale(1.187);
        }

        to {
            -webkit-transform: translate(82.493975vw, 100vh) scale(1.187);
            transform: translate(82.493975vw, 100vh) scale(1.187);
        }
    }

    @keyframes fall-16 {
        48.377% {
            -webkit-transform: translate(84.41185vw, 48.377vh) scale(1.187);
            transform: translate(84.41185vw, 48.377vh) scale(1.187);
        }

        to {
            -webkit-transform: translate(82.493975vw, 100vh) scale(1.187);
            transform: translate(82.493975vw, 100vh) scale(1.187);
        }
    }

    .snow:nth-child(17) {
        opacity: 0.1257;
        -webkit-transform: translate(61.5173vw, -10px) scale(1.1228);
        transform: translate(61.5173vw, -10px) scale(1.1228);
        -webkit-animation: fall-17 18s -1s linear infinite;
        animation: fall-17 18s -1s linear infinite;
    }

    @-webkit-keyframes fall-17 {
        66.349% {
            -webkit-transform: translate(59.5255vw, 66.349vh) scale(1.1228);
            transform: translate(59.5255vw, 66.349vh) scale(1.1228);
        }

        to {
            -webkit-transform: translate(60.5214vw, 100vh) scale(1.1228);
            transform: translate(60.5214vw, 100vh) scale(1.1228);
        }
    }

    @keyframes fall-17 {
        66.349% {
            -webkit-transform: translate(59.5255vw, 66.349vh) scale(1.1228);
            transform: translate(59.5255vw, 66.349vh) scale(1.1228);
        }

        to {
            -webkit-transform: translate(60.5214vw, 100vh) scale(1.1228);
            transform: translate(60.5214vw, 100vh) scale(1.1228);
        }
    }

    .snow:nth-child(18) {
        opacity: 0.0014;
        -webkit-transform: translate(52.6535vw, -10px) scale(1.0054);
        transform: translate(52.6535vw, -10px) scale(1.0054);
        -webkit-animation: fall-18 18s -24s linear infinite;
        animation: fall-18 18s -24s linear infinite;
    }

    @-webkit-keyframes fall-18 {
        74.697% {
            -webkit-transform: translate(49.19365vw, 74.697vh) scale(1.0054);
            transform: translate(49.19365vw, 74.697vh) scale(1.0054);
        }

        to {
            -webkit-transform: translate(50.923575vw, 100vh) scale(1.0054);
            transform: translate(50.923575vw, 100vh) scale(1.0054);
        }
    }

    @keyframes fall-18 {
        74.697% {
            -webkit-transform: translate(49.19365vw, 74.697vh) scale(1.0054);
            transform: translate(49.19365vw, 74.697vh) scale(1.0054);
        }

        to {
            -webkit-transform: translate(50.923575vw, 100vh) scale(1.0054);
            transform: translate(50.923575vw, 100vh) scale(1.0054);
        }
    }

    .snow:nth-child(19) {
        opacity: 0.3813;
        -webkit-transform: translate(61.0612vw, -10px) scale(0.859);
        transform: translate(61.0612vw, -10px) scale(0.859);
        -webkit-animation: fall-19 14s -13s linear infinite;
        animation: fall-19 14s -13s linear infinite;
    }

    @-webkit-keyframes fall-19 {
        35.144% {
            -webkit-transform: translate(65.51555vw, 35.144vh) scale(0.859);
            transform: translate(65.51555vw, 35.144vh) scale(0.859);
        }

        to {
            -webkit-transform: translate(63.288375vw, 100vh) scale(0.859);
            transform: translate(63.288375vw, 100vh) scale(0.859);
        }
    }

    @keyframes fall-19 {
        35.144% {
            -webkit-transform: translate(65.51555vw, 35.144vh) scale(0.859);
            transform: translate(65.51555vw, 35.144vh) scale(0.859);
        }

        to {
            -webkit-transform: translate(63.288375vw, 100vh) scale(0.859);
            transform: translate(63.288375vw, 100vh) scale(0.859);
        }
    }

    .snow:nth-child(20) {
        opacity: 0.2141;
        -webkit-transform: translate(74.8515vw, -10px) scale(1.1192);
        transform: translate(74.8515vw, -10px) scale(1.1192);
        -webkit-animation: fall-20 20s -5s linear infinite;
        animation: fall-20 20s -5s linear infinite;
    }

    @-webkit-keyframes fall-20 {
        68.81% {
            -webkit-transform: translate(74.10275vw, 68.81vh) scale(1.1192);
            transform: translate(74.10275vw, 68.81vh) scale(1.1192);
        }

        to {
            -webkit-transform: translate(74.477125vw, 100vh) scale(1.1192);
            transform: translate(74.477125vw, 100vh) scale(1.1192);
        }
    }

    @keyframes fall-20 {
        68.81% {
            -webkit-transform: translate(74.10275vw, 68.81vh) scale(1.1192);
            transform: translate(74.10275vw, 68.81vh) scale(1.1192);
        }

        to {
            -webkit-transform: translate(74.477125vw, 100vh) scale(1.1192);
            transform: translate(74.477125vw, 100vh) scale(1.1192);
        }
    }

    .snow:nth-child(21) {
        opacity: 0.4778;
        -webkit-transform: translate(48.8173vw, -10px) scale(0.1812);
        transform: translate(48.8173vw, -10px) scale(0.1812);
        -webkit-animation: fall-21 10s -12s linear infinite;
        animation: fall-21 10s -12s linear infinite;
    }

    @-webkit-keyframes fall-21 {
        53.213% {
            -webkit-transform: translate(53.25815vw, 53.213vh) scale(0.1812);
            transform: translate(53.25815vw, 53.213vh) scale(0.1812);
        }

        to {
            -webkit-transform: translate(51.037725vw, 100vh) scale(0.1812);
            transform: translate(51.037725vw, 100vh) scale(0.1812);
        }
    }

    @keyframes fall-21 {
        53.213% {
            -webkit-transform: translate(53.25815vw, 53.213vh) scale(0.1812);
            transform: translate(53.25815vw, 53.213vh) scale(0.1812);
        }

        to {
            -webkit-transform: translate(51.037725vw, 100vh) scale(0.1812);
            transform: translate(51.037725vw, 100vh) scale(0.1812);
        }
    }

    .snow:nth-child(22) {
        opacity: 0.3029;
        -webkit-transform: translate(78.3857vw, -10px) scale(1.9098);
        transform: translate(78.3857vw, -10px) scale(1.9098);
        -webkit-animation: fall-22 8s -24s linear infinite;
        animation: fall-22 8s -24s linear infinite;
    }

    @-webkit-keyframes fall-22 {
        54.623% {
            -webkit-transform: translate(76.20545vw, 54.623vh) scale(1.9098);
            transform: translate(76.20545vw, 54.623vh) scale(1.9098);
        }

        to {
            -webkit-transform: translate(77.295575vw, 100vh) scale(1.9098);
            transform: translate(77.295575vw, 100vh) scale(1.9098);
        }
    }

    @keyframes fall-22 {
        54.623% {
            -webkit-transform: translate(76.20545vw, 54.623vh) scale(1.9098);
            transform: translate(76.20545vw, 54.623vh) scale(1.9098);
        }

        to {
            -webkit-transform: translate(77.295575vw, 100vh) scale(1.9098);
            transform: translate(77.295575vw, 100vh) scale(1.9098);
        }
    }

    .snow:nth-child(23) {
        opacity: 0.155;
        -webkit-transform: translate(57.7516vw, -10px) scale(1.2168);
        transform: translate(57.7516vw, -10px) scale(1.2168);
        -webkit-animation: fall-23 20s -20s linear infinite;
        animation: fall-23 20s -20s linear infinite;
    }

    @-webkit-keyframes fall-23 {
        59.068% {
            -webkit-transform: translate(54.6782vw, 59.068vh) scale(1.2168);
            transform: translate(54.6782vw, 59.068vh) scale(1.2168);
        }

        to {
            -webkit-transform: translate(56.2149vw, 100vh) scale(1.2168);
            transform: translate(56.2149vw, 100vh) scale(1.2168);
        }
    }

    @keyframes fall-23 {
        59.068% {
            -webkit-transform: translate(54.6782vw, 59.068vh) scale(1.2168);
            transform: translate(54.6782vw, 59.068vh) scale(1.2168);
        }

        to {
            -webkit-transform: translate(56.2149vw, 100vh) scale(1.2168);
            transform: translate(56.2149vw, 100vh) scale(1.2168);
        }
    }

    .snow:nth-child(24) {
        opacity: 0.8282;
        -webkit-transform: translate(34.9924vw, -10px) scale(0.224);
        transform: translate(34.9924vw, -10px) scale(0.224);
        -webkit-animation: fall-24 7s -1s linear infinite;
        animation: fall-24 7s -1s linear infinite;
    }

    @-webkit-keyframes fall-24 {
        32.005% {
            -webkit-transform: translate(34.2398vw, 32.005vh) scale(0.224);
            transform: translate(34.2398vw, 32.005vh) scale(0.224);
        }

        to {
            -webkit-transform: translate(34.6161vw, 100vh) scale(0.224);
            transform: translate(34.6161vw, 100vh) scale(0.224);
        }
    }

    @keyframes fall-24 {
        32.005% {
            -webkit-transform: translate(34.2398vw, 32.005vh) scale(0.224);
            transform: translate(34.2398vw, 32.005vh) scale(0.224);
        }

        to {
            -webkit-transform: translate(34.6161vw, 100vh) scale(0.224);
            transform: translate(34.6161vw, 100vh) scale(0.224);
        }
    }

    .snow:nth-child(25) {
        opacity: 0.2047;
        -webkit-transform: translate(86.019vw, -10px) scale(1.1322);
        transform: translate(86.019vw, -10px) scale(1.1322);
        -webkit-animation: fall-25 15s -29s linear infinite;
        animation: fall-25 15s -29s linear infinite;
    }

    @-webkit-keyframes fall-25 {
        54.886% {
            -webkit-transform: translate(86.35945vw, 54.886vh) scale(1.1322);
            transform: translate(86.35945vw, 54.886vh) scale(1.1322);
        }

        to {
            -webkit-transform: translate(86.189225vw, 100vh) scale(1.1322);
            transform: translate(86.189225vw, 100vh) scale(1.1322);
        }
    }

    @keyframes fall-25 {
        54.886% {
            -webkit-transform: translate(86.35945vw, 54.886vh) scale(1.1322);
            transform: translate(86.35945vw, 54.886vh) scale(1.1322);
        }

        to {
            -webkit-transform: translate(86.189225vw, 100vh) scale(1.1322);
            transform: translate(86.189225vw, 100vh) scale(1.1322);
        }
    }

    .snow:nth-child(26) {
        opacity: 0.0511;
        -webkit-transform: translate(28.7144vw, -10px) scale(1.106);
        transform: translate(28.7144vw, -10px) scale(1.106);
        -webkit-animation: fall-26 11s -12s linear infinite;
        animation: fall-26 11s -12s linear infinite;
    }

    @-webkit-keyframes fall-26 {
        38.963% {
            -webkit-transform: translate(28.71505vw, 38.963vh) scale(1.106);
            transform: translate(28.71505vw, 38.963vh) scale(1.106);
        }

        to {
            -webkit-transform: translate(28.714725vw, 100vh) scale(1.106);
            transform: translate(28.714725vw, 100vh) scale(1.106);
        }
    }

    @keyframes fall-26 {
        38.963% {
            -webkit-transform: translate(28.71505vw, 38.963vh) scale(1.106);
            transform: translate(28.71505vw, 38.963vh) scale(1.106);
        }

        to {
            -webkit-transform: translate(28.714725vw, 100vh) scale(1.106);
            transform: translate(28.714725vw, 100vh) scale(1.106);
        }
    }

    .snow:nth-child(27) {
        opacity: 0.537;
        -webkit-transform: translate(48.8087vw, -10px) scale(0.449);
        transform: translate(48.8087vw, -10px) scale(0.449);
        -webkit-animation: fall-27 13s -13s linear infinite;
        animation: fall-27 13s -13s linear infinite;
    }

    @-webkit-keyframes fall-27 {
        62.612% {
            -webkit-transform: translate(50.00335vw, 62.612vh) scale(0.449);
            transform: translate(50.00335vw, 62.612vh) scale(0.449);
        }

        to {
            -webkit-transform: translate(49.406025vw, 100vh) scale(0.449);
            transform: translate(49.406025vw, 100vh) scale(0.449);
        }
    }

    @keyframes fall-27 {
        62.612% {
            -webkit-transform: translate(50.00335vw, 62.612vh) scale(0.449);
            transform: translate(50.00335vw, 62.612vh) scale(0.449);
        }

        to {
            -webkit-transform: translate(49.406025vw, 100vh) scale(0.449);
            transform: translate(49.406025vw, 100vh) scale(0.449);
        }
    }

    .snow:nth-child(28) {
        opacity: 0.9011;
        -webkit-transform: translate(6.048vw, -10px) scale(0.3896);
        transform: translate(6.048vw, -10px) scale(0.3896);
        -webkit-animation: fall-28 18s -1s linear infinite;
        animation: fall-28 18s -1s linear infinite;
    }

    @-webkit-keyframes fall-28 {
        48.401% {
            -webkit-transform: translate(3.67055vw, 48.401vh) scale(0.3896);
            transform: translate(3.67055vw, 48.401vh) scale(0.3896);
        }

        to {
            -webkit-transform: translate(4.859275vw, 100vh) scale(0.3896);
            transform: translate(4.859275vw, 100vh) scale(0.3896);
        }
    }

    @keyframes fall-28 {
        48.401% {
            -webkit-transform: translate(3.67055vw, 48.401vh) scale(0.3896);
            transform: translate(3.67055vw, 48.401vh) scale(0.3896);
        }

        to {
            -webkit-transform: translate(4.859275vw, 100vh) scale(0.3896);
            transform: translate(4.859275vw, 100vh) scale(0.3896);
        }
    }

    .snow:nth-child(29) {
        opacity: 0.5864;
        -webkit-transform: translate(72.733vw, -10px) scale(0.5104);
        transform: translate(72.733vw, -10px) scale(0.5104);
        -webkit-animation: fall-29 19s -30s linear infinite;
        animation: fall-29 19s -30s linear infinite;
    }

    @-webkit-keyframes fall-29 {
        57.853% {
            -webkit-transform: translate(74.0506vw, 57.853vh) scale(0.5104);
            transform: translate(74.0506vw, 57.853vh) scale(0.5104);
        }

        to {
            -webkit-transform: translate(73.3918vw, 100vh) scale(0.5104);
            transform: translate(73.3918vw, 100vh) scale(0.5104);
        }
    }

    @keyframes fall-29 {
        57.853% {
            -webkit-transform: translate(74.0506vw, 57.853vh) scale(0.5104);
            transform: translate(74.0506vw, 57.853vh) scale(0.5104);
        }

        to {
            -webkit-transform: translate(73.3918vw, 100vh) scale(0.5104);
            transform: translate(73.3918vw, 100vh) scale(0.5104);
        }
    }

    .snow:nth-child(30) {
        opacity: 0.6522;
        -webkit-transform: translate(85.7862vw, -10px) scale(0.0924);
        transform: translate(85.7862vw, -10px) scale(0.0924);
        -webkit-animation: fall-30 6s -5s linear infinite;
        animation: fall-30 6s -5s linear infinite;
    }

    @-webkit-keyframes fall-30 {
        35.288% {
            -webkit-transform: translate(84.0101vw, 35.288vh) scale(0.0924);
            transform: translate(84.0101vw, 35.288vh) scale(0.0924);
        }

        to {
            -webkit-transform: translate(84.89815vw, 100vh) scale(0.0924);
            transform: translate(84.89815vw, 100vh) scale(0.0924);
        }
    }

    @keyframes fall-30 {
        35.288% {
            -webkit-transform: translate(84.0101vw, 35.288vh) scale(0.0924);
            transform: translate(84.0101vw, 35.288vh) scale(0.0924);
        }

        to {
            -webkit-transform: translate(84.89815vw, 100vh) scale(0.0924);
            transform: translate(84.89815vw, 100vh) scale(0.0924);
        }
    }

    .snow:nth-child(31) {
        opacity: 0.2968;
        -webkit-transform: translate(90.7356vw, -10px) scale(0.9742);
        transform: translate(90.7356vw, -10px) scale(0.9742);
        -webkit-animation: fall-31 5s -15s linear infinite;
        animation: fall-31 5s -15s linear infinite;
    }

    @-webkit-keyframes fall-31 {
        72.499% {
            -webkit-transform: translate(89.7154vw, 72.499vh) scale(0.9742);
            transform: translate(89.7154vw, 72.499vh) scale(0.9742);
        }

        to {
            -webkit-transform: translate(90.2255vw, 100vh) scale(0.9742);
            transform: translate(90.2255vw, 100vh) scale(0.9742);
        }
    }

    @keyframes fall-31 {
        72.499% {
            -webkit-transform: translate(89.7154vw, 72.499vh) scale(0.9742);
            transform: translate(89.7154vw, 72.499vh) scale(0.9742);
        }

        to {
            -webkit-transform: translate(90.2255vw, 100vh) scale(0.9742);
            transform: translate(90.2255vw, 100vh) scale(0.9742);
        }
    }

    .snow:nth-child(32) {
        opacity: 0.9512;
        -webkit-transform: translate(13.8062vw, -10px) scale(0.2272);
        transform: translate(13.8062vw, -10px) scale(0.2272);
        -webkit-animation: fall-32 19s -28s linear infinite;
        animation: fall-32 19s -28s linear infinite;
    }

    @-webkit-keyframes fall-32 {
        75.858% {
            -webkit-transform: translate(12.4113vw, 75.858vh) scale(0.2272);
            transform: translate(12.4113vw, 75.858vh) scale(0.2272);
        }

        to {
            -webkit-transform: translate(13.10875vw, 100vh) scale(0.2272);
            transform: translate(13.10875vw, 100vh) scale(0.2272);
        }
    }

    @keyframes fall-32 {
        75.858% {
            -webkit-transform: translate(12.4113vw, 75.858vh) scale(0.2272);
            transform: translate(12.4113vw, 75.858vh) scale(0.2272);
        }

        to {
            -webkit-transform: translate(13.10875vw, 100vh) scale(0.2272);
            transform: translate(13.10875vw, 100vh) scale(0.2272);
        }
    }

    .snow:nth-child(33) {
        opacity: 0.1981;
        -webkit-transform: translate(67.8363vw, -10px) scale(1.319);
        transform: translate(67.8363vw, -10px) scale(1.319);
        -webkit-animation: fall-33 12s -18s linear infinite;
        animation: fall-33 12s -18s linear infinite;
    }

    @-webkit-keyframes fall-33 {
        34.045% {
            -webkit-transform: translate(67.4495vw, 34.045vh) scale(1.319);
            transform: translate(67.4495vw, 34.045vh) scale(1.319);
        }

        to {
            -webkit-transform: translate(67.6429vw, 100vh) scale(1.319);
            transform: translate(67.6429vw, 100vh) scale(1.319);
        }
    }

    @keyframes fall-33 {
        34.045% {
            -webkit-transform: translate(67.4495vw, 34.045vh) scale(1.319);
            transform: translate(67.4495vw, 34.045vh) scale(1.319);
        }

        to {
            -webkit-transform: translate(67.6429vw, 100vh) scale(1.319);
            transform: translate(67.6429vw, 100vh) scale(1.319);
        }
    }

    .snow:nth-child(34) {
        opacity: 0.395;
        -webkit-transform: translate(55.4138vw, -10px) scale(1.0382);
        transform: translate(55.4138vw, -10px) scale(1.0382);
        -webkit-animation: fall-34 7s -13s linear infinite;
        animation: fall-34 7s -13s linear infinite;
    }

    @-webkit-keyframes fall-34 {
        62.799% {
            -webkit-transform: translate(56.1074vw, 62.799vh) scale(1.0382);
            transform: translate(56.1074vw, 62.799vh) scale(1.0382);
        }

        to {
            -webkit-transform: translate(55.7606vw, 100vh) scale(1.0382);
            transform: translate(55.7606vw, 100vh) scale(1.0382);
        }
    }

    @keyframes fall-34 {
        62.799% {
            -webkit-transform: translate(56.1074vw, 62.799vh) scale(1.0382);
            transform: translate(56.1074vw, 62.799vh) scale(1.0382);
        }

        to {
            -webkit-transform: translate(55.7606vw, 100vh) scale(1.0382);
            transform: translate(55.7606vw, 100vh) scale(1.0382);
        }
    }

    .snow:nth-child(35) {
        opacity: 0.2949;
        -webkit-transform: translate(32.8118vw, -10px) scale(1.4778);
        transform: translate(32.8118vw, -10px) scale(1.4778);
        -webkit-animation: fall-35 12s -20s linear infinite;
        animation: fall-35 12s -20s linear infinite;
    }

    @-webkit-keyframes fall-35 {
        78.146% {
            -webkit-transform: translate(31.8923vw, 78.146vh) scale(1.4778);
            transform: translate(31.8923vw, 78.146vh) scale(1.4778);
        }

        to {
            -webkit-transform: translate(32.35205vw, 100vh) scale(1.4778);
            transform: translate(32.35205vw, 100vh) scale(1.4778);
        }
    }

    @keyframes fall-35 {
        78.146% {
            -webkit-transform: translate(31.8923vw, 78.146vh) scale(1.4778);
            transform: translate(31.8923vw, 78.146vh) scale(1.4778);
        }

        to {
            -webkit-transform: translate(32.35205vw, 100vh) scale(1.4778);
            transform: translate(32.35205vw, 100vh) scale(1.4778);
        }
    }

    .snow:nth-child(36) {
        opacity: 0.7211;
        -webkit-transform: translate(82.8913vw, -10px) scale(0.8794);
        transform: translate(82.8913vw, -10px) scale(0.8794);
        -webkit-animation: fall-36 10s -30s linear infinite;
        animation: fall-36 10s -30s linear infinite;
    }

    @-webkit-keyframes fall-36 {
        72.325% {
            -webkit-transform: translate(85.68855vw, 72.325vh) scale(0.8794);
            transform: translate(85.68855vw, 72.325vh) scale(0.8794);
        }

        to {
            -webkit-transform: translate(84.289925vw, 100vh) scale(0.8794);
            transform: translate(84.289925vw, 100vh) scale(0.8794);
        }
    }

    @keyframes fall-36 {
        72.325% {
            -webkit-transform: translate(85.68855vw, 72.325vh) scale(0.8794);
            transform: translate(85.68855vw, 72.325vh) scale(0.8794);
        }

        to {
            -webkit-transform: translate(84.289925vw, 100vh) scale(0.8794);
            transform: translate(84.289925vw, 100vh) scale(0.8794);
        }
    }

    .snow:nth-child(37) {
        opacity: 0.0597;
        -webkit-transform: translate(14.1378vw, -10px) scale(0.5088);
        transform: translate(14.1378vw, -10px) scale(0.5088);
        -webkit-animation: fall-37 15s -2s linear infinite;
        animation: fall-37 15s -2s linear infinite;
    }

    @-webkit-keyframes fall-37 {
        71.143% {
            -webkit-transform: translate(10.2097vw, 71.143vh) scale(0.5088);
            transform: translate(10.2097vw, 71.143vh) scale(0.5088);
        }

        to {
            -webkit-transform: translate(12.17375vw, 100vh) scale(0.5088);
            transform: translate(12.17375vw, 100vh) scale(0.5088);
        }
    }

    @keyframes fall-37 {
        71.143% {
            -webkit-transform: translate(10.2097vw, 71.143vh) scale(0.5088);
            transform: translate(10.2097vw, 71.143vh) scale(0.5088);
        }

        to {
            -webkit-transform: translate(12.17375vw, 100vh) scale(0.5088);
            transform: translate(12.17375vw, 100vh) scale(0.5088);
        }
    }

    .snow:nth-child(38) {
        opacity: 0.5016;
        -webkit-transform: translate(70.4351vw, -10px) scale(0.8344);
        transform: translate(70.4351vw, -10px) scale(0.8344);
        -webkit-animation: fall-38 6s -1s linear infinite;
        animation: fall-38 6s -1s linear infinite;
    }

    @-webkit-keyframes fall-38 {
        46.098% {
            -webkit-transform: translate(68.00705vw, 46.098vh) scale(0.8344);
            transform: translate(68.00705vw, 46.098vh) scale(0.8344);
        }

        to {
            -webkit-transform: translate(69.221075vw, 100vh) scale(0.8344);
            transform: translate(69.221075vw, 100vh) scale(0.8344);
        }
    }

    @keyframes fall-38 {
        46.098% {
            -webkit-transform: translate(68.00705vw, 46.098vh) scale(0.8344);
            transform: translate(68.00705vw, 46.098vh) scale(0.8344);
        }

        to {
            -webkit-transform: translate(69.221075vw, 100vh) scale(0.8344);
            transform: translate(69.221075vw, 100vh) scale(0.8344);
        }
    }

    .snow:nth-child(39) {
        opacity: 0.1416;
        -webkit-transform: translate(40.0716vw, -10px) scale(1.7778);
        transform: translate(40.0716vw, -10px) scale(1.7778);
        -webkit-animation: fall-39 8s -3s linear infinite;
        animation: fall-39 8s -3s linear infinite;
    }

    @-webkit-keyframes fall-39 {
        73.807% {
            -webkit-transform: translate(35.87255vw, 73.807vh) scale(1.7778);
            transform: translate(35.87255vw, 73.807vh) scale(1.7778);
        }

        to {
            -webkit-transform: translate(37.972075vw, 100vh) scale(1.7778);
            transform: translate(37.972075vw, 100vh) scale(1.7778);
        }
    }

    @keyframes fall-39 {
        73.807% {
            -webkit-transform: translate(35.87255vw, 73.807vh) scale(1.7778);
            transform: translate(35.87255vw, 73.807vh) scale(1.7778);
        }

        to {
            -webkit-transform: translate(37.972075vw, 100vh) scale(1.7778);
            transform: translate(37.972075vw, 100vh) scale(1.7778);
        }
    }

    .snow:nth-child(40) {
        opacity: 0.404;
        -webkit-transform: translate(41.7853vw, -10px) scale(1.219);
        transform: translate(41.7853vw, -10px) scale(1.219);
        -webkit-animation: fall-40 9s -30s linear infinite;
        animation: fall-40 9s -30s linear infinite;
    }

    @-webkit-keyframes fall-40 {
        36.823% {
            -webkit-transform: translate(45.784vw, 36.823vh) scale(1.219);
            transform: translate(45.784vw, 36.823vh) scale(1.219);
        }

        to {
            -webkit-transform: translate(43.78465vw, 100vh) scale(1.219);
            transform: translate(43.78465vw, 100vh) scale(1.219);
        }
    }

    @keyframes fall-40 {
        36.823% {
            -webkit-transform: translate(45.784vw, 36.823vh) scale(1.219);
            transform: translate(45.784vw, 36.823vh) scale(1.219);
        }

        to {
            -webkit-transform: translate(43.78465vw, 100vh) scale(1.219);
            transform: translate(43.78465vw, 100vh) scale(1.219);
        }
    }

    .snow:nth-child(41) {
        opacity: 0.2126;
        -webkit-transform: translate(63.3765vw, -10px) scale(0.1616);
        transform: translate(63.3765vw, -10px) scale(0.1616);
        -webkit-animation: fall-41 7s -17s linear infinite;
        animation: fall-41 7s -17s linear infinite;
    }

    @-webkit-keyframes fall-41 {
        76.578% {
            -webkit-transform: translate(60.9421vw, 76.578vh) scale(0.1616);
            transform: translate(60.9421vw, 76.578vh) scale(0.1616);
        }

        to {
            -webkit-transform: translate(62.1593vw, 100vh) scale(0.1616);
            transform: translate(62.1593vw, 100vh) scale(0.1616);
        }
    }

    @keyframes fall-41 {
        76.578% {
            -webkit-transform: translate(60.9421vw, 76.578vh) scale(0.1616);
            transform: translate(60.9421vw, 76.578vh) scale(0.1616);
        }

        to {
            -webkit-transform: translate(62.1593vw, 100vh) scale(0.1616);
            transform: translate(62.1593vw, 100vh) scale(0.1616);
        }
    }

    .snow:nth-child(42) {
        opacity: 0.0188;
        -webkit-transform: translate(79.0537vw, -10px) scale(1.0218);
        transform: translate(79.0537vw, -10px) scale(1.0218);
        -webkit-animation: fall-42 17s -9s linear infinite;
        animation: fall-42 17s -9s linear infinite;
    }

    @-webkit-keyframes fall-42 {
        52.567% {
            -webkit-transform: translate(74.24755vw, 52.567vh) scale(1.0218);
            transform: translate(74.24755vw, 52.567vh) scale(1.0218);
        }

        to {
            -webkit-transform: translate(76.650625vw, 100vh) scale(1.0218);
            transform: translate(76.650625vw, 100vh) scale(1.0218);
        }
    }

    @keyframes fall-42 {
        52.567% {
            -webkit-transform: translate(74.24755vw, 52.567vh) scale(1.0218);
            transform: translate(74.24755vw, 52.567vh) scale(1.0218);
        }

        to {
            -webkit-transform: translate(76.650625vw, 100vh) scale(1.0218);
            transform: translate(76.650625vw, 100vh) scale(1.0218);
        }
    }

    .snow:nth-child(43) {
        opacity: 0.4528;
        -webkit-transform: translate(59.9297vw, -10px) scale(0.5678);
        transform: translate(59.9297vw, -10px) scale(0.5678);
        -webkit-animation: fall-43 11s -29s linear infinite;
        animation: fall-43 11s -29s linear infinite;
    }

    @-webkit-keyframes fall-43 {
        54.645% {
            -webkit-transform: translate(61.7931vw, 54.645vh) scale(0.5678);
            transform: translate(61.7931vw, 54.645vh) scale(0.5678);
        }

        to {
            -webkit-transform: translate(60.8614vw, 100vh) scale(0.5678);
            transform: translate(60.8614vw, 100vh) scale(0.5678);
        }
    }

    @keyframes fall-43 {
        54.645% {
            -webkit-transform: translate(61.7931vw, 54.645vh) scale(0.5678);
            transform: translate(61.7931vw, 54.645vh) scale(0.5678);
        }

        to {
            -webkit-transform: translate(60.8614vw, 100vh) scale(0.5678);
            transform: translate(60.8614vw, 100vh) scale(0.5678);
        }
    }

    .snow:nth-child(44) {
        opacity: 0.6514;
        -webkit-transform: translate(64.1849vw, -10px) scale(1.3232);
        transform: translate(64.1849vw, -10px) scale(1.3232);
        -webkit-animation: fall-44 18s -13s linear infinite;
        animation: fall-44 18s -13s linear infinite;
    }

    @-webkit-keyframes fall-44 {
        47.095% {
            -webkit-transform: translate(68.8477vw, 47.095vh) scale(1.3232);
            transform: translate(68.8477vw, 47.095vh) scale(1.3232);
        }

        to {
            -webkit-transform: translate(66.5163vw, 100vh) scale(1.3232);
            transform: translate(66.5163vw, 100vh) scale(1.3232);
        }
    }

    @keyframes fall-44 {
        47.095% {
            -webkit-transform: translate(68.8477vw, 47.095vh) scale(1.3232);
            transform: translate(68.8477vw, 47.095vh) scale(1.3232);
        }

        to {
            -webkit-transform: translate(66.5163vw, 100vh) scale(1.3232);
            transform: translate(66.5163vw, 100vh) scale(1.3232);
        }
    }

    .snow:nth-child(45) {
        opacity: 0.7096;
        -webkit-transform: translate(93.7528vw, -10px) scale(0.8934);
        transform: translate(93.7528vw, -10px) scale(0.8934);
        -webkit-animation: fall-45 19s -2s linear infinite;
        animation: fall-45 19s -2s linear infinite;
    }

    @-webkit-keyframes fall-45 {
        74.138% {
            -webkit-transform: translate(93.5036vw, 74.138vh) scale(0.8934);
            transform: translate(93.5036vw, 74.138vh) scale(0.8934);
        }

        to {
            -webkit-transform: translate(93.6282vw, 100vh) scale(0.8934);
            transform: translate(93.6282vw, 100vh) scale(0.8934);
        }
    }

    @keyframes fall-45 {
        74.138% {
            -webkit-transform: translate(93.5036vw, 74.138vh) scale(0.8934);
            transform: translate(93.5036vw, 74.138vh) scale(0.8934);
        }

        to {
            -webkit-transform: translate(93.6282vw, 100vh) scale(0.8934);
            transform: translate(93.6282vw, 100vh) scale(0.8934);
        }
    }

    .snow:nth-child(46) {
        opacity: 0.4272;
        -webkit-transform: translate(30.3588vw, -10px) scale(1.113);
        transform: translate(30.3588vw, -10px) scale(1.113);
        -webkit-animation: fall-46 14s -11s linear infinite;
        animation: fall-46 14s -11s linear infinite;
    }

    @-webkit-keyframes fall-46 {
        77.222% {
            -webkit-transform: translate(27.40185vw, 77.222vh) scale(1.113);
            transform: translate(27.40185vw, 77.222vh) scale(1.113);
        }

        to {
            -webkit-transform: translate(28.880325vw, 100vh) scale(1.113);
            transform: translate(28.880325vw, 100vh) scale(1.113);
        }
    }

    @keyframes fall-46 {
        77.222% {
            -webkit-transform: translate(27.40185vw, 77.222vh) scale(1.113);
            transform: translate(27.40185vw, 77.222vh) scale(1.113);
        }

        to {
            -webkit-transform: translate(28.880325vw, 100vh) scale(1.113);
            transform: translate(28.880325vw, 100vh) scale(1.113);
        }
    }

    .snow:nth-child(47) {
        opacity: 0.9758;
        -webkit-transform: translate(6.4819vw, -10px) scale(0.1502);
        transform: translate(6.4819vw, -10px) scale(0.1502);
        -webkit-animation: fall-47 9s -3s linear infinite;
        animation: fall-47 9s -3s linear infinite;
    }

    @-webkit-keyframes fall-47 {
        45.659% {
            -webkit-transform: translate(5.3133vw, 45.659vh) scale(0.1502);
            transform: translate(5.3133vw, 45.659vh) scale(0.1502);
        }

        to {
            -webkit-transform: translate(5.8976vw, 100vh) scale(0.1502);
            transform: translate(5.8976vw, 100vh) scale(0.1502);
        }
    }

    @keyframes fall-47 {
        45.659% {
            -webkit-transform: translate(5.3133vw, 45.659vh) scale(0.1502);
            transform: translate(5.3133vw, 45.659vh) scale(0.1502);
        }

        to {
            -webkit-transform: translate(5.8976vw, 100vh) scale(0.1502);
            transform: translate(5.8976vw, 100vh) scale(0.1502);
        }
    }

    .snow:nth-child(48) {
        opacity: 0.0023;
        -webkit-transform: translate(97.9477vw, -10px) scale(0.5228);
        transform: translate(97.9477vw, -10px) scale(0.5228);
        -webkit-animation: fall-48 7s -21s linear infinite;
        animation: fall-48 7s -21s linear infinite;
    }

    @-webkit-keyframes fall-48 {
        77.128% {
            -webkit-transform: translate(95.7052vw, 77.128vh) scale(0.5228);
            transform: translate(95.7052vw, 77.128vh) scale(0.5228);
        }

        to {
            -webkit-transform: translate(96.82645vw, 100vh) scale(0.5228);
            transform: translate(96.82645vw, 100vh) scale(0.5228);
        }
    }

    @keyframes fall-48 {
        77.128% {
            -webkit-transform: translate(95.7052vw, 77.128vh) scale(0.5228);
            transform: translate(95.7052vw, 77.128vh) scale(0.5228);
        }

        to {
            -webkit-transform: translate(96.82645vw, 100vh) scale(0.5228);
            transform: translate(96.82645vw, 100vh) scale(0.5228);
        }
    }

    .snow:nth-child(49) {
        opacity: 0.4652;
        -webkit-transform: translate(76.2109vw, -10px) scale(1.7414);
        transform: translate(76.2109vw, -10px) scale(1.7414);
        -webkit-animation: fall-49 8s -22s linear infinite;
        animation: fall-49 8s -22s linear infinite;
    }

    @-webkit-keyframes fall-49 {
        57.908% {
            -webkit-transform: translate(81.1293vw, 57.908vh) scale(1.7414);
            transform: translate(81.1293vw, 57.908vh) scale(1.7414);
        }

        to {
            -webkit-transform: translate(78.6701vw, 100vh) scale(1.7414);
            transform: translate(78.6701vw, 100vh) scale(1.7414);
        }
    }

    @keyframes fall-49 {
        57.908% {
            -webkit-transform: translate(81.1293vw, 57.908vh) scale(1.7414);
            transform: translate(81.1293vw, 57.908vh) scale(1.7414);
        }

        to {
            -webkit-transform: translate(78.6701vw, 100vh) scale(1.7414);
            transform: translate(78.6701vw, 100vh) scale(1.7414);
        }
    }

    .snow:nth-child(50) {
        opacity: 0.2598;
        -webkit-transform: translate(64.394vw, -10px) scale(1.7766);
        transform: translate(64.394vw, -10px) scale(1.7766);
        -webkit-animation: fall-50 18s -27s linear infinite;
        animation: fall-50 18s -27s linear infinite;
    }

    @-webkit-keyframes fall-50 {
        52.719% {
            -webkit-transform: translate(59.69585vw, 52.719vh) scale(1.7766);
            transform: translate(59.69585vw, 52.719vh) scale(1.7766);
        }

        to {
            -webkit-transform: translate(62.044925vw, 100vh) scale(1.7766);
            transform: translate(62.044925vw, 100vh) scale(1.7766);
        }
    }

    @keyframes fall-50 {
        52.719% {
            -webkit-transform: translate(59.69585vw, 52.719vh) scale(1.7766);
            transform: translate(59.69585vw, 52.719vh) scale(1.7766);
        }

        to {
            -webkit-transform: translate(62.044925vw, 100vh) scale(1.7766);
            transform: translate(62.044925vw, 100vh) scale(1.7766);
        }
    }

    .snow:nth-child(51) {
        opacity: 0.2082;
        -webkit-transform: translate(53.6857vw, -10px) scale(0.2618);
        transform: translate(53.6857vw, -10px) scale(0.2618);
        -webkit-animation: fall-51 20s -9s linear infinite;
        animation: fall-51 20s -9s linear infinite;
    }

    @-webkit-keyframes fall-51 {
        45.893% {
            -webkit-transform: translate(53.24305vw, 45.893vh) scale(0.2618);
            transform: translate(53.24305vw, 45.893vh) scale(0.2618);
        }

        to {
            -webkit-transform: translate(53.464375vw, 100vh) scale(0.2618);
            transform: translate(53.464375vw, 100vh) scale(0.2618);
        }
    }

    @keyframes fall-51 {
        45.893% {
            -webkit-transform: translate(53.24305vw, 45.893vh) scale(0.2618);
            transform: translate(53.24305vw, 45.893vh) scale(0.2618);
        }

        to {
            -webkit-transform: translate(53.464375vw, 100vh) scale(0.2618);
            transform: translate(53.464375vw, 100vh) scale(0.2618);
        }
    }

    .snow:nth-child(52) {
        opacity: 0.2896;
        -webkit-transform: translate(3.2216vw, -10px) scale(1.2346);
        transform: translate(3.2216vw, -10px) scale(1.2346);
        -webkit-animation: fall-52 12s -5s linear infinite;
        animation: fall-52 12s -5s linear infinite;
    }

    @-webkit-keyframes fall-52 {
        76.117% {
            -webkit-transform: translate(3.44175vw, 76.117vh) scale(1.2346);
            transform: translate(3.44175vw, 76.117vh) scale(1.2346);
        }

        to {
            -webkit-transform: translate(3.331675vw, 100vh) scale(1.2346);
            transform: translate(3.331675vw, 100vh) scale(1.2346);
        }
    }

    @keyframes fall-52 {
        76.117% {
            -webkit-transform: translate(3.44175vw, 76.117vh) scale(1.2346);
            transform: translate(3.44175vw, 76.117vh) scale(1.2346);
        }

        to {
            -webkit-transform: translate(3.331675vw, 100vh) scale(1.2346);
            transform: translate(3.331675vw, 100vh) scale(1.2346);
        }
    }

    .snow:nth-child(53) {
        opacity: 0.1359;
        -webkit-transform: translate(66.7484vw, -10px) scale(1.9988);
        transform: translate(66.7484vw, -10px) scale(1.9988);
        -webkit-animation: fall-53 7s -21s linear infinite;
        animation: fall-53 7s -21s linear infinite;
    }

    @-webkit-keyframes fall-53 {
        38.634% {
            -webkit-transform: translate(63.56795vw, 38.634vh) scale(1.9988);
            transform: translate(63.56795vw, 38.634vh) scale(1.9988);
        }

        to {
            -webkit-transform: translate(65.158175vw, 100vh) scale(1.9988);
            transform: translate(65.158175vw, 100vh) scale(1.9988);
        }
    }

    @keyframes fall-53 {
        38.634% {
            -webkit-transform: translate(63.56795vw, 38.634vh) scale(1.9988);
            transform: translate(63.56795vw, 38.634vh) scale(1.9988);
        }

        to {
            -webkit-transform: translate(65.158175vw, 100vh) scale(1.9988);
            transform: translate(65.158175vw, 100vh) scale(1.9988);
        }
    }

    .snow:nth-child(54) {
        opacity: 0.0539;
        -webkit-transform: translate(85.4518vw, -10px) scale(1.7378);
        transform: translate(85.4518vw, -10px) scale(1.7378);
        -webkit-animation: fall-54 7s -12s linear infinite;
        animation: fall-54 7s -12s linear infinite;
    }

    @-webkit-keyframes fall-54 {
        39.683% {
            -webkit-transform: translate(88.27825vw, 39.683vh) scale(1.7378);
            transform: translate(88.27825vw, 39.683vh) scale(1.7378);
        }

        to {
            -webkit-transform: translate(86.865025vw, 100vh) scale(1.7378);
            transform: translate(86.865025vw, 100vh) scale(1.7378);
        }
    }

    @keyframes fall-54 {
        39.683% {
            -webkit-transform: translate(88.27825vw, 39.683vh) scale(1.7378);
            transform: translate(88.27825vw, 39.683vh) scale(1.7378);
        }

        to {
            -webkit-transform: translate(86.865025vw, 100vh) scale(1.7378);
            transform: translate(86.865025vw, 100vh) scale(1.7378);
        }
    }

    .snow:nth-child(55) {
        opacity: 0.8002;
        -webkit-transform: translate(19.0417vw, -10px) scale(1.033);
        transform: translate(19.0417vw, -10px) scale(1.033);
        -webkit-animation: fall-55 14s -13s linear infinite;
        animation: fall-55 14s -13s linear infinite;
    }

    @-webkit-keyframes fall-55 {
        74.369% {
            -webkit-transform: translate(16.54535vw, 74.369vh) scale(1.033);
            transform: translate(16.54535vw, 74.369vh) scale(1.033);
        }

        to {
            -webkit-transform: translate(17.793525vw, 100vh) scale(1.033);
            transform: translate(17.793525vw, 100vh) scale(1.033);
        }
    }

    @keyframes fall-55 {
        74.369% {
            -webkit-transform: translate(16.54535vw, 74.369vh) scale(1.033);
            transform: translate(16.54535vw, 74.369vh) scale(1.033);
        }

        to {
            -webkit-transform: translate(17.793525vw, 100vh) scale(1.033);
            transform: translate(17.793525vw, 100vh) scale(1.033);
        }
    }

    .snow:nth-child(56) {
        opacity: 0.6119;
        -webkit-transform: translate(31.2861vw, -10px) scale(1.5418);
        transform: translate(31.2861vw, -10px) scale(1.5418);
        -webkit-animation: fall-56 18s -20s linear infinite;
        animation: fall-56 18s -20s linear infinite;
    }

    @-webkit-keyframes fall-56 {
        51.739% {
            -webkit-transform: translate(33.95835vw, 51.739vh) scale(1.5418);
            transform: translate(33.95835vw, 51.739vh) scale(1.5418);
        }

        to {
            -webkit-transform: translate(32.622225vw, 100vh) scale(1.5418);
            transform: translate(32.622225vw, 100vh) scale(1.5418);
        }
    }

    @keyframes fall-56 {
        51.739% {
            -webkit-transform: translate(33.95835vw, 51.739vh) scale(1.5418);
            transform: translate(33.95835vw, 51.739vh) scale(1.5418);
        }

        to {
            -webkit-transform: translate(32.622225vw, 100vh) scale(1.5418);
            transform: translate(32.622225vw, 100vh) scale(1.5418);
        }
    }

    .snow:nth-child(57) {
        opacity: 0.0556;
        -webkit-transform: translate(44.3438vw, -10px) scale(1.5262);
        transform: translate(44.3438vw, -10px) scale(1.5262);
        -webkit-animation: fall-57 5s -1s linear infinite;
        animation: fall-57 5s -1s linear infinite;
    }

    @-webkit-keyframes fall-57 {
        63.03% {
            -webkit-transform: translate(47.91105vw, 63.03vh) scale(1.5262);
            transform: translate(47.91105vw, 63.03vh) scale(1.5262);
        }

        to {
            -webkit-transform: translate(46.127425vw, 100vh) scale(1.5262);
            transform: translate(46.127425vw, 100vh) scale(1.5262);
        }
    }

    @keyframes fall-57 {
        63.03% {
            -webkit-transform: translate(47.91105vw, 63.03vh) scale(1.5262);
            transform: translate(47.91105vw, 63.03vh) scale(1.5262);
        }

        to {
            -webkit-transform: translate(46.127425vw, 100vh) scale(1.5262);
            transform: translate(46.127425vw, 100vh) scale(1.5262);
        }
    }

    .snow:nth-child(58) {
        opacity: 0.0452;
        -webkit-transform: translate(28.1028vw, -10px) scale(1.039);
        transform: translate(28.1028vw, -10px) scale(1.039);
        -webkit-animation: fall-58 11s -19s linear infinite;
        animation: fall-58 11s -19s linear infinite;
    }

    @-webkit-keyframes fall-58 {
        60.887% {
            -webkit-transform: translate(32.0663vw, 60.887vh) scale(1.039);
            transform: translate(32.0663vw, 60.887vh) scale(1.039);
        }

        to {
            -webkit-transform: translate(30.08455vw, 100vh) scale(1.039);
            transform: translate(30.08455vw, 100vh) scale(1.039);
        }
    }

    @keyframes fall-58 {
        60.887% {
            -webkit-transform: translate(32.0663vw, 60.887vh) scale(1.039);
            transform: translate(32.0663vw, 60.887vh) scale(1.039);
        }

        to {
            -webkit-transform: translate(30.08455vw, 100vh) scale(1.039);
            transform: translate(30.08455vw, 100vh) scale(1.039);
        }
    }

    .snow:nth-child(59) {
        opacity: 0.1066;
        -webkit-transform: translate(31.9234vw, -10px) scale(1.3306);
        transform: translate(31.9234vw, -10px) scale(1.3306);
        -webkit-animation: fall-59 5s -8s linear infinite;
        animation: fall-59 5s -8s linear infinite;
    }

    @-webkit-keyframes fall-59 {
        62.954% {
            -webkit-transform: translate(28.33945vw, 62.954vh) scale(1.3306);
            transform: translate(28.33945vw, 62.954vh) scale(1.3306);
        }

        to {
            -webkit-transform: translate(30.131425vw, 100vh) scale(1.3306);
            transform: translate(30.131425vw, 100vh) scale(1.3306);
        }
    }

    @keyframes fall-59 {
        62.954% {
            -webkit-transform: translate(28.33945vw, 62.954vh) scale(1.3306);
            transform: translate(28.33945vw, 62.954vh) scale(1.3306);
        }

        to {
            -webkit-transform: translate(30.131425vw, 100vh) scale(1.3306);
            transform: translate(30.131425vw, 100vh) scale(1.3306);
        }
    }

    .snow:nth-child(60) {
        opacity: 0.2313;
        -webkit-transform: translate(3.5817vw, -10px) scale(0.8336);
        transform: translate(3.5817vw, -10px) scale(0.8336);
        -webkit-animation: fall-60 18s -11s linear infinite;
        animation: fall-60 18s -11s linear infinite;
    }

    @-webkit-keyframes fall-60 {
        51.361% {
            -webkit-transform: translate(4.0217vw, 51.361vh) scale(0.8336);
            transform: translate(4.0217vw, 51.361vh) scale(0.8336);
        }

        to {
            -webkit-transform: translate(3.8017vw, 100vh) scale(0.8336);
            transform: translate(3.8017vw, 100vh) scale(0.8336);
        }
    }

    @keyframes fall-60 {
        51.361% {
            -webkit-transform: translate(4.0217vw, 51.361vh) scale(0.8336);
            transform: translate(4.0217vw, 51.361vh) scale(0.8336);
        }

        to {
            -webkit-transform: translate(3.8017vw, 100vh) scale(0.8336);
            transform: translate(3.8017vw, 100vh) scale(0.8336);
        }
    }

    .snow:nth-child(61) {
        opacity: 0.4721;
        -webkit-transform: translate(69.0645vw, -10px) scale(0.9088);
        transform: translate(69.0645vw, -10px) scale(0.9088);
        -webkit-animation: fall-61 6s -17s linear infinite;
        animation: fall-61 6s -17s linear infinite;
    }

    @-webkit-keyframes fall-61 {
        61.934% {
            -webkit-transform: translate(71.84945vw, 61.934vh) scale(0.9088);
            transform: translate(71.84945vw, 61.934vh) scale(0.9088);
        }

        to {
            -webkit-transform: translate(70.456975vw, 100vh) scale(0.9088);
            transform: translate(70.456975vw, 100vh) scale(0.9088);
        }
    }

    @keyframes fall-61 {
        61.934% {
            -webkit-transform: translate(71.84945vw, 61.934vh) scale(0.9088);
            transform: translate(71.84945vw, 61.934vh) scale(0.9088);
        }

        to {
            -webkit-transform: translate(70.456975vw, 100vh) scale(0.9088);
            transform: translate(70.456975vw, 100vh) scale(0.9088);
        }
    }

    .snow:nth-child(62) {
        opacity: 0.7177;
        -webkit-transform: translate(95.3471vw, -10px) scale(1.1358);
        transform: translate(95.3471vw, -10px) scale(1.1358);
        -webkit-animation: fall-62 17s -18s linear infinite;
        animation: fall-62 17s -18s linear infinite;
    }

    @-webkit-keyframes fall-62 {
        55.877% {
            -webkit-transform: translate(93.2752vw, 55.877vh) scale(1.1358);
            transform: translate(93.2752vw, 55.877vh) scale(1.1358);
        }

        to {
            -webkit-transform: translate(94.31115vw, 100vh) scale(1.1358);
            transform: translate(94.31115vw, 100vh) scale(1.1358);
        }
    }

    @keyframes fall-62 {
        55.877% {
            -webkit-transform: translate(93.2752vw, 55.877vh) scale(1.1358);
            transform: translate(93.2752vw, 55.877vh) scale(1.1358);
        }

        to {
            -webkit-transform: translate(94.31115vw, 100vh) scale(1.1358);
            transform: translate(94.31115vw, 100vh) scale(1.1358);
        }
    }

    .snow:nth-child(63) {
        opacity: 0.9723;
        -webkit-transform: translate(62.7359vw, -10px) scale(1.0242);
        transform: translate(62.7359vw, -10px) scale(1.0242);
        -webkit-animation: fall-63 15s -27s linear infinite;
        animation: fall-63 15s -27s linear infinite;
    }

    @-webkit-keyframes fall-63 {
        79.783% {
            -webkit-transform: translate(66.7213vw, 79.783vh) scale(1.0242);
            transform: translate(66.7213vw, 79.783vh) scale(1.0242);
        }

        to {
            -webkit-transform: translate(64.7286vw, 100vh) scale(1.0242);
            transform: translate(64.7286vw, 100vh) scale(1.0242);
        }
    }

    @keyframes fall-63 {
        79.783% {
            -webkit-transform: translate(66.7213vw, 79.783vh) scale(1.0242);
            transform: translate(66.7213vw, 79.783vh) scale(1.0242);
        }

        to {
            -webkit-transform: translate(64.7286vw, 100vh) scale(1.0242);
            transform: translate(64.7286vw, 100vh) scale(1.0242);
        }
    }

    .snow:nth-child(64) {
        opacity: 0.6686;
        -webkit-transform: translate(68.3909vw, -10px) scale(1.2782);
        transform: translate(68.3909vw, -10px) scale(1.2782);
        -webkit-animation: fall-64 5s -2s linear infinite;
        animation: fall-64 5s -2s linear infinite;
    }

    @-webkit-keyframes fall-64 {
        60.449% {
            -webkit-transform: translate(71.59705vw, 60.449vh) scale(1.2782);
            transform: translate(71.59705vw, 60.449vh) scale(1.2782);
        }

        to {
            -webkit-transform: translate(69.993975vw, 100vh) scale(1.2782);
            transform: translate(69.993975vw, 100vh) scale(1.2782);
        }
    }

    @keyframes fall-64 {
        60.449% {
            -webkit-transform: translate(71.59705vw, 60.449vh) scale(1.2782);
            transform: translate(71.59705vw, 60.449vh) scale(1.2782);
        }

        to {
            -webkit-transform: translate(69.993975vw, 100vh) scale(1.2782);
            transform: translate(69.993975vw, 100vh) scale(1.2782);
        }
    }

    .snow:nth-child(65) {
        opacity: 0.1502;
        -webkit-transform: translate(75.7635vw, -10px) scale(0.8862);
        transform: translate(75.7635vw, -10px) scale(0.8862);
        -webkit-animation: fall-65 10s -1s linear infinite;
        animation: fall-65 10s -1s linear infinite;
    }

    @-webkit-keyframes fall-65 {
        62.058% {
            -webkit-transform: translate(79.6824vw, 62.058vh) scale(0.8862);
            transform: translate(79.6824vw, 62.058vh) scale(0.8862);
        }

        to {
            -webkit-transform: translate(77.72295vw, 100vh) scale(0.8862);
            transform: translate(77.72295vw, 100vh) scale(0.8862);
        }
    }

    @keyframes fall-65 {
        62.058% {
            -webkit-transform: translate(79.6824vw, 62.058vh) scale(0.8862);
            transform: translate(79.6824vw, 62.058vh) scale(0.8862);
        }

        to {
            -webkit-transform: translate(77.72295vw, 100vh) scale(0.8862);
            transform: translate(77.72295vw, 100vh) scale(0.8862);
        }
    }

    .snow:nth-child(66) {
        opacity: 0.7433;
        -webkit-transform: translate(54.1808vw, -10px) scale(0.7982);
        transform: translate(54.1808vw, -10px) scale(0.7982);
        -webkit-animation: fall-66 8s -28s linear infinite;
        animation: fall-66 8s -28s linear infinite;
    }

    @-webkit-keyframes fall-66 {
        77.907% {
            -webkit-transform: translate(50.68075vw, 77.907vh) scale(0.7982);
            transform: translate(50.68075vw, 77.907vh) scale(0.7982);
        }

        to {
            -webkit-transform: translate(52.430775vw, 100vh) scale(0.7982);
            transform: translate(52.430775vw, 100vh) scale(0.7982);
        }
    }

    @keyframes fall-66 {
        77.907% {
            -webkit-transform: translate(50.68075vw, 77.907vh) scale(0.7982);
            transform: translate(50.68075vw, 77.907vh) scale(0.7982);
        }

        to {
            -webkit-transform: translate(52.430775vw, 100vh) scale(0.7982);
            transform: translate(52.430775vw, 100vh) scale(0.7982);
        }
    }

    .snow:nth-child(67) {
        opacity: 0.622;
        -webkit-transform: translate(94.9753vw, -10px) scale(0.3794);
        transform: translate(94.9753vw, -10px) scale(0.3794);
        -webkit-animation: fall-67 13s -26s linear infinite;
        animation: fall-67 13s -26s linear infinite;
    }

    @-webkit-keyframes fall-67 {
        56.758% {
            -webkit-transform: translate(92.4674vw, 56.758vh) scale(0.3794);
            transform: translate(92.4674vw, 56.758vh) scale(0.3794);
        }

        to {
            -webkit-transform: translate(93.72135vw, 100vh) scale(0.3794);
            transform: translate(93.72135vw, 100vh) scale(0.3794);
        }
    }

    @keyframes fall-67 {
        56.758% {
            -webkit-transform: translate(92.4674vw, 56.758vh) scale(0.3794);
            transform: translate(92.4674vw, 56.758vh) scale(0.3794);
        }

        to {
            -webkit-transform: translate(93.72135vw, 100vh) scale(0.3794);
            transform: translate(93.72135vw, 100vh) scale(0.3794);
        }
    }

    .snow:nth-child(68) {
        opacity: 0.0124;
        -webkit-transform: translate(81.3207vw, -10px) scale(0.442);
        transform: translate(81.3207vw, -10px) scale(0.442);
        -webkit-animation: fall-68 8s -16s linear infinite;
        animation: fall-68 8s -16s linear infinite;
    }

    @-webkit-keyframes fall-68 {
        51.975% {
            -webkit-transform: translate(79.60375vw, 51.975vh) scale(0.442);
            transform: translate(79.60375vw, 51.975vh) scale(0.442);
        }

        to {
            -webkit-transform: translate(80.462225vw, 100vh) scale(0.442);
            transform: translate(80.462225vw, 100vh) scale(0.442);
        }
    }

    @keyframes fall-68 {
        51.975% {
            -webkit-transform: translate(79.60375vw, 51.975vh) scale(0.442);
            transform: translate(79.60375vw, 51.975vh) scale(0.442);
        }

        to {
            -webkit-transform: translate(80.462225vw, 100vh) scale(0.442);
            transform: translate(80.462225vw, 100vh) scale(0.442);
        }
    }

    .snow:nth-child(69) {
        opacity: 0.2013;
        -webkit-transform: translate(99.9307vw, -10px) scale(0.1624);
        transform: translate(99.9307vw, -10px) scale(0.1624);
        -webkit-animation: fall-69 14s -24s linear infinite;
        animation: fall-69 14s -24s linear infinite;
    }

    @-webkit-keyframes fall-69 {
        54.058% {
            -webkit-transform: translate(102.61405vw, 54.058vh) scale(0.1624);
            transform: translate(102.61405vw, 54.058vh) scale(0.1624);
        }

        to {
            -webkit-transform: translate(101.272375vw, 100vh) scale(0.1624);
            transform: translate(101.272375vw, 100vh) scale(0.1624);
        }
    }

    @keyframes fall-69 {
        54.058% {
            -webkit-transform: translate(102.61405vw, 54.058vh) scale(0.1624);
            transform: translate(102.61405vw, 54.058vh) scale(0.1624);
        }

        to {
            -webkit-transform: translate(101.272375vw, 100vh) scale(0.1624);
            transform: translate(101.272375vw, 100vh) scale(0.1624);
        }
    }

    .snow:nth-child(70) {
        opacity: 0.0199;
        -webkit-transform: translate(15.2096vw, -10px) scale(1.5882);
        transform: translate(15.2096vw, -10px) scale(1.5882);
        -webkit-animation: fall-70 6s -4s linear infinite;
        animation: fall-70 6s -4s linear infinite;
    }

    @-webkit-keyframes fall-70 {
        37.707% {
            -webkit-transform: translate(14.712vw, 37.707vh) scale(1.5882);
            transform: translate(14.712vw, 37.707vh) scale(1.5882);
        }

        to {
            -webkit-transform: translate(14.9608vw, 100vh) scale(1.5882);
            transform: translate(14.9608vw, 100vh) scale(1.5882);
        }
    }

    @keyframes fall-70 {
        37.707% {
            -webkit-transform: translate(14.712vw, 37.707vh) scale(1.5882);
            transform: translate(14.712vw, 37.707vh) scale(1.5882);
        }

        to {
            -webkit-transform: translate(14.9608vw, 100vh) scale(1.5882);
            transform: translate(14.9608vw, 100vh) scale(1.5882);
        }
    }

    .snow:nth-child(71) {
        opacity: 0.8616;
        -webkit-transform: translate(47.3383vw, -10px) scale(0.3992);
        transform: translate(47.3383vw, -10px) scale(0.3992);
        -webkit-animation: fall-71 5s -5s linear infinite;
        animation: fall-71 5s -5s linear infinite;
    }

    @-webkit-keyframes fall-71 {
        42.601% {
            -webkit-transform: translate(49.12265vw, 42.601vh) scale(0.3992);
            transform: translate(49.12265vw, 42.601vh) scale(0.3992);
        }

        to {
            -webkit-transform: translate(48.230475vw, 100vh) scale(0.3992);
            transform: translate(48.230475vw, 100vh) scale(0.3992);
        }
    }

    @keyframes fall-71 {
        42.601% {
            -webkit-transform: translate(49.12265vw, 42.601vh) scale(0.3992);
            transform: translate(49.12265vw, 42.601vh) scale(0.3992);
        }

        to {
            -webkit-transform: translate(48.230475vw, 100vh) scale(0.3992);
            transform: translate(48.230475vw, 100vh) scale(0.3992);
        }
    }

    .snow:nth-child(72) {
        opacity: 0.2694;
        -webkit-transform: translate(88.5382vw, -10px) scale(1.3792);
        transform: translate(88.5382vw, -10px) scale(1.3792);
        -webkit-animation: fall-72 10s -4s linear infinite;
        animation: fall-72 10s -4s linear infinite;
    }

    @-webkit-keyframes fall-72 {
        59.883% {
            -webkit-transform: translate(90.66255vw, 59.883vh) scale(1.3792);
            transform: translate(90.66255vw, 59.883vh) scale(1.3792);
        }

        to {
            -webkit-transform: translate(89.600375vw, 100vh) scale(1.3792);
            transform: translate(89.600375vw, 100vh) scale(1.3792);
        }
    }

    @keyframes fall-72 {
        59.883% {
            -webkit-transform: translate(90.66255vw, 59.883vh) scale(1.3792);
            transform: translate(90.66255vw, 59.883vh) scale(1.3792);
        }

        to {
            -webkit-transform: translate(89.600375vw, 100vh) scale(1.3792);
            transform: translate(89.600375vw, 100vh) scale(1.3792);
        }
    }

    .snow:nth-child(73) {
        opacity: 0.2997;
        -webkit-transform: translate(96.9816vw, -10px) scale(1.5402);
        transform: translate(96.9816vw, -10px) scale(1.5402);
        -webkit-animation: fall-73 12s -6s linear infinite;
        animation: fall-73 12s -6s linear infinite;
    }

    @-webkit-keyframes fall-73 {
        58.064% {
            -webkit-transform: translate(97.62805vw, 58.064vh) scale(1.5402);
            transform: translate(97.62805vw, 58.064vh) scale(1.5402);
        }

        to {
            -webkit-transform: translate(97.304825vw, 100vh) scale(1.5402);
            transform: translate(97.304825vw, 100vh) scale(1.5402);
        }
    }

    @keyframes fall-73 {
        58.064% {
            -webkit-transform: translate(97.62805vw, 58.064vh) scale(1.5402);
            transform: translate(97.62805vw, 58.064vh) scale(1.5402);
        }

        to {
            -webkit-transform: translate(97.304825vw, 100vh) scale(1.5402);
            transform: translate(97.304825vw, 100vh) scale(1.5402);
        }
    }

    .snow:nth-child(74) {
        opacity: 0.1629;
        -webkit-transform: translate(47.7829vw, -10px) scale(0.7442);
        transform: translate(47.7829vw, -10px) scale(0.7442);
        -webkit-animation: fall-74 9s -1s linear infinite;
        animation: fall-74 9s -1s linear infinite;
    }

    @-webkit-keyframes fall-74 {
        38.758% {
            -webkit-transform: translate(45.6547vw, 38.758vh) scale(0.7442);
            transform: translate(45.6547vw, 38.758vh) scale(0.7442);
        }

        to {
            -webkit-transform: translate(46.7188vw, 100vh) scale(0.7442);
            transform: translate(46.7188vw, 100vh) scale(0.7442);
        }
    }

    @keyframes fall-74 {
        38.758% {
            -webkit-transform: translate(45.6547vw, 38.758vh) scale(0.7442);
            transform: translate(45.6547vw, 38.758vh) scale(0.7442);
        }

        to {
            -webkit-transform: translate(46.7188vw, 100vh) scale(0.7442);
            transform: translate(46.7188vw, 100vh) scale(0.7442);
        }
    }

    .snow:nth-child(75) {
        opacity: 0.744;
        -webkit-transform: translate(89.2722vw, -10px) scale(0.6934);
        transform: translate(89.2722vw, -10px) scale(0.6934);
        -webkit-animation: fall-75 7s -22s linear infinite;
        animation: fall-75 7s -22s linear infinite;
    }

    @-webkit-keyframes fall-75 {
        30.618% {
            -webkit-transform: translate(87.8017vw, 30.618vh) scale(0.6934);
            transform: translate(87.8017vw, 30.618vh) scale(0.6934);
        }

        to {
            -webkit-transform: translate(88.53695vw, 100vh) scale(0.6934);
            transform: translate(88.53695vw, 100vh) scale(0.6934);
        }
    }

    @keyframes fall-75 {
        30.618% {
            -webkit-transform: translate(87.8017vw, 30.618vh) scale(0.6934);
            transform: translate(87.8017vw, 30.618vh) scale(0.6934);
        }

        to {
            -webkit-transform: translate(88.53695vw, 100vh) scale(0.6934);
            transform: translate(88.53695vw, 100vh) scale(0.6934);
        }
    }

    .snow:nth-child(76) {
        opacity: 0.3383;
        -webkit-transform: translate(99.2026vw, -10px) scale(0.303);
        transform: translate(99.2026vw, -10px) scale(0.303);
        -webkit-animation: fall-76 19s -29s linear infinite;
        animation: fall-76 19s -29s linear infinite;
    }

    @-webkit-keyframes fall-76 {
        60.807% {
            -webkit-transform: translate(103.3903vw, 60.807vh) scale(0.303);
            transform: translate(103.3903vw, 60.807vh) scale(0.303);
        }

        to {
            -webkit-transform: translate(101.29645vw, 100vh) scale(0.303);
            transform: translate(101.29645vw, 100vh) scale(0.303);
        }
    }

    @keyframes fall-76 {
        60.807% {
            -webkit-transform: translate(103.3903vw, 60.807vh) scale(0.303);
            transform: translate(103.3903vw, 60.807vh) scale(0.303);
        }

        to {
            -webkit-transform: translate(101.29645vw, 100vh) scale(0.303);
            transform: translate(101.29645vw, 100vh) scale(0.303);
        }
    }

    .snow:nth-child(77) {
        opacity: 0.4406;
        -webkit-transform: translate(3.8635vw, -10px) scale(1.2084);
        transform: translate(3.8635vw, -10px) scale(1.2084);
        -webkit-animation: fall-77 20s -12s linear infinite;
        animation: fall-77 20s -12s linear infinite;
    }

    @-webkit-keyframes fall-77 {
        63.44% {
            -webkit-transform: translate(4.5415vw, 63.44vh) scale(1.2084);
            transform: translate(4.5415vw, 63.44vh) scale(1.2084);
        }

        to {
            -webkit-transform: translate(4.2025vw, 100vh) scale(1.2084);
            transform: translate(4.2025vw, 100vh) scale(1.2084);
        }
    }

    @keyframes fall-77 {
        63.44% {
            -webkit-transform: translate(4.5415vw, 63.44vh) scale(1.2084);
            transform: translate(4.5415vw, 63.44vh) scale(1.2084);
        }

        to {
            -webkit-transform: translate(4.2025vw, 100vh) scale(1.2084);
            transform: translate(4.2025vw, 100vh) scale(1.2084);
        }
    }

    .snow:nth-child(78) {
        opacity: 0.2354;
        -webkit-transform: translate(84.7813vw, -10px) scale(1.2446);
        transform: translate(84.7813vw, -10px) scale(1.2446);
        -webkit-animation: fall-78 15s -2s linear infinite;
        animation: fall-78 15s -2s linear infinite;
    }

    @-webkit-keyframes fall-78 {
        51.525% {
            -webkit-transform: translate(88.2978vw, 51.525vh) scale(1.2446);
            transform: translate(88.2978vw, 51.525vh) scale(1.2446);
        }

        to {
            -webkit-transform: translate(86.53955vw, 100vh) scale(1.2446);
            transform: translate(86.53955vw, 100vh) scale(1.2446);
        }
    }

    @keyframes fall-78 {
        51.525% {
            -webkit-transform: translate(88.2978vw, 51.525vh) scale(1.2446);
            transform: translate(88.2978vw, 51.525vh) scale(1.2446);
        }

        to {
            -webkit-transform: translate(86.53955vw, 100vh) scale(1.2446);
            transform: translate(86.53955vw, 100vh) scale(1.2446);
        }
    }

    .snow:nth-child(79) {
        opacity: 0.9259;
        -webkit-transform: translate(45.0977vw, -10px) scale(0.125);
        transform: translate(45.0977vw, -10px) scale(0.125);
        -webkit-animation: fall-79 12s -18s linear infinite;
        animation: fall-79 12s -18s linear infinite;
    }

    @-webkit-keyframes fall-79 {
        73.241% {
            -webkit-transform: translate(44.7514vw, 73.241vh) scale(0.125);
            transform: translate(44.7514vw, 73.241vh) scale(0.125);
        }

        to {
            -webkit-transform: translate(44.92455vw, 100vh) scale(0.125);
            transform: translate(44.92455vw, 100vh) scale(0.125);
        }
    }

    @keyframes fall-79 {
        73.241% {
            -webkit-transform: translate(44.7514vw, 73.241vh) scale(0.125);
            transform: translate(44.7514vw, 73.241vh) scale(0.125);
        }

        to {
            -webkit-transform: translate(44.92455vw, 100vh) scale(0.125);
            transform: translate(44.92455vw, 100vh) scale(0.125);
        }
    }

    .snow:nth-child(80) {
        opacity: 0.9774;
        -webkit-transform: translate(84.2525vw, -10px) scale(1.3902);
        transform: translate(84.2525vw, -10px) scale(1.3902);
        -webkit-animation: fall-80 15s -28s linear infinite;
        animation: fall-80 15s -28s linear infinite;
    }

    @-webkit-keyframes fall-80 {
        62.583% {
            -webkit-transform: translate(88.76735vw, 62.583vh) scale(1.3902);
            transform: translate(88.76735vw, 62.583vh) scale(1.3902);
        }

        to {
            -webkit-transform: translate(86.509925vw, 100vh) scale(1.3902);
            transform: translate(86.509925vw, 100vh) scale(1.3902);
        }
    }

    @keyframes fall-80 {
        62.583% {
            -webkit-transform: translate(88.76735vw, 62.583vh) scale(1.3902);
            transform: translate(88.76735vw, 62.583vh) scale(1.3902);
        }

        to {
            -webkit-transform: translate(86.509925vw, 100vh) scale(1.3902);
            transform: translate(86.509925vw, 100vh) scale(1.3902);
        }
    }

    .snow:nth-child(81) {
        opacity: 0.8576;
        -webkit-transform: translate(74.1006vw, -10px) scale(0.2966);
        transform: translate(74.1006vw, -10px) scale(0.2966);
        -webkit-animation: fall-81 5s -9s linear infinite;
        animation: fall-81 5s -9s linear infinite;
    }

    @-webkit-keyframes fall-81 {
        46.583% {
            -webkit-transform: translate(72.50315vw, 46.583vh) scale(0.2966);
            transform: translate(72.50315vw, 46.583vh) scale(0.2966);
        }

        to {
            -webkit-transform: translate(73.301875vw, 100vh) scale(0.2966);
            transform: translate(73.301875vw, 100vh) scale(0.2966);
        }
    }

    @keyframes fall-81 {
        46.583% {
            -webkit-transform: translate(72.50315vw, 46.583vh) scale(0.2966);
            transform: translate(72.50315vw, 46.583vh) scale(0.2966);
        }

        to {
            -webkit-transform: translate(73.301875vw, 100vh) scale(0.2966);
            transform: translate(73.301875vw, 100vh) scale(0.2966);
        }
    }

    .snow:nth-child(82) {
        opacity: 0.9224;
        -webkit-transform: translate(2.6177vw, -10px) scale(1.307);
        transform: translate(2.6177vw, -10px) scale(1.307);
        -webkit-animation: fall-82 13s -21s linear infinite;
        animation: fall-82 13s -21s linear infinite;
    }

    @-webkit-keyframes fall-82 {
        79.226% {
            -webkit-transform: translate(4.91005vw, 79.226vh) scale(1.307);
            transform: translate(4.91005vw, 79.226vh) scale(1.307);
        }

        to {
            -webkit-transform: translate(3.763875vw, 100vh) scale(1.307);
            transform: translate(3.763875vw, 100vh) scale(1.307);
        }
    }

    @keyframes fall-82 {
        79.226% {
            -webkit-transform: translate(4.91005vw, 79.226vh) scale(1.307);
            transform: translate(4.91005vw, 79.226vh) scale(1.307);
        }

        to {
            -webkit-transform: translate(3.763875vw, 100vh) scale(1.307);
            transform: translate(3.763875vw, 100vh) scale(1.307);
        }
    }

    .snow:nth-child(83) {
        opacity: 0.0594;
        -webkit-transform: translate(61.821vw, -10px) scale(0.063);
        transform: translate(61.821vw, -10px) scale(0.063);
        -webkit-animation: fall-83 11s -29s linear infinite;
        animation: fall-83 11s -29s linear infinite;
    }

    @-webkit-keyframes fall-83 {
        50.897% {
            -webkit-transform: translate(64.12225vw, 50.897vh) scale(0.063);
            transform: translate(64.12225vw, 50.897vh) scale(0.063);
        }

        to {
            -webkit-transform: translate(62.971625vw, 100vh) scale(0.063);
            transform: translate(62.971625vw, 100vh) scale(0.063);
        }
    }

    @keyframes fall-83 {
        50.897% {
            -webkit-transform: translate(64.12225vw, 50.897vh) scale(0.063);
            transform: translate(64.12225vw, 50.897vh) scale(0.063);
        }

        to {
            -webkit-transform: translate(62.971625vw, 100vh) scale(0.063);
            transform: translate(62.971625vw, 100vh) scale(0.063);
        }
    }

    .snow:nth-child(84) {
        opacity: 0.4063;
        -webkit-transform: translate(3.4722vw, -10px) scale(0.0372);
        transform: translate(3.4722vw, -10px) scale(0.0372);
        -webkit-animation: fall-84 13s -30s linear infinite;
        animation: fall-84 13s -30s linear infinite;
    }

    @-webkit-keyframes fall-84 {
        50.692% {
            -webkit-transform: translate(8.26255vw, 50.692vh) scale(0.0372);
            transform: translate(8.26255vw, 50.692vh) scale(0.0372);
        }

        to {
            -webkit-transform: translate(5.867375vw, 100vh) scale(0.0372);
            transform: translate(5.867375vw, 100vh) scale(0.0372);
        }
    }

    @keyframes fall-84 {
        50.692% {
            -webkit-transform: translate(8.26255vw, 50.692vh) scale(0.0372);
            transform: translate(8.26255vw, 50.692vh) scale(0.0372);
        }

        to {
            -webkit-transform: translate(5.867375vw, 100vh) scale(0.0372);
            transform: translate(5.867375vw, 100vh) scale(0.0372);
        }
    }

    .snow:nth-child(85) {
        opacity: 0.7048;
        -webkit-transform: translate(24.6356vw, -10px) scale(1.4334);
        transform: translate(24.6356vw, -10px) scale(1.4334);
        -webkit-animation: fall-85 20s -13s linear infinite;
        animation: fall-85 20s -13s linear infinite;
    }

    @-webkit-keyframes fall-85 {
        73.595% {
            -webkit-transform: translate(21.7926vw, 73.595vh) scale(1.4334);
            transform: translate(21.7926vw, 73.595vh) scale(1.4334);
        }

        to {
            -webkit-transform: translate(23.2141vw, 100vh) scale(1.4334);
            transform: translate(23.2141vw, 100vh) scale(1.4334);
        }
    }

    @keyframes fall-85 {
        73.595% {
            -webkit-transform: translate(21.7926vw, 73.595vh) scale(1.4334);
            transform: translate(21.7926vw, 73.595vh) scale(1.4334);
        }

        to {
            -webkit-transform: translate(23.2141vw, 100vh) scale(1.4334);
            transform: translate(23.2141vw, 100vh) scale(1.4334);
        }
    }

    .snow:nth-child(86) {
        opacity: 0.4261;
        -webkit-transform: translate(22.9072vw, -10px) scale(1.0428);
        transform: translate(22.9072vw, -10px) scale(1.0428);
        -webkit-animation: fall-86 17s -11s linear infinite;
        animation: fall-86 17s -11s linear infinite;
    }

    @-webkit-keyframes fall-86 {
        39.442% {
            -webkit-transform: translate(24.7965vw, 39.442vh) scale(1.0428);
            transform: translate(24.7965vw, 39.442vh) scale(1.0428);
        }

        to {
            -webkit-transform: translate(23.85185vw, 100vh) scale(1.0428);
            transform: translate(23.85185vw, 100vh) scale(1.0428);
        }
    }

    @keyframes fall-86 {
        39.442% {
            -webkit-transform: translate(24.7965vw, 39.442vh) scale(1.0428);
            transform: translate(24.7965vw, 39.442vh) scale(1.0428);
        }

        to {
            -webkit-transform: translate(23.85185vw, 100vh) scale(1.0428);
            transform: translate(23.85185vw, 100vh) scale(1.0428);
        }
    }

    .snow:nth-child(87) {
        opacity: 0.0921;
        -webkit-transform: translate(50.0684vw, -10px) scale(0.1034);
        transform: translate(50.0684vw, -10px) scale(0.1034);
        -webkit-animation: fall-87 13s -19s linear infinite;
        animation: fall-87 13s -19s linear infinite;
    }

    @-webkit-keyframes fall-87 {
        67.804% {
            -webkit-transform: translate(50.134vw, 67.804vh) scale(0.1034);
            transform: translate(50.134vw, 67.804vh) scale(0.1034);
        }

        to {
            -webkit-transform: translate(50.1012vw, 100vh) scale(0.1034);
            transform: translate(50.1012vw, 100vh) scale(0.1034);
        }
    }

    @keyframes fall-87 {
        67.804% {
            -webkit-transform: translate(50.134vw, 67.804vh) scale(0.1034);
            transform: translate(50.134vw, 67.804vh) scale(0.1034);
        }

        to {
            -webkit-transform: translate(50.1012vw, 100vh) scale(0.1034);
            transform: translate(50.1012vw, 100vh) scale(0.1034);
        }
    }

    .snow:nth-child(88) {
        opacity: 0.6937;
        -webkit-transform: translate(19.2493vw, -10px) scale(1.666);
        transform: translate(19.2493vw, -10px) scale(1.666);
        -webkit-animation: fall-88 12s -30s linear infinite;
        animation: fall-88 12s -30s linear infinite;
    }

    @-webkit-keyframes fall-88 {
        79.799% {
            -webkit-transform: translate(23.1645vw, 79.799vh) scale(1.666);
            transform: translate(23.1645vw, 79.799vh) scale(1.666);
        }

        to {
            -webkit-transform: translate(21.2069vw, 100vh) scale(1.666);
            transform: translate(21.2069vw, 100vh) scale(1.666);
        }
    }

    @keyframes fall-88 {
        79.799% {
            -webkit-transform: translate(23.1645vw, 79.799vh) scale(1.666);
            transform: translate(23.1645vw, 79.799vh) scale(1.666);
        }

        to {
            -webkit-transform: translate(21.2069vw, 100vh) scale(1.666);
            transform: translate(21.2069vw, 100vh) scale(1.666);
        }
    }

    .snow:nth-child(89) {
        opacity: 0.5184;
        -webkit-transform: translate(58.8023vw, -10px) scale(1.0072);
        transform: translate(58.8023vw, -10px) scale(1.0072);
        -webkit-animation: fall-89 17s -26s linear infinite;
        animation: fall-89 17s -26s linear infinite;
    }

    @-webkit-keyframes fall-89 {
        37.774% {
            -webkit-transform: translate(63.28545vw, 37.774vh) scale(1.0072);
            transform: translate(63.28545vw, 37.774vh) scale(1.0072);
        }

        to {
            -webkit-transform: translate(61.043875vw, 100vh) scale(1.0072);
            transform: translate(61.043875vw, 100vh) scale(1.0072);
        }
    }

    @keyframes fall-89 {
        37.774% {
            -webkit-transform: translate(63.28545vw, 37.774vh) scale(1.0072);
            transform: translate(63.28545vw, 37.774vh) scale(1.0072);
        }

        to {
            -webkit-transform: translate(61.043875vw, 100vh) scale(1.0072);
            transform: translate(61.043875vw, 100vh) scale(1.0072);
        }
    }

    .snow:nth-child(90) {
        opacity: 0.152;
        -webkit-transform: translate(67.672vw, -10px) scale(1.6746);
        transform: translate(67.672vw, -10px) scale(1.6746);
        -webkit-animation: fall-90 20s -19s linear infinite;
        animation: fall-90 20s -19s linear infinite;
    }

    @-webkit-keyframes fall-90 {
        78.31% {
            -webkit-transform: translate(63.22685vw, 78.31vh) scale(1.6746);
            transform: translate(63.22685vw, 78.31vh) scale(1.6746);
        }

        to {
            -webkit-transform: translate(65.449425vw, 100vh) scale(1.6746);
            transform: translate(65.449425vw, 100vh) scale(1.6746);
        }
    }

    @keyframes fall-90 {
        78.31% {
            -webkit-transform: translate(63.22685vw, 78.31vh) scale(1.6746);
            transform: translate(63.22685vw, 78.31vh) scale(1.6746);
        }

        to {
            -webkit-transform: translate(65.449425vw, 100vh) scale(1.6746);
            transform: translate(65.449425vw, 100vh) scale(1.6746);
        }
    }

    .snow:nth-child(91) {
        opacity: 0.0947;
        -webkit-transform: translate(24.0591vw, -10px) scale(1.467);
        transform: translate(24.0591vw, -10px) scale(1.467);
        -webkit-animation: fall-91 6s -6s linear infinite;
        animation: fall-91 6s -6s linear infinite;
    }

    @-webkit-keyframes fall-91 {
        71.127% {
            -webkit-transform: translate(25.3464vw, 71.127vh) scale(1.467);
            transform: translate(25.3464vw, 71.127vh) scale(1.467);
        }

        to {
            -webkit-transform: translate(24.70275vw, 100vh) scale(1.467);
            transform: translate(24.70275vw, 100vh) scale(1.467);
        }
    }

    @keyframes fall-91 {
        71.127% {
            -webkit-transform: translate(25.3464vw, 71.127vh) scale(1.467);
            transform: translate(25.3464vw, 71.127vh) scale(1.467);
        }

        to {
            -webkit-transform: translate(24.70275vw, 100vh) scale(1.467);
            transform: translate(24.70275vw, 100vh) scale(1.467);
        }
    }

    .snow:nth-child(92) {
        opacity: 0.8298;
        -webkit-transform: translate(99.0382vw, -10px) scale(1.4742);
        transform: translate(99.0382vw, -10px) scale(1.4742);
        -webkit-animation: fall-92 19s -17s linear infinite;
        animation: fall-92 19s -17s linear infinite;
    }

    @-webkit-keyframes fall-92 {
        71.547% {
            -webkit-transform: translate(99.5527vw, 71.547vh) scale(1.4742);
            transform: translate(99.5527vw, 71.547vh) scale(1.4742);
        }

        to {
            -webkit-transform: translate(99.29545vw, 100vh) scale(1.4742);
            transform: translate(99.29545vw, 100vh) scale(1.4742);
        }
    }

    @keyframes fall-92 {
        71.547% {
            -webkit-transform: translate(99.5527vw, 71.547vh) scale(1.4742);
            transform: translate(99.5527vw, 71.547vh) scale(1.4742);
        }

        to {
            -webkit-transform: translate(99.29545vw, 100vh) scale(1.4742);
            transform: translate(99.29545vw, 100vh) scale(1.4742);
        }
    }

    .snow:nth-child(93) {
        opacity: 0.923;
        -webkit-transform: translate(74.3655vw, -10px) scale(0.8312);
        transform: translate(74.3655vw, -10px) scale(0.8312);
        -webkit-animation: fall-93 14s -22s linear infinite;
        animation: fall-93 14s -22s linear infinite;
    }

    @-webkit-keyframes fall-93 {
        63.37% {
            -webkit-transform: translate(78.7323vw, 63.37vh) scale(0.8312);
            transform: translate(78.7323vw, 63.37vh) scale(0.8312);
        }

        to {
            -webkit-transform: translate(76.5489vw, 100vh) scale(0.8312);
            transform: translate(76.5489vw, 100vh) scale(0.8312);
        }
    }

    @keyframes fall-93 {
        63.37% {
            -webkit-transform: translate(78.7323vw, 63.37vh) scale(0.8312);
            transform: translate(78.7323vw, 63.37vh) scale(0.8312);
        }

        to {
            -webkit-transform: translate(76.5489vw, 100vh) scale(0.8312);
            transform: translate(76.5489vw, 100vh) scale(0.8312);
        }
    }

    .snow:nth-child(94) {
        opacity: 0.907;
        -webkit-transform: translate(88.4236vw, -10px) scale(1.879);
        transform: translate(88.4236vw, -10px) scale(1.879);
        -webkit-animation: fall-94 19s -14s linear infinite;
        animation: fall-94 19s -14s linear infinite;
    }

    @-webkit-keyframes fall-94 {
        30.757% {
            -webkit-transform: translate(93.3955vw, 30.757vh) scale(1.879);
            transform: translate(93.3955vw, 30.757vh) scale(1.879);
        }

        to {
            -webkit-transform: translate(90.90955vw, 100vh) scale(1.879);
            transform: translate(90.90955vw, 100vh) scale(1.879);
        }
    }

    @keyframes fall-94 {
        30.757% {
            -webkit-transform: translate(93.3955vw, 30.757vh) scale(1.879);
            transform: translate(93.3955vw, 30.757vh) scale(1.879);
        }

        to {
            -webkit-transform: translate(90.90955vw, 100vh) scale(1.879);
            transform: translate(90.90955vw, 100vh) scale(1.879);
        }
    }

    .snow:nth-child(95) {
        opacity: 0.1666;
        -webkit-transform: translate(19.7719vw, -10px) scale(1.5866);
        transform: translate(19.7719vw, -10px) scale(1.5866);
        -webkit-animation: fall-95 6s -20s linear infinite;
        animation: fall-95 6s -20s linear infinite;
    }

    @-webkit-keyframes fall-95 {
        38.52% {
            -webkit-transform: translate(21.0704vw, 38.52vh) scale(1.5866);
            transform: translate(21.0704vw, 38.52vh) scale(1.5866);
        }

        to {
            -webkit-transform: translate(20.42115vw, 100vh) scale(1.5866);
            transform: translate(20.42115vw, 100vh) scale(1.5866);
        }
    }

    @keyframes fall-95 {
        38.52% {
            -webkit-transform: translate(21.0704vw, 38.52vh) scale(1.5866);
            transform: translate(21.0704vw, 38.52vh) scale(1.5866);
        }

        to {
            -webkit-transform: translate(20.42115vw, 100vh) scale(1.5866);
            transform: translate(20.42115vw, 100vh) scale(1.5866);
        }
    }

    .snow:nth-child(96) {
        opacity: 0.3491;
        -webkit-transform: translate(16.5464vw, -10px) scale(0.5582);
        transform: translate(16.5464vw, -10px) scale(0.5582);
        -webkit-animation: fall-96 6s -11s linear infinite;
        animation: fall-96 6s -11s linear infinite;
    }

    @-webkit-keyframes fall-96 {
        72.02% {
            -webkit-transform: translate(11.792vw, 72.02vh) scale(0.5582);
            transform: translate(11.792vw, 72.02vh) scale(0.5582);
        }

        to {
            -webkit-transform: translate(14.1692vw, 100vh) scale(0.5582);
            transform: translate(14.1692vw, 100vh) scale(0.5582);
        }
    }

    @keyframes fall-96 {
        72.02% {
            -webkit-transform: translate(11.792vw, 72.02vh) scale(0.5582);
            transform: translate(11.792vw, 72.02vh) scale(0.5582);
        }

        to {
            -webkit-transform: translate(14.1692vw, 100vh) scale(0.5582);
            transform: translate(14.1692vw, 100vh) scale(0.5582);
        }
    }

    .snow:nth-child(97) {
        opacity: 0.5195;
        -webkit-transform: translate(9.9944vw, -10px) scale(1.6994);
        transform: translate(9.9944vw, -10px) scale(1.6994);
        -webkit-animation: fall-97 14s -17s linear infinite;
        animation: fall-97 14s -17s linear infinite;
    }

    @-webkit-keyframes fall-97 {
        76.296% {
            -webkit-transform: translate(10.04195vw, 76.296vh) scale(1.6994);
            transform: translate(10.04195vw, 76.296vh) scale(1.6994);
        }

        to {
            -webkit-transform: translate(10.018175vw, 100vh) scale(1.6994);
            transform: translate(10.018175vw, 100vh) scale(1.6994);
        }
    }

    @keyframes fall-97 {
        76.296% {
            -webkit-transform: translate(10.04195vw, 76.296vh) scale(1.6994);
            transform: translate(10.04195vw, 76.296vh) scale(1.6994);
        }

        to {
            -webkit-transform: translate(10.018175vw, 100vh) scale(1.6994);
            transform: translate(10.018175vw, 100vh) scale(1.6994);
        }
    }

    .snow:nth-child(98) {
        opacity: 0.0004;
        -webkit-transform: translate(56.1193vw, -10px) scale(1.74);
        transform: translate(56.1193vw, -10px) scale(1.74);
        -webkit-animation: fall-98 11s -21s linear infinite;
        animation: fall-98 11s -21s linear infinite;
    }

    @-webkit-keyframes fall-98 {
        78.588% {
            -webkit-transform: translate(52.2263vw, 78.588vh) scale(1.74);
            transform: translate(52.2263vw, 78.588vh) scale(1.74);
        }

        to {
            -webkit-transform: translate(54.1728vw, 100vh) scale(1.74);
            transform: translate(54.1728vw, 100vh) scale(1.74);
        }
    }

    @keyframes fall-98 {
        78.588% {
            -webkit-transform: translate(52.2263vw, 78.588vh) scale(1.74);
            transform: translate(52.2263vw, 78.588vh) scale(1.74);
        }

        to {
            -webkit-transform: translate(54.1728vw, 100vh) scale(1.74);
            transform: translate(54.1728vw, 100vh) scale(1.74);
        }
    }

    .snow:nth-child(99) {
        opacity: 0.9957;
        -webkit-transform: translate(87.8991vw, -10px) scale(1.6082);
        transform: translate(87.8991vw, -10px) scale(1.6082);
        -webkit-animation: fall-99 6s -12s linear infinite;
        animation: fall-99 6s -12s linear infinite;
    }

    @-webkit-keyframes fall-99 {
        54.619% {
            -webkit-transform: translate(83.0906vw, 54.619vh) scale(1.6082);
            transform: translate(83.0906vw, 54.619vh) scale(1.6082);
        }

        to {
            -webkit-transform: translate(85.49485vw, 100vh) scale(1.6082);
            transform: translate(85.49485vw, 100vh) scale(1.6082);
        }
    }

    @keyframes fall-99 {
        54.619% {
            -webkit-transform: translate(83.0906vw, 54.619vh) scale(1.6082);
            transform: translate(83.0906vw, 54.619vh) scale(1.6082);
        }

        to {
            -webkit-transform: translate(85.49485vw, 100vh) scale(1.6082);
            transform: translate(85.49485vw, 100vh) scale(1.6082);
        }
    }

    .snow:nth-child(100) {
        opacity: 0.2157;
        -webkit-transform: translate(94.4036vw, -10px) scale(1.202);
        transform: translate(94.4036vw, -10px) scale(1.202);
        -webkit-animation: fall-100 8s -9s linear infinite;
        animation: fall-100 8s -9s linear infinite;
    }

    @-webkit-keyframes fall-100 {
        63.219% {
            -webkit-transform: translate(91.46285vw, 63.219vh) scale(1.202);
            transform: translate(91.46285vw, 63.219vh) scale(1.202);
        }

        to {
            -webkit-transform: translate(92.933225vw, 100vh) scale(1.202);
            transform: translate(92.933225vw, 100vh) scale(1.202);
        }
    }

    @keyframes fall-100 {
        63.219% {
            -webkit-transform: translate(91.46285vw, 63.219vh) scale(1.202);
            transform: translate(91.46285vw, 63.219vh) scale(1.202);
        }

        to {
            -webkit-transform: translate(92.933225vw, 100vh) scale(1.202);
            transform: translate(92.933225vw, 100vh) scale(1.202);
        }
    }
    </style>
    <script>
    window.console = window.console || function(t) {};
    </script>
    <script>
    if (document.location.search.match(/type=embed/gi)) {
        window.parent.postMessage("resize", "*");
    }
    </script>
</head>

<body translate="no">
    <div class="container" data-weather="cloudy">
        <div class="weather-info">
            <div data-weather-selected="sunny" class="weather-info__icon"> <i class="fas fa-2x fa-sun"></i> </div>
            <div data-weather-selected="cloudy" class="weather-info__icon weather-info__icon--active"> <i class="fas fa-2x fa-cloud"></i> </div>
            <div data-weather-selected="rainy" class="weather-info__icon"> <i class="fas fa-2x fa-cloud-showers-heavy"></i>
            </div>
            <div data-weather-selected="fog" class="weather-info__icon"> <i class="fas fa-2x fa-smog"></i> </div>
            <div data-weather-selected="snow" class="weather-info__icon"> <i class="fas fa-2x fa-snowflake"></i> </div>
        </div>
        <div class="visualisation-container">
            <div class="visualisation-container--sunny">
                <div class="sun">
                    <div class="ray_box">
                        <div class="ray"></div>
                        <div class="ray"></div>
                        <div class="ray"></div>
                        <div class="ray"></div>
                        <div class="ray"></div>
                        <div class="ray"></div>
                        <div class="ray"></div>
                        <div class="ray"></div>
                        <div class="ray"></div>
                        <div class="ray"></div>
                        <div class="ray"></div>
                        <div class="ray"></div>
                        <div class="ray"></div>
                        <div class="ray"></div>
                        <div class="ray"></div>
                        <div class="ray"></div>
                        <div class="ray"></div>
                        <div class="ray"></div>
                        <div class="ray"></div>
                        <div class="ray"></div>
                    </div>
                </div>
            </div>
            <div class="visualisation-container--rainy">
                <div class="rain"></div>
                <div class="rain"></div>
                <div class="rain"></div>
                <div class="rain"></div>
                <div class="rain"></div>
                <div class="rain"></div>
                <div class="rain"></div>
                <div class="rain"></div>
                <div class="rain"></div>
                <div class="rain"></div>
                <div class="rain"></div>
                <div class="rain"></div>
                <div class="rain"></div>
                <div class="rain"></div>
                <div class="rain"></div>
                <div class="rain"></div>
                <div class="rain"></div>
                <div class="rain"></div>
                <div class="rain"></div>
                <div class="rain"></div>
                <div class="rain"></div>
                <div class="rain"></div>
                <div class="rain"></div>
                <div class="rain"></div>
                <div class="rain"></div>
                <div class="rain"></div>
                <div class="rain"></div>
                <div class="rain"></div>
                <div class="rain"></div>
                <div class="rain"></div>
                <div class="rain"></div>
                <div class="rain"></div>
                <div class="rain"></div>
                <div class="rain"></div>
                <div class="rain"></div>
                <div class="rain"></div>
                <div class="rain"></div>
                <div class="rain"></div>
                <div class="rain"></div>
                <div class="rain"></div>
                <div class="rain"></div>
                <div class="rain"></div>
                <div class="rain"></div>
                <div class="rain"></div>
                <div class="rain"></div>
                <div class="rain"></div>
                <div class="rain"></div>
                <div class="rain"></div>
                <div class="rain"></div>
                <div class="rain"></div>
            </div>
            <div class="visualisation-container--cloudy">
                <div class="cloud"></div>
                <div class="cloud"></div>
                <div class="cloud"></div>
                <div class="cloud"></div>
                <div class="cloud"></div>
                <div class="cloud"></div>
                <div class="cloud"></div>
                <div class="cloud"></div>
                <div class="cloud"></div>
                <div class="cloud"></div>
                <div class="cloud"></div>
                <div class="cloud"></div>
                <div class="cloud"></div>
                <div class="cloud"></div>
                <div class="cloud"></div>
                <div class="cloud"></div>
                <div class="cloud"></div>
                <div class="cloud"></div>
                <div class="cloud"></div>
                <div class="cloud"></div>
                <div class="cloud"></div>
                <div class="cloud"></div>
                <div class="cloud"></div>
                <div class="cloud"></div>
                <div class="cloud"></div>
                <div class="cloud"></div>
                <div class="cloud"></div>
                <div class="cloud"></div>
                <div class="cloud"></div>
                <div class="cloud"></div>
                <div class="cloud"></div>
                <div class="cloud"></div>
                <div class="cloud"></div>
                <div class="cloud"></div>
                <div class="cloud"></div>
                <div class="cloud"></div>
                <div class="cloud"></div>
                <div class="cloud"></div>
                <div class="cloud"></div>
                <div class="cloud"></div>
            </div>
            <div class="visualisation-container--snow">
                <div class="snow"></div>
                <div class="snow"></div>
                <div class="snow"></div>
                <div class="snow"></div>
                <div class="snow"></div>
                <div class="snow"></div>
                <div class="snow"></div>
                <div class="snow"></div>
                <div class="snow"></div>
                <div class="snow"></div>
                <div class="snow"></div>
                <div class="snow"></div>
                <div class="snow"></div>
                <div class="snow"></div>
                <div class="snow"></div>
                <div class="snow"></div>
                <div class="snow"></div>
                <div class="snow"></div>
                <div class="snow"></div>
                <div class="snow"></div>
                <div class="snow"></div>
                <div class="snow"></div>
                <div class="snow"></div>
                <div class="snow"></div>
                <div class="snow"></div>
                <div class="snow"></div>
                <div class="snow"></div>
                <div class="snow"></div>
                <div class="snow"></div>
                <div class="snow"></div>
                <div class="snow"></div>
                <div class="snow"></div>
                <div class="snow"></div>
                <div class="snow"></div>
                <div class="snow"></div>
                <div class="snow"></div>
                <div class="snow"></div>
                <div class="snow"></div>
                <div class="snow"></div>
                <div class="snow"></div>
                <div class="snow"></div>
                <div class="snow"></div>
                <div class="snow"></div>
                <div class="snow"></div>
                <div class="snow"></div>
                <div class="snow"></div>
                <div class="snow"></div>
                <div class="snow"></div>
                <div class="snow"></div>
                <div class="snow"></div>
                <div class="snow"></div>
                <div class="snow"></div>
                <div class="snow"></div>
                <div class="snow"></div>
                <div class="snow"></div>
                <div class="snow"></div>
                <div class="snow"></div>
                <div class="snow"></div>
                <div class="snow"></div>
                <div class="snow"></div>
                <div class="snow"></div>
                <div class="snow"></div>
                <div class="snow"></div>
                <div class="snow"></div>
                <div class="snow"></div>
                <div class="snow"></div>
                <div class="snow"></div>
                <div class="snow"></div>
                <div class="snow"></div>
                <div class="snow"></div>
                <div class="snow"></div>
                <div class="snow"></div>
                <div class="snow"></div>
                <div class="snow"></div>
                <div class="snow"></div>
                <div class="snow"></div>
                <div class="snow"></div>
                <div class="snow"></div>
                <div class="snow"></div>
                <div class="snow"></div>
                <div class="snow"></div>
                <div class="snow"></div>
                <div class="snow"></div>
                <div class="snow"></div>
                <div class="snow"></div>
                <div class="snow"></div>
                <div class="snow"></div>
                <div class="snow"></div>
                <div class="snow"></div>
                <div class="snow"></div>
                <div class="snow"></div>
                <div class="snow"></div>
                <div class="snow"></div>
                <div class="snow"></div>
                <div class="snow"></div>
                <div class="snow"></div>
                <div class="snow"></div>
                <div class="snow"></div>
                <div class="snow"></div>
                <div class="snow"></div>
            </div>
            <div class="visualisation-container--fog">
                <div class="fog__img fog__img--first"></div>
                <div class="fog__img fog__img--second"></div>
                <div class="fog__img fog__img--third"></div>
            </div>
        </div>
    </div>
    <script src="https://static.codepen.io/assets/common/stopExecutionOnTimeout-30d18ea41045577cdb11c797602d08e0b9c2fa407c8b81058b1c422053ad8041.js"></script>
    <script id="rendered-js">
    // I hope you enjoy, please like and follow
    let currentWeather = "sunny";
    const markovWeather = {
        sunny: {
            cloudy: 0.02,
            rainy: 0.004,
            fog: 0.001,
            snow: 0.00001
        },

        cloudy: {
            sunny: 0.002,
            rainy: 0.04,
            fog: 0.02,
            snow: 0.003
        },

        rainy: {
            sunny: 0.01,
            cloudy: 0.03,
            fog: 0.005,
            snow: 0.005
        },

        snow: {
            sunny: 0.0001,
            cloudy: 0.004,
            rainy: 0.009,
            fog: 0.006
        },

        fog: {
            sunny: 0.001,
            cloudy: 0.08,
            rainy: 0.02,
            snow: 0.004
        }
    };


    function updateIcons() {
        document.querySelectorAll(".weather-info__icon").forEach(element => {
            element.classList[
                element.attributes["data-weather-selected"].value == currentWeather ?
                "add" :
                "remove"](
                "weather-info__icon--active");
        });
    }

    function updateUI() {
        updateIcons();
        document.
        querySelector(".container").
        setAttribute("data-weather", currentWeather);
    }

    function handleTick() {
        let nextOptions = markovWeather[currentWeather];
        currentWeather =
            Object.keys(nextOptions).find(key => {
                return Math.random() < nextOptions[key];
            }) || currentWeather;
        updateUI();
    }

    setInterval(handleTick, 500);

    function generateWeatherEffects(target, addClass, amount) {
        let rainContainer = document.querySelector(target);
        for (let i = 0; i < amount; i++) {
            let weatherObject = document.createElement("div");
            weatherObject.classList.add(addClass);
            rainContainer.appendChild(weatherObject);
        }
    }

    generateWeatherEffects(".ray_box", "ray", 20);
    generateWeatherEffects(".visualisation-container--cloudy", "cloud", 40);
    generateWeatherEffects(".visualisation-container--snow", "snow", 100);
    generateWeatherEffects(".visualisation-container--rainy", "rain", 50);

    document.querySelectorAll(".weather-info__icon").forEach(element => {
        console.log(element);
        element.onclick = () => {
            currentWeather = element.attributes["data-weather-selected"].value;
            updateUI();
        };
    });
    //# sourceURL=pen.js
    </script>
</body>

</html>