:root {
    --tg-content-safe-area-inset-top: 0px;
    --vh: 100vh;
    --vhf: 0px;
    --vhh: calc(max(min(var(--vh), 750px), var(--vhf)) - var(--tg-content-safe-area-inset-top));
}
html, body {
    overflow: hidden;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

body {
    padding: 0;
    margin: 0;
    background-color: #0E0E0E;
    background-image: url('../images/background-green.webp');
    background-size: cover;
    background-position: center center;
}

#console {
    color: #fff;
    padding: 4px;
    position: fixed;
    border: 1px dashed grey;
    width: calc(100% - 11px);
    z-index: 10;
    background: #000;
    opacity: 0.5;
    cursor: pointer;
    overflow: hidden;
    font-size: 12px;
    display: none;
}

#console.minimized {
    height: 13px;
}

#console.opened {
    height: auto;
}

#game-app, #wrapper {
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%) translateZ(0px);
    position: absolute;
    margin: auto;
    text-align: center;
    width: 100%;
    max-height: 750px;
    max-width: 1335px;
}

canvas {
    width: 100%;
    z-index: 1;
    display: none;
    cursor: default;
    box-shadow: #04130E 0 0 64px 64px;
    border-radius: 16px;
}

#game-app {
    z-index: 1;
}

#wrapper {
    z-index: 3;
    display: none;
}

@media (min-aspect-ratio: 16 / 9) {
    #game-app, #wrapper {
        width: calc(var(--vhh) * 1.77);
        height: var(--vhh);
    }
}

@media (max-height: 290px) {
    #game-app {
        transform: translateX(-50%) translateY(0) translateZ(0px);
        top: 0;
    }
}

#loader {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    text-align: center;
}

#loader #container {
    position: relative;
    margin: auto;
    width: 75%;
    min-width: 200px;
    top: calc(25%);
    transition: all 0.4s ease-out;
}

#logo {
    max-width: 100%;
    display: block;
    margin: auto;
    max-height: 25vh;
    background: radial-gradient(
            ellipse at center,
            rgba(16, 13, 11, 0.85) 0%,
            rgba(16, 13, 11, 0.65) 45%,
            rgba(16, 13, 11, 0) 75%
    );
}

#loader #start {
    color: white;
    margin: 15px auto 0 auto;
    text-decoration: none;
    opacity: 0.01;
    display: none;
}

#loader #start img {
    max-width: 50%;
    border-radius: 40px;
    box-shadow: 0 5px 1px #184C3B;
    max-height: 12vh;
}

#progress {
    width: 0;
    border: 1px solid #8C7041;
    height: 16px;
    position: relative;
    margin: 15px auto 0 auto;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 8px;
    opacity: 0;
    box-shadow: 3px 3px 6px rgba(0, 0, 0, 1);
}

#progress-fill {
    width: 0;
    height: 16px;
    background: linear-gradient(45deg, #E6CA86, #B48943);
    border-radius: 4px;
    transition: width 0.3s ease-out;
}

#progress-message {
    color: #E9DFC8;
    padding-top: 8px;
    font-size: 1.2em;
}

#auth-block {
    padding: 10px;
    display: none;
    flex-wrap: wrap;
    margin: auto;
    max-width: 520px;
    text-align: center;
    justify-content: center;
}

#auth-block .button-block {
    width: 250px;
    margin: 5px;
}

#auth-block button {
    background: #307f61;
    padding: 12px 24px;
    border-radius: 30px;
    font-size: 1.2em;
    border: none;
    color: #ffffff;
    box-shadow: 0 5px 1px #184C3B;
    text-shadow: 1px 2px #000;
    width: 250px;
    cursor: pointer;
    margin-top: 8px;
}

#auth-block button.play-ok {
    background: #f3b442;
    box-shadow: 0 5px 1px #93743b;
}

#auth-block button.play-vk {
    background: #5e8dc2;
    box-shadow: 0 5px 1px #3368a8;
}

#auth-block button.play-ya {
    color: #222;
    text-shadow: 1px 2px #fff;
    background: #ffdb4d;
    box-shadow: 0 5px 1px #ffc01f;
    width: 270px;
}

#auth-block button:active {
    box-shadow: none;
}

.auth-block-hint {
    color: #ffffff;
    margin: 8px;
    font-size: 0.8em;
}

@media screen and (max-width: 500px) {
    #auth-block button {
        width: 100%; /* Make buttons 100% width when the window is less than 500px */
    }
}

.landscape {
    top: 0;
    z-index: 1;
}

#flip-orientation {
    background: #000000;
    display: none;
    width: 100%;
    height: 100vh;
    color: #C9AB69;
    z-index: 10;
    position: absolute;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    overflow: hidden; /* Скрывает края размытия, которые вылезают за границы */
}

#flip-orientation::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;

    background-image: url('../images/background-green.webp');
    background-size: cover;

    /* Размытие самого изображения */
    filter: blur(6px);

    /* Немного увеличиваем масштаб, чтобы убрать белые края после блюра */
    transform: scale(1.1);
    z-index: -1;
}

#flip-orientation h2 {
    margin: 0;
    max-width: 90%;
    text-align: center;
}

#flip-orientation p {
    color: #C9AB69;
    margin: 0.5em;
    max-width: 90%;
    text-align: center;
}

@media (orientation: portrait) {
    #flip-orientation {
        display: flex;
    }

    #loader {
        background-size: auto 100%;
    }

    #loader #container {
        position: relative;
        margin: auto;
        max-width: 75%;
    }

    #loader #start img {
        max-width: min(80%, 360px);
    }
}

#game-frame {
    position: absolute;
    top: 0;
    width: 100%;
    height: 24px;
    background: #000;
    color: #fff;
    text-align: center;
    font-size: 13px;
    font-family: Helvetica, sans-serif;
    line-height: 24px;
    display: none;
    z-index: 3;
}

#game-frame_action {
    background: url('../images/close.png');
    height: 16px;
    width: 16px;
    background-size: cover;
    background-position: center;
    position: absolute;
    left: 4px;
    top: 4px;
}

#sys-info {
    color: #ddd;
    font-size: 10px;
    position: absolute;
    z-index: 2;
    bottom: 0;
    width: 100%;
    text-align: center;
    user-select: none;
    display: none;
}

#overlay {
    background: #000;
    width: 100%;
    height: calc(100%);
    position: absolute;
    z-index: 1;
    opacity: 0.9;
    display: none;
}

#photo, #page {
    display: none;
    width: 70%;
    top: 15%;
    left: 15%;
    margin: auto;
    position: absolute;
    z-index: 3;
    text-align: right;
}

#page {
    text-align: left;
}

#page.landscape {
    transform: rotate(90deg);
}

#photo-preview img {
    display: block;
    border: 6px solid white;
    border-radius: 6px;
    width: calc(100% - 12px);
}

#photo-buttons {
    text-align: center;
    display: none;
}

#photo-close {
    position: absolute;
    top: -35px;
    display: none;
}

.brk-btn {
    position: relative;
    background: #222;
    color: #08D5A2;
    text-transform: uppercase;
    text-decoration: none;
    border: 0.2em solid #08D5A2;
    padding: 0.5em 1em;
    top: -10px;
    margin: 10px;
}

.brk-btn::before {
    content: "";
    display: block;
    position: absolute;
    width: 10%;
    background: #222;
    height: 0.3em;
    right: 20%;
    top: -0.21em;
    transform: skewX(-45deg);
    -webkit-transition: all 0.45s cubic-bezier(0.86, 0, 0.07, 1);
    transition: all 0.45s cubic-bezier(0.86, 0, 0.07, 1);
}

.brk-btn::after {
    content: "";
    display: block;
    position: absolute;
    width: 10%;
    background: #222;
    height: 0.3em;
    left: 20%;
    bottom: -0.25em;
    transform: skewX(45deg);
    -webkit-transition: all 0.45 cubic-bezier(0.86, 0, 0.07, 1);
    transition: all 0.45s cubic-bezier(0.86, 0, 0.07, 1);
}

.brk-btn:hover::before {
    right: 80%;
}

.brk-btn:hover::after {
    left: 80%;
}

a:hover, a:focus, input:hover, input:focus, button:hover, button:focus, a img:hover, a img:focus, textarea:hover, textarea:focus {
    outline: none;
}

#page {
    display: none;
    position: absolute;
    top: 7%;
    width: 80%;
    height: 84%;
    left: 10%;
    background-image: url('../ui/notice/background.png');
    background-size: 100% 100%;
}

#page iframe {
    margin-top: 5%;
    margin-left: 0;
    width: 92%;
    height: 83%;
    border: 0;
}

.name {
    color: #00E78D;
}

#page #menu {
    width: 50px;
    position: relative;
    height: inherit;
    float: left;
    border-right: 1px solid #8B918F;
}

.menu-item {
    width: 50px;
    height: 50px;
    border-bottom: 1px solid #fff;
    color: #fff;
    font-size: 12px;
    text-align: center;
    float: left;
    line-height: 50px;
}

.marked {
    border: 1px solid #ff0000;
    background: rgba(255, 0, 0, 0.3);
}

#news {
    display: none;
}

#faq {
    display: flex;
    height: 100vh;
    align-items: center;
}

#faq.hide {
    display: none;
}

#faq .inner {
    position: relative;
    background-image: url('/assets/images/background-rummy.jpg');
    background-size: cover;
    color: #ffffff;
    border: 6px solid white;
    border-radius: 6px;
    margin: auto;
    width: 70%;
    height: 400px;
    z-index: 2;
}

#page-close {
    position: absolute;
    top: -22px;
    right: -22px;
}

#page-close img {
    width: 31px;
}

@media (max-height: 400px) {
    #page-close img {
        width: 25px;
    }
}

#faq .inner h3 {
    color: #08D5A2;
    text-align: center;
    text-transform: uppercase;
    margin: 6px 0;
}

#faq .inner h4 {
    text-align: center;
}

#faq .inner p {
    padding: 0 8px;
    text-indent: 12px;
    font-size: 0.8em;
    margin: 4px 0;
}

#faq .inner td {
    font-size: 0.8em;
}

.n-article {
    color: #D5D8D9;
    padding: 10px 10px;
    margin: 4px 4px 12px 12px;
    background: rgba(51, 51, 51, 0.3);
    font-family: Arial;
    font-size: 12px;
    border: 2px solid rgba(115, 119, 117, 0.5);
    width: calc(100% - 50px);
    border-radius: 8px;
}

.n-header {
    margin-bottom: 5px;
    padding-bottom: 5px;
    font-weight: bold;
    color: #00E78D;
}

.n-body {
    padding: 5px 0;
}

.n-buttons {
    margin: 15px 0 0 0;
}

.n-buttons button {
    border: 0;
    color: #fff;
    background-repeat: no-repeat;
    height: 26px;
    min-width: 60px;
    background-color: #737876;
    border-radius: 8px;
    background-position: 5px 3px;
    text-align: left;
    padding-left: 38px;
    font-size: 14px;
    font-weight: bold;
    margin-right: 10px;
    background-size: auto 20px;
    opacity: 0.8;
    cursor: pointer;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

.n-buttons button:active {
    transform: scale(0.9);
}

.n-like {
    background-image: url('../images/like.png');
}

.n-dislike {
    background-image: url('../images/dislike.png');
}

.n-buttons button:disabled {
    background-color: transparent;
    box-shadow: none;
    cursor: default;
    border: 1px solid #333;
}

.n-info {
    position: relative;
    float: right;
    bottom: 12px;
    font-style: italic;
}

#loader-roller.landscape {
    left: calc(50% - 25px);
}


html, body {
    height: 100%;
}

.firefly {
    position: fixed;
    left: 50%;
    top: 50%;
    width: 0.4vw;
    height: 0.4vw;
    margin: -0.2vw 0 0 9.8vw;
    -webkit-animation: ease 200s alternate infinite;
    animation: ease 200s alternate infinite;
    pointer-events: none;
}

.firefly::before, .firefly::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    transform-origin: -10vw;
}

.firefly::before {
    background: black;
    opacity: 0.4;
    -webkit-animation: drift ease alternate infinite;
    animation: drift ease alternate infinite;
}

