:root{
    --cloud-speed:80s;
}

/*body {*/
/*    background: #ffffff;*/
/*    width: 100%;*/
/*    margin: 0;*/
/*    position: relative;*/
/*    font-family: 'Space Grotesk';*/
/*    font-style: normal;*/
/*    font-weight: 400;*/
/*}*/

.background-container {
    min-height: 55em;
    width: 100%;
    top: 0;
    left: 0;
    display: flex;
    flex: 1;
    position: fixed;
    background: linear-gradient(to bottom, #B9DFFF, #4BA0DB, #004390);
    overflow: hidden;
    bottom: 0;
    right: 0;
    z-index: 0;
}

.front, .middle, .back {
    position: fixed;
    bottom: 0;
    left: 0;
    height: 100vh;
    width: 100%;
}

.front {
    z-index: 3;
}

.middle {
    z-index: 2;
}

.back {
    z-index: 3;
}

.ground {
    position: fixed;
    bottom: 0;
    right: -1em;
    background: linear-gradient(to bottom, #658433, #36471b);
    height: 6em;
    width: 101%;
    border-radius: 50% 50% 0 0;
    box-shadow: inset 0 .5em 1em lightyellow;
}

.tree.one > .top {
    position: absolute;
    bottom: 12em;
    right: 7em;
    background: linear-gradient(to bottom, #99AC5E, #658433);
    height: 10em;
    width: 10em;
    border-radius: 50%;
    box-shadow: inset .5em 1em 5em lightyellow;
}

.tree.one > .overlap {
    position: absolute;
    bottom: 12.5em;
    right: 10em;
    background: linear-gradient(to bottom, transparent, #99AC5E 98%);
    height: 2em;
    width: 3.5em;
    border-radius: 50%;
    box-shadow: 0 .3em .2em #36471b;
    z-index: 2;
}

.tree.one > .trunk {
    position: absolute;
    bottom: 3em;
    right: 11em;
    background: linear-gradient(#8e724e, #422f15);
    height: 10em;
    width: 1.5em;
    border-radius: .1em;
    box-shadow: inset .1em 0em .2em lightyellow;
}

.tree.two > .top {
    position: absolute;
    bottom: 10em;
    right: 24em;
    background: linear-gradient(to bottom, #99AC5E, #658433);
    height: 7em;
    width: 7em;
    border-radius: 50%;
    box-shadow: inset .5em 1em 5em lightyellow;
}

.tree.two > .overlap {
    position: absolute;
    bottom: 10.5em;
    right: 26em;
    background: linear-gradient(to bottom, transparent, #99AC5E 98%);
    height: 2em;
    width: 2.5em;
    border-radius: 50%;
    box-shadow: 0 .3em .2em #36471b;
    z-index: 2;
}

.tree.two > .trunk {
    position: absolute;
    bottom: 3em;
    right: 26.5em;
    background: linear-gradient(#8e724e, #422f15);
    height: 8em;
    width: 1.5em;
    border-radius: .1em;
    box-shadow: inset .1em 0em .2em lightyellow;
}

.tree.three > .top {
    position: absolute;
    bottom: 12em;
    right: 57em;
    background: linear-gradient(to bottom, #99AC5E, #658433);
    height: 9em;
    width: 9em;
    border-radius: 50%;
    box-shadow: inset .5em 1em 5em lightyellow;
}

.tree.three > .overlap {
    position: absolute;
    bottom: 12.5em;
    right: 60.5em;
    background: linear-gradient(to bottom, transparent, #99AC5E 98%);
    height: 2em;
    width: 2.5em;
    border-radius: 50%;
    box-shadow: 0 .3em .2em #36471b;
    z-index: 2;
}

.tree.three > .trunk {
    position: absolute;
    bottom: 3em;
    right: 61em;
    background: linear-gradient(#8e724e, #422f15);
    height: 10em;
    width: 1.5em;
    border-radius: .1em;
    box-shadow: inset .1em 0em .2em lightyellow;
}


.hill {
    background: linear-gradient(to bottom, #cbe2a5, #658433);
    border-radius: 40em 50em 0 0;
    box-shadow: inset -1em 1em 5em lightyellow;
    height: 30em;
    width: 20em;
}

.hill.one {
    background: linear-gradient(to bottom, #99AC5E, #658433);
    position: absolute;
    bottom: -5em;
    right: 80em;
}

.hill.two {
    background: linear-gradient(to bottom, #658433, #36471b);
    position: absolute;
    bottom: -10em;
    right: 70em;
}

.hill.three {
    background: linear-gradient(to bottom, #658433, #36471b);
    position: absolute;
    bottom: -10em;
    right: 95em;
}

.hill.four {
    position: absolute;
    bottom: 5em;
    right: 90em;
    z-index: -1;
}

/* ==================== SUN and MOON ================ */

.sun-rays {
    position: absolute;
    top: 10em;
    right: 18em;
    height: 15em;
    width: 15em;
    z-index: -5;
    background: radial-gradient(rgba(255, 237, 175, .8) 50%, rgba(255, 237, 175, .2) 70%);
    border-radius: 50%;
    box-shadow: 0 0 .5em rgba(255, 237, 175, 1);
    -webkit-animation: rays 10s infinite;
    -moz-animation: rays 10s infinite;
    animation: rays 10s infinite;
}

.sun {
    position: absolute;
    top: 12.5em;
    right: 20.5em;
    height: 10em;
    width: 10em;
    z-index: -5;
    background: rgba(255, 237, 175, 1);
    border-radius: 50%;
    box-shadow: 0 0 1em rgba(255, 237, 175, .5), inset 0 0 .5em #FFFFAD;
}

body:not([data-light="sun"]) .sun, body:not([data-light="sun"]) .sun-rays {
    opacity: 0;
}

body[data-light="moon"] .moon-block {
    opacity: 1;
}
.moon-block{
    position: absolute;
    animation: mover 3.5s infinite alternate;
    top: 4.5em;
    right: 15.5em;
    opacity: 0;
    width: 250px;
    height: 250px;
    overflow: hidden;
    border-radius: 50%;
}

.moon {
    background-color: currentColor;
    position: relative;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    margin: auto;
    box-shadow: 5px 0 10px 3px rgba(229, 229, 229, 0.3),
    0 0 10px 2px rgba(229, 229, 229, 0.3),
    5px 0 10px 3px rgba(229, 229, 229, 0.3),
    0px 0 3px 2px rgba(229, 229, 229, 0.3);

}


.moon::after {
    content: "";
    background-color: rgba(162, 162, 162, 0.81);
    display: block;
    position: absolute;
    left: 160px;
    top: 50px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    box-shadow: 3px 0 0 1px rgba(98, 98, 98, 0.51),
    7px 45px 0 -5px rgba(162, 160, 162, 0.9),
    9px 45px 0 -5px rgba(100, 100, 100, 0.51),
    35px 20px 0 -10px rgba(162, 162, 162, 0.9),
    37px 20px 0 -10px rgba(100, 100, 100, 0.51),
    -137px 20px 0 -10px rgba(100, 100, 100, 0.51),
    -107px 85px 0 -5px rgba(162, 162, 162, 0.99999);
}

/*body[data-moon="full"] .waxing, body[data-moon="full"] .waning{*/
/*opacity: 0;*/
/*}*/

body[data-moon="waxing"] .center{  /* растущая */
    opacity: 0.7;
    left: -55%;
}
body[data-moon="waning"] .center{   /* убывающа */
    opacity: 0.6;
    left: 55%;
}
body[data-moon="full"] {
    opacity: 0;
}
.center {
    position: absolute;
    top: 14px;
    left: 55%;
    right: 0;
    bottom: 0;
    width: 250px;
    height: 250px;
    background-color: #0f0f0e;
    border-radius: 50%;
    box-shadow: 59px 7px 6px 21px #06040000;
    z-index: 9;
    margin: 0;
    opacity: 0.7;
}

/*.waning{*/
/*    background: black;*/
/*    position: relative;*/
/*    left: 40%;*/
/*    width: 250px;*/
/*    height: 250px;*/
/*    border-radius: 50%;*/
/*    top: -8%;*/
/*    right: 5%;*/
/*    bottom: 0;*/
/*    margin: auto;*/
/*    opacity: 0.6;*/
/*    animation: mover 3.5s infinite alternate;*/
/*    z-index: 0;*/
/*}*/
/*.waning:before{*/
/*    content: "";*/
/*    background: black;*/
/*    position: absolute;*/
/*    left: 24%;*/
/*    width: 250px;*/
/*    height: 250px;*/
/*    border-radius: 50%;*/
/*    top: -27%;*/
/*    margin: auto;*/
/*    opacity: 1;*/
/*    animation: mover 3.5s infinite alternate;*/
/*    z-index:3;*/
/*}*/
/* ================================== */
.person {
    position: absolute;
    bottom: 4.8em;
    right: 40em;
    height: 20em;
    width: 15em;
    z-index: 3;
}

.head {
    position: absolute;
    background: linear-gradient(#f9cc36, #cea212);
    height: 1.5em;
    width: 1.5em;
    bottom: 5.3em;
    right: 7em;
    border-radius: 50%;
    z-index: 3;
    box-shadow: inset 0 .2em .2em lightyellow;
}

.coat {
    position: absolute;
    background: linear-gradient(#f9cc36, #cea212);
    height: 3.5em;
    width: 2.5em;
    bottom: 2em;
    right: 6.5em;
    border-radius: 5em 5em 20% 20%;
    z-index: 2;
}

.legs {
    position: absolute;
    background: linear-gradient(#454545, #000000);
    height: 3em;
    width: 1.5em;
    bottom: 0;
    right: 7em;
    border-radius: 0 0 20% 20%;
    box-shadow: 0 .3em .5em #27380e;
}

.arm {
    position: absolute;
    background: linear-gradient(#f9cc36, #cea212);
    height: 1.5em;
    width: .5em;
    bottom: 3.5em;
    right: 6em;
    border-radius: 20%;
    transform: rotate(10deg);
    z-index: 2;
}

.string {
    position: absolute;
    background: #f3f3f3;
    height: 5em;
    width: .1em;
    bottom: 4.9em;
    right: 6.1em;
    border-radius: 20%;
    transform: rotate(5deg);
    z-index: 2;
    -webkit-animation: string var(--cloud-speed) infinite;
    -moz-animation: string var(--cloud-speed) infinite;
    animation: string var(--cloud-speed) infinite;
}

.balloon {
    position: absolute;
    background: radial-gradient(closest-side, rgba(106, 0, 193, .2), rgba(106, 0, 193, .8) 85%);
    height: 3em;
    width: 2.5em;
    bottom: 9.8em;
    right: 4.8em;
    border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%;
    box-shadow: inset 0 .2em .2em lightyellow;
    transform: rotate(185deg);
    z-index: 2;
    -webkit-animation: flow var(--cloud-speed) infinite;
    -moz-animation: flow var(--cloud-speed) infinite;
    animation: flow var(--cloud-speed) infinite;
    /*animation-duration: var(--cloud-speed);*/
    /*animation-name: moveCloud;*/
    /*animation-timing-function: linear;*/
    /*animation-iteration-count: infinite;*/
}


body {
    transition: background 1.2s ease;
}

body[data-phase="morning"] .background-container {
    background: linear-gradient(to top, #ff9966, #ff5e62);
}

body[data-phase="day"] .background-container {
    background: linear-gradient(to top, #4facfe, #00f2fe);
}

body[data-phase="evening"] .background-container {
    background: linear-gradient(to top, #614385, #516395);
}

body[data-phase="night"] .background-container {
    background: linear-gradient(to top, #0f2027, #203a43, #2c5364);
}

/* ========================== MOON ============================ */
body[data-moon="full"] .moon {
    box-shadow: 0 0 40px rgba(255, 255, 255, 0.8);
}

body[data-moon="waxing"] .moon {
    transform: scaleX(1);
}

body[data-moon="waning"] .moon {
    transform: scaleX(-1);
}
/* ========================== CLOUD ============================ */
body[data-weather="drizzle"] .cloud,
body[data-weather="storm"] .cloud,
body[data-weather="rain"] .cloud,
body[data-weather="snow"] .cloud,
body[data-weather="cloudy"] .cloud,
body[data-weather="overcast"] .cloud {
    opacity: 1;
}

.cloud {
    width: 175px;
    height: 60px;
    background: linear-gradient(to bottom, #f2f9fe 5%, #d6f0fd 100%);
    position: relative;
    margin: 120px auto 20px;
    border-radius: 50px;
    opacity: 0;
    animation-name: moveCloud;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.cloud::before,
.cloud::after {
    content: '';
    position: absolute;
    background: inherit;
    border-radius: 50%;
}

.cloud::before {
    width: 90px;
    height: 90px;
    top: -45px;
    left: 25px;
}

.cloud::after {
    width: 70px;
    height: 70px;
    top: -35px;
    right: 25px;
}

.shadow {
    width: 175px;
    position: fixed;
    bottom: 80px;
    background: black;
    z-index: -1;
    border-radius: 50%;
    -webkit-box-shadow: 0px 0px 25px 8px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 0px 0px 25px 8px rgba(0, 0, 0, 0.4);
    box-shadow: 0px 0px 25px 8px rgba(0, 0, 0, 0.4);
}

.cloud.one {
    position: absolute;
    top: 5em;
    left: 5em;
    z-index: 2;
    animation-duration:calc(var(--cloud-speed) * 1.6);
}

.cloud.two {
    position: absolute;
    left: 80em;
    top: 20em;
    z-index: 2;
    animation-duration:calc(var(--cloud-speed) * 1.8);
}

.cloud.three {
    position: absolute;
    left: 200em;
    top: 0;
    z-index: 2;
    animation-duration:calc(var(--cloud-speed) * 1.9);
}

.cloud.four {
    position: absolute;
    left: 200em;
    right: 10em;
    top: 30em;
    z-index: 2;
    animation-duration:calc(var(--cloud-speed) * 1.2);
}

.cloud.five {
    position: absolute;
    top: 6.5em;
    right: 20.5em;
    z-index: 4;
}


/*======================== rain ===================================*/

.rain {
    position: absolute;
    height: 80%;
    width: 100%;
    color: #002266;
    opacity: 0;
    pointer-events: none;
}

body[data-weather="snow"] .rain,
body[data-weather="rain"] .rain,
body[data-weather="drizzle"] .rain,
body[data-weather="storm"] .rain {
    opacity: 1;
}

.drop {
    position: absolute;
    background: linear-gradient(#000000, #ffffff);
    opacity: 2;
    top: 25px;
}

.d1 {
    left: 97%;
    width: 1%;
    height: 25%;
    animation: fall .94s linear 0.69s infinite;
}

.d2 {
    left: 18%;
    width: 1%;
    height: 25%;
    animation: fall .98s linear 0.57s infinite;
}

.d3 {
    left: 38%;
    width: 1%;
    height: 25%;
    animation: fall .66s linear .60s infinite;
}

.d4 {
    left: 64%;
    width: 1%;
    height: 25%;
    animation: fall .69s linear .76s infinite;
}

.d5 {
    left: 95%;
    width: 1%;
    height: 25%;
    animation: fall .75s linear .56s infinite;
}

.d6 {
    left: 65%;
    width: 1%;
    height: 25%;
    animation: fall .75s linear .92s infinite;
}

.d7 {
    left: 19%;
    width: 1%;
    height: 25%;
    animation: fall .92s linear .72s infinite;
}

.d8 {
    left: 55%;
    width: 1%;
    height: 25%;
    animation: fall .84s linear .99s infinite;
}

.d9 {
    left: 35%;
    width: 1%;
    height: 25%;
    animation: fall .79s linear .53s infinite;
}

.d10 {
    left: 83%;
    width: 1%;
    height: 5%;
    animation: fall .82s linear .97s infinite;
}

.d11 {
    left: 8%;
    width: 1%;
    height: 25%;
    animation: fall .75s linear .56s infinite;
}

.d12 {
    left: 1%;
    width: 1%;
    height: 25%;
    animation: fall .60s linear .59s infinite;
}

.d13 {
    left: 13%;
    width: 1%;
    height: 25%;
    animation: fall .5s linear .5s infinite;
}

.d14 {
    left: 13%;
    width: 1%;
    height: 25%;
    animation: fall .80s linear .63s infinite;
}

.d15 {
    left: 13%;
    width: 1%;
    height: 25%;
    animation: fall .68s linear .75s infinite;
}
/* ========================== fog ================================== */
body[data-weather="fog"] .fog{
    opacity: 1;
}

.fog {
    width: 100%;
    height: 100%;
    border-radius: 2em;
    /*background: slategrey;*/
    text-align: center;
    position: relative;
    box-shadow: 0 0.2em 0.5em rgba(0, 0, 0, 0.5);
    overflow: hidden;
    z-index: 3;
    opacity: 0;
}

.waves-wave-1,
.waves-wave-2 {
    position: absolute;
    top: 0;
    left: -10%;
    width: 120%;
    height: 120%;
    z-index: 1;
    filter: contrast(100);
    /*background: black;*/
    /*background: linear-gradient(180deg,rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 1) 100%);*/
    opacity: 0.3;
}
.waves-wave-1:before,
.waves-wave-2:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    /*background: #AB34FF;*/
    background: linear-gradient(180deg,rgba(171, 52, 255, 0) 0%, rgba(171, 52, 255, 0) 55%, rgba(171, 52, 255, 1) 100%);
    z-index: 2;
    mix-blend-mode: lighten;
}
.waves-wave-1 span,
.waves-wave-2 span {
    filter: blur(20px);
    border-radius: 45%;
    width: 40em;
    height: 35em;
    animation: spin 28s infinite linear;
    background: white;
    position: absolute;
    top: 71%;
    transform-origin: center;
}
.waves-wave-1 span:nth-child(3),
.waves-wave-1 span:nth-child(5),
.waves-wave-2 span:nth-child(3),
.waves-wave-2 span:nth-child(5) {
    animation: spin reverse 23s infinite linear;
    width: 32em;
    height: 36em;
}
.waves-wave-1 span:nth-child(1),
.waves-wave-2 span:nth-child(1) {
    left: 0;
} .waves-wave-1 span:nth-child(2),
  .waves-wave-2 span:nth-child(2) {
      width: 28em;
      height: 22em;
      left: 20%;
      top: 63%;
      animation: spin 27s infinite linear;
  } .waves-wave-1 span:nth-child(3),
    .waves-wave-2 span:nth-child(3) {
        left: 30%;
        width: 25em;
        height: 21em;
    } .waves-wave-1 span:nth-child(4),
      .waves-wave-2 span:nth-child(4) {
          animation: reverse spin 38s infinite linear;
          width: 32em;
          height: 26em;
          left: 43%;
          top: 72%;
      }
.waves-wave-1 span:nth-child(5),
.waves-wave-2 span:nth-child(5) {
    left: 60%;
    top: 65%;
    animation: spin reverse 32s infinite linear;
}
.waves-wave-1 span:nth-child(6),
.waves-wave-2 span:nth-child(6) {
    left: 75%;
}
.waves-wave-2 {
    opacity: 0.4;
}
.waves-wave-2:before {
    /*background: #00ff8a;*/
    background: linear-gradient(180deg,rgba(0, 255, 138, 0) 0%, rgba(0, 255, 138, 0) 55%, rgba(0, 255, 138, 1) 100%);
    left: 0;
}
.waves-wave-2 span {
    animation: spin reverse 26s infinite linear;
}
.waves-wave-2 span:nth-child(3),
.waves-wave-2 span:nth-child(5) {
    animation: spin 35s infinite linear;
    width: 42em;
    height: 38em;
}
.waves-wave-2 span:nth-child(1) {
    width: 30em;
    height: 28em;
    top: 74%;
}
.waves-wave-2 span:nth-child(2) {
    left: 15%;
    top: 72%;
}
.waves-wave-2 span:nth-child(3) {
    width: 22em;
    height: 26em;
    top: 68%;
}
.waves-wave-2 span:nth-child(4) {
    width: 36em;
    height: 32em;
    top: 72%;
    left: 40%;
}
.waves-wave-2 span:nth-child(5) {
    top: 62%;
    height: 35em;
    left: 56%;
}
.waves-wave-2 span:nth-child(6) {
    top: 71%;
}


@-webkit-keyframes fall {
    to {
        margin-top: 100vh;
        opacity: 0;
    }
}

@keyframes fall {
    to {
        margin-top: 100vh;
        opacity: 0;
    }
}

@-webkit-keyframes mover {
    0% {
        transform: translateY(1rem);

    }
    100% {
        transform: translateY(2.6rem);
        rotate: 10deg;
    }
}

@keyframes mover {
    0% {
        transform: translateY(1rem);
    }
    100% {
        transform: translateY(2.6rem);
        rotate: 10deg;
    }
}


/*Cloud Animation*/
@-webkit-keyframes moveCloud {
    0% {
        left: -15%;
    }
    100% {
        left: 100%;
    }
}

@-moz-keyframes moveCloud {
    0% {
        left: -15%;
    }
    100% {
        left: 100%;
    }
}

@keyframes moveCloud {
    0% {
        left: -15%;
    }
    100% {
        left: 100%;
    }
}

/*Sun Animation*/
@-webkit-keyframes rays {
    0% {
        transform: scale(1.1);
    }
    25% {
        transform: scale(0.9);
    }
    50% {
        transform: scale(1.1);
    }
    75% {
        transform: scale(0.9);
    }
    100% {
        transform: scale(1.1);
    }
}

@-moz-keyframes rays {
    0% {
        transform: scale(1.1);
    }
    25% {
        transform: scale(0.9);
    }
    50% {
        transform: scale(1.1);
    }
    75% {
        transform: scale(0.9);
    }
    100% {
        transform: scale(1.1);
    }
}

@keyframes rays {
    0% {
        transform: scale(1.1);
    }
    25% {
        transform: scale(0.9);
    }
    50% {
        transform: scale(1.1);
    }
    75% {
        transform: scale(0.9);
    }
    100% {
        transform: scale(1.1);
    }
}

/*Balloon Animation*/
@-webkit-keyframes flow {
    0% {
        transform: rotate(10deg);
        transform-origin: bottom;
    }
    50% {
        transform: rotate(0deg);
        transform-origin: bottom;
    }
    100% {
        transform: rotate(10deg);
        transform-origin: bottom;

    }
}

@-moz-keyframes flow {
    0% {
        transform: rotate(10deg);

    }
    50% {
        transform: rotate(0deg);

    }
    100% {
        transform: rotate(10deg);

    }
}

@keyframes flow {
    0% {
        transform: rotate(10deg);
        transform-origin: bottom;
    }
    50% {
        transform: rotate(0deg);
        transform-origin: bottom;
    }
    100% {
        transform: rotate(10deg);
        transform-origin: bottom;
    }
}

/*String Animation*/
@-webkit-keyframes string {
    0% {
        transform: rotate(10deg);
        transform-origin: bottom;
    }
    50% {
        transform: rotate(0deg);
        transform-origin: bottom;
    }
    100% {
        transform: rotate(10deg);
        transform-origin: bottom;
    }
}

@-moz-keyframes string {
    0% {
        transform: rotate(10deg);
        transform-origin: bottom;
    }
    50% {
        transform: rotate(0deg);
        transform-origin: bottom;
    }
    100% {
        transform: rotate(10deg);
        transform-origin: bottom;
    }
}

@keyframes string {
    0% {
        transform: rotate(10deg);
        transform-origin: bottom;
    }
    50% {
        transform: rotate(0deg);
        transform-origin: bottom;
    }
    100% {
        transform: rotate(10deg);
        transform-origin: bottom;
    }
}

/*====================== fog ========================= */


/*.fog {*/
/*    position: absolute;*/
/*    width: 100%;*/
/*    height: 100%;*/
/*    overflow: hidden;*/
/*    z-index: 4;*/
/*}*/
/*.fog__layer {*/
/*    position: absolute;*/
/*    height: 100vh;*/
/*    width: 300vw;*/
/*    z-index: 2;*/
/*}*/
/*.fog__layer--1 {*/
/*    background: url("https://www.dropbox.com/s/dfdz7cqlpwsp1l9/fog-1.png?raw=1");*/
/*    background-repeat: repeat-x;*/
/*    background-size: contain;*/
/*    background-position: center;*/
/*    animation: marquee 60s linear infinite;*/
/*    -webkit-animation: marquee 60s linear infinite;*/
/*}*/
/*.fog__layer--2 {*/
/*    background: url("https://www.dropbox.com/s/4smivk3tas34moq/fog-2.png?raw=1");*/
/*    background-repeat: repeat-x;*/
/*    background-size: contain;*/
/*    background-position: center;*/
/*    animation: marquee 30s linear infinite;*/
/*    -webkit-animation: marquee 30s linear infinite;*/
/*}*/
/*.fog__layer--3 {*/
/*    background: url("https://www.dropbox.com/s/4smivk3tas34moq/fog-2.png?raw=1");*/
/*    background-repeat: repeat-x;*/
/*    background-size: contain;*/
/*    background-position: center;*/
/*    animation: marquee 50s linear infinite;*/
/*    -webkit-animation: marquee 50s linear infinite;*/
/*}*/

/*@keyframes marquee {*/
/*    0% {*/
/*        transform: translate3d(0, 0, 0);*/
/*    }*/
/*    100% {*/
/*        transform: translate3d(-200vw, 0, 0);*/
/*    }*/
/*}*/
/*@-webkit-keyframes marquee {*/
/*    0% {*/
/*        -webkit-transform: translate3d(0, 0, 0);*/
/*    }*/
/*    100% {*/
/*        -webkit-transform: translate3d(-200vw, 0, 0);*/
/*    }*/
/*}*/



 /* === fog - waves === */
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}