/* Genel Ayarlar ve Font */

:root {
    /* Varsayılan (Light) Tema Renkleri */
    --primary-color: #545f73;
    /* Yeşil */
    --secondary-color: #778697;
    --background-color: #f3f7fd;
    --text-color: #1c2b36;
    --faint-color: #b1c0cf;
    --faintdark-color: #dce1e9;
    --card-background: #ffffff;
    --border-color: #cad4e6;

    --flipfirst-color: #f0f4f8;
    --flipsecond-color: #dfe8f1;
    --flipthird-color: #dfe8f1;
    --flipfourth-color: #c7d1da;
    --store-filter: invert(1%);
    --rain-color: #2b3338;
    --rainBg-color: #d8e0e6;
    --social-color: #565e69;
    --socialcard-color: #48515e;
    --socialshadow-color: #89a2b6;



}

/* Dark Mode Renkleri */
.dark-mode {
    --primary-color: #525f76;
    --secondary-color: #7ea1b6;
    --background-color: #22262e;
    --text-color: #b3c4ce;
    --faint-color: rgb(88 95 109);
    --faintdark-color: #303540;
    --card-background: #2d323c;
    --lightborder-color: #8e95a5;
    --border-color: #383c46;
    --flipfirst-color: #22262e;
    --flipsecond-color: #292e37;
    --flipthird-color: #20242d;
    --flipfourth-color: #20242d;
    --store-filter: invert(88%);
    --rain-color: #aabbc7;
    --rainBg-color: #191c23;
    --social-color: #a9b2bf;
    --socialcard-color: #1f242b;
    --socialshadow-color: #525e67;


}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Gilroy', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: var(--background-color);
    color: var(--text-color);
    transition: background-color 0.3s, color 0.3s;
}

a {
    color: var(--text-color);
    text-decoration: none;
}

/* HEADER STYLES */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 5%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.8) 100%);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
    position: sticky;
    top: 0;
    z-index: 1000;
    backdrop-filter: blur(20px);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.header:hover::before {
    opacity: 1;
}



.dark-mode .header {
    background: #20242b;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.logo a {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--secondary-color);
    display: flex;
    align-items: center;
    gap: 10px;
    /* Logoyu biraz daha koyu yapalım */
}

.logo-image {
    height: 40px;
    width: auto;
    object-fit: contain;
}

.dark-logo {
    display: none;
}

.dark-mode .light-logo {
    display: none;
}

.dark-mode .dark-logo {
    display: block;
}

.logo span {
    display: block;
    font-size: 0.7rem;
    font-weight: 400;
    color: var(--text-color);
    opacity: 0.7;
}

/* Navigation & Dropdowns */
.nav-menu {
    list-style: none;
    display: flex;
}

.nav-menu>li {
    padding: 0 15px;
}

.nav-menu a {
    display: block;
    padding: 10px 0;
    font-weight: 500;
    color: #4f5255;
    transition: none;
}

/* Güncellenmiş Chevron İkon Stili */
.nav-menu a i {
    /* İkonun boyutunu küçült */
    font-size: 0.8em;

    /* İkonu metnin ortasına hizala */
    vertical-align: middle;

    /* İkon ile metin arasına hafif boşluk ver */
    margin-left: 6px;

    /* Dönüş animasyonunu koru */
    transition: transform 0.3s ease;
}

/* Dropdown'ın üzerine gelindiğinde ikonun dönmesini sağla (Önceki öneriden kalma) */
.dropdown:hover>a i {
    transform: rotate(180deg);
}

.nav-menu a:hover {
    color: #4f5255;
}

.dark-mode .nav-menu a {
    color: #d6dceb;
    font-weight: 400;
}

/* Dropdown Konteyneri */
.dropdown {
    position: relative;
}

/* Dropdown İçerik */
.dropdown-content {
    display: none;
    position: absolute;
    min-width: 180px;
    background-color: var(--card-background);
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.1);
    z-index: 1;
    border-radius: 5px;
    padding: 10px 0;
    border: 1px solid var(--border-color);
}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown-content li {
    list-style: none;
}

.dropdown-content a {
    padding: 8px 20px;
    font-size: 0.95rem;
    font-weight: 400;
    white-space: nowrap;
    transition: font-weight 0.2s ease;
}

.dropdown-content a:hover {
    background-color: var(--background-color);
    font-weight: 500;
}

.badge {
    background-color: var(--primary-color);
    color: white;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 0.75rem;
    margin-left: 5px;
}

/* Header Aksiyonları (İkonlar) */
.header-actions {
    display: flex;
    align-items: center;
}

.dark-mode-toggle,
.hamburger {
    background: none;
    border: none;
    color: var(--text-color);
    font-size: 1.2rem;
    cursor: pointer;
    margin-left: 15px;
    padding: 5px;
}

.hamburger {
    display: none;
    /* Masaüstünde gizle */
}

/* HERO SECTION STYLES */
.hero-section {
    padding-top: 5%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 600px;
    background: var(--background-color);
    position: relative;
    overflow: hidden;
    gap: 30px;
}




.hero-section .left-phone {
    height: 640px;
    z-index: 1;
    transform: translateY(-40px);


}

.hero-section .right-phone {
    height: 640px;
    border-radius: 32px;

    z-index: 1;
    transform: translateY(-40px);
}


@media (max-width: 1024px) {


    .hero-section .left-phone,
    .hero-section .right-phone {
        display: none;
    }
}


.hero-left {
    flex: 1;
    max-width: 450px;
    min-width: 400px;
    margin-right: 20px;
    margin-left: 50px;
}

.hero-right {
    margin-right: 50px;
}


.hero-left h1 {
    font-size: 3rem;
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 10px;
    animation: fadeInLeft 0.8s ease-out;
    position: relative;
    z-index: 1;
}

.hero-left .subtitle {
    font-size: 1.5rem;
    font-weight: 400;
    margin-bottom: 30px;
    color: var(--secondary-color);
    animation: fadeInLeft 0.8s ease-out 0.2s both;
}

.hero-buttons {
    margin-top: 30px;
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    animation: fadeInLeft 0.8s ease-out 0.4s both;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.hero-left .subtitle {
    font-size: 1.5rem;
    font-weight: 400;
    margin-bottom: 30px;
    color: var(--secondary-color);
}

.hero-buttons {
    margin-top: 30px;
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.hero-buttons a {
    padding: 18px 35px;
    border-radius: 16px;
    font-weight: 600;
    display: inline-block;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: center;
    min-width: 160px;
    position: relative;
    overflow: hidden;
    font-size: 1rem;
    letter-spacing: 0.5px;
}



.btn-primary {
    background-color: var(--primary-color);
    color: white;
    border: 2px solid var(--primary-color);
    position: relative;
    overflow: hidden;
}

.btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

.btn-primary:hover::before {
    left: 100%;
}

.btn-primary:hover {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(55, 100, 134, 0.3);
}

.btn-secondary {
    background-color: transparent;
    color: var(--text-color);
    border: 2px solid var(--text-color);
}

.dark-mode .btn-secondary {
    border-color: var(--text-color);
}

.btn-secondary:hover {
    background-color: var(--border-color);
    transform: translateY(-2px);

}

.tech-tags {
    margin-top: 40px;
    font-size: 0.9rem;
    line-height: 1.6;
    background: #e9f1ff;
    padding: 25px;
    border-radius: 16px;
    border: 1px solid rgba(204 215 228);
    position: relative;
    overflow: hidden;
    animation: fadeInLeft 0.8s ease-out 0.6s both;
}

.tech-tags::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--primary-color);
    border-radius: 0 2px 2px 0;
}

.tech-tags a {
    color: var(--secondary-color);
    font-weight: 600;
}

.dark-mode .tech-tags {
    background-color: rgb(32 36 44);
}


/* SHOWCASE */
.app-showcase {
    padding: 40px 5%;
    background: var(--background-color);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.app-showcase::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    pointer-events: none;
}

.dark-mode .app-showcase::before {
    display: none;
}

.app-showcase h2 {
    font-size: 2.3rem;
    margin-bottom: 50px;
    font-weight: 600;
    color: var(--text-color);
    animation: fadeInUp 0.8s ease-out;
    position: relative;
    z-index: 1;
}

.app-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, 400px);
    gap: 20px;
    justify-content: center;
    /* ortalar */
    align-items: stretch;
}


.app-card {
    display: flex;
    flex-direction: row;
    position: relative;
    width: 400px;
    min-width: 400px;
    max-width: 400px;
    /* istersen üst sınır */
    height: 400px;
    border-radius: 30px;
    overflow: hidden;
    box-shadow: 5px 5px 30px rgba(0, 0, 0, 0.3);
    margin: 20px;
    background: var(--background-color);
}

.dark-mode .app-card {
    background: var(--card-background);
    border: 1px solid var(--border-color);
}

.app-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(220, 232, 233, 0.08), transparent);
    transition: left 0.6s ease;
}

.app-card:hover::before {
    left: 100%;
}

.app-card:nth-child(1) {
    animation-delay: 0.1s;
}

.app-card:nth-child(2) {
    animation-delay: 0.2s;
}

.app-card:nth-child(3) {
    animation-delay: 0.3s;
}

.app-card:hover {
    transform: translateY(-8px) scale(1.02);
    border-color: rgba(199, 232, 255, 0.32);
}

/* Resimler yan yana eşit genişlikte olacak */
.app-profile-img {
    width: 33.333%;
    height: 66%;
    object-fit: cover;
}

/* Aradaki çizgiler */
.app-profile-img:not(:last-child) {
    border-right: 1.6px solid rgb(193, 201, 221);
}



.app-logo {
    height: 72px;
    width: 72px;
    position: absolute;
    background: transparent;
    bottom: 25%;
    left: 30px;
    overflow: hidden;
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    justify-content: center;
    border: solid 1px rgb(233, 236, 241);
    border-radius: 12px;
    align-items: center;
}


.app-logo::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.app-logo:hover {
    transform: rotate(360deg);
}

.app-logo:hover::before {
    opacity: 1;
}

.app-logo img {
    height: 100%;
}


.app-btn {
    position: absolute;
    color: #fff;
    right: 0px;
    bottom: 18%;
    padding: 4px 20px;
}

.app-btn a {
    color: #fff;
}

.app-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    padding: 2px;
}

.app-card h3 {
    margin-bottom: 12px;
    font-size: 1.2rem;
    font-weight: 600;
    margin-top: 8px;
}



.app-description {
    position: absolute;
    text-align: center;
    font-weight: 900;
    line-height: 1.3;
    z-index: 2;
    /* Efektler */
    background: rgb(172 194 229 / 20%);
    /* hafif transparan arka plan */
    backdrop-filter: blur(8px);
    /* arka planı hafif bulanık yap */
    padding: 10px 15px;
    border-radius: 15px;
    box-shadow: 0 8px 20px rgb(39 48 78 / 12%);
    right: 4%;
    bottom: 4%;
}

.app-description p {
    font-size: 0.92rem;
    color: var(--text-color);
    font-weight: 600;
    margin: 0;
    line-height: 1.2;
}



.dark-mode .app-description p {
    color: #bec5cf;
    font-weight: 500;
}

.app-stores i {
    font-size: 1.3rem;
    margin: 0 5px;
    cursor: pointer;
    transition: color 0.2s;
    color: #999;
}

.app-stores i:hover {
    color: var(--primary-color);
}

/* END OF SHOWCASE */


.available-text {
    font-size: 0.8rem;
    color: var(--faint-color);
    margin-right: 16px;
    font-weight: 400;
    font-family: sans-serif;
}

.app-store-left {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.user-count {
    display: flex;
    align-items: center;
    font-size: 0.85em;
    color: var(--faint-color);
    font-weight: 400;
    font-family: sans-serif;
    gap: 5px;
}

.user-icon {
    width: 20px;
    height: 20px;
    color: var(--faint-color);
}

.store-icon {
    width: 20px;
    height: 20px;
    margin-right: 8px;
    cursor: pointer;
    transition: opacity 0.2s;
    object-fit: contain;
}

.store-icon-apple {
    width: 20px;
    height: 20px;
    margin-right: 8px;
    cursor: pointer;
    object-fit: contain;
    filter: var(--store-filter);
}

.store-icon-big {
    display: block;
    /* inline yerine block */
    height: 45px;
    /* sabit yükseklik */
    width: auto;
    /* orantılı genişlik */
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 6px 12px;
    background-color: var(--card-background);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: all 0.25s ease;
    object-fit: contain;
    /* oran koruma */
}

.store-icon-big-apple {
    display: block;
    /* inline yerine block */
    height: 45px;
    /* sabit yükseklik */
    width: auto;
    /* orantılı genişlik */
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 6px 12px;
    background-color: #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: all 0.25s ease;
    object-fit: contain;
    filter: var(--store-filter);
}

.store-icon-big:hover {
    border-color: var(--flipfourth-color);
    box-shadow: 0 4px 8px rgba(66, 79, 102, 0.436);
    transform: translateY(-2px);
    opacity: 0.95;
}

.store-icon-big-apple:hover {
    border-color: var(--flipfourth-color);
    box-shadow: 0 4px 8px rgba(66, 79, 102, 0.436);
    transform: translateY(-2px);
    opacity: 0.95;
}



.app-stores {

    display: flex;
    align-items: center;
    justify-content: space-between;
    /* solda ikonlar, sağda kullanıcı sayısı */
    width: 100%;
}



/* App store ikon grubu */
.app-stores-big {
    margin-top: auto;
    /* kartın altına sabitler */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    /* sabit hizalama sağlar */
}




.store-icon:hover {
    opacity: 1;
}

/* YENİ DİKEY UYGULAMA KARTLARI (SAĞ TARAFTAKİ LİSTE) */
.app-showcase-vertical {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-right: 40px;
}

.app-card-vertical {
    width: 380px;
    display: flex;
    align-items: center;
    padding: 18px 20px;
    background-color: var(--card-background);
    border-radius: 10px;
    /* Kartlara hafif bir gölge ve sınır ekleyelim */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--border-color);
    transition: all 0.2s;
    animation: slideInRight 0.6s ease-out;
    animation-fill-mode: both;
}

.app-card-vertical:nth-child(1) {
    animation-delay: 0.1s;
}

.app-card-vertical:nth-child(2) {
    animation-delay: 0.2s;
}

.app-card-vertical:nth-child(3) {
    animation-delay: 0.3s;
}


.flip-card {
    width: 400px;
    background-color: transparent;
    height: 120px;
    perspective: 1000px;
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
    box-shadow: 0 8px 14px 0 rgba(0, 0, 0, 0.2);
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* width: 100%; */
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border: 1px solid var(--border-color);
    border-radius: 1rem;
    padding: 1rem;
}

.flip-card-front {
    background: linear-gradient(120deg, var(--flipfirst-color) 60%, var(--flipsecond-color) 88%, var(--flipthird-color) 40%, var(--flipfourth-color) 48%);
    color: var(--text-color);
}

.flip-card-back {
    background: var(--card-background);
    color: white;
    transform: rotateY(180deg);
}






@media (max-width: 992px) {

    /* Tablet */
    .hero-left h1 {
        font-size: 2.8rem;
    }

    .nav-menu {
        display: none;
        /* Menüyü gizle */
        flex-direction: column;
        width: 100%;
        position: absolute;
        top: 60px;
        /* Header yüksekliğine göre ayarla */
        left: 0;
        background-color: var(--card-background);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        padding-bottom: 10px;
    }

    .nav-menu.active {
        display: flex;
        /* Aktif olunca göster */
    }

    .nav-menu>li {
        padding: 0;
        border-top: 1px solid var(--border-color);
    }

    .nav-menu a {
        padding: 10px 5%;
    }

    .dropdown-content {
        position: static;
        /* Mobil'de açılır menüyü sabit yap */
        box-shadow: none;
        border: none;
        padding-left: 20px;
        background-color: var(--background-color);
    }

    .hamburger {
        display: block;
        /* Hamburger ikonunu göster */
    }

    .app-grid {
        grid-template-columns: repeat(auto-fit, 400px);
        justify-content: center;
    }
}