.firefly::after {
    background: white;
    opacity: 0;
    box-shadow: 0 0 0vw 0vw white;
    -webkit-animation: drift ease alternate infinite, flash ease infinite;
    animation: drift ease alternate infinite, flash ease infinite;
}

.firefly:nth-child(1) {
    -webkit-animation-name: move1;
    animation-name: move1;
}

.firefly:nth-child(1)::before {
    -webkit-animation-duration: 16s;
    animation-duration: 16s;
}

.firefly:nth-child(1)::after {
    -webkit-animation-duration: 16s, 9162ms;
    animation-duration: 16s, 9162ms;
    -webkit-animation-delay: 0ms, 566ms;
    animation-delay: 0ms, 566ms;
}

@-webkit-keyframes move1 {
    0% {
        transform: translateX(-5vw) translateY(17vh) scale(0.61);
    }
    4.7619047619% {
        transform: translateX(-24vw) translateY(45vh) scale(0.54);
    }
    9.5238095238% {
        transform: translateX(37vw) translateY(17vh) scale(0.68);
    }
    14.2857142857% {
        transform: translateX(-3vw) translateY(3vh) scale(0.6);
    }
    19.0476190476% {
        transform: translateX(-16vw) translateY(33vh) scale(0.65);
    }
    23.8095238095% {
        transform: translateX(-9vw) translateY(2vh) scale(0.61);
    }
    28.5714285714% {
        transform: translateX(0vw) translateY(37vh) scale(0.45);
    }
    33.3333333333% {
        transform: translateX(-29vw) translateY(43vh) scale(0.66);
    }
    38.0952380952% {
        transform: translateX(-47vw) translateY(38vh) scale(0.65);
    }
    42.8571428571% {
        transform: translateX(-25vw) translateY(34vh) scale(0.64);
    }
    47.619047619% {
        transform: translateX(42vw) translateY(-30vh) scale(0.89);
    }
    52.380952381% {
        transform: translateX(-25vw) translateY(-24vh) scale(0.91);
    }
    57.1428571429% {
        transform: translateX(-39vw) translateY(-24vh) scale(0.86);
    }
    61.9047619048% {
        transform: translateX(43vw) translateY(-13vh) scale(0.63);
    }
    66.6666666667% {
        transform: translateX(19vw) translateY(-24vh) scale(0.8);
    }
    71.4285714286% {
        transform: translateX(6vw) translateY(-10vh) scale(0.78);
    }
    76.1904761905% {
        transform: translateX(37vw) translateY(25vh) scale(0.6);
    }
    80.9523809524% {
        transform: translateX(31vw) translateY(-4vh) scale(0.79);
    }
    85.7142857143% {
        transform: translateX(-40vw) translateY(24vh) scale(0.83);
    }
    90.4761904762% {
        transform: translateX(47vw) translateY(8vh) scale(0.94);
    }
    95.2380952381% {
        transform: translateX(-35vw) translateY(-3vh) scale(1);
    }
    100% {
        transform: translateX(15vw) translateY(-47vh) scale(0.56);
    }
}

@keyframes move1 {
    0% {
        transform: translateX(-5vw) translateY(17vh) scale(0.61);
    }
    4.7619047619% {
        transform: translateX(-24vw) translateY(45vh) scale(0.54);
    }
    9.5238095238% {
        transform: translateX(37vw) translateY(17vh) scale(0.68);
    }
    14.2857142857% {
        transform: translateX(-3vw) translateY(3vh) scale(0.6);
    }
    19.0476190476% {
        transform: translateX(-16vw) translateY(33vh) scale(0.65);
    }
    23.8095238095% {
        transform: translateX(-9vw) translateY(2vh) scale(0.61);
    }
    28.5714285714% {
        transform: translateX(0vw) translateY(37vh) scale(0.45);
    }
    33.3333333333% {
        transform: translateX(-29vw) translateY(43vh) scale(0.66);
    }
    38.0952380952% {
        transform: translateX(-47vw) translateY(38vh) scale(0.65);
    }
    42.8571428571% {
        transform: translateX(-25vw) translateY(34vh) scale(0.64);
    }
    47.619047619% {
        transform: translateX(42vw) translateY(-30vh) scale(0.89);
    }
    52.380952381% {
        transform: translateX(-25vw) translateY(-24vh) scale(0.91);
    }
    57.1428571429% {
        transform: translateX(-39vw) translateY(-24vh) scale(0.86);
    }
    61.9047619048% {
        transform: translateX(43vw) translateY(-13vh) scale(0.63);
    }
    66.6666666667% {
        transform: translateX(19vw) translateY(-24vh) scale(0.8);
    }
    71.4285714286% {
        transform: translateX(6vw) translateY(-10vh) scale(0.78);
    }
    76.1904761905% {
        transform: translateX(37vw) translateY(25vh) scale(0.6);
    }
    80.9523809524% {
        transform: translateX(31vw) translateY(-4vh) scale(0.79);
    }
    85.7142857143% {
        transform: translateX(-40vw) translateY(24vh) scale(0.83);
    }
    90.4761904762% {
        transform: translateX(47vw) translateY(8vh) scale(0.94);
    }
    95.2380952381% {
        transform: translateX(-35vw) translateY(-3vh) scale(1);
    }
    100% {
        transform: translateX(15vw) translateY(-47vh) scale(0.56);
    }
}

.firefly:nth-child(2) {
    -webkit-animation-name: move2;
    animation-name: move2;
}

.firefly:nth-child(2)::before {
    -webkit-animation-duration: 18s;
    animation-duration: 18s;
}

.firefly:nth-child(2)::after {
    -webkit-animation-duration: 18s, 10417ms;
    animation-duration: 18s, 10417ms;
    -webkit-animation-delay: 0ms, 8474ms;
    animation-delay: 0ms, 8474ms;
}

@-webkit-keyframes move2 {
    0% {
        transform: translateX(-36vw) translateY(46vh) scale(0.87);
    }
    3.7037037037% {
        transform: translateX(6vw) translateY(39vh) scale(0.58);
    }
    7.4074074074% {
        transform: translateX(-28vw) translateY(25vh) scale(0.5);
    }
    11.1111111111% {
        transform: translateX(-48vw) translateY(-21vh) scale(0.46);
    }
    14.8148148148% {
        transform: translateX(-2vw) translateY(11vh) scale(0.31);
    }
    18.5185185185% {
        transform: translateX(-13vw) translateY(49vh) scale(0.52);
    }
    22.2222222222% {
        transform: translateX(48vw) translateY(19vh) scale(0.97);
    }
    25.9259259259% {
        transform: translateX(-36vw) translateY(12vh) scale(0.4);
    }
    29.6296296296% {
        transform: translateX(-7vw) translateY(-5vh) scale(0.79);
    }
    33.3333333333% {
        transform: translateX(-6vw) translateY(41vh) scale(0.45);
    }
    37.037037037% {
        transform: translateX(43vw) translateY(48vh) scale(0.91);
    }
    40.7407407407% {
        transform: translateX(32vw) translateY(-35vh) scale(0.88);
    }
    44.4444444444% {
        transform: translateX(-39vw) translateY(-3vh) scale(0.76);
    }
    48.1481481481% {
        transform: translateX(-9vw) translateY(32vh) scale(0.57);
    }
    51.8518518519% {
        transform: translateX(-13vw) translateY(-22vh) scale(0.42);
    }
    55.5555555556% {
        transform: translateX(15vw) translateY(33vh) scale(0.55);
    }
    59.2592592593% {
        transform: translateX(-23vw) translateY(33vh) scale(0.77);
    }
    62.962962963% {
        transform: translateX(-33vw) translateY(26vh) scale(0.78);
    }
    66.6666666667% {
        transform: translateX(-23vw) translateY(-4vh) scale(0.87);
    }
    70.3703703704% {
        transform: translateX(4vw) translateY(-47vh) scale(0.67);
    }
    74.0740740741% {
        transform: translateX(-6vw) translateY(40vh) scale(0.61);
    }
    77.7777777778% {
        transform: translateX(-42vw) translateY(-20vh) scale(0.67);
    }
    81.4814814815% {
        transform: translateX(-43vw) translateY(-8vh) scale(0.37);
    }
    85.1851851852% {
        transform: translateX(17vw) translateY(-2vh) scale(0.65);
    }
    88.8888888889% {
        transform: translateX(-37vw) translateY(-46vh) scale(0.93);
    }
    92.5925925926% {
        transform: translateX(-39vw) translateY(-48vh) scale(0.49);
    }
    96.2962962963% {
        transform: translateX(8vw) translateY(-10vh) scale(0.76);
    }
    100% {
        transform: translateX(1vw) translateY(6vh) scale(0.76);
    }
}

@keyframes move2 {
    0% {
        transform: translateX(-36vw) translateY(46vh) scale(0.87);
    }
    3.7037037037% {
        transform: translateX(6vw) translateY(39vh) scale(0.58);
    }
    7.4074074074% {
        transform: translateX(-28vw) translateY(25vh) scale(0.5);
    }
    11.1111111111% {
        transform: translateX(-48vw) translateY(-21vh) scale(0.46);
    }
    14.8148148148% {
        transform: translateX(-2vw) translateY(11vh) scale(0.31);
    }
    18.5185185185% {
        transform: translateX(-13vw) translateY(49vh) scale(0.52);
    }
    22.2222222222% {
        transform: translateX(48vw) translateY(19vh) scale(0.97);
    }
    25.9259259259% {
        transform: translateX(-36vw) translateY(12vh) scale(0.4);
    }
    29.6296296296% {
        transform: translateX(-7vw) translateY(-5vh) scale(0.79);
    }
    33.3333333333% {
        transform: translateX(-6vw) translateY(41vh) scale(0.45);
    }
    37.037037037% {
        transform: translateX(43vw) translateY(48vh) scale(0.91);
    }
    40.7407407407% {
        transform: translateX(32vw) translateY(-35vh) scale(0.88);
    }
    44.4444444444% {
        transform: translateX(-39vw) translateY(-3vh) scale(0.76);
    }
    48.1481481481% {
        transform: translateX(-9vw) translateY(32vh) scale(0.57);
    }
    51.8518518519% {
        transform: translateX(-13vw) translateY(-22vh) scale(0.42);
    }
    55.5555555556% {
        transform: translateX(15vw) translateY(33vh) scale(0.55);
    }
    59.2592592593% {
        transform: translateX(-23vw) translateY(33vh) scale(0.77);
    }
    62.962962963% {
        transform: translateX(-33vw) translateY(26vh) scale(0.78);
    }
    66.6666666667% {
        transform: translateX(-23vw) translateY(-4vh) scale(0.87);
    }
    70.3703703704% {
        transform: translateX(4vw) translateY(-47vh) scale(0.67);
    }
    74.0740740741% {
        transform: translateX(-6vw) translateY(40vh) scale(0.61);
    }
    77.7777777778% {
        transform: translateX(-42vw) translateY(-20vh) scale(0.67);
    }
    81.4814814815% {
        transform: translateX(-43vw) translateY(-8vh) scale(0.37);
    }
    85.1851851852% {
        transform: translateX(17vw) translateY(-2vh) scale(0.65);
    }
    88.8888888889% {
        transform: translateX(-37vw) translateY(-46vh) scale(0.93);
    }
    92.5925925926% {
        transform: translateX(-39vw) translateY(-48vh) scale(0.49);
    }
    96.2962962963% {
        transform: translateX(8vw) translateY(-10vh) scale(0.76);
    }
    100% {
        transform: translateX(1vw) translateY(6vh) scale(0.76);
    }
}

.firefly:nth-child(3) {
    -webkit-animation-name: move3;
    animation-name: move3;
}

.firefly:nth-child(3)::before {
    -webkit-animation-duration: 9s;
    animation-duration: 9s;
}

.firefly:nth-child(3)::after {
    -webkit-animation-duration: 9s, 6601ms;
    animation-duration: 9s, 6601ms;
    -webkit-animation-delay: 0ms, 621ms;
    animation-delay: 0ms, 621ms;
}

@-webkit-keyframes move3 {
    0% {
        transform: translateX(-44vw) translateY(-34vh) scale(0.85);
    }
    5.8823529412% {
        transform: translateX(-28vw) translateY(-31vh) scale(0.32);
    }
    11.7647058824% {
        transform: translateX(9vw) translateY(-36vh) scale(0.37);
    }
    17.6470588235% {
        transform: translateX(39vw) translateY(32vh) scale(0.46);
    }
    23.5294117647% {
        transform: translateX(-29vw) translateY(-2vh) scale(0.6);
    }
    29.4117647059% {
        transform: translateX(-28vw) translateY(-48vh) scale(0.97);
    }
    35.2941176471% {
        transform: translateX(-47vw) translateY(-26vh) scale(0.26);
    }
    41.1764705882% {
        transform: translateX(2vw) translateY(44vh) scale(0.53);
    }
    47.0588235294% {
        transform: translateX(-22vw) translateY(21vh) scale(0.93);
    }
    52.9411764706% {
        transform: translateX(34vw) translateY(-38vh) scale(0.63);
    }
    58.8235294118% {
        transform: translateX(35vw) translateY(42vh) scale(0.78);
    }
    64.7058823529% {
        transform: translateX(-19vw) translateY(33vh) scale(0.89);
    }
    70.5882352941% {
        transform: translateX(8vw) translateY(-41vh) scale(0.75);
    }
    76.4705882353% {
        transform: translateX(-33vw) translateY(-13vh) scale(0.33);
    }
    82.3529411765% {
        transform: translateX(-21vw) translateY(4vh) scale(0.66);
    }
    88.2352941176% {
        transform: translateX(-38vw) translateY(39vh) scale(0.93);
    }
    94.1176470588% {
        transform: translateX(3vw) translateY(48vh) scale(0.36);
    }
    100% {
        transform: translateX(-48vw) translateY(46vh) scale(0.41);
    }
}

@keyframes move3 {
    0% {
        transform: translateX(-44vw) translateY(-34vh) scale(0.85);
    }
    5.8823529412% {
        transform: translateX(-28vw) translateY(-31vh) scale(0.32);
    }
    11.7647058824% {
        transform: translateX(9vw) translateY(-36vh) scale(0.37);
    }
    17.6470588235% {
        transform: translateX(39vw) translateY(32vh) scale(0.46);
    }
    23.5294117647% {
        transform: translateX(-29vw) translateY(-2vh) scale(0.6);
    }
    29.4117647059% {
        transform: translateX(-28vw) translateY(-48vh) scale(0.97);
    }
    35.2941176471% {
        transform: translateX(-47vw) translateY(-26vh) scale(0.26);
    }
    41.1764705882% {
        transform: translateX(2vw) translateY(44vh) scale(0.53);
    }
    47.0588235294% {
        transform: translateX(-22vw) translateY(21vh) scale(0.93);
    }
    52.9411764706% {
        transform: translateX(34vw) translateY(-38vh) scale(0.63);
    }
    58.8235294118% {
        transform: translateX(35vw) translateY(42vh) scale(0.78);
    }
    64.7058823529% {
        transform: translateX(-19vw) translateY(33vh) scale(0.89);
    }
    70.5882352941% {
        transform: translateX(8vw) translateY(-41vh) scale(0.75);
    }
    76.4705882353% {
        transform: translateX(-33vw) translateY(-13vh) scale(0.33);
    }
    82.3529411765% {
        transform: translateX(-21vw) translateY(4vh) scale(0.66);
    }
    88.2352941176% {
        transform: translateX(-38vw) translateY(39vh) scale(0.93);
    }
    94.1176470588% {
        transform: translateX(3vw) translateY(48vh) scale(0.36);
    }
    100% {
        transform: translateX(-48vw) translateY(46vh) scale(0.41);
    }
}

.firefly:nth-child(4) {
    -webkit-animation-name: move4;
    animation-name: move4;
}

.firefly:nth-child(4)::before {
    -webkit-animation-duration: 16s;
    animation-duration: 16s;
}

.firefly:nth-child(4)::after {
    -webkit-animation-duration: 16s, 5679ms;
    animation-duration: 16s, 5679ms;
    -webkit-animation-delay: 0ms, 3141ms;
    animation-delay: 0ms, 3141ms;
}

@-webkit-keyframes move4 {
    0% {
        transform: translateX(-2vw) translateY(7vh) scale(0.52);
    }
    5.2631578947% {
        transform: translateX(25vw) translateY(-9vh) scale(0.49);
    }
    10.5263157895% {
        transform: translateX(30vw) translateY(-8vh) scale(0.36);
    }
    15.7894736842% {
        transform: translateX(4vw) translateY(19vh) scale(0.51);
    }
    21.0526315789% {
        transform: translateX(-21vw) translateY(-20vh) scale(0.92);
    }
    26.3157894737% {
        transform: translateX(-26vw) translateY(5vh) scale(0.86);
    }
    31.5789473684% {
        transform: translateX(38vw) translateY(-28vh) scale(0.66);
    }
    36.8421052632% {
        transform: translateX(-40vw) translateY(19vh) scale(0.91);
    }
    42.1052631579% {
        transform: translateX(-20vw) translateY(17vh) scale(0.6);
    }
    47.3684210526% {
        transform: translateX(39vw) translateY(31vh) scale(0.51);
    }
    52.6315789474% {
        transform: translateX(-5vw) translateY(-16vh) scale(0.98);
    }
    57.8947368421% {
        transform: translateX(-43vw) translateY(-43vh) scale(0.47);
    }
    63.1578947368% {
        transform: translateX(-31vw) translateY(6vh) scale(0.46);
    }
    68.4210526316% {
        transform: translateX(-31vw) translateY(3vh) scale(0.43);
    }
    73.6842105263% {
        transform: translateX(10vw) translateY(14vh) scale(0.9);
    }
    78.9473684211% {
        transform: translateX(11vw) translateY(-36vh) scale(0.94);
    }
    84.2105263158% {
        transform: translateX(-41vw) translateY(6vh) scale(0.84);
    }
    89.4736842105% {
        transform: translateX(-17vw) translateY(12vh) scale(0.6);
    }
    94.7368421053% {
        transform: translateX(-21vw) translateY(30vh) scale(0.67);
    }
    100% {
        transform: translateX(11vw) translateY(26vh) scale(0.36);
    }
}

@keyframes move4 {
    0% {
        transform: translateX(-2vw) translateY(7vh) scale(0.52);
    }
    5.2631578947% {
        transform: translateX(25vw) translateY(-9vh) scale(0.49);
    }
    10.5263157895% {
        transform: translateX(30vw) translateY(-8vh) scale(0.36);
    }
    15.7894736842% {
        transform: translateX(4vw) translateY(19vh) scale(0.51);
    }
    21.0526315789% {
        transform: translateX(-21vw) translateY(-20vh) scale(0.92);
    }
    26.3157894737% {
        transform: translateX(-26vw) translateY(5vh) scale(0.86);
    }
    31.5789473684% {
        transform: translateX(38vw) translateY(-28vh) scale(0.66);
    }
    36.8421052632% {
        transform: translateX(-40vw) translateY(19vh) scale(0.91);
    }
    42.1052631579% {
        transform: translateX(-20vw) translateY(17vh) scale(0.6);
    }
    47.3684210526% {
        transform: translateX(39vw) translateY(31vh) scale(0.51);
    }
    52.6315789474% {
        transform: translateX(-5vw) translateY(-16vh) scale(0.98);
    }
    57.8947368421% {
        transform: translateX(-43vw) translateY(-43vh) scale(0.47);
    }
    63.1578947368% {
        transform: translateX(-31vw) translateY(6vh) scale(0.46);
    }
    68.4210526316% {
        transform: translateX(-31vw) translateY(3vh) scale(0.43);
    }
    73.6842105263% {
        transform: translateX(10vw) translateY(14vh) scale(0.9);
    }
    78.9473684211% {
        transform: translateX(11vw) translateY(-36vh) scale(0.94);
    }
    84.2105263158% {
        transform: translateX(-41vw) translateY(6vh) scale(0.84);
    }
    89.4736842105% {
        transform: translateX(-17vw) translateY(12vh) scale(0.6);
    }
    94.7368421053% {
        transform: translateX(-21vw) translateY(30vh) scale(0.67);
    }
    100% {
        transform: translateX(11vw) translateY(26vh) scale(0.36);
    }
}

.firefly:nth-child(5) {
    -webkit-animation-name: move5;
    animation-name: move5;
}

.firefly:nth-child(5)::before {
    -webkit-animation-duration: 9s;
    animation-duration: 9s;
}

.firefly:nth-child(5)::after {
    -webkit-animation-duration: 9s, 7203ms;
    animation-duration: 9s, 7203ms;
    -webkit-animation-delay: 0ms, 2607ms;
    animation-delay: 0ms, 2607ms;
}

@-webkit-keyframes move5 {
    0% {
        transform: translateX(49vw) translateY(15vh) scale(0.76);
    }
    4.5454545455% {
        transform: translateX(28vw) translateY(-25vh) scale(0.32);
    }
    9.0909090909% {
        transform: translateX(48vw) translateY(37vh) scale(0.42);
    }
    13.6363636364% {
        transform: translateX(35vw) translateY(-1vh) scale(0.66);
    }
    18.1818181818% {
        transform: translateX(48vw) translateY(18vh) scale(0.45);
    }
    22.7272727273% {
        transform: translateX(-35vw) translateY(49vh) scale(0.41);
    }
    27.2727272727% {
        transform: translateX(-30vw) translateY(16vh) scale(0.66);
    }
    31.8181818182% {
        transform: translateX(33vw) translateY(13vh) scale(0.32);
    }
    36.3636363636% {
        transform: translateX(-44vw) translateY(22vh) scale(0.39);
    }
    40.9090909091% {
        transform: translateX(-13vw) translateY(41vh) scale(0.76);
    }
    45.4545454545% {
        transform: translateX(-15vw) translateY(30vh) scale(0.7);
    }
    50% {
        transform: translateX(-16vw) translateY(-3vh) scale(0.39);
    }
    54.5454545455% {
        transform: translateX(-22vw) translateY(10vh) scale(0.34);
    }
    59.0909090909% {
        transform: translateX(34vw) translateY(-8vh) scale(0.57);
    }
    63.6363636364% {
        transform: translateX(-47vw) translateY(-49vh) scale(0.92);
    }
    68.1818181818% {
        transform: translateX(-9vw) translateY(6vh) scale(0.98);
    }
    72.7272727273% {
        transform: translateX(-13vw) translateY(-48vh) scale(0.89);
    }
    77.2727272727% {
        transform: translateX(-29vw) translateY(21vh) scale(0.81);
    }
    81.8181818182% {
        transform: translateX(16vw) translateY(2vh) scale(0.81);
    }
    86.3636363636% {
        transform: translateX(36vw) translateY(-26vh) scale(0.34);
    }
    90.9090909091% {
        transform: translateX(-16vw) translateY(16vh) scale(0.26);
    }
    95.4545454545% {
        transform: translateX(-27vw) translateY(-31vh) scale(0.4);
    }
    100% {
        transform: translateX(0vw) translateY(-5vh) scale(0.58);
    }
}

@keyframes move5 {
    0% {
        transform: translateX(49vw) translateY(15vh) scale(0.76);
    }
    4.5454545455% {
        transform: translateX(28vw) translateY(-25vh) scale(0.32);
    }
    9.0909090909% {
        transform: translateX(48vw) translateY(37vh) scale(0.42);
    }
    13.6363636364% {
        transform: translateX(35vw) translateY(-1vh) scale(0.66);
    }
    18.1818181818% {
        transform: translateX(48vw) translateY(18vh) scale(0.45);
    }
    22.7272727273% {
        transform: translateX(-35vw) translateY(49vh) scale(0.41);
    }
    27.2727272727% {
        transform: translateX(-30vw) translateY(16vh) scale(0.66);
    }
    31.8181818182% {
        transform: translateX(33vw) translateY(13vh) scale(0.32);
    }
    36.3636363636% {
        transform: translateX(-44vw) translateY(22vh) scale(0.39);
    }
    40.9090909091% {
        transform: translateX(-13vw) translateY(41vh) scale(0.76);
    }
    45.4545454545% {
        transform: translateX(-15vw) translateY(30vh) scale(0.7);
    }
    50% {
        transform: translateX(-16vw) translateY(-3vh) scale(0.39);
    }
    54.5454545455% {
        transform: translateX(-22vw) translateY(10vh) scale(0.34);
    }
    59.0909090909% {
        transform: translateX(34vw) translateY(-8vh) scale(0.57);
    }
    63.6363636364% {
        transform: translateX(-47vw) translateY(-49vh) scale(0.92);
    }
    68.1818181818% {
        transform: translateX(-9vw) translateY(6vh) scale(0.98);
    }
    72.7272727273% {
        transform: translateX(-13vw) translateY(-48vh) scale(0.89);
    }
    77.2727272727% {
        transform: translateX(-29vw) translateY(21vh) scale(0.81);
    }
    81.8181818182% {
        transform: translateX(16vw) translateY(2vh) scale(0.81);
    }
    86.3636363636% {
        transform: translateX(36vw) translateY(-26vh) scale(0.34);
    }
    90.9090909091% {
        transform: translateX(-16vw) translateY(16vh) scale(0.26);
    }
    95.4545454545% {
        transform: translateX(-27vw) translateY(-31vh) scale(0.4);
    }
    100% {
        transform: translateX(0vw) translateY(-5vh) scale(0.58);
    }
}