@media (max-width: 600px) {

    /* Mobil */
    .hero-section {
        padding: 50px 5%;
    }

    .hero-left h1 {
        font-size: 2.2rem;
    }

    .hero-left .subtitle {
        font-size: 1.2rem;
    }

    .hero-buttons {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    .hero-buttons a {
        margin-right: 0;
        margin-bottom: 0;
        text-align: center;
        width: 100%;
    }

    .tech-tags p {
        font-size: 0.8rem;
    }

    .app-grid {
        grid-template-columns: 1fr;
        /* Tek sütun */
        justify-content: center;
    }
}

@media (max-width: 542px) {
    .social-card {
        display: none;
    }

    .hero-left {
        flex: 1;
        max-width: 400px;
        min-width: 300px;
        margin-right: 0px;
        margin-left: 0px;
    }

    .app-showcase-vertical {
        margin-right: 0px;
    }
}

/* Tablet ve mobil uyum */
@media (max-width: 424px) {

    .app-card {
        width: 96%;
        /* ekranın %90'ı kadar */
        min-width: 0;
        max-width: 90%;
        margin: 15px auto;
        /* ortalar */
    }

    .app-card-vertical {
        width: 92%;
        /* ekranın %90'ı kadar */
        min-width: 0;
        max-width: 90%;
        margin: 0px;
        padding: 10px 4px;
        /* ortalar */
    }

    .flip-card-front,
    .flip-card-back {
        width: 88%;
    }

    .flip-card-front {
        padding: 0.1rem
    }
}

/* Tablet ve mobil uyum */
@media (max-width: 396px) {

    .flip-card-front,
    .flip-card-back {
        width: 80%;
    }



    .app-card {
        width: 96%;
    }
}





@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.app-card-vertical:hover {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.app-icon-small {
    width: 60px;
    height: 60px;
    min-width: 60px;
    /* Küçülmesini engelle */
    margin-right: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.4rem;
    color: white;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    /* İkonlar orijinal resimdeki gibi ortalanmış ve köşeleri hafif yuvarlak */
}

.app-icon-small:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.app-details {
    text-align: left;
    flex-grow: 1;
}

.app-details h3 {
    margin: 0 0 8px 0;
    font-size: 1rem;
    font-weight: 600;
}

.app-stores i {
    font-size: 0.8rem;
    margin-right: 5px;
    color: #999;
}

.dark-mode .app-stores i {
    color: #777;
}



/* FOOTER STYLES */
.footer {
    background: var(--background-color);
    border-top: 1px solid rgba(155, 159, 167, 0.2);
    padding: 30px 5%;
    margin-top: 80px;
    position: relative;
    overflow: hidden;
}

.footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 0.8px;
    background: var(--text-color);
    opacity: 0.2;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

.footer-left p {
    color: #8b99a3;
    font-size: 0.9rem;
    margin: 0;
}

.footer-right p {
    color: #8b99a3;
    font-size: 0.9rem;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 5px;
}

.heart {
    color: #e74c3c;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    cursor: pointer;
    display: inline-block;
    animation: heartbeat 2s infinite;
}

.heart:hover {
    color: #c0392b;
    transform: scale(1.2);
}

.author-link {
    color: var(--rain-color);
    text-decoration: none;
    font-weight: 400;
    transition: color 0.3s ease;
}

.author-link:hover {
    color: var(--text-color);
    text-decoration: underline;
}

@keyframes heartbeat {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

/* Responsive footer */
@media (max-width: 600px) {
    .footer-content {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }
}

/* RESPONSIVE AYARLAR - Mobil için dikey kartları alta alıyoruz */
@media (max-width: 992px) {
    .hero-section {
        flex-direction: column;
        /* Mobil/Tablet'te dikey sırala */
        min-height: auto;
    }

    .hero-left {
        max-width: 100%;
        margin-right: 40px;
        margin-bottom: 30px;
        /* Tam genişlik */
    }

    .hero-right {
        margin-left: 0;
        margin-top: 0;
        /* Üst kısımla arayı aç */
        flex-grow: 1;
        width: 100%;
        /* Tam genişlik kapla */
    }

    /* Mobil/Tablet'te kartları yana yayalım */
    .app-showcase-vertical {
        display: flex;
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
        padding-top: 0;
        flex-wrap: wrap;
        justify-content: space-around;
        align-items: center;
    }
}

@media (max-width: 600px) {

    /* Mobil cihazlarda uygulama kartları tek sütun olsun */
    .app-showcase-vertical {
        grid-template-columns: 1fr;
    }
}

.modern-heart {
    display: inline-block;
    width: 20px;
    height: 20px;
    /* Kalp ikonunun temel rengini SVG içindeki dolguya aktaracağız */
    /* Şu an için SVG'nin içindeki dolguyu dinamik olarak değiştiremiyoruz, bu yüzden SVG'yi direkt base64 ile oluşturup fill'ini ayarlayacağız. */

    /* Temel Kalp SVG'si (Açık Mod: Siyah - var(--text-color)) */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%231C2B36"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>');

    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
    transition: background-image 0.3s;
    /* Geçiş ekleyelim */
}

/* Koyu Mod (Dark Mode) için Kalp SVG'si */
.dark-mode .modern-heart {
    /* Koyu Mod: Beyaz - var(--text-color) bu modda #e0e0e0 olacak. */
    /* SVG'nin içindeki fill kodunu koyu modun metin rengi olan #E0E0E0 ile değiştiriyoruz. */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23E0E0E0"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>');
}

/* CEINRA İmza Bölümü Stili */
.ceindra-signature-container {
    /* Üstten ve alttan boşluk */
    text-align: center;
    background-color: var(--background-color);
    /* Tema arka plan rengini koru */
    margin-top: 20px;
    margin-bottom: 20px;
    /* Alttaki FOOTER boşluğunu dengelemek için gerekebilir */
}

.ceindra-signature {
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--text-color);
    text-transform: uppercase;
    letter-spacing: 16px;
    display: inline-block;
    opacity: 0.15;

    line-height: 1;
}

.ceindra-signature span:last-child {
    letter-spacing: 0px;
}

/* Socials Card */
.card-container {
    background: var(--background-color);
    display: flex;
    justify-content: center;
    gap: 20px;
    /* yatay ortalama */
    align-items: center;
    padding: 0 12px;
    margin-bottom: 100px;
    margin-top: 80px;

    /* dikey ortalama */
}

.social-card {
    position: relative;
    width: 200px;
    height: 200px;
    background: lightgrey;
    border-radius: 30px;
    overflow: hidden;
    box-shadow: var(--socialshadow-color) 0px 0px 20px 6px;
    transition: all 1s ease-in-out;
    border: 2px solid var(--lightborder-color);
}

.background {
    position: absolute;
    inset: 0;
    background-color: var(--socialcard-color);
}

.slogo {
    position: absolute;
    right: 50%;
    bottom: 50%;
    transform: translate(50%, 50%);
    transition: all 0.6s ease-in-out;
    font-size: 1.1em;
    font-weight: 500;
    color: #d4deeb;
}

.slogo .slogo-svg {
    fill: white;
    width: 30px;
    height: 30px;
}

.icon {
    display: inline-block;
    width: 20px;
    height: 20px;
}

.icon .svg {
    fill: rgba(255, 255, 255, 0.797);
    width: 100%;
    transition: all 0.5s ease-in-out;
}

.box {
    position: absolute;
    padding: 10px;
    text-align: right;
    background: rgba(255, 255, 255, 0.389);
    border-top: 2px solid rgb(255, 255, 255);
    border-right: 1px solid white;
    border-radius: 10% 13% 42% 0%/10% 12% 75% 0%;
    box-shadow: rgba(100, 100, 111, 0.364) -7px 7px 29px 0px;
    transform-origin: bottom left;
    transition: all 1s ease-in-out;
}

.box::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    opacity: 0;
    transition: all 0.5s ease-in-out;
}

.box:hover .svg {
    fill: white;
}

.box1 {
    width: 80%;
    height: 80%;
    bottom: -80%;
    left: -80%;
}

.box1::before {
    background: radial-gradient(circle at 30% 107%, #2b5bad 0%, #324e7d 5%, #fbd147 60%, #b827fb 90%);
}

.box1:hover::before {
    opacity: 1;
}

.box1:hover .icon .svg {
    filter: drop-shadow(0 0 5px white);
}

.box2 {
    width: 64%;
    height: 64%;
    bottom: -64%;
    left: -64%;
    transition-delay: 0.2s;
}

.box2::before {
    background: radial-gradient(circle at 30% 107%, #2a2d32 0%, #3a3e45 90%);
}

.box2:hover::before {
    opacity: 1;
}

.box2:hover .icon .svg {
    filter: drop-shadow(0 0 5px white);
}

.box3 {
    width: 48%;
    height: 48%;
    bottom: -48%;
    left: -48%;
    transition-delay: 0.4s;
}

.box3::before {
    background: radial-gradient(circle at 30% 107%, #3d46ad 0%, #4970ff 90%);
}

.box3:hover::before {
    opacity: 1;
}

.box3:hover .icon .svg {
    filter: drop-shadow(0 0 5px white);
}

.box4 {
    width: 28%;
    height: 28%;
    bottom: -28%;
    left: -28%;
    transition-delay: 0.6s;
}

.box4::before {
    /* Mevcut tanımın hemen altına ekleyin */
    background: radial-gradient(circle at 30% 107%, #8e33ac 0%, #8e33ac 90%);
}

.box4:hover::before {
    opacity: 1;
}

.box4:hover .icon .svg {
    filter: drop-shadow(0 0 5px white);
}

.social-card:hover {
    transform: scale(1.1);
}

.social-card:hover .box {
    bottom: -1px;
    left: -1px;
}

.social-card:hover .slogo {
    transform: translate(70px, -64px);
}

/* Socials Card */

@media (max-width: 768px) {
    .ceindra-signature {
        font-size: 1.6rem;
        letter-spacing: 16px;
    }
}


/* Özel ek stiller */
.app-icon {
    width: 72px;
    height: 72px;
    border-radius: 16px;
    margin-bottom: 12px;
}

.app-title {
    font-weight: 600;
    color: #849caf;
}

.app-desc {
    margin-top: 6px;
    font-weight: 400;
    font-size: 0.8rem;
    color: var(--text-color);
}


.social-btn {
    display: grid;
    place-items: center;
    background: var(--background-color);

    padding: 1.4em;
    border-radius: 10px;
    box-shadow: 6px 6px 10px -1px rgba(0, 0, 0, 0.2),
        -6px -6px 10px -1px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(0, 0, 0, 0);
    cursor: pointer;
    transition: transform 0.5s;
}

.social-btn:hover {
    box-shadow: inset 4px 4px 6px -1px rgba(0, 0, 0, 0.5),
        inset -4px -4px 6px -1px rgba(255, 255, 255, 0.5),
        -0.5px -0.5px 0px rgba(255, 255, 255, 0.5),
        0.5px 0.5px 0px rgba(255, 255, 255, 0.5),
        0px 12px 10px -10px rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.social-btn svg {
    fill: var(--social-color);
    transition: transform 0.4s;
}

.social-btn:hover svg {
    transform: scale(0.9);
    fill: var(--text-color);
}



/* Tablet ve mobil uyum */
@media (max-width: 424px) {
    .social-btn {
        padding: 0.72em;
    }
}


/* RAIN ANIMATION */
.top-bar {
    background: var(--faint-color);
    height: 12px;
    /* Sabit kalmalı */

    /* KRİTİK DEĞİŞİKLİK: bottom: 0 yerine top: [HEADER YÜKSEKLİĞİ] */
    /* Header'ınız 80px ise bu değeri kullanın */
    left: 0;
    width: 100%;
    z-index: 999;
}

@property --angle {
    syntax: "<angle>";
    inherits: false;
    initial-value: 91deg;
}

#rain-section {
    width: 100%;
    height: 500px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    position: relative;
    z-index: 100;
    background: var(--background-color);
}


#rain-section::before,
#rain-section::after {
    font-family: Arial, Helvetica, serif;
    font-size: 12px;
    position: absolute;
    width: 100%;
    text-align: center;
    color: var(--faint-color);
    /* Yüksek z-index, diğer her şeyin üzerine çıkmak için */
    z-index: 102;
    display: block;
}



#rain-section::after {
    content: "HOLD TO CREATE LIGHTNING";
    color: var(--faintdark-color);
    font-size: 1rem;
    /* Alta konumlandır */
    bottom: 1%;
    /* Üstteki kuralı kesinlikle sıfırlamak için */
    top: initial;
}

#rain-section::active:before,
#rain-section::active:after {
    color: #ffffff00;
    transition: all 0.5s ease 0s;
}

/* Bu kural section'a göre güncellenmeli */
.rain {
    background: linear-gradient(var(--rainBg-color), var(--background-color));
    position: absolute;
    width: 100%;
    /* 120vw yerine */
    height: 500px;
    /* 100vh yerine (section 300px yüksekliğinde) */
    cursor: pointer;
    z-index: 0;
    left: 0;
    /* -10vw yerine */
}

.rain .left,
.rain .right {
    width: 25%;
    height: 100%;
    position: absolute;
    box-sizing: border-box;
    z-index: 2;
}

.rain .left:hover~.drop {
    --angle: 106deg;
}

.rain .left:hover~.right:after {
    transform: rotate(24deg);
    transition: all 0.5s ease 0s;
}

.rain .right {
    left: initial;
    right: 0px;
}

.rain .right:after {
    content: "\25B3 \A \25BC";
    position: absolute;
    text-indent: 1px;
    left: calc(50% - 60px);
    top: 45px;
    color: var(--faint-color);
    font-size: 20px;
    border: 2px dashed var(--faint-color);
    border-radius: 100%;
    width: 60px;
    height: 60px;
    box-sizing: border-box;
    padding: 13px 18px;
    text-align: center;
    line-height: 15px;
    transition: all 0.5s ease 0s;
    white-space: pre-wrap;
}

.rain .right:hover:after {
    transform: rotate(-22deg);
    transition: all 0.5s ease 0s;
}

.rain .right:hover~.drop {
    --angle: 75deg;
}

.rain .right.center {
    right: 30vw;
}

.rain .right.center:after {
    display: none;
}

.rain .right.center:hover~.drop {
    --angle: 85deg;
}

.rain .right.center:hover~.right:after {
    transform: rotate(-12deg);
    transition: all 0.5s ease 0s;
}

.rain .left.center {
    left: 30vw;
}

.rain .left.center:hover~.drop {
    --angle: 95deg;
}

.rain .left.center:hover~.right:after {
    transform: rotate(12deg);
    transition: all 0.5s ease 0s;
}

.rain:active {
    cursor: none;
    animation: lightning 0.1s linear 0s 2, lightning 0.15s ease-out 0.25s 1;
}

.rain:active:after,
.rain:active .right:after {
    opacity: 0;
    transition: all 0.5s ease 0s;
}

/* 
    .rain:after {
        content: "\21AF";
        position: absolute;
        left: calc(50% - 30px);
        bottom: 45px;
        color: var(--faint-color);
        font-size: 35px;
        border: 2px dashed var(--faint-color);
        border-radius: 100%;
        width: 60px;
        height: 60px;
        box-sizing: border-box;
        padding: 13px 18px;
        text-align: center;
        line-height: 30px;
        transition: all 0.5s ease 0s;
        white-space: pre-wrap;
} */



@keyframes lightning {
    50% {
        background: radial-gradient(circle at calc(50% - 10vw) -20%, rgba(255, 255, 255, 0.25), rgba(217, 224, 238, 0) 40%), linear-gradient(180deg, rgba(255, 255, 255, 0.6), var(--background-color));
    }
}

.drop {
    border: 1.2px solid transparent;
    border-bottom-color: var(--rain-color);
    position: absolute;
    top: -10px;
    --angle: 92deg;
}

.drop:nth-child(1) {
    opacity: 0.85;
    left: 15.7vw;
    border-left-width: 8px;
    animation: fall-1 1.05s -12s ease-in infinite;
}

@keyframes fall-1 {
    4% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(2) {
    opacity: 0.78;
    left: 4.5vw;
    border-left-width: 1px;
    animation: fall-2 1.35s -10s ease-in infinite;
}

@keyframes fall-2 {
    5.8% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(3) {
    opacity: 0.74;
    left: 6.6vw;
    border-left-width: 12px;
    animation: fall-3 1.05s -3.5s ease-in infinite;
}

@keyframes fall-3 {
    2.8% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(4) {
    opacity: 0.35;
    left: 107.9vw;
    border-left-width: 11px;
    animation: fall-4 1.35s -2s ease-in infinite;
}

@keyframes fall-4 {
    2% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(5) {
    opacity: 0.13;
    left: 91.1vw;
    border-left-width: 14px;
    animation: fall-5 1.35s -3s ease-in infinite;
}

@keyframes fall-5 {
    3% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(6) {
    opacity: 0.33;
    left: 35.6vw;
    border-left-width: 10px;
    animation: fall-6 0.9s -11.5s ease-in infinite;
}

@keyframes fall-6 {
    4.6% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(7) {
    opacity: 0.36;
    left: 102.6vw;
    border-left-width: 12px;
    animation: fall-7 2.1s -3s ease-in infinite;
}

@keyframes fall-7 {
    2% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(8) {
    opacity: 0.72;
    left: 10.6vw;
    border-left-width: 10px;
    animation: fall-8 2.25s -5s ease-in infinite;
}

@keyframes fall-8 {
    8.4% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(9) {
    opacity: 0.77;
    left: 80.6vw;
    border-left-width: 13px;
    animation: fall-9 1.05s -10s ease-in infinite;
}

@keyframes fall-9 {
    9.4% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(10) {
    opacity: 0.78;
    left: 75.9vw;
    border-left-width: 11px;
    animation: fall-10 0.3s -8s ease-in infinite;
}

@keyframes fall-10 {
    8% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(11) {
    opacity: 0.5;
    left: 33.8vw;
    border-left-width: 7px;
    animation: fall-11 1.65s -5s ease-in infinite;
}

@keyframes fall-11 {
    8% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(12) {
    opacity: 0.12;
    left: 18.6vw;
    border-left-width: 2.6px;
    animation: fall-12 0.15s -8s ease-in infinite;
}

@keyframes fall-12 {
    8.8% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(13) {
    opacity: 0.3;
    left: 38.5vw;
    border-left-width: 8.6px;
    animation: fall-13 2.1s -8.5s ease-in infinite;
}

@keyframes fall-13 {
    6.6% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(14) {
    opacity: 0.15;
    left: 37.2vw;
    border-left-width: 3.6px;
    animation: fall-14 0.6s -3.5s ease-in infinite;
}

@keyframes fall-14 {
    5% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(15) {
    opacity: 0.43;
    left: 72.1vw;
    border-left-width: 2px;
    animation: fall-15 0.15s -2.5s ease-in infinite;
}

@keyframes fall-15 {
    5% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(16) {
    opacity: 0.51;
    left: 79.5vw;
    border-left-width: 13.6px;
    animation: fall-16 1.2s -4.5s ease-in infinite;
}

@keyframes fall-16 {
    4.2% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(17) {
    opacity: 0.5;
    left: 101.9vw;
    border-left-width: 13px;
    animation: fall-17 1.5s -12s ease-in infinite;
}

@keyframes fall-17 {
    9.8% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(18) {
    opacity: 0.87;
    left: 56.2vw;
    border-left-width: 13.8px;
    animation: fall-18 1.2s -2.5s ease-in infinite;
}

@keyframes fall-18 {
    8.4% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(19) {
    opacity: 0.68;
    left: 50.6vw;
    border-left-width: 8.8px;
    animation: fall-19 1.8s -0.5s ease-in infinite;
}

@keyframes fall-19 {
    1.2% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(20) {
    opacity: 0.7;
    left: 61.8vw;
    border-left-width: 5.6px;
    animation: fall-20 1.05s -12s ease-in infinite;
}

@keyframes fall-20 {
    1.4% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(21) {
    opacity: 0.41;
    left: 53.5vw;
    border-left-width: 12px;
    animation: fall-21 0.9s -6.5s ease-in infinite;
}

@keyframes fall-21 {
    9% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(22) {
    opacity: 0.1;
    left: 78.3vw;
    border-left-width: 3.6px;
    animation: fall-22 0.9s -1s ease-in infinite;
}

@keyframes fall-22 {
    7.8% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(23) {
    opacity: 0.41;
    left: 76.4vw;
    border-left-width: 6.6px;
    animation: fall-23 0.3s -10s ease-in infinite;
}

@keyframes fall-23 {
    0.8% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(24) {
    opacity: 0.39;
    left: 4.2vw;
    border-left-width: 12px;
    animation: fall-24 1.95s -6.5s ease-in infinite;
}

@keyframes fall-24 {
    7.6% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(25) {
    opacity: 0.05;
    left: 52.7vw;
    border-left-width: 10px;
    animation: fall-25 1.05s -7.5s ease-in infinite;
}

@keyframes fall-25 {
    7.2% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(26) {
    opacity: 0.15;
    left: 29.6vw;
    border-left-width: 7px;
    animation: fall-26 1.65s -2.5s ease-in infinite;
}

@keyframes fall-26 {
    5.8% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(27) {
    opacity: 0.79;
    left: 12.9vw;
    border-left-width: 14.8px;
    animation: fall-27 0.3s -12.5s ease-in infinite;
}

@keyframes fall-27 {
    0.2% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(28) {
    opacity: 0.28;
    left: 61.2vw;
    border-left-width: 4.6px;
    animation: fall-28 2.25s -4s ease-in infinite;
}

@keyframes fall-28 {
    9% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(29) {
    opacity: 0.8;
    left: 111.7vw;
    border-left-width: 12px;
    animation: fall-29 2.25s -3s ease-in infinite;
}

@keyframes fall-29 {
    2.6% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(30) {
    opacity: 0.51;
    left: 12.2vw;
    border-left-width: 11.8px;
    animation: fall-30 2.1s -4s ease-in infinite;
}

@keyframes fall-30 {
    5.8% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(31) {
    opacity: 0.68;
    left: 49.6vw;
    border-left-width: 8px;
    animation: fall-31 2.1s -4s ease-in infinite;
}

@keyframes fall-31 {
    1.4% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(32) {
    opacity: 0.85;
    left: 86.3vw;
    border-left-width: 9.8px;
    animation: fall-32 0.3s -12.5s ease-in infinite;
}

@keyframes fall-32 {
    8.2% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(33) {
    opacity: 0.39;
    left: 109vw;
    border-left-width: 7px;
    animation: fall-33 1.95s -6.5s ease-in infinite;
}

@keyframes fall-33 {
    9.4% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(34) {
    opacity: 0.67;
    left: 74.4vw;
    border-left-width: 6.2px;
    animation: fall-34 1.05s -1s ease-in infinite;
}

@keyframes fall-34 {
    9.2% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(35) {
    opacity: 0.58;
    left: 92.4vw;
    border-left-width: 12.6px;
    animation: fall-35 1.2s -10s ease-in infinite;
}

@keyframes fall-35 {
    8.2% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(36) {
    opacity: 0.06;
    left: 34.5vw;
    border-left-width: 0.6px;
    animation: fall-36 0.45s -1.5s ease-in infinite;
}

@keyframes fall-36 {
    8.2% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(37) {
    opacity: 0.61;
    left: 27vw;
    border-left-width: 1.2px;
    animation: fall-37 2.1s -6s ease-in infinite;
}

@keyframes fall-37 {
    3.4% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(38) {
    opacity: 0.74;
    left: 16.1vw;
    border-left-width: 6.6px;
    animation: fall-38 0.6s -7s ease-in infinite;
}

@keyframes fall-38 {
    6% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(39) {
    opacity: 0.1;
    left: 67vw;
    border-left-width: 3.4px;
    animation: fall-39 0.75s -4.5s ease-in infinite;
}

@keyframes fall-39 {
    3.4% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(40) {
    opacity: 0.81;
    left: 117.3vw;
    border-left-width: 0.4px;
    animation: fall-40 0.9s -5.5s ease-in infinite;
}

@keyframes fall-40 {
    2.8% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(41) {
    opacity: 0.29;
    left: 58.6vw;
    border-left-width: 2.6px;
    animation: fall-41 0.3s -4s ease-in infinite;
}

@keyframes fall-41 {
    7.6% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(42) {
    opacity: 0.71;
    left: 21.5vw;
    border-left-width: 0.2px;
    animation: fall-42 0.45s -6s ease-in infinite;
}

@keyframes fall-42 {
    9% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(43) {
    opacity: 0.08;
    left: 27.6vw;
    border-left-width: 10.2px;
    animation: fall-43 1.8s -7.5s ease-in infinite;
}

@keyframes fall-43 {
    8.2% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(44) {
    opacity: 0.22;
    left: 25.7vw;
    border-left-width: 15.6px;
    animation: fall-44 0.45s -10s ease-in infinite;
}

@keyframes fall-44 {
    5.8% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(45) {
    opacity: 0.68;
    left: 92.9vw;
    border-left-width: 4.4px;
    animation: fall-45 2.25s -4s ease-in infinite;
}

@keyframes fall-45 {
    10% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(46) {
    opacity: 0.77;
    left: 43.4vw;
    border-left-width: 12px;
    animation: fall-46 0.3s -3s ease-in infinite;
}

@keyframes fall-46 {
    9% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(47) {
    opacity: 0.59;
    left: 4.6vw;
    border-left-width: 14px;
    animation: fall-47 1.65s -3s ease-in infinite;
}

@keyframes fall-47 {
    5.8% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(48) {
    opacity: 0.55;
    left: 105.7vw;
    border-left-width: 10.4px;
    animation: fall-48 0.3s -6.5s ease-in infinite;
}

@keyframes fall-48 {
    9.2% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(49) {
    opacity: 0.72;
    left: 47.5vw;
    border-left-width: 5px;
    animation: fall-49 1.35s -11.5s ease-in infinite;
}

@keyframes fall-49 {
    1.6% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(50) {
    opacity: 0.29;
    left: 117.5vw;
    border-left-width: 12.4px;
    animation: fall-50 2.1s -6.5s ease-in infinite;
}

@keyframes fall-50 {
    4% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(51) {
    opacity: 0.67;
    left: 94.4vw;
    border-left-width: 6px;
    animation: fall-51 1.8s -9s ease-in infinite;
}

@keyframes fall-51 {
    8.4% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(52) {
    opacity: 0.02;
    left: 38.4vw;
    border-left-width: 6.8px;
    animation: fall-52 1.95s -2s ease-in infinite;
}

@keyframes fall-52 {
    5.2% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(53) {
    opacity: 0.78;
    left: 9.4vw;
    border-left-width: 0.8px;
    animation: fall-53 1.5s -9s ease-in infinite;
}

@keyframes fall-53 {
    6.4% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(54) {
    opacity: 0.06;
    left: 41.2vw;
    border-left-width: 2.2px;
    animation: fall-54 1.05s -3.5s ease-in infinite;
}

@keyframes fall-54 {
    1.8% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(55) {
    opacity: 0.14;
    left: 91.5vw;
    border-left-width: 1px;
    animation: fall-55 0.9s -3s ease-in infinite;
}

@keyframes fall-55 {
    6% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(56) {
    opacity: 0.84;
    left: 92.5vw;
    border-left-width: 9.4px;
    animation: fall-56 1.8s -12.5s ease-in infinite;
}

@keyframes fall-56 {
    5% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(57) {
    opacity: 0.14;
    left: 75.9vw;
    border-left-width: 8px;
    animation: fall-57 0.75s -2s ease-in infinite;
}

@keyframes fall-57 {
    3% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(58) {
    opacity: 0.01;
    left: 62.5vw;
    border-left-width: 3.6px;
    animation: fall-58 1.65s -7s ease-in infinite;
}

@keyframes fall-58 {
    8.2% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(59) {
    opacity: 0.66;
    left: 51.5vw;
    border-left-width: 2.8px;
    animation: fall-59 0.9s -12s ease-in infinite;
}

@keyframes fall-59 {
    10% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(60) {
    opacity: 0.26;
    left: 59.7vw;
    border-left-width: 4.2px;
    animation: fall-60 0.3s -4.5s ease-in infinite;
}

@keyframes fall-60 {
    2% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(61) {
    opacity: 0.77;
    left: 41.8vw;
    border-left-width: 4px;
    animation: fall-61 0.45s -2.5s ease-in infinite;
}

@keyframes fall-61 {
    6.2% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(62) {
    opacity: 0.74;
    left: 90.9vw;
    border-left-width: 0.4px;
    animation: fall-62 0.6s -4s ease-in infinite;
}

@keyframes fall-62 {
    1.8% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(63) {
    opacity: 0.22;
    left: 25.9vw;
    border-left-width: 3.6px;
    animation: fall-63 0.75s -2s ease-in infinite;
}

@keyframes fall-63 {
    7.4% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(64) {
    opacity: 0.69;
    left: 66.7vw;
    border-left-width: 5px;
    animation: fall-64 1.65s -7.5s ease-in infinite;
}

@keyframes fall-64 {
    0.4% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(65) {
    opacity: 0.12;
    left: 87.6vw;
    border-left-width: 7.2px;
    animation: fall-65 0.3s -11s ease-in infinite;
}

@keyframes fall-65 {
    5.4% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(66) {
    opacity: 0.3;
    left: 39.9vw;
    border-left-width: 11.8px;
    animation: fall-66 0.3s -8s ease-in infinite;
}

@keyframes fall-66 {
    2.6% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(67) {
    opacity: 0.04;
    left: 6.4vw;
    border-left-width: 1px;
    animation: fall-67 0.3s -8s ease-in infinite;
}

@keyframes fall-67 {
    7.4% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(68) {
    opacity: 0.23;
    left: 54.9vw;
    border-left-width: 14px;
    animation: fall-68 2.1s -1.5s ease-in infinite;
}

@keyframes fall-68 {
    2.2% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(69) {
    opacity: 0.68;
    left: 89.1vw;
    border-left-width: 5px;
    animation: fall-69 0.45s -5.5s ease-in infinite;
}

@keyframes fall-69 {
    6.2% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(70) {
    opacity: 0.34;
    left: 21.6vw;
    border-left-width: 6px;
    animation: fall-70 1.8s -0.5s ease-in infinite;
}

@keyframes fall-70 {
    5% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(71) {
    opacity: 0.2;
    left: 80.4vw;
    border-left-width: 14.4px;
    animation: fall-71 0.6s -1.5s ease-in infinite;
}

@keyframes fall-71 {
    3.4% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(72) {
    opacity: 0.31;
    left: 61vw;
    border-left-width: 14px;
    animation: fall-72 1.65s -3.5s ease-in infinite;
}

@keyframes fall-72 {
    9.8% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(73) {
    opacity: 0.1;
    left: 2vw;
    border-left-width: 1.8px;
    animation: fall-73 0.3s -5s ease-in infinite;
}

@keyframes fall-73 {
    8.4% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(74) {
    opacity: 0.8;
    left: 38.7vw;
    border-left-width: 7.4px;
    animation: fall-74 2.25s -1.5s ease-in infinite;
}

@keyframes fall-74 {
    6.4% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(75) {
    opacity: 0.17;
    left: 38.4vw;
    border-left-width: 2.6px;
    animation: fall-75 1.05s -0.5s ease-in infinite;
}

@keyframes fall-75 {
    1.2% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(76) {
    opacity: 0.78;
    left: 95.2vw;
    border-left-width: 12.2px;
    animation: fall-76 0.3s -12s ease-in infinite;
}

@keyframes fall-76 {
    6.2% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(77) {
    opacity: 0.14;
    left: 22.3vw;
    border-left-width: 2px;
    animation: fall-77 0.45s -0.5s ease-in infinite;
}

@keyframes fall-77 {
    4% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(78) {
    opacity: 0.22;
    left: 62.1vw;
    border-left-width: 9px;
    animation: fall-78 0.3s -3s ease-in infinite;
}

@keyframes fall-78 {
    7.8% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(79) {
    opacity: 0.65;
    left: 104.2vw;
    border-left-width: 6px;
    animation: fall-79 0.15s -4.5s ease-in infinite;
}

@keyframes fall-79 {
    2.2% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(80) {
    opacity: 0.34;
    left: 69.6vw;
    border-left-width: 15.6px;
    animation: fall-80 1.5s -6.5s ease-in infinite;
}

@keyframes fall-80 {
    0.8% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(81) {
    opacity: 0.84;
    left: 77.5vw;
    border-left-width: 7.8px;
    animation: fall-81 1.35s -3.5s ease-in infinite;
}

@keyframes fall-81 {
    6.4% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(82) {
    opacity: 0.36;
    left: 23.2vw;
    border-left-width: 14.8px;
    animation: fall-82 0.6s -10s ease-in infinite;
}

@keyframes fall-82 {
    7.6% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(83) {
    opacity: 0.32;
    left: 80.7vw;
    border-left-width: 4px;
    animation: fall-83 2.25s -9.5s ease-in infinite;
}

@keyframes fall-83 {
    6.2% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(84) {
    opacity: 0.75;
    left: 36.6vw;
    border-left-width: 3px;
    animation: fall-84 0.6s -2.5s ease-in infinite;
}

@keyframes fall-84 {
    3.6% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(85) {
    opacity: 0.53;
    left: 59.1vw;
    border-left-width: 2.8px;
    animation: fall-85 0.75s -6s ease-in infinite;
}

@keyframes fall-85 {
    7.2% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(86) {
    opacity: 0.84;
    left: 33.4vw;
    border-left-width: 3.4px;
    animation: fall-86 0.45s -5s ease-in infinite;
}

@keyframes fall-86 {
    2.8% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(87) {
    opacity: 0.42;
    left: 100.9vw;
    border-left-width: 0.4px;
    animation: fall-87 0.6s -7s ease-in infinite;
}

@keyframes fall-87 {
    8.8% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(88) {
    opacity: 0.63;
    left: 53.5vw;
    border-left-width: 9px;
    animation: fall-88 0.3s -5s ease-in infinite;
}

@keyframes fall-88 {
    1.2% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(89) {
    opacity: 0.18;
    left: 103.6vw;
    border-left-width: 0.8px;
    animation: fall-89 0.15s -1s ease-in infinite;
}

@keyframes fall-89 {
    10% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(90) {
    opacity: 0.59;
    left: 71.3vw;
    border-left-width: 2.2px;
    animation: fall-90 0.15s -8s ease-in infinite;
}

@keyframes fall-90 {
    5.2% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(91) {
    opacity: 0.13;
    left: 118.3vw;
    border-left-width: 10px;
    animation: fall-91 1.5s -5.5s ease-in infinite;
}

@keyframes fall-91 {
    4.2% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(92) {
    opacity: 0.38;
    left: 80.9vw;
    border-left-width: 9.2px;
    animation: fall-92 0.45s -6s ease-in infinite;
}

@keyframes fall-92 {
    2.6% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(93) {
    opacity: 0.76;
    left: 12.1vw;
    border-left-width: 7.6px;
    animation: fall-93 0.3s -8.5s ease-in infinite;
}

@keyframes fall-93 {
    5.6% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(94) {
    opacity: 0.18;
    left: 80vw;
    border-left-width: 5.8px;
    animation: fall-94 1.95s -3s ease-in infinite;
}

@keyframes fall-94 {
    9.6% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(95) {
    opacity: 0.68;
    left: 6.7vw;
    border-left-width: 5px;
    animation: fall-95 2.1s -4.5s ease-in infinite;
}

@keyframes fall-95 {
    9.6% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(96) {
    opacity: 0.81;
    left: 111vw;
    border-left-width: 6.6px;
    animation: fall-96 1.8s -9.5s ease-in infinite;
}

@keyframes fall-96 {
    4.2% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(97) {
    opacity: 0.53;
    left: 103.6vw;
    border-left-width: 7.2px;
    animation: fall-97 2.25s -4s ease-in infinite;
}

@keyframes fall-97 {
    7.6% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(98) {
    opacity: 0.6;
    left: 46.9vw;
    border-left-width: 8px;
    animation: fall-98 2.1s -2.5s ease-in infinite;
}

@keyframes fall-98 {
    8% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(99) {
    opacity: 0.2;
    left: 34.3vw;
    border-left-width: 0.6px;
    animation: fall-99 1.35s -2s ease-in infinite;
}

@keyframes fall-99 {
    6% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(100) {
    opacity: 0.08;
    left: 5.6vw;
    border-left-width: 13.8px;
    animation: fall-100 1.35s -12s ease-in infinite;
}

@keyframes fall-100 {
    4.2% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(101) {
    opacity: 0.15;
    left: 40.5vw;
    border-left-width: 12.6px;
    animation: fall-101 1.95s -2s ease-in infinite;
}

@keyframes fall-101 {
    1% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(102) {
    opacity: 0.72;
    left: 93.3vw;
    border-left-width: 4.8px;
    animation: fall-102 1.2s -12s ease-in infinite;
}

@keyframes fall-102 {
    1.2% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(103) {
    opacity: 0.23;
    left: 40.6vw;
    border-left-width: 1.8px;
    animation: fall-103 0.15s -3s ease-in infinite;
}

@keyframes fall-103 {
    1.4% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(104) {
    opacity: 0.41;
    left: 44.4vw;
    border-left-width: 9px;
    animation: fall-104 0.75s -11s ease-in infinite;
}

@keyframes fall-104 {
    9.2% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(105) {
    opacity: 0.55;
    left: 14.1vw;
    border-left-width: 8.4px;
    animation: fall-105 1.05s -7.5s ease-in infinite;
}

@keyframes fall-105 {
    1% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(106) {
    opacity: 0.88;
    left: 6.7vw;
    border-left-width: 4.6px;
    animation: fall-106 0.15s -5s ease-in infinite;
}

@keyframes fall-106 {
    0.4% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(107) {
    opacity: 0.31;
    left: 69vw;
    border-left-width: 3.4px;
    animation: fall-107 0.15s -4s ease-in infinite;
}

@keyframes fall-107 {
    3.6% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(108) {
    opacity: 0.31;
    left: 62.4vw;
    border-left-width: 1.4px;
    animation: fall-108 2.1s -12s ease-in infinite;
}

@keyframes fall-108 {
    7.4% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(109) {
    opacity: 0.64;
    left: 8vw;
    border-left-width: 11px;
    animation: fall-109 0.6s -4s ease-in infinite;
}

@keyframes fall-109 {
    9.4% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(110) {
    opacity: 0.78;
    left: 85.8vw;
    border-left-width: 0.8px;
    animation: fall-110 0.9s -2.5s ease-in infinite;
}

@keyframes fall-110 {
    1% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(111) {
    opacity: 0.38;
    left: 70.8vw;
    border-left-width: 11.6px;
    animation: fall-111 0.15s -2.5s ease-in infinite;
}

@keyframes fall-111 {
    2% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(112) {
    opacity: 0.76;
    left: 0.5vw;
    border-left-width: 1.4px;
    animation: fall-112 1.95s -2s ease-in infinite;
}

@keyframes fall-112 {
    7.2% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(113) {
    opacity: 0.01;
    left: 104.8vw;
    border-left-width: 12.4px;
    animation: fall-113 0.15s -7s ease-in infinite;
}

@keyframes fall-113 {
    8% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(114) {
    opacity: 0.68;
    left: 66vw;
    border-left-width: 1.6px;
    animation: fall-114 0.45s -12.5s ease-in infinite;
}

@keyframes fall-114 {
    5.6% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(115) {
    opacity: 0.19;
    left: 36.3vw;
    border-left-width: 14.8px;
    animation: fall-115 0.6s -2.5s ease-in infinite;
}

@keyframes fall-115 {
    4% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(116) {
    opacity: 0.48;
    left: 27.1vw;
    border-left-width: 10.8px;
    animation: fall-116 0.45s -8.5s ease-in infinite;
}

@keyframes fall-116 {
    6.8% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(117) {
    opacity: 0.51;
    left: 118.2vw;
    border-left-width: 8.8px;
    animation: fall-117 1.05s -9s ease-in infinite;
}

@keyframes fall-117 {
    4.2% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(118) {
    opacity: 0.88;
    left: 39.2vw;
    border-left-width: 1.3px;
    animation: fall-118 1.8s -9s ease-in infinite;
}

@keyframes fall-118 {
    7.2% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(119) {
    opacity: 0.33;
    left: 104vw;
    border-left-width: 14.9px;
    animation: fall-119 0.3s -5.5s ease-in infinite;
}

@keyframes fall-119 {
    7.8% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(120) {
    opacity: 0.85;
    left: 119vw;
    border-left-width: 4px;
    animation: fall-120 0.45s -4.5s ease-in infinite;
}

@keyframes fall-120 {
    1.4% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(121) {
    opacity: 0.62;
    left: 66vw;
    border-left-width: 7px;
    animation: fall-121 0.75s -1s ease-in infinite;
}

@keyframes fall-121 {
    3% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(122) {
    opacity: 0.23;
    left: 101.1vw;
    border-left-width: 27px;
    animation: fall-122 1.8s -6.5s ease-in infinite;
}

@keyframes fall-122 {
    7% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(123) {
    opacity: 0.62;
    left: 2.8vw;
    border-left-width: 5px;
    animation: fall-123 1.65s -6s ease-in infinite;
}

@keyframes fall-123 {
    3.4% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(124) {
    opacity: 0.68;
    left: 110.5vw;
    border-left-width: 18px;
    animation: fall-124 1.05s -3s ease-in infinite;
}

@keyframes fall-124 {
    8.2% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(125) {
    opacity: 0.84;
    left: 79.4vw;
    border-left-width: 3.6px;
    animation: fall-125 0.75s -0.5s ease-in infinite;
}

@keyframes fall-125 {
    8.2% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(126) {
    opacity: 0.67;
    left: 25.3vw;
    border-left-width: 27px;
    animation: fall-126 1.2s -0.5s ease-in infinite;
}

@keyframes fall-126 {
    5.6% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(127) {
    opacity: 0.02;
    left: 10.5vw;
    border-left-width: 11.3px;
    animation: fall-127 1.65s -11s ease-in infinite;
}

@keyframes fall-127 {
    4.6% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(128) {
    opacity: 0.31;
    left: 107vw;
    border-left-width: 18.9px;
    animation: fall-128 2.25s -6s ease-in infinite;
}

@keyframes fall-128 {
    1% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(129) {
    opacity: 0.64;
    left: 70.5vw;
    border-left-width: 28.5px;
    animation: fall-129 0.6s -11s ease-in infinite;
}

@keyframes fall-129 {
    1% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(130) {
    opacity: 0.09;
    left: 95.6vw;
    border-left-width: 12.9px;
    animation: fall-130 0.6s -5.5s ease-in infinite;
}

@keyframes fall-130 {
    10% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(131) {
    opacity: 0.44;
    left: 99.9vw;
    border-left-width: 7.3px;
    animation: fall-131 0.75s -11.5s ease-in infinite;
}

@keyframes fall-131 {
    8.2% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(132) {
    opacity: 0.74;
    left: 18.9vw;
    border-left-width: 14.6px;
    animation: fall-132 0.9s -2.5s ease-in infinite;
}

@keyframes fall-132 {
    7.6% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(133) {
    opacity: 0.77;
    left: 89.2vw;
    border-left-width: 24px;
    animation: fall-133 1.5s -11.5s ease-in infinite;
}

@keyframes fall-133 {
    8.4% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(134) {
    opacity: 0.6;
    left: 74.2vw;
    border-left-width: 19px;
    animation: fall-134 1.5s -4.5s ease-in infinite;
}

@keyframes fall-134 {
    5% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(135) {
    opacity: 0.84;
    left: 46.1vw;
    border-left-width: 21px;
    animation: fall-135 0.15s -5s ease-in infinite;
}

@keyframes fall-135 {
    6.6% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(136) {
    opacity: 0.63;
    left: 41.7vw;
    border-left-width: 23px;
    animation: fall-136 1.2s -8.5s ease-in infinite;
}

@keyframes fall-136 {
    8.2% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(137) {
    opacity: 0.3;
    left: 70.9vw;
    border-left-width: 26px;
    animation: fall-137 2.1s -7.5s ease-in infinite;
}

@keyframes fall-137 {
    5% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(138) {
    opacity: 0.23;
    left: 77.6vw;
    border-left-width: 29.9px;
    animation: fall-138 1.35s -5.5s ease-in infinite;
}

@keyframes fall-138 {
    8% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(139) {
    opacity: 0.71;
    left: 6.1vw;
    border-left-width: 5.7px;
    animation: fall-139 1.5s -12.5s ease-in infinite;
}

@keyframes fall-139 {
    1.2% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(140) {
    opacity: 0.51;
    left: 53.6vw;
    border-left-width: 7.6px;
    animation: fall-140 1.2s -4s ease-in infinite;
}

@keyframes fall-140 {
    4.8% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(141) {
    opacity: 0.48;
    left: 10.7vw;
    border-left-width: 4.2px;
    animation: fall-141 1.65s -7.5s ease-in infinite;
}

@keyframes fall-141 {
    7% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(142) {
    opacity: 0.26;
    left: 73.9vw;
    border-left-width: 15.6px;
    animation: fall-142 1.95s -1s ease-in infinite;
}

@keyframes fall-142 {
    9.2% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(143) {
    opacity: 0.45;
    left: 22.5vw;
    border-left-width: 13.9px;
    animation: fall-143 2.1s -6.5s ease-in infinite;
}

@keyframes fall-143 {
    2.6% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(144) {
    opacity: 0.65;
    left: 75.1vw;
    border-left-width: 8px;
    animation: fall-144 1.35s -2s ease-in infinite;
}

@keyframes fall-144 {
    3.4% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(145) {
    opacity: 0.86;
    left: 9.3vw;
    border-left-width: 3.8px;
    animation: fall-145 2.1s -12.5s ease-in infinite;
}

@keyframes fall-145 {
    2.8% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(146) {
    opacity: 0.47;
    left: 15.5vw;
    border-left-width: 25.5px;
    animation: fall-146 1.05s -12.5s ease-in infinite;
}

@keyframes fall-146 {
    1% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(147) {
    opacity: 0.27;
    left: 9vw;
    border-left-width: 4px;
    animation: fall-147 0.45s -6.5s ease-in infinite;
}

@keyframes fall-147 {
    8% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(148) {
    opacity: 0.6;
    left: 33.6vw;
    border-left-width: 16px;
    animation: fall-148 1.95s -11.5s ease-in infinite;
}

@keyframes fall-148 {
    0.4% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(149) {
    opacity: 0.74;
    left: 75.5vw;
    border-left-width: 30px;
    animation: fall-149 0.6s -3.5s ease-in infinite;
}

@keyframes fall-149 {
    0.2% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(150) {
    opacity: 0.58;
    left: 19.3vw;
    border-left-width: 13px;
    animation: fall-150 2.25s -9s ease-in infinite;
}

@keyframes fall-150 {
    7.2% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(151) {
    opacity: 0.08;
    left: 7.2vw;
    border-left-width: 24px;
    animation: fall-151 1.95s -2s ease-in infinite;
}

@keyframes fall-151 {
    4.2% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(152) {
    opacity: 0.39;
    left: 65.4vw;
    border-left-width: 15px;
    animation: fall-152 1.8s -9s ease-in infinite;
}

@keyframes fall-152 {
    1% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(153) {
    opacity: 0.18;
    left: 30.3vw;
    border-left-width: 0.8px;
    animation: fall-153 0.6s -4s ease-in infinite;
}

@keyframes fall-153 {
    6.6% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(154) {
    opacity: 0.66;
    left: 19.2vw;
    border-left-width: 20px;
    animation: fall-154 2.25s -9.5s ease-in infinite;
}

@keyframes fall-154 {
    8.6% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(155) {
    opacity: 0.59;
    left: 20.9vw;
    border-left-width: 30px;
    animation: fall-155 0.45s -3s ease-in infinite;
}

@keyframes fall-155 {
    8.4% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(156) {
    opacity: 0.73;
    left: 78.6vw;
    border-left-width: 4.8px;
    animation: fall-156 0.15s -12s ease-in infinite;
}

@keyframes fall-156 {
    8% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(157) {
    opacity: 0.18;
    left: 77.8vw;
    border-left-width: 11px;
    animation: fall-157 1.65s -7s ease-in infinite;
}

@keyframes fall-157 {
    3% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(158) {
    opacity: 0.05;
    left: 66.1vw;
    border-left-width: 8.2px;
    animation: fall-158 1.95s -5.5s ease-in infinite;
}

@keyframes fall-158 {
    4.4% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(159) {
    opacity: 0.29;
    left: 38vw;
    border-left-width: 13.4px;
    animation: fall-159 1.65s -5s ease-in infinite;
}

@keyframes fall-159 {
    9.4% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(160) {
    opacity: 0.22;
    left: 40.2vw;
    border-left-width: 12px;
    animation: fall-160 1.2s -9.5s ease-in infinite;
}

@keyframes fall-160 {
    4.4% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(161) {
    opacity: 0.82;
    left: 1.2vw;
    border-left-width: 12.8px;
    animation: fall-161 1.05s -1.5s ease-in infinite;
}

@keyframes fall-161 {
    1.4% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(162) {
    opacity: 0.1;
    left: 59.4vw;
    border-left-width: 6.8px;
    animation: fall-162 0.45s -1.5s ease-in infinite;
}

@keyframes fall-162 {
    10% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(163) {
    opacity: 0.42;
    left: 25.6vw;
    border-left-width: 9.8px;
    animation: fall-163 0.75s -1.5s ease-in infinite;
}

@keyframes fall-163 {
    9.8% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(164) {
    opacity: 0.2;
    left: 55.6vw;
    border-left-width: 1.6px;
    animation: fall-164 0.45s -10.5s ease-in infinite;
}

@keyframes fall-164 {
    0.6% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(165) {
    opacity: 0.1;
    left: 117vw;
    border-left-width: 1.8px;
    animation: fall-165 1.05s -8s ease-in infinite;
}

@keyframes fall-165 {
    0.8% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(166) {
    opacity: 0.71;
    left: 116.1vw;
    border-left-width: 14.2px;
    animation: fall-166 0.75s -10.5s ease-in infinite;
}

@keyframes fall-166 {
    3.6% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(167) {
    opacity: 0.6;
    left: 32vw;
    border-left-width: 14px;
    animation: fall-167 0.75s -6s ease-in infinite;
}

@keyframes fall-167 {
    3.2% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(168) {
    opacity: 0.68;
    left: 53.7vw;
    border-left-width: 1.4px;
    animation: fall-168 0.45s -10.5s ease-in infinite;
}

@keyframes fall-168 {
    8.4% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(169) {
    opacity: 0.44;
    left: 81.6vw;
    border-left-width: 13.4px;
    animation: fall-169 1.2s -3.5s ease-in infinite;
}

@keyframes fall-169 {
    8.4% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(170) {
    opacity: 0.48;
    left: 98.8vw;
    border-left-width: 11.4px;
    animation: fall-170 0.75s -6.5s ease-in infinite;
}

@keyframes fall-170 {
    8% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(171) {
    opacity: 0.41;
    left: 88.2vw;
    border-left-width: 5.9px;
    animation: fall-171 1.8s -7s ease-in infinite;
}

@keyframes fall-171 {
    5.6% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(172) {
    opacity: 0.8;
    left: 27.5vw;
    border-left-width: 10.2px;
    animation: fall-172 2.25s -12.5s ease-in infinite;
}

@keyframes fall-172 {
    1.4% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(173) {
    opacity: 0.25;
    left: 40.8vw;
    border-left-width: 10.8px;
    animation: fall-173 0.45s -11s ease-in infinite;
}

@keyframes fall-173 {
    0.2% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(174) {
    opacity: 0.58;
    left: 1.8vw;
    border-left-width: 6.7px;
    animation: fall-174 1.05s -2s ease-in infinite;
}

@keyframes fall-174 {
    1% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(175) {
    opacity: 0.54;
    left: 113.5vw;
    border-left-width: 5px;
    animation: fall-175 1.65s -4.5s ease-in infinite;
}

@keyframes fall-175 {
    2.8% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(176) {
    opacity: 0.61;
    left: 108.5vw;
    border-left-width: 13.9px;
    animation: fall-176 0.45s -12s ease-in infinite;
}

@keyframes fall-176 {
    3.6% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(177) {
    opacity: 0.25;
    left: 9.6vw;
    border-left-width: 0.4px;
    animation: fall-177 2.1s -6s ease-in infinite;
}

@keyframes fall-177 {
    2.8% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(178) {
    opacity: 0.55;
    left: 102.9vw;
    border-left-width: 6.6px;
    animation: fall-178 1.8s -7s ease-in infinite;
}

@keyframes fall-178 {
    4.4% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(179) {
    opacity: 0.77;
    left: 11.5vw;
    border-left-width: 6.9px;
    animation: fall-179 2.25s -7.5s ease-in infinite;
}

@keyframes fall-179 {
    0.4% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(180) {
    opacity: 0.7;
    left: 47.8vw;
    border-left-width: 14.8px;
    animation: fall-180 1.35s -2s ease-in infinite;
}

@keyframes fall-180 {
    7.8% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(181) {
    opacity: 0.08;
    left: 2vw;
    border-left-width: 10.4px;
    animation: fall-181 2.1s -3s ease-in infinite;
}

@keyframes fall-181 {
    2.4% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(182) {
    opacity: 0.72;
    left: 61.4vw;
    border-left-width: 15.6px;
    animation: fall-182 1.5s -5.5s ease-in infinite;
}

@keyframes fall-182 {
    8.2% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(183) {
    opacity: 0.5;
    left: 37.4vw;
    border-left-width: 2.6px;
    animation: fall-183 0.3s -8.5s ease-in infinite;
}

@keyframes fall-183 {
    4.4% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(184) {
    opacity: 0.78;
    left: 59.1vw;
    border-left-width: 10.8px;
    animation: fall-184 1.05s -6.5s ease-in infinite;
}

@keyframes fall-184 {
    2.4% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(185) {
    opacity: 0.08;
    left: 3.6vw;
    border-left-width: 2.4px;
    animation: fall-185 0.3s -9s ease-in infinite;
}

@keyframes fall-185 {
    8.2% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(186) {
    opacity: 0.08;
    left: 116vw;
    border-left-width: 11.9px;
    animation: fall-186 0.3s -3.5s ease-in infinite;
}

@keyframes fall-186 {
    9.4% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(187) {
    opacity: 0.06;
    left: 76.5vw;
    border-left-width: 8.4px;
    animation: fall-187 0.45s -12s ease-in infinite;
}

@keyframes fall-187 {
    8.2% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(188) {
    opacity: 0.57;
    left: 10vw;
    border-left-width: 5.6px;
    animation: fall-188 1.5s -8.5s ease-in infinite;
}

@keyframes fall-188 {
    5% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(189) {
    opacity: 0.49;
    left: 28.4vw;
    border-left-width: 6.5px;
    animation: fall-189 0.45s -11s ease-in infinite;
}

@keyframes fall-189 {
    3.2% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(190) {
    opacity: 0.34;
    left: 30.3vw;
    border-left-width: 1.5px;
    animation: fall-190 0.45s -2.5s ease-in infinite;
}

@keyframes fall-190 {
    4% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(191) {
    opacity: 0.71;
    left: 119.9vw;
    border-left-width: 7.6px;
    animation: fall-191 1.05s -2s ease-in infinite;
}

@keyframes fall-191 {
    5.6% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(192) {
    opacity: 0.37;
    left: 68.5vw;
    border-left-width: 2.4px;
    animation: fall-192 1.95s -2s ease-in infinite;
}

@keyframes fall-192 {
    2.2% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(193) {
    opacity: 0.76;
    left: 60.6vw;
    border-left-width: 2.2px;
    animation: fall-193 1.35s -3s ease-in infinite;
}

@keyframes fall-193 {
    7.6% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(194) {
    opacity: 0.5;
    left: 30.9vw;
    border-left-width: 2.6px;
    animation: fall-194 1.35s -5.5s ease-in infinite;
}

@keyframes fall-194 {
    0.6% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(195) {
    opacity: 0.41;
    left: 82.7vw;
    border-left-width: 7.6px;
    animation: fall-195 0.6s -6s ease-in infinite;
}

@keyframes fall-195 {
    0.8% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(196) {
    opacity: 0.01;
    left: 87vw;
    border-left-width: 10.8px;
    animation: fall-196 1.8s -0.5s ease-in infinite;
}

@keyframes fall-196 {
    1.8% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(197) {
    opacity: 0.85;
    left: 101.1vw;
    border-left-width: 16px;
    animation: fall-197 1.35s -2s ease-in infinite;
}

@keyframes fall-197 {
    5.6% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(198) {
    opacity: 0.82;
    left: 6.9vw;
    border-left-width: 15.4px;
    animation: fall-198 1.8s -8s ease-in infinite;
}

@keyframes fall-198 {
    9.6% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(199) {
    opacity: 0.73;
    left: 78.6vw;
    border-left-width: 5.9px;
    animation: fall-199 2.1s -12s ease-in infinite;
}

@keyframes fall-199 {
    10% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(200) {
    opacity: 0.73;
    left: 13.2vw;
    border-left-width: 13.4px;
    animation: fall-200 1.5s -3s ease-in infinite;
}

@keyframes fall-200 {
    9% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(201) {
    opacity: 0.31;
    left: 107.3vw;
    border-left-width: 1.8px;
    animation: fall-201 1.65s -6s ease-in infinite;
}

@keyframes fall-201 {
    0.8% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(202) {
    opacity: 0.74;
    left: 81.2vw;
    border-left-width: 12.8px;
    animation: fall-202 1.5s -8s ease-in infinite;
}

@keyframes fall-202 {
    5% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(203) {
    opacity: 0.05;
    left: 72.6vw;
    border-left-width: 9.6px;
    animation: fall-203 2.25s -2.5s ease-in infinite;
}

@keyframes fall-203 {
    6.6% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(204) {
    opacity: 0.39;
    left: 107.5vw;
    border-left-width: 14.6px;
    animation: fall-204 0.6s -2.5s ease-in infinite;
}

@keyframes fall-204 {
    3.8% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(205) {
    opacity: 0.26;
    left: 96.7vw;
    border-left-width: 11.8px;
    animation: fall-205 0.75s -2s ease-in infinite;
}

@keyframes fall-205 {
    4% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(206) {
    opacity: 0.23;
    left: 71.7vw;
    border-left-width: 12.9px;
    animation: fall-206 0.9s -3s ease-in infinite;
}

@keyframes fall-206 {
    4.8% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(207) {
    opacity: 0.18;
    left: 70vw;
    border-left-width: 12.6px;
    animation: fall-207 1.35s -12s ease-in infinite;
}

@keyframes fall-207 {
    8.4% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(208) {
    opacity: 0.09;
    left: 81.4vw;
    border-left-width: 5.8px;
    animation: fall-208 2.1s -3.5s ease-in infinite;
}

@keyframes fall-208 {
    0.8% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(209) {
    opacity: 0.19;
    left: 15.2vw;
    border-left-width: 4.2px;
    animation: fall-209 1.2s -12.5s ease-in infinite;
}

@keyframes fall-209 {
    7.8% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(210) {
    opacity: 0.46;
    left: 58.7vw;
    border-left-width: 9.6px;
    animation: fall-210 1.05s -11s ease-in infinite;
}

@keyframes fall-210 {
    2.4% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(211) {
    opacity: 0.13;
    left: 103.4vw;
    border-left-width: 15.7px;
    animation: fall-211 1.35s -8.5s ease-in infinite;
}

@keyframes fall-211 {
    8.6% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(212) {
    opacity: 0.65;
    left: 45vw;
    border-left-width: 2.2px;
    animation: fall-212 1.2s -12.5s ease-in infinite;
}

@keyframes fall-212 {
    5.4% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(213) {
    opacity: 0.13;
    left: 51vw;
    border-left-width: 4.8px;
    animation: fall-213 1.2s -4s ease-in infinite;
}

@keyframes fall-213 {
    8.4% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(214) {
    opacity: 0.13;
    left: 56.5vw;
    border-left-width: 4.9px;
    animation: fall-214 1.35s -12s ease-in infinite;
}

@keyframes fall-214 {
    1.6% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(215) {
    opacity: 0.51;
    left: 69.9vw;
    border-left-width: 4.8px;
    animation: fall-215 1.05s -3s ease-in infinite;
}

@keyframes fall-215 {
    8.4% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(216) {
    opacity: 0.74;
    left: 35.2vw;
    border-left-width: 8px;
    animation: fall-216 0.45s -9.5s ease-in infinite;
}

@keyframes fall-216 {
    4.6% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(217) {
    opacity: 0.5;
    left: 62.5vw;
    border-left-width: 2.4px;
    animation: fall-217 1.2s -7s ease-in infinite;
}

@keyframes fall-217 {
    5.8% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(218) {
    opacity: 0.14;
    left: 42.6vw;
    border-left-width: 2.1px;
    animation: fall-218 1.95s -1s ease-in infinite;
}

@keyframes fall-218 {
    6.4% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(219) {
    opacity: 0.14;
    left: 84vw;
    border-left-width: 13.2px;
    animation: fall-219 1.35s -10s ease-in infinite;
}

@keyframes fall-219 {
    3% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(220) {
    opacity: 0.16;
    left: 22.5vw;
    border-left-width: 4.8px;
    animation: fall-220 2.25s -2s ease-in infinite;
}

@keyframes fall-220 {
    8% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(221) {
    opacity: 0.01;
    left: 62.7vw;
    border-left-width: 13px;
    animation: fall-221 1.8s -10.5s ease-in infinite;
}

@keyframes fall-221 {
    1.6% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(222) {
    opacity: 0.54;
    left: 78.4vw;
    border-left-width: 14px;
    animation: fall-222 0.9s -2s ease-in infinite;
}

@keyframes fall-222 {
    9.2% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(223) {
    opacity: 0.53;
    left: 99.4vw;
    border-left-width: 9.6px;
    animation: fall-223 1.65s -9.5s ease-in infinite;
}

@keyframes fall-223 {
    0.6% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(224) {
    opacity: 0.54;
    left: 37vw;
    border-left-width: 5.1px;
    animation: fall-224 1.05s -8.5s ease-in infinite;
}

@keyframes fall-224 {
    0.6% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(225) {
    opacity: 0.59;
    left: 76.3vw;
    border-left-width: 9.3px;
    animation: fall-225 1.95s -4.5s ease-in infinite;
}

@keyframes fall-225 {
    1% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(226) {
    opacity: 0.23;
    left: 90.3vw;
    border-left-width: 14.7px;
    animation: fall-226 1.95s -10s ease-in infinite;
}

@keyframes fall-226 {
    7% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(227) {
    opacity: 0.15;
    left: 54.1vw;
    border-left-width: 10.4px;
    animation: fall-227 1.35s -10.5s ease-in infinite;
}

@keyframes fall-227 {
    3.6% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(228) {
    opacity: 0.02;
    left: 73.2vw;
    border-left-width: 12.3px;
    animation: fall-228 1.35s -5.5s ease-in infinite;
}

@keyframes fall-228 {
    9% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(229) {
    opacity: 0.02;
    left: 27.4vw;
    border-left-width: 9.4px;
    animation: fall-229 0.9s -11.5s ease-in infinite;
}

@keyframes fall-229 {
    5% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(230) {
    opacity: 0.09;
    left: 55.1vw;
    border-left-width: 3px;
    animation: fall-230 1.35s -4.5s ease-in infinite;
}

@keyframes fall-230 {
    4.8% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(231) {
    opacity: 0.44;
    left: 42.1vw;
    border-left-width: 0.2px;
    animation: fall-231 1.65s -2s ease-in infinite;
}

@keyframes fall-231 {
    1.2% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(232) {
    opacity: 0.79;
    left: 73.6vw;
    border-left-width: 8px;
    animation: fall-232 0.45s -7.5s ease-in infinite;
}

@keyframes fall-232 {
    0.4% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(233) {
    opacity: 0.26;
    left: 88.5vw;
    border-left-width: 0.9px;
    animation: fall-233 1.2s -12s ease-in infinite;
}

@keyframes fall-233 {
    7.8% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(234) {
    opacity: 0.15;
    left: 79.8vw;
    border-left-width: 3.8px;
    animation: fall-234 0.75s -10s ease-in infinite;
}

@keyframes fall-234 {
    2.6% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(235) {
    opacity: 0.76;
    left: 6vw;
    border-left-width: 9.2px;
    animation: fall-235 1.65s -8s ease-in infinite;
}

@keyframes fall-235 {
    10% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(236) {
    opacity: 0.36;
    left: 91.4vw;
    border-left-width: 3.8px;
    animation: fall-236 0.45s -9.5s ease-in infinite;
}

@keyframes fall-236 {
    5% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(237) {
    opacity: 0.66;
    left: 84vw;
    border-left-width: 0.2px;
    animation: fall-237 2.1s -3.5s ease-in infinite;
}

@keyframes fall-237 {
    3% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(238) {
    opacity: 0.3;
    left: 37.3vw;
    border-left-width: 8px;
    animation: fall-238 0.15s -9s ease-in infinite;
}

@keyframes fall-238 {
    7.8% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(239) {
    opacity: 0.18;
    left: 100.6vw;
    border-left-width: 1.7px;
    animation: fall-239 1.2s -5s ease-in infinite;
}

@keyframes fall-239 {
    6.2% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(240) {
    opacity: 0.73;
    left: 44.5vw;
    border-left-width: 12.4px;
    animation: fall-240 0.45s -7s ease-in infinite;
}

@keyframes fall-240 {
    5.8% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(241) {
    opacity: 0.52;
    left: 67.2vw;
    border-left-width: 13.8px;
    animation: fall-241 0.45s -7.5s ease-in infinite;
}

@keyframes fall-241 {
    3% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(242) {
    opacity: 0.23;
    left: 95.4vw;
    border-left-width: 12px;
    animation: fall-242 0.6s -1s ease-in infinite;
}

@keyframes fall-242 {
    3% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(243) {
    opacity: 0.44;
    left: 8.4vw;
    border-left-width: 15.2px;
    animation: fall-243 1.35s -1s ease-in infinite;
}

@keyframes fall-243 {
    2.4% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(244) {
    opacity: 0.21;
    left: 96.5vw;
    border-left-width: 9.8px;
    animation: fall-244 0.6s -0.5s ease-in infinite;
}

@keyframes fall-244 {
    6.8% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(245) {
    opacity: 0.63;
    left: 37.4vw;
    border-left-width: 10.6px;
    animation: fall-245 1.35s -2s ease-in infinite;
}

@keyframes fall-245 {
    6.6% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(246) {
    opacity: 0.68;
    left: 103.2vw;
    border-left-width: 11.8px;
    animation: fall-246 1.5s -8s ease-in infinite;
}

@keyframes fall-246 {
    9.4% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(247) {
    opacity: 0.1;
    left: 53.7vw;
    border-left-width: 14.8px;
    animation: fall-247 2.25s -5s ease-in infinite;
}

@keyframes fall-247 {
    5.2% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(248) {
    opacity: 0.14;
    left: 68.8vw;
    border-left-width: 2.4px;
    animation: fall-248 1.5s -10s ease-in infinite;
}

@keyframes fall-248 {
    1% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(249) {
    opacity: 0.26;
    left: 58.1vw;
    border-left-width: 12.4px;
    animation: fall-249 0.15s -8s ease-in infinite;
}

@keyframes fall-249 {
    2.4% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(250) {
    opacity: 0.38;
    left: 31.1vw;
    border-left-width: 0.7px;
    animation: fall-250 1.05s -7s ease-in infinite;
}

@keyframes fall-250 {
    6% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(251) {
    opacity: 0.09;
    left: 81vw;
    border-left-width: 10.2px;
    animation: fall-251 0.9s -6s ease-in infinite;
}

@keyframes fall-251 {
    6% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(252) {
    opacity: 0.14;
    left: 101vw;
    border-left-width: 9.3px;
    animation: fall-252 2.25s -10.5s ease-in infinite;
}

@keyframes fall-252 {
    8.2% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(253) {
    opacity: 0.19;
    left: 106.2vw;
    border-left-width: 13.3px;
    animation: fall-253 1.35s -8.5s ease-in infinite;
}

@keyframes fall-253 {
    6.4% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(254) {
    opacity: 0.7;
    left: 3.5vw;
    border-left-width: 5.7px;
    animation: fall-254 2.25s -5.5s ease-in infinite;
}

@keyframes fall-254 {
    0.6% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(255) {
    opacity: 0.72;
    left: 3.6vw;
    border-left-width: 13.2px;
    animation: fall-255 1.05s -2.5s ease-in infinite;
}

@keyframes fall-255 {
    1.4% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(256) {
    opacity: 0.41;
    left: 63.2vw;
    border-left-width: 1px;
    animation: fall-256 2.1s -11.5s ease-in infinite;
}

@keyframes fall-256 {
    9% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(257) {
    opacity: 0.45;
    left: 25.2vw;
    border-left-width: 15px;
    animation: fall-257 1.35s -9.5s ease-in infinite;
}

@keyframes fall-257 {
    6.2% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(258) {
    opacity: 0.62;
    left: 36.3vw;
    border-left-width: 14.8px;
    animation: fall-258 1.05s -6.5s ease-in infinite;
}

@keyframes fall-258 {
    6.6% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(259) {
    opacity: 0.4;
    left: 38.7vw;
    border-left-width: 2.2px;
    animation: fall-259 1.2s -11s ease-in infinite;
}

@keyframes fall-259 {
    1.2% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(260) {
    opacity: 0.78;
    left: 103.8vw;
    border-left-width: 8px;
    animation: fall-260 1.35s -4.5s ease-in infinite;
}

@keyframes fall-260 {
    2.2% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(261) {
    opacity: 0.62;
    left: 63.6vw;
    border-left-width: 6.2px;
    animation: fall-261 1.2s -2.5s ease-in infinite;
}

@keyframes fall-261 {
    7.2% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(262) {
    opacity: 0.43;
    left: 106.1vw;
    border-left-width: 9.4px;
    animation: fall-262 1.35s -7.5s ease-in infinite;
}

@keyframes fall-262 {
    3.2% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(263) {
    opacity: 0.45;
    left: 24.2vw;
    border-left-width: 13.2px;
    animation: fall-263 1.5s -1s ease-in infinite;
}

@keyframes fall-263 {
    6.4% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(264) {
    opacity: 0.71;
    left: 7.8vw;
    border-left-width: 13.9px;
    animation: fall-264 1.8s -4s ease-in infinite;
}

@keyframes fall-264 {
    5.2% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(265) {
    opacity: 0.73;
    left: 79.8vw;
    border-left-width: 11.2px;
    animation: fall-265 1.5s -2.5s ease-in infinite;
}

@keyframes fall-265 {
    3.8% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(266) {
    opacity: 0.38;
    left: 12.7vw;
    border-left-width: 13.4px;
    animation: fall-266 0.15s -3s ease-in infinite;
}

@keyframes fall-266 {
    9.4% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(267) {
    opacity: 0.53;
    left: 73vw;
    border-left-width: 15.4px;
    animation: fall-267 1.05s -7.5s ease-in infinite;
}

@keyframes fall-267 {
    4.4% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(268) {
    opacity: 0.78;
    left: 14.7vw;
    border-left-width: 15.2px;
    animation: fall-268 1.8s -8s ease-in infinite;
}

@keyframes fall-268 {
    5% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(269) {
    opacity: 0.37;
    left: 115.6vw;
    border-left-width: 13.5px;
    animation: fall-269 2.25s -8s ease-in infinite;
}

@keyframes fall-269 {
    10% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(270) {
    opacity: 0.29;
    left: 55.6vw;
    border-left-width: 0.3px;
    animation: fall-270 1.35s -10s ease-in infinite;
}

@keyframes fall-270 {
    9.6% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(271) {
    opacity: 0.57;
    left: 110.4vw;
    border-left-width: 0.8px;
    animation: fall-271 2.25s -4s ease-in infinite;
}

@keyframes fall-271 {
    1% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(272) {
    opacity: 0.37;
    left: 118.3vw;
    border-left-width: 12.7px;
    animation: fall-272 1.95s -12s ease-in infinite;
}

@keyframes fall-272 {
    4.2% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(273) {
    opacity: 0.51;
    left: 46.6vw;
    border-left-width: 5.9px;
    animation: fall-273 1.8s -7s ease-in infinite;
}

@keyframes fall-273 {
    7.2% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(274) {
    opacity: 0.59;
    left: 118.7vw;
    border-left-width: 9.1px;
    animation: fall-274 0.6s -2s ease-in infinite;
}

@keyframes fall-274 {
    6.6% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(275) {
    opacity: 0.42;
    left: 108.2vw;
    border-left-width: 9.9px;
    animation: fall-275 2.1s -11s ease-in infinite;
}

@keyframes fall-275 {
    7.8% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(276) {
    opacity: 0.48;
    left: 68.7vw;
    border-left-width: 14.9px;
    animation: fall-276 0.75s -4s ease-in infinite;
}

@keyframes fall-276 {
    0.6% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(277) {
    opacity: 0.28;
    left: 36.6vw;
    border-left-width: 0.5px;
    animation: fall-277 2.1s -5s ease-in infinite;
}

@keyframes fall-277 {
    4.8% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(278) {
    opacity: 0.4;
    left: 49.5vw;
    border-left-width: 18px;
    animation: fall-278 2.1s -3.5s ease-in infinite;
}

@keyframes fall-278 {
    3.8% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(279) {
    opacity: 0.35;
    left: 42.7vw;
    border-left-width: 9px;
    animation: fall-279 1.95s -8.5s ease-in infinite;
}

@keyframes fall-279 {
    5.2% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(280) {
    opacity: 0.09;
    left: 56.1vw;
    border-left-width: 9.2px;
    animation: fall-280 1.95s -5s ease-in infinite;
}

@keyframes fall-280 {
    5.2% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(281) {
    opacity: 0.12;
    left: 31.8vw;
    border-left-width: 5.6px;
    animation: fall-281 0.75s -4s ease-in infinite;
}

@keyframes fall-281 {
    6.4% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(282) {
    opacity: 0.75;
    left: 19.8vw;
    border-left-width: 5.6px;
    animation: fall-282 0.3s -12s ease-in infinite;
}

@keyframes fall-282 {
    6.4% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(283) {
    opacity: 0.29;
    left: 71.7vw;
    border-left-width: 10.2px;
    animation: fall-283 1.05s -12.5s ease-in infinite;
}

@keyframes fall-283 {
    0.6% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(284) {
    opacity: 0.45;
    left: 82.5vw;
    border-left-width: 3.6px;
    animation: fall-284 1.2s -2s ease-in infinite;
}

@keyframes fall-284 {
    3.6% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(285) {
    opacity: 0.54;
    left: 16.5vw;
    border-left-width: 6.5px;
    animation: fall-285 1.65s -10.5s ease-in infinite;
}

@keyframes fall-285 {
    0.8% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}


.drop:nth-child(286) {
    opacity: 0.46;
    left: 36.4vw;
    border-left-width: 12px;
    animation: fall-286 0.75s -10.5s ease-in infinite;
}

@keyframes fall-286 {
    0.2% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(287) {
    opacity: 0.31;
    left: 46.4vw;
    border-left-width: 10.5px;
    animation: fall-287 2.1s -9s ease-in infinite;
}

@keyframes fall-287 {
    2.6% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(288) {
    opacity: 0.23;
    left: 62.8vw;
    border-left-width: 10.7px;
    animation: fall-288 0.75s -10.5s ease-in infinite;
}

@keyframes fall-288 {
    0.2% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(289) {
    opacity: 0.37;
    left: 57.1vw;
    border-left-width: 15.5px;
    animation: fall-289 0.3s -5.5s ease-in infinite;
}

@keyframes fall-289 {
    9% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(290) {
    opacity: 0.3;
    left: 113.5vw;
    border-left-width: 10.2px;
    animation: fall-290 0.75s -10s ease-in infinite;
}

@keyframes fall-290 {
    6.8% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(291) {
    opacity: 0.83;
    left: 66.5vw;
    border-left-width: 16.7px;
    animation: fall-291 1.2s -3.5s ease-in infinite;
}

@keyframes fall-291 {
    10% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(292) {
    opacity: 0.38;
    left: 23.4vw;
    border-left-width: 8.8px;
    animation: fall-292 1.5s -6.5s ease-in infinite;
}

@keyframes fall-292 {
    6.8% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(293) {
    opacity: 0.67;
    left: 102.4vw;
    border-left-width: 3.6px;
    animation: fall-293 0.6s -6s ease-in infinite;
}

@keyframes fall-293 {
    3.4% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(294) {
    opacity: 0.54;
    left: 48.9vw;
    border-left-width: 14.3px;
    animation: fall-294 0.15s -0.5s ease-in infinite;
}

@keyframes fall-294 {
    1.2% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(295) {
    opacity: 0.21;
    left: 113.4vw;
    border-left-width: 4.3px;
    animation: fall-295 0.45s -12.5s ease-in infinite;
}

@keyframes fall-295 {
    3.4% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(296) {
    opacity: 0.79;
    left: 87.1vw;
    border-left-width: 4.6px;
    animation: fall-296 2.1s -1.5s ease-in infinite;
}

@keyframes fall-296 {
    8.8% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(297) {
    opacity: 0.54;
    left: 24.8vw;
    border-left-width: 5.5px;
    animation: fall-297 0.3s -9.5s ease-in infinite;
}

@keyframes fall-297 {
    3.4% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(298) {
    opacity: 0.13;
    left: 43.8vw;
    border-left-width: 9.4px;
    animation: fall-298 1.95s -12.5s ease-in infinite;
}

@keyframes fall-298 {
    8.4% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(299) {
    opacity: 0.32;
    left: 10.8vw;
    border-left-width: 10.2px;
    animation: fall-299 1.95s -11.5s ease-in infinite;
}

@keyframes fall-299 {
    0.6% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(300) {
    opacity: 0.61;
    left: 61.7vw;
    border-left-width: 14.9px;
    animation: fall-300 0.15s -5s ease-in infinite;
}

@keyframes fall-300 {
    1.4% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(301) {
    opacity: 0.38;
    left: 55.4vw;
    border-left-width: 15.6px;
    animation: fall-301 2.1s -3s ease-in infinite;
}

@keyframes fall-301 {
    2% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(302) {
    opacity: 0.01;
    left: 83.4vw;
    border-left-width: 2.2px;
    animation: fall-302 2.25s -8s ease-in infinite;
}

@keyframes fall-302 {
    8% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(303) {
    opacity: 0.84;
    left: 42.9vw;
    border-left-width: 2px;
    animation: fall-303 1.8s -1.5s ease-in infinite;
}

@keyframes fall-303 {
    4.2% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(304) {
    opacity: 0.39;
    left: 90.5vw;
    border-left-width: 12.5px;
    animation: fall-304 0.6s -5.5s ease-in infinite;
}

@keyframes fall-304 {
    3% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(305) {
    opacity: 0.85;
    left: 2.6vw;
    border-left-width: 3.7px;
    animation: fall-305 0.3s -7.5s ease-in infinite;
}

@keyframes fall-305 {
    4.8% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(306) {
    opacity: 0.84;
    left: 75.5vw;
    border-left-width: 14.6px;
    animation: fall-306 1.5s -1.5s ease-in infinite;
}

@keyframes fall-306 {
    9% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(307) {
    opacity: 0.53;
    left: 109.2vw;
    border-left-width: 9.7px;
    animation: fall-307 1.2s -1s ease-in infinite;
}

@keyframes fall-307 {
    3.4% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(308) {
    opacity: 0.67;
    left: 29.1vw;
    border-left-width: 13.4px;
    animation: fall-308 1.8s -12s ease-in infinite;
}

@keyframes fall-308 {
    2.6% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(309) {
    opacity: 0.63;
    left: 30.3vw;
    border-left-width: 15.1px;
    animation: fall-309 1.2s -9s ease-in infinite;
}

@keyframes fall-309 {
    2.4% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(310) {
    opacity: 0.9;
    left: 40.6vw;
    border-left-width: 12.4px;
    animation: fall-310 1.95s -8.5s ease-in infinite;
}

@keyframes fall-310 {
    4.4% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(311) {
    opacity: 0.47;
    left: 104.7vw;
    border-left-width: 9.1px;
    animation: fall-311 1.5s -3s ease-in infinite;
}

@keyframes fall-311 {
    6.4% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(312) {
    opacity: 0.44;
    left: 22.8vw;
    border-left-width: 11.7px;
    animation: fall-312 1.35s -0.5s ease-in infinite;
}

@keyframes fall-312 {
    2.4% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(313) {
    opacity: 0.45;
    left: 23.1vw;
    border-left-width: 6.6px;
    animation: fall-313 1.35s -10s ease-in infinite;
}

@keyframes fall-313 {
    10% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(314) {
    opacity: 0.8;
    left: 109.3vw;
    border-left-width: 11.9px;
    animation: fall-314 1.35s -8s ease-in infinite;
}

@keyframes fall-314 {
    7.6% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(315) {
    opacity: 0.52;
    left: 37.3vw;
    border-left-width: 11px;
    animation: fall-315 1.05s -11s ease-in infinite;
}

@keyframes fall-315 {
    6.4% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(316) {
    opacity: 0.36;
    left: 56.1vw;
    border-left-width: 10px;
    animation: fall-316 0.45s -11.5s ease-in infinite;
}

@keyframes fall-316 {
    8.6% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(317) {
    opacity: 0.15;
    left: 95.4vw;
    border-left-width: 1.4px;
    animation: fall-317 1.05s -2s ease-in infinite;
}

@keyframes fall-317 {
    3.2% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(318) {
    opacity: 0.58;
    left: 60.1vw;
    border-left-width: 6.4px;
    animation: fall-318 1.35s -7s ease-in infinite;
}

@keyframes fall-318 {
    6.4% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(319) {
    opacity: 0.88;
    left: 113.7vw;
    border-left-width: 10.5px;
    animation: fall-319 0.9s -0.5s ease-in infinite;
}

@keyframes fall-319 {
    9.4% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(320) {
    opacity: 0.25;
    left: 47.3vw;
    border-left-width: 6.7px;
    animation: fall-320 0.3s -12s ease-in infinite;
}

@keyframes fall-320 {
    3.8% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(321) {
    opacity: 0.25;
    left: 51.1vw;
    border-left-width: 9.4px;
    animation: fall-321 0.3s -5s ease-in infinite;
}

@keyframes fall-321 {
    1% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(322) {
    opacity: 0.72;
    left: 13.6vw;
    border-left-width: 8.4px;
    animation: fall-322 2.25s -8.5s ease-in infinite;
}

@keyframes fall-322 {
    1.4% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(323) {
    opacity: 0.3;
    left: 22.8vw;
    border-left-width: 1.4px;
    animation: fall-323 1.2s -2.5s ease-in infinite;
}

@keyframes fall-323 {
    7.4% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(324) {
    opacity: 0.6;
    left: 29.4vw;
    border-left-width: 15.4px;
    animation: fall-324 1.65s -8.5s ease-in infinite;
}

@keyframes fall-324 {
    4.6% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(325) {
    opacity: 0.79;
    left: 45.1vw;
    border-left-width: 13.8px;
    animation: fall-325 1.65s -8s ease-in infinite;
}

@keyframes fall-325 {
    0.4% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(326) {
    opacity: 0.19;
    left: 33.7vw;
    border-left-width: 13.3px;
    animation: fall-326 1.65s -7.5s ease-in infinite;
}

@keyframes fall-326 {
    4.6% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(327) {
    opacity: 0.37;
    left: 65vw;
    border-left-width: 3.1px;
    animation: fall-327 2.1s -5.5s ease-in infinite;
}

@keyframes fall-327 {
    5% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(328) {
    opacity: 0.4;
    left: 17.9vw;
    border-left-width: 12.3px;
    animation: fall-328 1.8s -12s ease-in infinite;
}

@keyframes fall-328 {
    0.4% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(329) {
    opacity: 0.1;
    left: 13.2vw;
    border-left-width: 11.1px;
    animation: fall-329 0.9s -9.5s ease-in infinite;
}

@keyframes fall-329 {
    9.6% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(330) {
    opacity: 0.01;
    left: 83.2vw;
    border-left-width: 10.9px;
    animation: fall-330 0.45s -12.5s ease-in infinite;
}

@keyframes fall-330 {
    1.4% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(331) {
    opacity: 0.87;
    left: 102.7vw;
    border-left-width: 5.9px;
    animation: fall-331 1.95s -4.5s ease-in infinite;
}

@keyframes fall-331 {
    5.4% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(332) {
    opacity: 0.16;
    left: 98.6vw;
    border-left-width: 10.1px;
    animation: fall-332 1.05s -3s ease-in infinite;
}

@keyframes fall-332 {
    8.6% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(333) {
    opacity: 0.27;
    left: 82.3vw;
    border-left-width: 15.6px;
    animation: fall-333 0.15s -1s ease-in infinite;
}

@keyframes fall-333 {
    5% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(334) {
    opacity: 0.77;
    left: 9.3vw;
    border-left-width: 14.8px;
    animation: fall-334 1.05s -2s ease-in infinite;
}

@keyframes fall-334 {
    2.8% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(335) {
    opacity: 0.52;
    left: 57.1vw;
    border-left-width: 8.4px;
    animation: fall-335 1.5s -4.5s ease-in infinite;
}

@keyframes fall-335 {
    8.4% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(336) {
    opacity: 0.21;
    left: 18.6vw;
    border-left-width: 1.4px;
    animation: fall-336 0.3s -9.5s ease-in infinite;
}

@keyframes fall-336 {
    4.4% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(337) {
    opacity: 0.52;
    left: 60vw;
    border-left-width: 3.8px;
    animation: fall-337 0.75s -4s ease-in infinite;
}

@keyframes fall-337 {
    4.4% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(338) {
    opacity: 0.75;
    left: 6vw;
    border-left-width: 0.2px;
    animation: fall-338 1.95s -4s ease-in infinite;
}

@keyframes fall-338 {
    9.8% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(339) {
    opacity: 0.3;
    left: 34.1vw;
    border-left-width: 1.2px;
    animation: fall-339 1.95s -10.5s ease-in infinite;
}

@keyframes fall-339 {
    0.2% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(340) {
    opacity: 0.29;
    left: 1.2vw;
    border-left-width: 11.5px;
    animation: fall-340 0.75s -3s ease-in infinite;
}

@keyframes fall-340 {
    3.2% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(341) {
    opacity: 0.75;
    left: 47vw;
    border-left-width: 2.4px;
    animation: fall-341 1.35s -7.5s ease-in infinite;
}

@keyframes fall-341 {
    10% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(342) {
    opacity: 0.15;
    left: 26.3vw;
    border-left-width: 4.8px;
    animation: fall-342 1.65s -6s ease-in infinite;
}

@keyframes fall-342 {
    7.8% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(343) {
    opacity: 0.68;
    left: 111.8vw;
    border-left-width: 11.6px;
    animation: fall-343 1.95s -4s ease-in infinite;
}

@keyframes fall-343 {
    3% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(344) {
    opacity: 0.64;
    left: 19vw;
    border-left-width: 7.8px;
    animation: fall-344 0.45s -4.5s ease-in infinite;
}

@keyframes fall-344 {
    2.2% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(345) {
    opacity: 0.34;
    left: 15.4vw;
    border-left-width: 9.1px;
    animation: fall-345 1.95s -12s ease-in infinite;
}

@keyframes fall-345 {
    9% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(346) {
    opacity: 0.53;
    left: 1.3vw;
    border-left-width: 7.2px;
    animation: fall-346 0.3s -6.5s ease-in infinite;
}

@keyframes fall-346 {
    8.2% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(347) {
    opacity: 0.12;
    left: 101.1vw;
    border-left-width: 12.2px;
    animation: fall-347 1.8s -2.5s ease-in infinite;
}

@keyframes fall-347 {
    1.4% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(348) {
    opacity: 0.15;
    left: 18vw;
    border-left-width: 10.3px;
    animation: fall-348 1.8s -7s ease-in infinite;
}

@keyframes fall-348 {
    3.4% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(349) {
    opacity: 0.49;
    left: 57.2vw;
    border-left-width: 0.6px;
    animation: fall-349 0.75s -2.5s ease-in infinite;
}

@keyframes fall-349 {
    1% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(350) {
    opacity: 0.25;
    left: 80vw;
    border-left-width: 3.6px;
    animation: fall-350 0.9s -8s ease-in infinite;
}

@keyframes fall-350 {
    9.8% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(351) {
    opacity: 0.87;
    left: 65.9vw;
    border-left-width: 12.2px;
    animation: fall-351 1.05s -4s ease-in infinite;
}

@keyframes fall-351 {
    8.4% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(352) {
    opacity: 0.57;
    left: 50.3vw;
    border-left-width: 5.6px;
    animation: fall-352 0.15s -0.5s ease-in infinite;
}

@keyframes fall-352 {
    0.8% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(353) {
    opacity: 0.15;
    left: 33.3vw;
    border-left-width: 10.2px;
    animation: fall-353 2.1s -9s ease-in infinite;
}

@keyframes fall-353 {
    8.2% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(354) {
    opacity: 0.43;
    left: 25.2vw;
    border-left-width: 15.2px;
    animation: fall-354 1.35s -11s ease-in infinite;
}

@keyframes fall-354 {
    6.6% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(355) {
    opacity: 0.79;
    left: 60.1vw;
    border-left-width: 0.4px;
    animation: fall-355 0.9s -2s ease-in infinite;
}

@keyframes fall-355 {
    0.8% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(356) {
    opacity: 0.7;
    left: 102.7vw;
    border-left-width: 8.2px;
    animation: fall-356 2.1s -7.5s ease-in infinite;
}

@keyframes fall-356 {
    9.8% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(357) {
    opacity: 0.62;
    left: 65.2vw;
    border-left-width: 7.2px;
    animation: fall-357 0.9s -3.5s ease-in infinite;
}

@keyframes fall-357 {
    2.8% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(358) {
    opacity: 0.62;
    left: 20.2vw;
    border-left-width: 7.4px;
    animation: fall-358 1.2s -12s ease-in infinite;
}

@keyframes fall-358 {
    10% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(359) {
    opacity: 0.07;
    left: 20vw;
    border-left-width: 12.4px;
    animation: fall-359 0.9s -11s ease-in infinite;
}

@keyframes fall-359 {
    2.4% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(360) {
    opacity: 0.27;
    left: 24vw;
    border-left-width: 1.2px;
    animation: fall-360 0.3s -9.5s ease-in infinite;
}

@keyframes fall-360 {
    7.2% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(361) {
    opacity: 0.86;
    left: 78.3vw;
    border-left-width: 5px;
    animation: fall-361 0.6s -7.5s ease-in infinite;
}

@keyframes fall-361 {
    3.2% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(362) {
    opacity: 0.5;
    left: 103vw;
    border-left-width: 5.8px;
    animation: fall-362 1.5s -4s ease-in infinite;
}

@keyframes fall-362 {
    4.2% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(363) {
    opacity: 0.26;
    left: 31vw;
    border-left-width: 7.4px;
    animation: fall-363 1.65s -7.5s ease-in infinite;
}

@keyframes fall-363 {
    8.2% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(364) {
    opacity: 0.57;
    left: 9.1vw;
    border-left-width: 16.6px;
    animation: fall-364 1.95s -6.5s ease-in infinite;
}

@keyframes fall-364 {
    4% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(365) {
    opacity: 0.51;
    left: 61.3vw;
    border-left-width: 11.5px;
    animation: fall-365 1.95s -10s ease-in infinite;
}

@keyframes fall-365 {
    7.2% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(366) {
    opacity: 0.55;
    left: 112.2vw;
    border-left-width: 2.9px;
    animation: fall-366 1.2s -2s ease-in infinite;
}

@keyframes fall-366 {
    9.2% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(367) {
    opacity: 0.89;
    left: 24vw;
    border-left-width: 7.8px;
    animation: fall-367 0.6s -8.5s ease-in infinite;
}

@keyframes fall-367 {
    3.2% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(368) {
    opacity: 0.68;
    left: 2.3vw;
    border-left-width: 10px;
    animation: fall-368 1.8s -5.5s ease-in infinite;
}

@keyframes fall-368 {
    5.4% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(369) {
    opacity: 0.55;
    left: 72.8vw;
    border-left-width: 15.9px;
    animation: fall-369 1.5s -2.5s ease-in infinite;
}

@keyframes fall-369 {
    4.8% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(370) {
    opacity: 0.41;
    left: 74.1vw;
    border-left-width: 8.1px;
    animation: fall-370 0.15s -12s ease-in infinite;
}

@keyframes fall-370 {
    4.8% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(371) {
    opacity: 0.19;
    left: 3.1vw;
    border-left-width: 10.5px;
    animation: fall-371 0.45s -0.5s ease-in infinite;
}

@keyframes fall-371 {
    9% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(372) {
    opacity: 0.72;
    left: 68.7vw;
    border-left-width: 7.6px;
    animation: fall-372 0.9s -9s ease-in infinite;
}

@keyframes fall-372 {
    9% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(373) {
    opacity: 0.71;
    left: 27.9vw;
    border-left-width: 12.2px;
    animation: fall-373 1.2s -3.5s ease-in infinite;
}

@keyframes fall-373 {
    3.4% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(374) {
    opacity: 0.6;
    left: 84.4vw;
    border-left-width: 4.4px;
    animation: fall-374 1.35s -5.5s ease-in infinite;
}

@keyframes fall-374 {
    8.8% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(375) {
    opacity: 0.24;
    left: 73.9vw;
    border-left-width: 1.2px;
    animation: fall-375 0.15s -7s ease-in infinite;
}

@keyframes fall-375 {
    1.4% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(376) {
    opacity: 0.47;
    left: 5.4vw;
    border-left-width: 4px;
    animation: fall-376 0.15s -12.5s ease-in infinite;
}

@keyframes fall-376 {
    5.2% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(377) {
    opacity: 0.02;
    left: 85.2vw;
    border-left-width: 0.4px;
    animation: fall-377 0.75s -0.5s ease-in infinite;
}

@keyframes fall-377 {
    0.4% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(378) {
    opacity: 0.63;
    left: 71.9vw;
    border-left-width: 8px;
    animation: fall-378 1.65s -3.5s ease-in infinite;
}

@keyframes fall-378 {
    6.2% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(379) {
    opacity: 0.03;
    left: 46.4vw;
    border-left-width: 11.2px;
    animation: fall-379 2.1s -3s ease-in infinite;
}

@keyframes fall-379 {
    10% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(380) {
    opacity: 0.14;
    left: 92.1vw;
    border-left-width: 1.2px;
    animation: fall-380 0.75s -8.5s ease-in infinite;
}

@keyframes fall-380 {
    5.8% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(381) {
    opacity: 0.3;
    left: 63.2vw;
    border-left-width: 10px;
    animation: fall-381 0.45s -8.5s ease-in infinite;
}

@keyframes fall-381 {
    9.2% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(382) {
    opacity: 0.6;
    left: 108.2vw;
    border-left-width: 1.5px;
    animation: fall-382 0.6s -4.5s ease-in infinite;
}

@keyframes fall-382 {
    8.6% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(383) {
    opacity: 0.54;
    left: 58.4vw;
    border-left-width: 8.1px;
    animation: fall-383 1.35s -2s ease-in infinite;
}

@keyframes fall-383 {
    7.6% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(384) {
    opacity: 0.8;
    left: 46.5vw;
    border-left-width: 6.9px;
    animation: fall-384 0.6s -1s ease-in infinite;
}

@keyframes fall-384 {
    1% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(385) {
    opacity: 0.39;
    left: 43.2vw;
    border-left-width: 2.9px;
    animation: fall-385 0.45s -5.5s ease-in infinite;
}

@keyframes fall-385 {
    2.4% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(386) {
    opacity: 0.04;
    left: 98.2vw;
    border-left-width: 14px;
    animation: fall-386 0.75s -3s ease-in infinite;
}

@keyframes fall-386 {
    9.6% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(387) {
    opacity: 0.54;
    left: 91.1vw;
    border-left-width: 8.6px;
    animation: fall-387 1.2s -10s ease-in infinite;
}

@keyframes fall-387 {
    7% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(388) {
    opacity: 0.86;
    left: 11.7vw;
    border-left-width: 3.5px;
    animation: fall-388 1.35s -8s ease-in infinite;
}

@keyframes fall-388 {
    9% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(389) {
    opacity: 0.9;
    left: 96vw;
    border-left-width: 8.8px;
    animation: fall-389 1.95s -7s ease-in infinite;
}

@keyframes fall-389 {
    7.6% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(390) {
    opacity: 0.13;
    left: 13.7vw;
    border-left-width: 4px;
    animation: fall-390 1.95s -7.5s ease-in infinite;
}

@keyframes fall-390 {
    8.6% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(391) {
    opacity: 0.42;
    left: 73vw;
    border-left-width: 6.8px;
    animation: fall-391 0.6s -7s ease-in infinite;
}

@keyframes fall-391 {
    2.4% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(392) {
    opacity: 0.11;
    left: 28.3vw;
    border-left-width: 8.8px;
    animation: fall-392 0.75s -11s ease-in infinite;
}

@keyframes fall-392 {
    1% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(393) {
    opacity: 0.77;
    left: 33.2vw;
    border-left-width: 2.8px;
    animation: fall-393 0.9s -10s ease-in infinite;
}

@keyframes fall-393 {
    4.6% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(394) {
    opacity: 0.6;
    left: 109.7vw;
    border-left-width: 8px;
    animation: fall-394 0.15s -6s ease-in infinite;
}

@keyframes fall-394 {
    6.4% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(395) {
    opacity: 0.84;
    left: 100.7vw;
    border-left-width: 12.8px;
    animation: fall-395 1.05s -1s ease-in infinite;
}

@keyframes fall-395 {
    6.2% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(396) {
    opacity: 0.06;
    left: 36.2vw;
    border-left-width: 1.6px;
    animation: fall-396 0.15s -2s ease-in infinite;
}

@keyframes fall-396 {
    3.8% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(397) {
    opacity: 0.53;
    left: 109.9vw;
    border-left-width: 6.8px;
    animation: fall-397 0.3s -9.5s ease-in infinite;
}

@keyframes fall-397 {
    5.4% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(398) {
    opacity: 0.69;
    left: 35.7vw;
    border-left-width: 11px;
    animation: fall-398 2.25s -6s ease-in infinite;
}

@keyframes fall-398 {
    1.2% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(399) {
    opacity: 0.05;
    left: 70.4vw;
    border-left-width: 12px;
    animation: fall-399 0.6s -6s ease-in infinite;
}

@keyframes fall-399 {
    4% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(400) {
    opacity: 0.79;
    left: 103.9vw;
    border-left-width: 15.5px;
    animation: fall-400 0.3s -6.5s ease-in infinite;
}

@keyframes fall-400 {
    1% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(401) {
    opacity: 0.81;
    left: 51.8vw;
    border-left-width: 3.3px;
    animation: fall-401 0.6s -2s ease-in infinite;
}

@keyframes fall-401 {
    5.8% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(402) {
    opacity: 0.76;
    left: 111vw;
    border-left-width: 8.8px;
    animation: fall-402 0.3s -8.5s ease-in infinite;
}

@keyframes fall-402 {
    9.2% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(403) {
    opacity: 0.74;
    left: 96.8vw;
    border-left-width: 1.9px;
    animation: fall-403 1.35s -4s ease-in infinite;
}

@keyframes fall-403 {
    0.8% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(404) {
    opacity: 0.22;
    left: 99.7vw;
    border-left-width: 0.9px;
    animation: fall-404 0.45s -6.5s ease-in infinite;
}

@keyframes fall-404 {
    0.2% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(405) {
    opacity: 0.01;
    left: 113.7vw;
    border-left-width: 16px;
    animation: fall-405 0.75s -8.5s ease-in infinite;
}

@keyframes fall-405 {
    7.8% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(406) {
    opacity: 0.01;
    left: 18.2vw;
    border-left-width: 13.2px;
    animation: fall-406 2.25s -9s ease-in infinite;
}

@keyframes fall-406 {
    9.4% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(407) {
    opacity: 0.34;
    left: 2.9vw;
    border-left-width: 7.3px;
    animation: fall-407 0.6s -6s ease-in infinite;
}

@keyframes fall-407 {
    0.6% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(408) {
    opacity: 0.32;
    left: 84.6vw;
    border-left-width: 4.6px;
    animation: fall-408 1.5s -0.5s ease-in infinite;
}

@keyframes fall-408 {
    6.8% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(409) {
    opacity: 0.56;
    left: 64.4vw;
    border-left-width: 9.6px;
    animation: fall-409 2.25s -3.5s ease-in infinite;
}

@keyframes fall-409 {
    1.2% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(410) {
    opacity: 0.31;
    left: 90.8vw;
    border-left-width: 6.6px;
    animation: fall-410 1.35s -7s ease-in infinite;
}

@keyframes fall-410 {
    4% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(411) {
    opacity: 0.73;
    left: 103.1vw;
    border-left-width: 14.6px;
    animation: fall-411 0.9s -2s ease-in infinite;
}

@keyframes fall-411 {
    1% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(412) {
    opacity: 0.46;
    left: 38.7vw;
    border-left-width: 9.8px;
    animation: fall-412 1.35s -5s ease-in infinite;
}

@keyframes fall-412 {
    5.2% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(413) {
    opacity: 0.79;
    left: 52.6vw;
    border-left-width: 9px;
    animation: fall-413 0.9s -3s ease-in infinite;
}

@keyframes fall-413 {
    1% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(414) {
    opacity: 0.45;
    left: 91.7vw;
    border-left-width: 11px;
    animation: fall-414 2.25s -8.5s ease-in infinite;
}

@keyframes fall-414 {
    8.2% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(415) {
    opacity: 0.19;
    left: 32.3vw;
    border-left-width: 9.6px;
    animation: fall-415 0.45s -9s ease-in infinite;
}

@keyframes fall-415 {
    2% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(416) {
    opacity: 0.42;
    left: 72.3vw;
    border-left-width: 0.2px;
    animation: fall-416 2.25s -12s ease-in infinite;
}

@keyframes fall-416 {
    6.4% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(417) {
    opacity: 0.45;
    left: 18.5vw;
    border-left-width: 14px;
    animation: fall-417 0.6s -6s ease-in infinite;
}

@keyframes fall-417 {
    8.2% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(418) {
    opacity: 0.37;
    left: 24.7vw;
    border-left-width: 5.6px;
    animation: fall-418 1.05s -9.5s ease-in infinite;
}

@keyframes fall-418 {
    3.4% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(419) {
    opacity: 0.3;
    left: 40.9vw;
    border-left-width: 9.2px;
    animation: fall-419 0.6s -1s ease-in infinite;
}

@keyframes fall-419 {
    4.2% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(420) {
    opacity: 0.4;
    left: 63.8vw;
    border-left-width: 3.4px;
    animation: fall-420 0.3s -9s ease-in infinite;
}

@keyframes fall-420 {
    2% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(421) {
    opacity: 0.06;
    left: 90.7vw;
    border-left-width: 10.4px;
    animation: fall-421 2.1s -3s ease-in infinite;
}

@keyframes fall-421 {
    4.4% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(422) {
    opacity: 0.57;
    left: 105.2vw;
    border-left-width: 2.2px;
    animation: fall-422 2.25s -7.5s ease-in infinite;
}

@keyframes fall-422 {
    0.2% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(423) {
    opacity: 0.79;
    left: 32.4vw;
    border-left-width: 4.4px;
    animation: fall-423 0.9s -6.5s ease-in infinite;
}

@keyframes fall-423 {
    9.2% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(424) {
    opacity: 0.88;
    left: 116.5vw;
    border-left-width: 15.4px;
    animation: fall-424 1.05s -7s ease-in infinite;
}

@keyframes fall-424 {
    1.8% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(425) {
    opacity: 0.55;
    left: 43.1vw;
    border-left-width: 10.2px;
    animation: fall-425 0.3s -9s ease-in infinite;
}

@keyframes fall-425 {
    4.4% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(426) {
    opacity: 0.52;
    left: 64.5vw;
    border-left-width: 4.6px;
    animation: fall-426 0.45s -2.5s ease-in infinite;
}

@keyframes fall-426 {
    6.2% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(427) {
    opacity: 0.54;
    left: 8.8vw;
    border-left-width: 5px;
    animation: fall-427 0.15s -4s ease-in infinite;
}

@keyframes fall-427 {
    0.4% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(428) {
    opacity: 0.52;
    left: 58vw;
    border-left-width: 12.6px;
    animation: fall-428 0.15s -8s ease-in infinite;
}

@keyframes fall-428 {
    1.8% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(429) {
    opacity: 0.87;
    left: 5vw;
    border-left-width: 15.8px;
    animation: fall-429 0.45s -5.5s ease-in infinite;
}

@keyframes fall-429 {
    3% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(430) {
    opacity: 0.72;
    left: 41.4vw;
    border-left-width: 1px;
    animation: fall-430 1.95s -8s ease-in infinite;
}

@keyframes fall-430 {
    2.4% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(431) {
    opacity: 0.81;
    left: 48.2vw;
    border-left-width: 7.2px;
    animation: fall-431 0.9s -6.5s ease-in infinite;
}

@keyframes fall-431 {
    0.2% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(432) {
    opacity: 0.33;
    left: 80.3vw;
    border-left-width: 8.6px;
    animation: fall-432 1.2s -1s ease-in infinite;
}

@keyframes fall-432 {
    3% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(433) {
    opacity: 0.85;
    left: 77.2vw;
    border-left-width: 8.2px;
    animation: fall-433 1.2s -4s ease-in infinite;
}

@keyframes fall-433 {
    4.2% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(434) {
    opacity: 0.52;
    left: 91.5vw;
    border-left-width: 3.4px;
    animation: fall-434 1.2s -12s ease-in infinite;
}

@keyframes fall-434 {
    8.2% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(435) {
    opacity: 0.65;
    left: 36.7vw;
    border-left-width: 6px;
    animation: fall-435 1.5s -1s ease-in infinite;
}

@keyframes fall-435 {
    7.8% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(436) {
    opacity: 0.27;
    left: 26.4vw;
    border-left-width: 0.2px;
    animation: fall-436 2.25s -6.5s ease-in infinite;
}

@keyframes fall-436 {
    9% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(437) {
    opacity: 0.28;
    left: 57.3vw;
    border-left-width: 13.2px;
    animation: fall-437 2.25s -2s ease-in infinite;
}

@keyframes fall-437 {
    4% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(438) {
    opacity: 0.89;
    left: 40.5vw;
    border-left-width: 4.8px;
    animation: fall-438 0.6s -3.5s ease-in infinite;
}

@keyframes fall-438 {
    8.8% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(439) {
    opacity: 0.3;
    left: 15.1vw;
    border-left-width: 11px;
    animation: fall-439 0.45s -6.5s ease-in infinite;
}

@keyframes fall-439 {
    9.4% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(440) {
    opacity: 0.49;
    left: 33.9vw;
    border-left-width: 6.8px;
    animation: fall-440 1.8s -7s ease-in infinite;
}

@keyframes fall-440 {
    0.8% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(441) {
    opacity: 0.58;
    left: 51.2vw;
    border-left-width: 5.4px;
    animation: fall-441 0.45s -9.5s ease-in infinite;
}

@keyframes fall-441 {
    8.8% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(442) {
    opacity: 0.88;
    left: 110.2vw;
    border-left-width: 9.8px;
    animation: fall-442 0.9s -6s ease-in infinite;
}

@keyframes fall-442 {
    1.4% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(443) {
    opacity: 0.38;
    left: 61.6vw;
    border-left-width: 5.2px;
    animation: fall-443 0.9s -11s ease-in infinite;
}

@keyframes fall-443 {
    4.4% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(444) {
    opacity: 0.03;
    left: 17.8vw;
    border-left-width: 8.6px;
    animation: fall-444 0.45s -1s ease-in infinite;
}

@keyframes fall-444 {
    9.8% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(445) {
    opacity: 0.29;
    left: 21.9vw;
    border-left-width: 11px;
    animation: fall-445 0.45s -8.5s ease-in infinite;
}

@keyframes fall-445 {
    4.2% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(446) {
    opacity: 0.8;
    left: 112.7vw;
    border-left-width: 7.6px;
    animation: fall-446 2.25s -5s ease-in infinite;
}

@keyframes fall-446 {
    7% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(447) {
    opacity: 0.03;
    left: 42.9vw;
    border-left-width: 13.2px;
    animation: fall-447 1.5s -6s ease-in infinite;
}

@keyframes fall-447 {
    9.6% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(448) {
    opacity: 0.27;
    left: 53.7vw;
    border-left-width: 9px;
    animation: fall-448 0.45s -2.5s ease-in infinite;
}

@keyframes fall-448 {
    3.6% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(449) {
    opacity: 0.5;
    left: 100.1vw;
    border-left-width: 11px;
    animation: fall-449 1.35s -0.5s ease-in infinite;
}

@keyframes fall-449 {
    7.8% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(450) {
    opacity: 0.15;
    left: 12.6vw;
    border-left-width: 14px;
    animation: fall-450 1.65s -5s ease-in infinite;
}

@keyframes fall-450 {
    2.2% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(451) {
    opacity: 0.39;
    left: 99.1vw;
    border-left-width: 7.2px;
    animation: fall-451 0.45s -7.5s ease-in infinite;
}

@keyframes fall-451 {
    4% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(452) {
    opacity: 0.68;
    left: 43.5vw;
    border-left-width: 3px;
    animation: fall-452 1.5s -9.5s ease-in infinite;
}

@keyframes fall-452 {
    8% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(453) {
    opacity: 0.63;
    left: 95.7vw;
    border-left-width: 16px;
    animation: fall-453 0.15s -4.5s ease-in infinite;
}

@keyframes fall-453 {
    3.2% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(454) {
    opacity: 0.3;
    left: 43.9vw;
    border-left-width: 5.6px;
    animation: fall-454 1.65s -4.5s ease-in infinite;
}

@keyframes fall-454 {
    0.2% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(455) {
    opacity: 0.25;
    left: 8.9vw;
    border-left-width: 15.6px;
    animation: fall-455 1.2s -10.5s ease-in infinite;
}

@keyframes fall-455 {
    1.8% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(456) {
    opacity: 0.82;
    left: 100.7vw;
    border-left-width: 9.8px;
    animation: fall-456 1.05s -9s ease-in infinite;
}

@keyframes fall-456 {
    8.8% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(457) {
    opacity: 0.73;
    left: 25.9vw;
    border-left-width: 12px;
    animation: fall-457 2.1s -12.5s ease-in infinite;
}

@keyframes fall-457 {
    9.8% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(458) {
    opacity: 0.35;
    left: 52.3vw;
    border-left-width: 11.8px;
    animation: fall-458 1.65s -2.5s ease-in infinite;
}

@keyframes fall-458 {
    9.4% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(459) {
    opacity: 0.32;
    left: 101.2vw;
    border-left-width: 4.2px;
    animation: fall-459 1.95s -7.5s ease-in infinite;
}

@keyframes fall-459 {
    1% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(460) {
    opacity: 0.07;
    left: 41.4vw;
    border-left-width: 4.8px;
    animation: fall-460 1.8s -4s ease-in infinite;
}

@keyframes fall-460 {
    10% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(461) {
    opacity: 0.7;
    left: 49.6vw;
    border-left-width: 1.1px;
    animation: fall-461 1.2s -5s ease-in infinite;
}

@keyframes fall-461 {
    7.8% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(462) {
    opacity: 0.41;
    left: 26.3vw;
    border-left-width: 15.4px;
    animation: fall-462 2.1s -7.5s ease-in infinite;
}

@keyframes fall-462 {
    3.6% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(463) {
    opacity: 0.79;
    left: 86.9vw;
    border-left-width: 7.6px;
    animation: fall-463 1.2s -9s ease-in infinite;
}

@keyframes fall-463 {
    9.4% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(464) {
    opacity: 0.75;
    left: 95.1vw;
    border-left-width: 1.2px;
    animation: fall-464 0.75s -11.5s ease-in infinite;
}

@keyframes fall-464 {
    5.2% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(465) {
    opacity: 0.38;
    left: 79vw;
    border-left-width: 5.2px;
    animation: fall-465 0.15s -8.5s ease-in infinite;
}

@keyframes fall-465 {
    1.4% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(466) {
    opacity: 0.39;
    left: 77.5vw;
    border-left-width: 1.5px;
    animation: fall-466 2.1s -3.5s ease-in infinite;
}

@keyframes fall-466 {
    2% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(467) {
    opacity: 0.09;
    left: 19.1vw;
    border-left-width: 11.4px;
    animation: fall-467 1.95s -8.5s ease-in infinite;
}

@keyframes fall-467 {
    8.2% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(468) {
    opacity: 0.39;
    left: 28.4vw;
    border-left-width: 15px;
    animation: fall-468 1.05s -12.5s ease-in infinite;
}

@keyframes fall-468 {
    0.8% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(469) {
    opacity: 0.88;
    left: 108.8vw;
    border-left-width: 11.8px;
    animation: fall-469 1.95s -10s ease-in infinite;
}

@keyframes fall-469 {
    4.2% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(470) {
    opacity: 0.81;
    left: 63.5vw;
    border-left-width: 3px;
    animation: fall-470 0.9s -2.5s ease-in infinite;
}

@keyframes fall-470 {
    4.6% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(471) {
    opacity: 0.12;
    left: 31.7vw;
    border-left-width: 3.6px;
    animation: fall-471 0.9s -6.5s ease-in infinite;
}

@keyframes fall-471 {
    4.8% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(472) {
    opacity: 0.81;
    left: 48.9vw;
    border-left-width: 14.8px;
    animation: fall-472 1.65s -4s ease-in infinite;
}

@keyframes fall-472 {
    0.6% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(473) {
    opacity: 0.39;
    left: 108.2vw;
    border-left-width: 8.4px;
    animation: fall-473 2.1s -11.5s ease-in infinite;
}

@keyframes fall-473 {
    5.8% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(474) {
    opacity: 0.26;
    left: 34.5vw;
    border-left-width: 9.4px;
    animation: fall-474 0.6s -11s ease-in infinite;
}

@keyframes fall-474 {
    5.4% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(475) {
    opacity: 0.32;
    left: 106.4vw;
    border-left-width: 1.6px;
    animation: fall-475 0.9s -10s ease-in infinite;
}

@keyframes fall-475 {
    9.8% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(476) {
    opacity: 0.76;
    left: 73.9vw;
    border-left-width: 11.8px;
    animation: fall-476 1.35s -11s ease-in infinite;
}

@keyframes fall-476 {
    6.2% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(477) {
    opacity: 0.58;
    left: 21.8vw;
    border-left-width: 13px;
    animation: fall-477 0.9s -4.5s ease-in infinite;
}

@keyframes fall-477 {
    2.2% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(478) {
    opacity: 0.38;
    left: 2.2vw;
    border-left-width: 2.2px;
    animation: fall-478 0.75s -10.5s ease-in infinite;
}

@keyframes fall-478 {
    6% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(479) {
    opacity: 0.33;
    left: 1.6vw;
    border-left-width: 7.2px;
    animation: fall-479 0.9s -1.5s ease-in infinite;
}

@keyframes fall-479 {
    2.4% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(480) {
    opacity: 0.51;
    left: 20.6vw;
    border-left-width: 0.4px;
    animation: fall-480 1.65s -1s ease-in infinite;
}

@keyframes fall-480 {
    7.8% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(481) {
    opacity: 0.22;
    left: 32.5vw;
    border-left-width: 9.4px;
    animation: fall-481 0.6s -7.5s ease-in infinite;
}

@keyframes fall-481 {
    9% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(482) {
    opacity: 0.58;
    left: 105.9vw;
    border-left-width: 15.2px;
    animation: fall-482 2.1s -10.5s ease-in infinite;
}

@keyframes fall-482 {
    5.8% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(483) {
    opacity: 0.87;
    left: 40.6vw;
    border-left-width: 11.6px;
    animation: fall-483 0.3s -10s ease-in infinite;
}

@keyframes fall-483 {
    2.2% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(484) {
    opacity: 0.22;
    left: 40.5vw;
    border-left-width: 11.3px;
    animation: fall-484 1.65s -3s ease-in infinite;
}

@keyframes fall-484 {
    4.4% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(485) {
    opacity: 0.8;
    left: 66.7vw;
    border-left-width: 4.8px;
    animation: fall-485 2.25s -12.5s ease-in infinite;
}

@keyframes fall-485 {
    2.4% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(486) {
    opacity: 0.79;
    left: 2.2vw;
    border-left-width: 12.5px;
    animation: fall-486 0.3s -7s ease-in infinite;
}

@keyframes fall-486 {
    5.6% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(487) {
    opacity: 0.86;
    left: 76.7vw;
    border-left-width: 8.2px;
    animation: fall-487 2.25s -6.5s ease-in infinite;
}

@keyframes fall-487 {
    4.4% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(488) {
    opacity: 0.52;
    left: 12.6vw;
    border-left-width: 5.4px;
    animation: fall-488 1.95s -5.5s ease-in infinite;
}

@keyframes fall-488 {
    7.6% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(489) {
    opacity: 0.34;
    left: 41.5vw;
    border-left-width: 9.3px;
    animation: fall-489 1.2s -0.5s ease-in infinite;
}

@keyframes fall-489 {
    5.6% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(490) {
    opacity: 0.1;
    left: 73.1vw;
    border-left-width: 2.8px;
    animation: fall-490 1.05s -4.5s ease-in infinite;
}

@keyframes fall-490 {
    5.6% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(491) {
    opacity: 0.22;
    left: 101.9vw;
    border-left-width: 4.2px;
    animation: fall-491 1.5s -11s ease-in infinite;
}

@keyframes fall-491 {
    3% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(492) {
    opacity: 0.2;
    left: 33vw;
    border-left-width: 9.4px;
    animation: fall-492 0.3s -1s ease-in infinite;
}

@keyframes fall-492 {
    7.8% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(493) {
    opacity: 0.41;
    left: 30.2vw;
    border-left-width: 6px;
    animation: fall-493 1.2s -9.5s ease-in infinite;
}

@keyframes fall-493 {
    5.6% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(494) {
    opacity: 0.61;
    left: 113.5vw;
    border-left-width: 6.8px;
    animation: fall-494 0.6s -2.5s ease-in infinite;
}

@keyframes fall-494 {
    2.2% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(495) {
    opacity: 0.23;
    left: 96vw;
    border-left-width: 13px;
    animation: fall-495 2.1s -6s ease-in infinite;
}

@keyframes fall-495 {
    8.2% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(496) {
    opacity: 0.13;
    left: 110.5vw;
    border-left-width: 3.2px;
    animation: fall-496 0.9s -12.5s ease-in infinite;
}

@keyframes fall-496 {
    9.4% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(497) {
    opacity: 0.58;
    left: 116.1vw;
    border-left-width: 9.7px;
    animation: fall-497 0.45s -9s ease-in infinite;
}

@keyframes fall-497 {
    3.4% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(498) {
    opacity: 0.76;
    left: 14.9vw;
    border-left-width: 8.4px;
    animation: fall-498 0.15s -4.5s ease-in infinite;
}

@keyframes fall-498 {
    6.2% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(499) {
    opacity: 0.5;
    left: 118.7vw;
    border-left-width: 7px;
    animation: fall-499 0.6s -11s ease-in infinite;
}

@keyframes fall-499 {
    3.6% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}

.drop:nth-child(500) {
    opacity: 0.54;
    left: 59.1vw;
    border-left-width: 5.8px;
    animation: fall-500 1.05s -8s ease-in infinite;
}

@keyframes fall-500 {
    7.8% {
        transform: rotate(var(--angle)) translateX(0);
    }

    to {
        transform: rotate(var(--angle)) translateX(calc(500px + 5px));
    }
}



/* BLOG */
.blog {
    padding: 40px 5%;
    background: var(--background-color);
    text-align: start;
    position: relative;
    overflow: hidden;
}

.blog h2 {
    font-size: 2.3rem;
    margin-bottom: 50px;
    font-weight: 600;
    color: var(--text-color);
    animation: fadeInUp 0.8s ease-out;
    position: relative;
    z-index: 1;
}


.blog p {
    font-size: 1.1rem;
    margin-bottom: 50px;
    font-weight: 400;
    color: var(--text-color);
    animation: fadeInUp 0.8s ease-out;
    position: relative;
    z-index: 1;
}

/* E-POSTA İLETİŞİM STİLLERİ - YENİ VE SADE TASARIM */

.blog p:last-child {
    font-size: 1rem;
    margin-top: 35px;
    padding-top: 25px;
    /* Metinleri üstten temiz bir ayırıcı ile ayır */
    border-top: 2px solid var(--border-color);
    display: flex;
    align-items: center;
    font-weight: 500;
}

/* "contact:" metni için daha az vurgu */
.blog p:last-child .label {
    color: var(--secondary-color);
    /* Gri tonlarda kalsın */
    margin-right: 5px;
    font-weight: 400;
}

/* E-posta Linkinin Kendisini Vurgulama */
.blog p:last-child a.email-link {
    color: var(--primary-color);
    /* Ana rengi koru */
    font-weight: 600;
    /* Kalınlık */
    text-decoration: none;
    position: relative;
    padding-left: 25px;
    /* İkon için boşluk */
    transition: color 0.3s ease;
}

/* İkon Efekti (E-posta Linkinin Soluna İkon Eklenir) */
.blog p:last-child a.email-link::before {
    content: "📧";
    /* Unicode E-posta İkonu (veya bir SVG/Font İkonu kullanılabilir) */
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.1em;
    line-height: 1;
    color: var(--primary-color);
}

/* Hover Efekti: Alt Çizgi ve Renk Değişimi */
.blog p:last-child a.email-link:hover {
    color: var(--primary-color-dark);
    /* Hover'da daha koyu renk */
    text-decoration: underline;
    /* Alt çizgi görünümü */
    text-decoration-thickness: 2px;
    /* Alt çizgiyi kalınlaştır */
}

/* Dark Mode Uyarlaması */
.dark-mode .blog p:last-child {
    border-top: 2px solid rgba(255, 255, 255, 0.1);
}

.dark-mode .blog p:last-child a.email-link::before {
    color: var(--primary-color);
}