.firefly:nth-child(6) {
    -webkit-animation-name: move6;
    animation-name: move6;
}

.firefly:nth-child(6)::before {
    -webkit-animation-duration: 18s;
    animation-duration: 18s;
}

.firefly:nth-child(6)::after {
    -webkit-animation-duration: 18s, 9819ms;
    animation-duration: 18s, 9819ms;
    -webkit-animation-delay: 0ms, 920ms;
    animation-delay: 0ms, 920ms;
}

@-webkit-keyframes move6 {
    0% {
        transform: translateX(15vw) translateY(-25vh) scale(0.54);
    }
    3.5714285714% {
        transform: translateX(-10vw) translateY(-14vh) scale(0.7);
    }
    7.1428571429% {
        transform: translateX(16vw) translateY(43vh) scale(0.84);
    }
    10.7142857143% {
        transform: translateX(-33vw) translateY(-32vh) scale(0.42);
    }
    14.2857142857% {
        transform: translateX(-43vw) translateY(18vh) scale(0.99);
    }
    17.8571428571% {
        transform: translateX(-9vw) translateY(25vh) scale(0.99);
    }
    21.4285714286% {
        transform: translateX(-27vw) translateY(-44vh) scale(0.71);
    }
    25% {
        transform: translateX(-16vw) translateY(23vh) scale(0.41);
    }
    28.5714285714% {
        transform: translateX(15vw) translateY(31vh) scale(0.84);
    }
    32.1428571429% {
        transform: translateX(-1vw) translateY(-16vh) scale(0.54);
    }
    35.7142857143% {
        transform: translateX(-43vw) translateY(27vh) scale(0.34);
    }
    39.2857142857% {
        transform: translateX(48vw) translateY(38vh) scale(0.53);
    }
    42.8571428571% {
        transform: translateX(34vw) translateY(24vh) scale(0.93);
    }
    46.4285714286% {
        transform: translateX(-30vw) translateY(4vh) scale(0.59);
    }
    50% {
        transform: translateX(-44vw) translateY(21vh) scale(0.89);
    }
    53.5714285714% {
        transform: translateX(31vw) translateY(-6vh) scale(0.61);
    }
    57.1428571429% {
        transform: translateX(-11vw) translateY(-35vh) scale(0.71);
    }
    60.7142857143% {
        transform: translateX(2vw) translateY(45vh) scale(1);
    }
    64.2857142857% {
        transform: translateX(11vw) translateY(-21vh) scale(0.42);
    }
    67.8571428571% {
        transform: translateX(-47vw) translateY(30vh) scale(0.94);
    }
    71.4285714286% {
        transform: translateX(-34vw) translateY(-45vh) scale(0.54);
    }
    75% {
        transform: translateX(18vw) translateY(-17vh) scale(0.84);
    }
    78.5714285714% {
        transform: translateX(12vw) translateY(1vh) scale(0.37);
    }
    82.1428571429% {
        transform: translateX(-19vw) translateY(34vh) scale(0.59);
    }
    85.7142857143% {
        transform: translateX(-12vw) translateY(-3vh) scale(0.83);
    }
    89.2857142857% {
        transform: translateX(13vw) translateY(-42vh) scale(0.92);
    }
    92.8571428571% {
        transform: translateX(7vw) translateY(-26vh) scale(0.71);
    }
    96.4285714286% {
        transform: translateX(-7vw) translateY(-39vh) scale(0.41);
    }
    100% {
        transform: translateX(13vw) translateY(30vh) scale(0.26);
    }
}

@keyframes move6 {
    0% {
        transform: translateX(15vw) translateY(-25vh) scale(0.54);
    }
    3.5714285714% {
        transform: translateX(-10vw) translateY(-14vh) scale(0.7);
    }
    7.1428571429% {
        transform: translateX(16vw) translateY(43vh) scale(0.84);
    }
    10.7142857143% {
        transform: translateX(-33vw) translateY(-32vh) scale(0.42);
    }
    14.2857142857% {
        transform: translateX(-43vw) translateY(18vh) scale(0.99);
    }
    17.8571428571% {
        transform: translateX(-9vw) translateY(25vh) scale(0.99);
    }
    21.4285714286% {
        transform: translateX(-27vw) translateY(-44vh) scale(0.71);
    }
    25% {
        transform: translateX(-16vw) translateY(23vh) scale(0.41);
    }
    28.5714285714% {
        transform: translateX(15vw) translateY(31vh) scale(0.84);
    }
    32.1428571429% {
        transform: translateX(-1vw) translateY(-16vh) scale(0.54);
    }
    35.7142857143% {
        transform: translateX(-43vw) translateY(27vh) scale(0.34);
    }
    39.2857142857% {
        transform: translateX(48vw) translateY(38vh) scale(0.53);
    }
    42.8571428571% {
        transform: translateX(34vw) translateY(24vh) scale(0.93);
    }
    46.4285714286% {
        transform: translateX(-30vw) translateY(4vh) scale(0.59);
    }
    50% {
        transform: translateX(-44vw) translateY(21vh) scale(0.89);
    }
    53.5714285714% {
        transform: translateX(31vw) translateY(-6vh) scale(0.61);
    }
    57.1428571429% {
        transform: translateX(-11vw) translateY(-35vh) scale(0.71);
    }
    60.7142857143% {
        transform: translateX(2vw) translateY(45vh) scale(1);
    }
    64.2857142857% {
        transform: translateX(11vw) translateY(-21vh) scale(0.42);
    }
    67.8571428571% {
        transform: translateX(-47vw) translateY(30vh) scale(0.94);
    }
    71.4285714286% {
        transform: translateX(-34vw) translateY(-45vh) scale(0.54);
    }
    75% {
        transform: translateX(18vw) translateY(-17vh) scale(0.84);
    }
    78.5714285714% {
        transform: translateX(12vw) translateY(1vh) scale(0.37);
    }
    82.1428571429% {
        transform: translateX(-19vw) translateY(34vh) scale(0.59);
    }
    85.7142857143% {
        transform: translateX(-12vw) translateY(-3vh) scale(0.83);
    }
    89.2857142857% {
        transform: translateX(13vw) translateY(-42vh) scale(0.92);
    }
    92.8571428571% {
        transform: translateX(7vw) translateY(-26vh) scale(0.71);
    }
    96.4285714286% {
        transform: translateX(-7vw) translateY(-39vh) scale(0.41);
    }
    100% {
        transform: translateX(13vw) translateY(30vh) scale(0.26);
    }
}

.firefly:nth-child(7) {
    -webkit-animation-name: move7;
    animation-name: move7;
}

.firefly:nth-child(7)::before {
    -webkit-animation-duration: 9s;
    animation-duration: 9s;
}

.firefly:nth-child(7)::after {
    -webkit-animation-duration: 9s, 10690ms;
    animation-duration: 9s, 10690ms;
    -webkit-animation-delay: 0ms, 1851ms;
    animation-delay: 0ms, 1851ms;
}

@-webkit-keyframes move7 {
    0% {
        transform: translateX(24vw) translateY(2vh) scale(0.97);
    }
    4.1666666667% {
        transform: translateX(-31vw) translateY(14vh) scale(0.5);
    }
    8.3333333333% {
        transform: translateX(12vw) translateY(41vh) scale(0.8);
    }
    12.5% {
        transform: translateX(47vw) translateY(30vh) scale(0.6);
    }
    16.6666666667% {
        transform: translateX(-34vw) translateY(-45vh) scale(0.81);
    }
    20.8333333333% {
        transform: translateX(9vw) translateY(-27vh) scale(0.97);
    }
    25% {
        transform: translateX(46vw) translateY(-15vh) scale(0.54);
    }
    29.1666666667% {
        transform: translateX(32vw) translateY(-46vh) scale(0.35);
    }
    33.3333333333% {
        transform: translateX(-46vw) translateY(47vh) scale(0.34);
    }
    37.5% {
        transform: translateX(42vw) translateY(40vh) scale(0.38);
    }
    41.6666666667% {
        transform: translateX(7vw) translateY(-13vh) scale(0.67);
    }
    45.8333333333% {
        transform: translateX(29vw) translateY(12vh) scale(0.3);
    }
    50% {
        transform: translateX(18vw) translateY(8vh) scale(0.63);
    }
    54.1666666667% {
        transform: translateX(-4vw) translateY(-11vh) scale(0.83);
    }
    58.3333333333% {
        transform: translateX(-35vw) translateY(-42vh) scale(1);
    }
    62.5% {
        transform: translateX(-23vw) translateY(19vh) scale(0.27);
    }
    66.6666666667% {
        transform: translateX(-43vw) translateY(48vh) scale(0.48);
    }
    70.8333333333% {
        transform: translateX(6vw) translateY(41vh) scale(0.98);
    }
    75% {
        transform: translateX(5vw) translateY(-32vh) scale(0.99);
    }
    79.1666666667% {
        transform: translateX(-11vw) translateY(-34vh) scale(0.71);
    }
    83.3333333333% {
        transform: translateX(-29vw) translateY(-12vh) scale(0.68);
    }
    87.5% {
        transform: translateX(6vw) translateY(-26vh) scale(0.83);
    }
    91.6666666667% {
        transform: translateX(25vw) translateY(-23vh) scale(0.82);
    }
    95.8333333333% {
        transform: translateX(-23vw) translateY(40vh) scale(0.59);
    }
    100% {
        transform: translateX(-20vw) translateY(-11vh) scale(0.83);
    }
}

@keyframes move7 {
    0% {
        transform: translateX(24vw) translateY(2vh) scale(0.97);
    }
    4.1666666667% {
        transform: translateX(-31vw) translateY(14vh) scale(0.5);
    }
    8.3333333333% {
        transform: translateX(12vw) translateY(41vh) scale(0.8);
    }
    12.5% {
        transform: translateX(47vw) translateY(30vh) scale(0.6);
    }
    16.6666666667% {
        transform: translateX(-34vw) translateY(-45vh) scale(0.81);
    }
    20.8333333333% {
        transform: translateX(9vw) translateY(-27vh) scale(0.97);
    }
    25% {
        transform: translateX(46vw) translateY(-15vh) scale(0.54);
    }
    29.1666666667% {
        transform: translateX(32vw) translateY(-46vh) scale(0.35);
    }
    33.3333333333% {
        transform: translateX(-46vw) translateY(47vh) scale(0.34);
    }
    37.5% {
        transform: translateX(42vw) translateY(40vh) scale(0.38);
    }
    41.6666666667% {
        transform: translateX(7vw) translateY(-13vh) scale(0.67);
    }
    45.8333333333% {
        transform: translateX(29vw) translateY(12vh) scale(0.3);
    }
    50% {
        transform: translateX(18vw) translateY(8vh) scale(0.63);
    }
    54.1666666667% {
        transform: translateX(-4vw) translateY(-11vh) scale(0.83);
    }
    58.3333333333% {
        transform: translateX(-35vw) translateY(-42vh) scale(1);
    }
    62.5% {
        transform: translateX(-23vw) translateY(19vh) scale(0.27);
    }
    66.6666666667% {
        transform: translateX(-43vw) translateY(48vh) scale(0.48);
    }
    70.8333333333% {
        transform: translateX(6vw) translateY(41vh) scale(0.98);
    }
    75% {
        transform: translateX(5vw) translateY(-32vh) scale(0.99);
    }
    79.1666666667% {
        transform: translateX(-11vw) translateY(-34vh) scale(0.71);
    }
    83.3333333333% {
        transform: translateX(-29vw) translateY(-12vh) scale(0.68);
    }
    87.5% {
        transform: translateX(6vw) translateY(-26vh) scale(0.83);
    }
    91.6666666667% {
        transform: translateX(25vw) translateY(-23vh) scale(0.82);
    }
    95.8333333333% {
        transform: translateX(-23vw) translateY(40vh) scale(0.59);
    }
    100% {
        transform: translateX(-20vw) translateY(-11vh) scale(0.83);
    }
}

.firefly:nth-child(8) {
    -webkit-animation-name: move8;
    animation-name: move8;
}

.firefly:nth-child(8)::before {
    -webkit-animation-duration: 10s;
    animation-duration: 10s;
}

.firefly:nth-child(8)::after {
    -webkit-animation-duration: 10s, 7626ms;
    animation-duration: 10s, 7626ms;
    -webkit-animation-delay: 0ms, 3202ms;
    animation-delay: 0ms, 3202ms;
}

@-webkit-keyframes move8 {
    0% {
        transform: translateX(0vw) translateY(-7vh) scale(0.46);
    }
    5.5555555556% {
        transform: translateX(-48vw) translateY(45vh) scale(0.71);
    }
    11.1111111111% {
        transform: translateX(14vw) translateY(21vh) scale(0.68);
    }
    16.6666666667% {
        transform: translateX(39vw) translateY(26vh) scale(0.29);
    }
    22.2222222222% {
        transform: translateX(43vw) translateY(29vh) scale(0.7);
    }
    27.7777777778% {
        transform: translateX(1vw) translateY(-12vh) scale(0.49);
    }
    33.3333333333% {
        transform: translateX(9vw) translateY(-42vh) scale(0.66);
    }
    38.8888888889% {
        transform: translateX(49vw) translateY(-48vh) scale(0.65);
    }
    44.4444444444% {
        transform: translateX(3vw) translateY(41vh) scale(0.33);
    }
    50% {
        transform: translateX(15vw) translateY(32vh) scale(0.77);
    }
    55.5555555556% {
        transform: translateX(33vw) translateY(-19vh) scale(0.55);
    }
    61.1111111111% {
        transform: translateX(34vw) translateY(-2vh) scale(0.71);
    }
    66.6666666667% {
        transform: translateX(-16vw) translateY(24vh) scale(0.94);
    }
    72.2222222222% {
        transform: translateX(21vw) translateY(-17vh) scale(0.96);
    }
    77.7777777778% {
        transform: translateX(29vw) translateY(-28vh) scale(0.75);
    }
    83.3333333333% {
        transform: translateX(-10vw) translateY(41vh) scale(0.98);
    }
    88.8888888889% {
        transform: translateX(-41vw) translateY(-29vh) scale(0.74);
    }
    94.4444444444% {
        transform: translateX(-34vw) translateY(-22vh) scale(0.61);
    }
    100% {
        transform: translateX(-15vw) translateY(-11vh) scale(1);
    }
}

@keyframes move8 {
    0% {
        transform: translateX(0vw) translateY(-7vh) scale(0.46);
    }
    5.5555555556% {
        transform: translateX(-48vw) translateY(45vh) scale(0.71);
    }
    11.1111111111% {
        transform: translateX(14vw) translateY(21vh) scale(0.68);
    }
    16.6666666667% {
        transform: translateX(39vw) translateY(26vh) scale(0.29);
    }
    22.2222222222% {
        transform: translateX(43vw) translateY(29vh) scale(0.7);
    }
    27.7777777778% {
        transform: translateX(1vw) translateY(-12vh) scale(0.49);
    }
    33.3333333333% {
        transform: translateX(9vw) translateY(-42vh) scale(0.66);
    }
    38.8888888889% {
        transform: translateX(49vw) translateY(-48vh) scale(0.65);
    }
    44.4444444444% {
        transform: translateX(3vw) translateY(41vh) scale(0.33);
    }
    50% {
        transform: translateX(15vw) translateY(32vh) scale(0.77);
    }
    55.5555555556% {
        transform: translateX(33vw) translateY(-19vh) scale(0.55);
    }
    61.1111111111% {
        transform: translateX(34vw) translateY(-2vh) scale(0.71);
    }
    66.6666666667% {
        transform: translateX(-16vw) translateY(24vh) scale(0.94);
    }
    72.2222222222% {
        transform: translateX(21vw) translateY(-17vh) scale(0.96);
    }
    77.7777777778% {
        transform: translateX(29vw) translateY(-28vh) scale(0.75);
    }
    83.3333333333% {
        transform: translateX(-10vw) translateY(41vh) scale(0.98);
    }
    88.8888888889% {
        transform: translateX(-41vw) translateY(-29vh) scale(0.74);
    }
    94.4444444444% {
        transform: translateX(-34vw) translateY(-22vh) scale(0.61);
    }
    100% {
        transform: translateX(-15vw) translateY(-11vh) scale(1);
    }
}

.firefly:nth-child(9) {
    -webkit-animation-name: move9;
    animation-name: move9;
}

.firefly:nth-child(9)::before {
    -webkit-animation-duration: 10s;
    animation-duration: 10s;
}

.firefly:nth-child(9)::after {
    -webkit-animation-duration: 10s, 9665ms;
    animation-duration: 10s, 9665ms;
    -webkit-animation-delay: 0ms, 3542ms;
    animation-delay: 0ms, 3542ms;
}

@-webkit-keyframes move9 {
    0% {
        transform: translateX(3vw) translateY(-25vh) scale(0.59);
    }
    4.5454545455% {
        transform: translateX(31vw) translateY(35vh) scale(0.84);
    }
    9.0909090909% {
        transform: translateX(48vw) translateY(-30vh) scale(0.38);
    }
    13.6363636364% {
        transform: translateX(-9vw) translateY(39vh) scale(0.57);
    }
    18.1818181818% {
        transform: translateX(-28vw) translateY(-16vh) scale(0.33);
    }
    22.7272727273% {
        transform: translateX(23vw) translateY(13vh) scale(0.42);
    }
    27.2727272727% {
        transform: translateX(16vw) translateY(-26vh) scale(0.9);
    }
    31.8181818182% {
        transform: translateX(26vw) translateY(-7vh) scale(0.73);
    }
    36.3636363636% {
        transform: translateX(-2vw) translateY(50vh) scale(0.9);
    }
    40.9090909091% {
        transform: translateX(-1vw) translateY(-46vh) scale(0.43);
    }
    45.4545454545% {
        transform: translateX(42vw) translateY(27vh) scale(0.3);
    }
    50% {
        transform: translateX(18vw) translateY(33vh) scale(0.38);
    }
    54.5454545455% {
        transform: translateX(39vw) translateY(12vh) scale(0.94);
    }
    59.0909090909% {
        transform: translateX(-21vw) translateY(40vh) scale(0.8);
    }
    63.6363636364% {
        transform: translateX(-29vw) translateY(12vh) scale(0.96);
    }
    68.1818181818% {
        transform: translateX(14vw) translateY(2vh) scale(0.3);
    }
    72.7272727273% {
        transform: translateX(-3vw) translateY(47vh) scale(0.95);
    }
    77.2727272727% {
        transform: translateX(25vw) translateY(-31vh) scale(0.45);
    }
    81.8181818182% {
        transform: translateX(-41vw) translateY(-35vh) scale(0.99);
    }
    86.3636363636% {
        transform: translateX(19vw) translateY(-25vh) scale(0.52);
    }
    90.9090909091% {
        transform: translateX(21vw) translateY(19vh) scale(0.56);
    }
    95.4545454545% {
        transform: translateX(44vw) translateY(50vh) scale(0.71);
    }
    100% {
        transform: translateX(30vw) translateY(-33vh) scale(0.95);
    }
}

@keyframes move9 {
    0% {
        transform: translateX(3vw) translateY(-25vh) scale(0.59);
    }
    4.5454545455% {
        transform: translateX(31vw) translateY(35vh) scale(0.84);
    }
    9.0909090909% {
        transform: translateX(48vw) translateY(-30vh) scale(0.38);
    }
    13.6363636364% {
        transform: translateX(-9vw) translateY(39vh) scale(0.57);
    }
    18.1818181818% {
        transform: translateX(-28vw) translateY(-16vh) scale(0.33);
    }
    22.7272727273% {
        transform: translateX(23vw) translateY(13vh) scale(0.42);
    }
    27.2727272727% {
        transform: translateX(16vw) translateY(-26vh) scale(0.9);
    }
    31.8181818182% {
        transform: translateX(26vw) translateY(-7vh) scale(0.73);
    }
    36.3636363636% {
        transform: translateX(-2vw) translateY(50vh) scale(0.9);
    }
    40.9090909091% {
        transform: translateX(-1vw) translateY(-46vh) scale(0.43);
    }
    45.4545454545% {
        transform: translateX(42vw) translateY(27vh) scale(0.3);
    }
    50% {
        transform: translateX(18vw) translateY(33vh) scale(0.38);
    }
    54.5454545455% {
        transform: translateX(39vw) translateY(12vh) scale(0.94);
    }
    59.0909090909% {
        transform: translateX(-21vw) translateY(40vh) scale(0.8);
    }
    63.6363636364% {
        transform: translateX(-29vw) translateY(12vh) scale(0.96);
    }
    68.1818181818% {
        transform: translateX(14vw) translateY(2vh) scale(0.3);
    }
    72.7272727273% {
        transform: translateX(-3vw) translateY(47vh) scale(0.95);
    }
    77.2727272727% {
        transform: translateX(25vw) translateY(-31vh) scale(0.45);
    }
    81.8181818182% {
        transform: translateX(-41vw) translateY(-35vh) scale(0.99);
    }
    86.3636363636% {
        transform: translateX(19vw) translateY(-25vh) scale(0.52);
    }
    90.9090909091% {
        transform: translateX(21vw) translateY(19vh) scale(0.56);
    }
    95.4545454545% {
        transform: translateX(44vw) translateY(50vh) scale(0.71);
    }
    100% {
        transform: translateX(30vw) translateY(-33vh) scale(0.95);
    }
}

.firefly:nth-child(10) {
    -webkit-animation-name: move10;
    animation-name: move10;
}

.firefly:nth-child(10)::before {
    -webkit-animation-duration: 15s;
    animation-duration: 15s;
}

.firefly:nth-child(10)::after {
    -webkit-animation-duration: 15s, 9761ms;
    animation-duration: 15s, 9761ms;
    -webkit-animation-delay: 0ms, 7022ms;
    animation-delay: 0ms, 7022ms;
}

@-webkit-keyframes move10 {
    0% {
        transform: translateX(47vw) translateY(-40vh) scale(0.86);
    }
    5% {
        transform: translateX(5vw) translateY(-12vh) scale(0.45);
    }
    10% {
        transform: translateX(31vw) translateY(-24vh) scale(0.68);
    }
    15% {
        transform: translateX(0vw) translateY(31vh) scale(0.41);
    }
    20% {
        transform: translateX(2vw) translateY(-47vh) scale(1);
    }
    25% {
        transform: translateX(-47vw) translateY(43vh) scale(0.91);
    }
    30% {
        transform: translateX(32vw) translateY(43vh) scale(0.67);
    }
    35% {
        transform: translateX(-47vw) translateY(4vh) scale(0.8);
    }
    40% {
        transform: translateX(-13vw) translateY(36vh) scale(0.67);
    }
    45% {
        transform: translateX(48vw) translateY(26vh) scale(0.8);
    }
    50% {
        transform: translateX(-1vw) translateY(15vh) scale(0.36);
    }
    55% {
        transform: translateX(39vw) translateY(6vh) scale(0.92);
    }
    60% {
        transform: translateX(-38vw) translateY(-36vh) scale(0.82);
    }
    65% {
        transform: translateX(-12vw) translateY(31vh) scale(0.46);
    }
    70% {
        transform: translateX(-23vw) translateY(12vh) scale(0.65);
    }
    75% {
        transform: translateX(11vw) translateY(-18vh) scale(0.42);
    }
    80% {
        transform: translateX(-1vw) translateY(25vh) scale(0.51);
    }
    85% {
        transform: translateX(-27vw) translateY(-20vh) scale(0.3);
    }
    90% {
        transform: translateX(42vw) translateY(38vh) scale(0.54);
    }
    95% {
        transform: translateX(33vw) translateY(-23vh) scale(0.36);
    }
    100% {
        transform: translateX(50vw) translateY(-1vh) scale(0.98);
    }
}

@keyframes move10 {
    0% {
        transform: translateX(47vw) translateY(-40vh) scale(0.86);
    }
    5% {
        transform: translateX(5vw) translateY(-12vh) scale(0.45);
    }
    10% {
        transform: translateX(31vw) translateY(-24vh) scale(0.68);
    }
    15% {
        transform: translateX(0vw) translateY(31vh) scale(0.41);
    }
    20% {
        transform: translateX(2vw) translateY(-47vh) scale(1);
    }
    25% {
        transform: translateX(-47vw) translateY(43vh) scale(0.91);
    }
    30% {
        transform: translateX(32vw) translateY(43vh) scale(0.67);
    }
    35% {
        transform: translateX(-47vw) translateY(4vh) scale(0.8);
    }
    40% {
        transform: translateX(-13vw) translateY(36vh) scale(0.67);
    }
    45% {
        transform: translateX(48vw) translateY(26vh) scale(0.8);
    }
    50% {
        transform: translateX(-1vw) translateY(15vh) scale(0.36);
    }
    55% {
        transform: translateX(39vw) translateY(6vh) scale(0.92);
    }
    60% {
        transform: translateX(-38vw) translateY(-36vh) scale(0.82);
    }
    65% {
        transform: translateX(-12vw) translateY(31vh) scale(0.46);
    }
    70% {
        transform: translateX(-23vw) translateY(12vh) scale(0.65);
    }
    75% {
        transform: translateX(11vw) translateY(-18vh) scale(0.42);
    }
    80% {
        transform: translateX(-1vw) translateY(25vh) scale(0.51);
    }
    85% {
        transform: translateX(-27vw) translateY(-20vh) scale(0.3);
    }
    90% {
        transform: translateX(42vw) translateY(38vh) scale(0.54);
    }
    95% {
        transform: translateX(33vw) translateY(-23vh) scale(0.36);
    }
    100% {
        transform: translateX(50vw) translateY(-1vh) scale(0.98);
    }
}

.firefly:nth-child(11) {
    -webkit-animation-name: move11;
    animation-name: move11;
}

.firefly:nth-child(11)::before {
    -webkit-animation-duration: 12s;
    animation-duration: 12s;
}

.firefly:nth-child(11)::after {
    -webkit-animation-duration: 12s, 7690ms;
    animation-duration: 12s, 7690ms;
    -webkit-animation-delay: 0ms, 1634ms;
    animation-delay: 0ms, 1634ms;
}

@-webkit-keyframes move11 {
    0% {
        transform: translateX(8vw) translateY(-9vh) scale(0.62);
    }
    5.5555555556% {
        transform: translateX(-33vw) translateY(16vh) scale(0.74);
    }
    11.1111111111% {
        transform: translateX(-20vw) translateY(-10vh) scale(0.62);
    }
    16.6666666667% {
        transform: translateX(5vw) translateY(4vh) scale(0.96);
    }
    22.2222222222% {
        transform: translateX(-24vw) translateY(-28vh) scale(0.64);
    }
    27.7777777778% {
        transform: translateX(-41vw) translateY(30vh) scale(0.57);
    }
    33.3333333333% {
        transform: translateX(38vw) translateY(22vh) scale(0.6);
    }
    38.8888888889% {
        transform: translateX(-15vw) translateY(22vh) scale(0.75);
    }
    44.4444444444% {
        transform: translateX(-49vw) translateY(-17vh) scale(0.77);
    }
    50% {
        transform: translateX(36vw) translateY(27vh) scale(0.33);
    }
    55.5555555556% {
        transform: translateX(-20vw) translateY(34vh) scale(0.63);
    }
    61.1111111111% {
        transform: translateX(-17vw) translateY(10vh) scale(0.38);
    }
    66.6666666667% {
        transform: translateX(-33vw) translateY(9vh) scale(0.81);
    }
    72.2222222222% {
        transform: translateX(-10vw) translateY(4vh) scale(0.61);
    }
    77.7777777778% {
        transform: translateX(28vw) translateY(-18vh) scale(1);
    }
    83.3333333333% {
        transform: translateX(-31vw) translateY(43vh) scale(0.43);
    }
    88.8888888889% {
        transform: translateX(-15vw) translateY(9vh) scale(0.82);
    }
    94.4444444444% {
        transform: translateX(42vw) translateY(48vh) scale(0.65);
    }
    100% {
        transform: translateX(-41vw) translateY(46vh) scale(0.53);
    }
}

@keyframes move11 {
    0% {
        transform: translateX(8vw) translateY(-9vh) scale(0.62);
    }
    5.5555555556% {
        transform: translateX(-33vw) translateY(16vh) scale(0.74);
    }
    11.1111111111% {
        transform: translateX(-20vw) translateY(-10vh) scale(0.62);
    }
    16.6666666667% {
        transform: translateX(5vw) translateY(4vh) scale(0.96);
    }
    22.2222222222% {
        transform: translateX(-24vw) translateY(-28vh) scale(0.64);
    }
    27.7777777778% {
        transform: translateX(-41vw) translateY(30vh) scale(0.57);
    }
    33.3333333333% {
        transform: translateX(38vw) translateY(22vh) scale(0.6);
    }
    38.8888888889% {
        transform: translateX(-15vw) translateY(22vh) scale(0.75);
    }
    44.4444444444% {
        transform: translateX(-49vw) translateY(-17vh) scale(0.77);
    }
    50% {
        transform: translateX(36vw) translateY(27vh) scale(0.33);
    }
    55.5555555556% {
        transform: translateX(-20vw) translateY(34vh) scale(0.63);
    }
    61.1111111111% {
        transform: translateX(-17vw) translateY(10vh) scale(0.38);
    }
    66.6666666667% {
        transform: translateX(-33vw) translateY(9vh) scale(0.81);
    }
    72.2222222222% {
        transform: translateX(-10vw) translateY(4vh) scale(0.61);
    }
    77.7777777778% {
        transform: translateX(28vw) translateY(-18vh) scale(1);
    }
    83.3333333333% {
        transform: translateX(-31vw) translateY(43vh) scale(0.43);
    }
    88.8888888889% {
        transform: translateX(-15vw) translateY(9vh) scale(0.82);
    }
    94.4444444444% {
        transform: translateX(42vw) translateY(48vh) scale(0.65);
    }
    100% {
        transform: translateX(-41vw) translateY(46vh) scale(0.53);
    }
}

.firefly:nth-child(12) {
    -webkit-animation-name: move12;
    animation-name: move12;
}

.firefly:nth-child(12)::before {
    -webkit-animation-duration: 18s;
    animation-duration: 18s;
}

.firefly:nth-child(12)::after {
    -webkit-animation-duration: 18s, 10030ms;
    animation-duration: 18s, 10030ms;
    -webkit-animation-delay: 0ms, 8342ms;
    animation-delay: 0ms, 8342ms;
}

@-webkit-keyframes move12 {
    0% {
        transform: translateX(-20vw) translateY(38vh) scale(0.79);
    }
    3.7037037037% {
        transform: translateX(-46vw) translateY(6vh) scale(0.96);
    }
    7.4074074074% {
        transform: translateX(-15vw) translateY(-22vh) scale(0.7);
    }
    11.1111111111% {
        transform: translateX(-33vw) translateY(37vh) scale(0.37);
    }
    14.8148148148% {
        transform: translateX(4vw) translateY(-45vh) scale(0.72);
    }
    18.5185185185% {
        transform: translateX(46vw) translateY(16vh) scale(0.87);
    }
    22.2222222222% {
        transform: translateX(23vw) translateY(16vh) scale(1);
    }
    25.9259259259% {
        transform: translateX(-34vw) translateY(21vh) scale(0.29);
    }
    29.6296296296% {
        transform: translateX(23vw) translateY(33vh) scale(0.82);
    }
    33.3333333333% {
        transform: translateX(22vw) translateY(-36vh) scale(0.36);
    }
    37.037037037% {
        transform: translateX(-26vw) translateY(-36vh) scale(0.42);
    }
    40.7407407407% {
        transform: translateX(19vw) translateY(-1vh) scale(0.31);
    }
    44.4444444444% {
        transform: translateX(-36vw) translateY(-29vh) scale(0.38);
    }
    48.1481481481% {
        transform: translateX(-40vw) translateY(11vh) scale(0.41);
    }
    51.8518518519% {
        transform: translateX(15vw) translateY(34vh) scale(0.57);
    }
    55.5555555556% {
        transform: translateX(44vw) translateY(15vh) scale(0.96);
    }
    59.2592592593% {
        transform: translateX(46vw) translateY(-36vh) scale(0.34);
    }
    62.962962963% {
        transform: translateX(45vw) translateY(-11vh) scale(0.5);
    }
    66.6666666667% {
        transform: translateX(-16vw) translateY(-47vh) scale(0.79);
    }
    70.3703703704% {
        transform: translateX(1vw) translateY(3vh) scale(0.68);
    }
    74.0740740741% {
        transform: translateX(1vw) translateY(-41vh) scale(0.72);
    }
    77.7777777778% {
        transform: translateX(-31vw) translateY(17vh) scale(0.41);
    }
    81.4814814815% {
        transform: translateX(-7vw) translateY(4vh) scale(0.52);
    }
    85.1851851852% {
        transform: translateX(-27vw) translateY(-28vh) scale(0.95);
    }
    88.8888888889% {
        transform: translateX(28vw) translateY(39vh) scale(0.47);
    }
    92.5925925926% {
        transform: translateX(36vw) translateY(-48vh) scale(0.98);
    }
    96.2962962963% {
        transform: translateX(-6vw) translateY(27vh) scale(0.47);
    }
    100% {
        transform: translateX(20vw) translateY(23vh) scale(0.27);
    }
}

@keyframes move12 {
    0% {
        transform: translateX(-20vw) translateY(38vh) scale(0.79);
    }
    3.7037037037% {
        transform: translateX(-46vw) translateY(6vh) scale(0.96);
    }
    7.4074074074% {
        transform: translateX(-15vw) translateY(-22vh) scale(0.7);
    }
    11.1111111111% {
        transform: translateX(-33vw) translateY(37vh) scale(0.37);
    }
    14.8148148148% {
        transform: translateX(4vw) translateY(-45vh) scale(0.72);
    }
    18.5185185185% {
        transform: translateX(46vw) translateY(16vh) scale(0.87);
    }
    22.2222222222% {
        transform: translateX(23vw) translateY(16vh) scale(1);
    }
    25.9259259259% {
        transform: translateX(-34vw) translateY(21vh) scale(0.29);
    }
    29.6296296296% {
        transform: translateX(23vw) translateY(33vh) scale(0.82);
    }
    33.3333333333% {
        transform: translateX(22vw) translateY(-36vh) scale(0.36);
    }
    37.037037037% {
        transform: translateX(-26vw) translateY(-36vh) scale(0.42);
    }
    40.7407407407% {
        transform: translateX(19vw) translateY(-1vh) scale(0.31);
    }
    44.4444444444% {
        transform: translateX(-36vw) translateY(-29vh) scale(0.38);
    }
    48.1481481481% {
        transform: translateX(-40vw) translateY(11vh) scale(0.41);
    }
    51.8518518519% {
        transform: translateX(15vw) translateY(34vh) scale(0.57);
    }
    55.5555555556% {
        transform: translateX(44vw) translateY(15vh) scale(0.96);
    }
    59.2592592593% {
        transform: translateX(46vw) translateY(-36vh) scale(0.34);
    }
    62.962962963% {
        transform: translateX(45vw) translateY(-11vh) scale(0.5);
    }
    66.6666666667% {
        transform: translateX(-16vw) translateY(-47vh) scale(0.79);
    }
    70.3703703704% {
        transform: translateX(1vw) translateY(3vh) scale(0.68);
    }
    74.0740740741% {
        transform: translateX(1vw) translateY(-41vh) scale(0.72);
    }
    77.7777777778% {
        transform: translateX(-31vw) translateY(17vh) scale(0.41);
    }
    81.4814814815% {
        transform: translateX(-7vw) translateY(4vh) scale(0.52);
    }
    85.1851851852% {
        transform: translateX(-27vw) translateY(-28vh) scale(0.95);
    }
    88.8888888889% {
        transform: translateX(28vw) translateY(39vh) scale(0.47);
    }
    92.5925925926% {
        transform: translateX(36vw) translateY(-48vh) scale(0.98);
    }
    96.2962962963% {
        transform: translateX(-6vw) translateY(27vh) scale(0.47);
    }
    100% {
        transform: translateX(20vw) translateY(23vh) scale(0.27);
    }
}

.firefly:nth-child(13) {
    -webkit-animation-name: move13;
    animation-name: move13;
}

.firefly:nth-child(13)::before {
    -webkit-animation-duration: 17s;
    animation-duration: 17s;
}

.firefly:nth-child(13)::after {
    -webkit-animation-duration: 17s, 8475ms;
    animation-duration: 17s, 8475ms;
    -webkit-animation-delay: 0ms, 1305ms;
    animation-delay: 0ms, 1305ms;
}

@-webkit-keyframes move13 {
    0% {
        transform: translateX(3vw) translateY(31vh) scale(0.46);
    }
    4.1666666667% {
        transform: translateX(47vw) translateY(-5vh) scale(0.9);
    }
    8.3333333333% {
        transform: translateX(49vw) translateY(-8vh) scale(0.76);
    }
    12.5% {
        transform: translateX(-3vw) translateY(-39vh) scale(0.43);
    }
    16.6666666667% {
        transform: translateX(12vw) translateY(25vh) scale(0.55);
    }
    20.8333333333% {
        transform: translateX(17vw) translateY(-41vh) scale(0.75);
    }
    25% {
        transform: translateX(-7vw) translateY(-6vh) scale(0.65);
    }
    29.1666666667% {
        transform: translateX(36vw) translateY(13vh) scale(0.78);
    }
    33.3333333333% {
        transform: translateX(-25vw) translateY(42vh) scale(0.47);
    }
    37.5% {
        transform: translateX(3vw) translateY(8vh) scale(0.56);
    }
    41.6666666667% {
        transform: translateX(38vw) translateY(-42vh) scale(0.68);
    }
    45.8333333333% {
        transform: translateX(-1vw) translateY(-37vh) scale(0.6);
    }
    50% {
        transform: translateX(-20vw) translateY(-26vh) scale(0.34);
    }
    54.1666666667% {
        transform: translateX(-25vw) translateY(-7vh) scale(0.33);
    }
    58.3333333333% {
        transform: translateX(-30vw) translateY(-14vh) scale(0.81);
    }
    62.5% {
        transform: translateX(-21vw) translateY(24vh) scale(0.56);
    }
    66.6666666667% {
        transform: translateX(-48vw) translateY(-33vh) scale(0.27);
    }
    70.8333333333% {
        transform: translateX(23vw) translateY(-46vh) scale(0.42);
    }
    75% {
        transform: translateX(37vw) translateY(37vh) scale(0.48);
    }
    79.1666666667% {
        transform: translateX(43vw) translateY(29vh) scale(0.59);
    }
    83.3333333333% {
        transform: translateX(-31vw) translateY(-19vh) scale(0.67);
    }
    87.5% {
        transform: translateX(-40vw) translateY(9vh) scale(0.27);
    }
    91.6666666667% {
        transform: translateX(-45vw) translateY(46vh) scale(0.56);
    }
    95.8333333333% {
        transform: translateX(8vw) translateY(16vh) scale(0.41);
    }
    100% {
        transform: translateX(50vw) translateY(19vh) scale(0.28);
    }
}

@keyframes move13 {
    0% {
        transform: translateX(3vw) translateY(31vh) scale(0.46);
    }
    4.1666666667% {
        transform: translateX(47vw) translateY(-5vh) scale(0.9);
    }
    8.3333333333% {
        transform: translateX(49vw) translateY(-8vh) scale(0.76);
    }
    12.5% {
        transform: translateX(-3vw) translateY(-39vh) scale(0.43);
    }
    16.6666666667% {
        transform: translateX(12vw) translateY(25vh) scale(0.55);
    }
    20.8333333333% {
        transform: translateX(17vw) translateY(-41vh) scale(0.75);
    }
    25% {
        transform: translateX(-7vw) translateY(-6vh) scale(0.65);
    }
    29.1666666667% {
        transform: translateX(36vw) translateY(13vh) scale(0.78);
    }
    33.3333333333% {
        transform: translateX(-25vw) translateY(42vh) scale(0.47);
    }
    37.5% {
        transform: translateX(3vw) translateY(8vh) scale(0.56);
    }
    41.6666666667% {
        transform: translateX(38vw) translateY(-42vh) scale(0.68);
    }
    45.8333333333% {
        transform: translateX(-1vw) translateY(-37vh) scale(0.6);
    }
    50% {
        transform: translateX(-20vw) translateY(-26vh) scale(0.34);
    }
    54.1666666667% {
        transform: translateX(-25vw) translateY(-7vh) scale(0.33);
    }
    58.3333333333% {
        transform: translateX(-30vw) translateY(-14vh) scale(0.81);
    }
    62.5% {
        transform: translateX(-21vw) translateY(24vh) scale(0.56);
    }
    66.6666666667% {
        transform: translateX(-48vw) translateY(-33vh) scale(0.27);
    }
    70.8333333333% {
        transform: translateX(23vw) translateY(-46vh) scale(0.42);
    }
    75% {
        transform: translateX(37vw) translateY(37vh) scale(0.48);
    }
    79.1666666667% {
        transform: translateX(43vw) translateY(29vh) scale(0.59);
    }
    83.3333333333% {
        transform: translateX(-31vw) translateY(-19vh) scale(0.67);
    }
    87.5% {
        transform: translateX(-40vw) translateY(9vh) scale(0.27);
    }
    91.6666666667% {
        transform: translateX(-45vw) translateY(46vh) scale(0.56);
    }
    95.8333333333% {
        transform: translateX(8vw) translateY(16vh) scale(0.41);
    }
    100% {
        transform: translateX(50vw) translateY(19vh) scale(0.28);
    }
}

.firefly:nth-child(14) {
    -webkit-animation-name: move14;
    animation-name: move14;
}

.firefly:nth-child(14)::before {
    -webkit-animation-duration: 11s;
    animation-duration: 11s;
}

.firefly:nth-child(14)::after {
    -webkit-animation-duration: 11s, 8352ms;
    animation-duration: 11s, 8352ms;
    -webkit-animation-delay: 0ms, 5186ms;
    animation-delay: 0ms, 5186ms;
}

@-webkit-keyframes move14 {
    0% {
        transform: translateX(6vw) translateY(-47vh) scale(0.48);
    }
    5.2631578947% {
        transform: translateX(-4vw) translateY(45vh) scale(0.73);
    }
    10.5263157895% {
        transform: translateX(28vw) translateY(28vh) scale(0.72);
    }
    15.7894736842% {
        transform: translateX(-29vw) translateY(40vh) scale(0.77);
    }
    21.0526315789% {
        transform: translateX(12vw) translateY(26vh) scale(0.33);
    }
    26.3157894737% {
        transform: translateX(-31vw) translateY(47vh) scale(0.65);
    }
    31.5789473684% {
        transform: translateX(-32vw) translateY(49vh) scale(0.3);
    }
    36.8421052632% {
        transform: translateX(-6vw) translateY(32vh) scale(0.34);
    }
    42.1052631579% {
        transform: translateX(-39vw) translateY(-43vh) scale(0.81);
    }
    47.3684210526% {
        transform: translateX(-29vw) translateY(45vh) scale(0.26);
    }
    52.6315789474% {
        transform: translateX(30vw) translateY(-22vh) scale(0.97);
    }
    57.8947368421% {
        transform: translateX(-18vw) translateY(-4vh) scale(0.61);
    }
    63.1578947368% {
        transform: translateX(-20vw) translateY(-19vh) scale(0.33);
    }
    68.4210526316% {
        transform: translateX(35vw) translateY(-25vh) scale(0.28);
    }
    73.6842105263% {
        transform: translateX(9vw) translateY(0vh) scale(0.36);
    }
    78.9473684211% {
        transform: translateX(17vw) translateY(20vh) scale(0.84);
    }
    84.2105263158% {
        transform: translateX(-8vw) translateY(-49vh) scale(0.54);
    }
    89.4736842105% {
        transform: translateX(0vw) translateY(34vh) scale(0.34);
    }
    94.7368421053% {
        transform: translateX(5vw) translateY(-6vh) scale(0.48);
    }
    100% {
        transform: translateX(-13vw) translateY(28vh) scale(0.38);
    }
}

@keyframes move14 {
    0% {
        transform: translateX(6vw) translateY(-47vh) scale(0.48);
    }
    5.2631578947% {
        transform: translateX(-4vw) translateY(45vh) scale(0.73);
    }
    10.5263157895% {
        transform: translateX(28vw) translateY(28vh) scale(0.72);
    }
    15.7894736842% {
        transform: translateX(-29vw) translateY(40vh) scale(0.77);
    }
    21.0526315789% {
        transform: translateX(12vw) translateY(26vh) scale(0.33);
    }
    26.3157894737% {
        transform: translateX(-31vw) translateY(47vh) scale(0.65);
    }
    31.5789473684% {
        transform: translateX(-32vw) translateY(49vh) scale(0.3);
    }
    36.8421052632% {
        transform: translateX(-6vw) translateY(32vh) scale(0.34);
    }
    42.1052631579% {
        transform: translateX(-39vw) translateY(-43vh) scale(0.81);
    }
    47.3684210526% {
        transform: translateX(-29vw) translateY(45vh) scale(0.26);
    }
    52.6315789474% {
        transform: translateX(30vw) translateY(-22vh) scale(0.97);
    }
    57.8947368421% {
        transform: translateX(-18vw) translateY(-4vh) scale(0.61);
    }
    63.1578947368% {
        transform: translateX(-20vw) translateY(-19vh) scale(0.33);
    }
    68.4210526316% {
        transform: translateX(35vw) translateY(-25vh) scale(0.28);
    }
    73.6842105263% {
        transform: translateX(9vw) translateY(0vh) scale(0.36);
    }
    78.9473684211% {
        transform: translateX(17vw) translateY(20vh) scale(0.84);
    }
    84.2105263158% {
        transform: translateX(-8vw) translateY(-49vh) scale(0.54);
    }
    89.4736842105% {
        transform: translateX(0vw) translateY(34vh) scale(0.34);
    }
    94.7368421053% {
        transform: translateX(5vw) translateY(-6vh) scale(0.48);
    }
    100% {
        transform: translateX(-13vw) translateY(28vh) scale(0.38);
    }
}

.firefly:nth-child(15) {
    -webkit-animation-name: move15;
    animation-name: move15;
}

.firefly:nth-child(15)::before {
    -webkit-animation-duration: 16s;
    animation-duration: 16s;
}

.firefly:nth-child(15)::after {
    -webkit-animation-duration: 16s, 6265ms;
    animation-duration: 16s, 6265ms;
    -webkit-animation-delay: 0ms, 2663ms;
    animation-delay: 0ms, 2663ms;
}

@-webkit-keyframes move15 {
    0% {
        transform: translateX(2vw) translateY(13vh) scale(0.84);
    }
    4.1666666667% {
        transform: translateX(-5vw) translateY(-46vh) scale(0.42);
    }
    8.3333333333% {
        transform: translateX(-5vw) translateY(-3vh) scale(0.52);
    }
    12.5% {
        transform: translateX(32vw) translateY(-16vh) scale(1);
    }
    16.6666666667% {
        transform: translateX(-17vw) translateY(-9vh) scale(0.66);
    }
    20.8333333333% {
        transform: translateX(-14vw) translateY(-37vh) scale(0.92);
    }
    25% {
        transform: translateX(-16vw) translateY(-45vh) scale(0.56);
    }
    29.1666666667% {
        transform: translateX(28vw) translateY(1vh) scale(0.9);
    }
    33.3333333333% {
        transform: translateX(-38vw) translateY(37vh) scale(0.69);
    }
    37.5% {
        transform: translateX(-41vw) translateY(-28vh) scale(0.3);
    }
    41.6666666667% {
        transform: translateX(-18vw) translateY(-42vh) scale(0.79);
    }
    45.8333333333% {
        transform: translateX(34vw) translateY(-41vh) scale(0.84);
    }
    50% {
        transform: translateX(44vw) translateY(26vh) scale(0.8);
    }
    54.1666666667% {
        transform: translateX(14vw) translateY(36vh) scale(0.86);
    }
    58.3333333333% {
        transform: translateX(4vw) translateY(7vh) scale(0.55);
    }
    62.5% {
        transform: translateX(41vw) translateY(-34vh) scale(0.77);
    }
    66.6666666667% {
        transform: translateX(-21vw) translateY(-18vh) scale(0.73);
    }
    70.8333333333% {
        transform: translateX(49vw) translateY(11vh) scale(0.65);
    }
    75% {
        transform: translateX(2vw) translateY(-6vh) scale(0.46);
    }
    79.1666666667% {
        transform: translateX(5vw) translateY(-29vh) scale(0.26);
    }
    83.3333333333% {
        transform: translateX(27vw) translateY(-48vh) scale(0.8);
    }
    87.5% {
        transform: translateX(-17vw) translateY(3vh) scale(0.39);
    }
    91.6666666667% {
        transform: translateX(-12vw) translateY(31vh) scale(0.78);
    }
    95.8333333333% {
        transform: translateX(17vw) translateY(-1vh) scale(0.77);
    }
    100% {
        transform: translateX(-33vw) translateY(18vh) scale(0.67);
    }
}

@keyframes move15 {
    0% {
        transform: translateX(2vw) translateY(13vh) scale(0.84);
    }
    4.1666666667% {
        transform: translateX(-5vw) translateY(-46vh) scale(0.42);
    }
    8.3333333333% {
        transform: translateX(-5vw) translateY(-3vh) scale(0.52);
    }
    12.5% {
        transform: translateX(32vw) translateY(-16vh) scale(1);
    }
    16.6666666667% {
        transform: translateX(-17vw) translateY(-9vh) scale(0.66);
    }
    20.8333333333% {
        transform: translateX(-14vw) translateY(-37vh) scale(0.92);
    }
    25% {
        transform: translateX(-16vw) translateY(-45vh) scale(0.56);
    }
    29.1666666667% {
        transform: translateX(28vw) translateY(1vh) scale(0.9);
    }
    33.3333333333% {
        transform: translateX(-38vw) translateY(37vh) scale(0.69);
    }
    37.5% {
        transform: translateX(-41vw) translateY(-28vh) scale(0.3);
    }
    41.6666666667% {
        transform: translateX(-18vw) translateY(-42vh) scale(0.79);
    }
    45.8333333333% {
        transform: translateX(34vw) translateY(-41vh) scale(0.84);
    }
    50% {
        transform: translateX(44vw) translateY(26vh) scale(0.8);
    }
    54.1666666667% {
        transform: translateX(14vw) translateY(36vh) scale(0.86);
    }
    58.3333333333% {
        transform: translateX(4vw) translateY(7vh) scale(0.55);
    }
    62.5% {
        transform: translateX(41vw) translateY(-34vh) scale(0.77);
    }
    66.6666666667% {
        transform: translateX(-21vw) translateY(-18vh) scale(0.73);
    }
    70.8333333333% {
        transform: translateX(49vw) translateY(11vh) scale(0.65);
    }
    75% {
        transform: translateX(2vw) translateY(-6vh) scale(0.46);
    }
    79.1666666667% {
        transform: translateX(5vw) translateY(-29vh) scale(0.26);
    }
    83.3333333333% {
        transform: translateX(27vw) translateY(-48vh) scale(0.8);
    }
    87.5% {
        transform: translateX(-17vw) translateY(3vh) scale(0.39);
    }
    91.6666666667% {
        transform: translateX(-12vw) translateY(31vh) scale(0.78);
    }
    95.8333333333% {
        transform: translateX(17vw) translateY(-1vh) scale(0.77);
    }
    100% {
        transform: translateX(-33vw) translateY(18vh) scale(0.67);
    }
}

@-webkit-keyframes drift {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes drift {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@-webkit-keyframes flash {
    0%, 30%, 100% {
        opacity: 0;
        box-shadow: 0 0 0vw 0vw yellow;
    }
    5% {
        opacity: 1;
        box-shadow: 0 0 2vw 0.4vw yellow;
    }
}

@keyframes flash {
    0%, 30%, 100% {
        opacity: 0;
        box-shadow: 0 0 0vw 0vw yellow;
    }
    5% {
        opacity: 1;
        box-shadow: 0 0 2vw 0.4vw yellow;
    }
}


/* --- СОВРЕМЕННЫЙ ЧАТ --- */
#chat {
    display: none;
    position: absolute;
    top: 15%;
    left: 7.5%;
    width: 82.2%;
    height: 80%;
    flex-direction: column;
    border-radius: 4px;
    z-index: 10;
    overflow: hidden;
    box-shadow: 15px 15px 15px 5px rgba(0, 0, 0, 0.3);
}

/* Зона сообщений */
/* Отключаем старые ломающие стили */
#chat.top > div {
    position: relative !important;
    top: 0 !important;
    width: 100%;
    height: auto !important;
}

/* Правильный контейнер для плагина скролла */
.scrollbar-inner {
    flex: 1 1 auto !important;
    min-height: 0 !important; /* Магия Flexbox для скролла */
    height: 100% !important;  /* Плагину нужна эта высота для расчетов */
    padding: 0 !important;
    display: block !important;
}

/* Скрываем громоздкий скроллбар, делаем его тонким и стильным */
.scrollbar-inner::-webkit-scrollbar { width: 5px; }
.scrollbar-inner::-webkit-scrollbar-track { background: transparent; }
.scrollbar-inner::-webkit-scrollbar-thumb { background: rgba(0, 231, 141, 0.3); border-radius: 5px; }

/* Контейнер сообщений с подушкой безопасности снизу */
.messages {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
    padding: 15px 15px 30px 15px !important;
}

/* Обертка сообщения (Пузырь) */
.message-frame {
    display: flex;
    width: 100%;
    margin: 0;
    padding: 0;
    background: transparent;
}

.message {
    position: relative;
    max-width: 80%;
    padding: 8px 14px;
    border-radius: 16px;
    font-family: Arial, sans-serif;
    font-size: 14px !important;
    line-height: 1.4;
    word-wrap: break-word;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    background: url('../images/message-bubble.webp');
    background-size: contain;
}

/* --- Чужие сообщения (Слева) --- */
.message-frame.other-message { justify-content: flex-start; }
.message-frame.other-message .message {
    border-bottom-left-radius: 4px; /* Острый уголок */
    border: 1px solid rgba(255,255,255,0.05);
    color: #D5D8D9;
    text-align: left;
}
.message-frame.other-message .name {
    color: #d4a373;
    font-weight: bold;
    font-size: 12px;
    display: block;
    margin-bottom: 4px;
    text-decoration: none;
    text-align: left;
}

/* --- Мои сообщения (Справа) --- */
.message-frame.my-message { justify-content: flex-end; }
.message-frame.my-message .message {
    background: url('../images/message-bubble-my.webp');
    border-bottom-right-radius: 4px;
    color: #ffffff;
}
.message-frame.my-message .name {
    display: none; /* Себе имя не показываем */
}

/* Время внутри пузыря */
.time {
    font-size: 10px;
    color: rgba(255,255,255,0.4);
    float: right;
    margin-top: 5px;
    margin-left: 12px;
}

/* --- Панель ввода --- */
/* Фиксируем форму внизу */
#chat form {
    flex: 0 0 auto !important;
    position: relative !important;
    display: flex;
    align-items: flex-end;
    padding: 4px;
    background: url('../images/send-panel.png');
    border-top: 1px solid rgba(255,255,255,0.05);
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box;
}

#chat textarea {
    flex-grow: 1;
    background: #2a1815;
    color: #fff;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 20px;
    padding: 10px 15px;
    min-height: 20px;
    max-height: 80px; /* Чтобы клава не съела весь экран */
    font-size: 14px;
    resize: none;
    overflow-y: auto;
    transition: border 0.2s;
    margin-top: 5px;
    margin-bottom: 5px;
    box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.6), 0 1px 1px rgba(255, 255, 255, 0.1);
}

#chat textarea:focus {
    border-color: #34271E;
    outline: none;
    background: rgb(65 44 43 / 90%);
}

#send-message {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: url('../images/send-button.png') no-repeat center center;
    background-size: 50px;
    border: none;
    margin-left: 10px;
    margin-bottom: 0px;
    cursor: pointer;
    flex-shrink: 0;
    display: block; /* Убрал логику скрытия/показа, так выглядит стабильнее */
}
#send-message:active { transform: scale(0.9); }

/* --- ПАНЕЛЬ СМАЙЛОВ --- */
#emoji-toggle {
    background: transparent;
    border: none;
    font-size: 24px;
    cursor: pointer;
    padding: 0 10px 0 0;
    outline: none;
    filter: grayscale(100%) opacity(0.7);
    transition: all 0.2s;
    flex-shrink: 0;
    margin-bottom: 10px; /* Выравниваем по центру строки */
}

#emoji-toggle:hover, #emoji-toggle.active {
    filter: grayscale(0%) opacity(1);
    transform: scale(1.1);
}

#emoji-panel {
    display: none;
    position: absolute;
    bottom: 75px;
    left: 10px;
    width: 260px !important;
    background: rgba(0,0,0,0.5);
    border: 1px solid rgba(56, 23, 27, 0.8);
    border-radius: 12px;
    padding: 12px;
    box-shadow: 0 -5px 20px rgba(0,0,0,0.5);
    z-index: 20;
    max-height: 160px;
    overflow-y: auto;

    /* --- МАГИЯ СЕТКИ --- */
    grid-template-columns: repeat(6, 1fr); /* 6 одинаковых колонок */
    justify-items: center; /* Центрируем смайлики в ячейках */
    align-items: center;
    gap: 12px 8px; /* Отступы между строками и колонками */

    /* Кастомный скролл */
    scrollbar-width: thin;
    scrollbar-color: rgba(100, 45, 50, 0.5) transparent;
}

#emoji-panel::-webkit-scrollbar { width: 4px; }
#emoji-panel::-webkit-scrollbar-thumb { background: rgba(0, 231, 141, 0.5); border-radius: 2px; }

.emoji-item {
    font-size: 24px;
    text-align: center;
    cursor: pointer;
    user-select: none;
    transition: transform 0.1s;
}

.emoji-item:active {
    transform: scale(0.8); /* Эффект "нажатия" */
}

/* --- ФИКС МОБИЛЬНОЙ КЛАВИАТУРЫ (FLY TO TOP) --- */
@media screen and (max-height: 600px), screen and (max-width: 950px) {

    /* Когда чат получает класс keyboard-open, форма улетает наверх */
    #chat.keyboard-open form {
        position: fixed !important;
        top: 0 !important;
        bottom: auto !important;
        #left: 0 !important;
        left: 50% !important;
        width: 100vw !important;
        z-index: 99999 !important; /* Поверх всего */
        border-top: none !important;
        padding: 10px 5vw !important;
        transition: none !important;
        transform: translateX(-50%) translateZ(0px);
    }

    /* Панель смайлов тоже должна переехать, чтобы выпадать СВЕРХУ ВНИЗ под формой */
    #chat.keyboard-open #emoji-panel {
        position: fixed !important;
        top: 70px !important;
        bottom: auto !important;
        left: 5vw !important;
        z-index: 99999 !important;
        box-shadow: 0 10px 20px rgba(0,0,0,0.8);
    }
}