html {
  transition: all 0.3s ease;
  --background-color: #f1f1f1;
  --border-color: rgba(0, 0, 0, 0.1);
  --text-color: #000000;
  --light-text-color: #525252;
  --link-color: #0000FF;
  --card-color: #f3f3f4;
  --card-color-light: #e2e2e7;
  --header-color: rgba(211, 210, 211, 0.35);
  --header-color-mobile: rgba(211, 210, 211, 0.95);
  --header-image-url: url(../images/csc_blue.png);
  --gradient-2: #cbcbcb;
  --gradient-3: #b2b2b2;
  
  /* Improve mobile viewport */
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}
*,
*::before,
*::after {
  box-sizing: inherit;
}

* {
  box-sizing: border-box;
  vertical-align: baseline;
  font-weight: 400;
  font-family: inherit;
  font-style: inherit;
  font-size: 1rem; /* Use rem for scalability */
  border: 0 none;
  outline: 0;
  padding: 0;
  margin: 0;
}

html,
body {
  width: 100%;
  overflow-x: hidden;
  scroll-behavior: smooth; /* Smooth scrolling for mobile */
  -webkit-overflow-scrolling: touch; /* iOS momentum scrolling */
}

/** Scrollbar **/
/** Links **/
:link {
  color: var(--text-color);
  opacity: 1;
  transition: 0.1s ease-in-out;
}
:link:hover {
  opacity: 0.7;
}

body {
  margin: 0;
  padding: 0;
  font-family: "JetBrains Mono", Monospace, Sans-Serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: break-word;
  color: var(--text-color);
  background: var(--background-color);
  max-width: 100%;
  height: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  position: relative;
}

/* Global responsive image styles */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Better mobile interaction */
@media (hover: none) and (pointer: coarse) {
  /* Remove hover effects on touch devices */
  .navbar-links a:hover,
  .join-button:hover,
  .cta-button.primary:hover,
  .cta-button.secondary:hover {
    transform: none;
  }
}

/** Header **/
.header {
  position: sticky;
  width: 100%;
  min-height: 64px;
  z-index: 100;
  top: 0;
  display: flex;
  align-items: center;
  background-color: var(--header-color);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid transparent;
  transition: all 0.15s ease-in-out;
}

.border-bottom {
  border-bottom: 1px solid var(--border-color);
}

.header-wrapper {
  display: flex;
  flex: 1 1;
  justify-content: space-between;
  align-items: center;
  max-width: 90rem;
  margin: 0 auto;
  padding: 0 20px;
}

.header-image-container {
  width: auto;
  flex-shrink: 0;
  z-index: 105;
}

.header-image-container,
.header-image-container a {
  display: flex;
  align-items: center;
  height: 100%;
}

.header-image {
  height: 48px;
  width: 120px;
  background-image: var(--header-image-url);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  display: block;
  z-index: 105;
}

:root {
  --header-image-url: url(../images/csc_blue.png);
}

/* Logo styling */
.header-image {
  background-image: var(--header-image-url);
}

.navbar-slash {
  color: #0000FF;
}
/* Nav Bars */
.navbar-links {
  display: flex;
  justify-content: right;
  align-items: right;
  gap: 2px;
  flex: 1;
  max-width: none;
  z-index: 20;
  margin: 0 20px 0 60px;
}
.navbar-links li {
  list-style: none;
}
.navbar-links a {
  display: flex;
  align-items: center;
  color: var(--text-color);
  opacity: 0.7;
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 600;
  padding: 8px 8px;
  border-radius: 6px;
  transition: all 0.15s ease-in-out;
  white-space: nowrap;
}
.navbar-links a:hover {
  opacity: 1;
  transform: translateY(-1px);
}

/* Navbar Controls Container */
.navbar-controls {
  display: flex;
  align-items: center;
  gap: 15px;
  flex-shrink: 0;
}

.navbar-burger {
  display: none;
  cursor: pointer;
  z-index: 20;
}
.navbar-burger div {
  width: 25px;
  height: 2px;
  background-color: var(--text-color);
  opacity: 0.7;
  margin: 5px;
  transition: all 0.3s ease;
}

/* Medium screens - tighter spacing */
@media screen and (max-width: 1200px) {
  .header-wrapper {
    max-width: 100%;
    padding: 0 16px;
  }
  
  .navbar-links {
    gap: 6px;
    margin: 0 12px;
  }
  
  .navbar-links a {
    font-size: 0.9rem;
    padding: 6px 10px;
  }
}

@media screen and (max-width: 1024px) {
  body {
    overflow-x: hidden;
  }
  .navbar-links {
    position: absolute;
    top: 0;
    right: 0;
    height: 100vh;
    background-color: var(--header-color-mobile);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border-left: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    justify-content: start;
    gap: 20px;
    padding-top: 64px;
    z-index: 15;
    width: 60%; /* Increased for better mobile UX */
    max-width: 320px; /* Maximum width limit */
    min-width: 280px; /* Minimum width for readability */
    transform: translateX(100%);
    transition: transform 0.5s ease-in-out;
  }
  .navbar-links li {
    opacity: 0;
  }
  .navbar-burger {
    display: block;
  }
  
  /* Mobile navbar controls positioning */
  .navbar-controls {
    gap: 10px;
  }
}
.navbar-active {
  transform: translateX(0);
}

.navbar-burger-active .line-1 {
  transform: rotate(-45deg) translate(-5px, 5px);
}
.navbar-burger-active .line-2 {
  opacity: 0;
}
.navbar-burger-active .line-3 {
  transform: rotate(45deg) translate(-5px, -5px);
}

@keyframes navbar-link-fade {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
/** Footer **/
.site-footer {
  height: auto;
  width: 100%;
  padding: 1rem;
  display: flex;
  align-items: center;
  background-color: var(--header-color);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid transparent;
  transition: all 0.15s ease-in-out
}

.footer-wrapper {
  width: 100%;
  max-width: 48rem;
  margin: 0 auto;
  padding: 2rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.5rem;
}

.footer-info-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
@media (max-width: 576px) {
  .footer-info-container {
    flex-direction: column;
    text-align: center;
  }
}

.footer-title-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
}
.footer-title {
  color: var(--text-color);
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0;
  text-align: center;
}

.footer-title h1 {
  margin: 0;
  line-height: 1.2;
}

.footer-description-container {
  width: 100%;
  height: 100%;
  font-size: 1rem;
  color: var(--text-color);
  opacity: 0.75;
}
@media (max-width: 576px) {
  .footer-description-container {
    font-size: 0.85rem;
  }
}

.email:link {
  color: var(--text-color);
  text-decoration: none;
  opacity: 0.9;
  transition: all 0.3s ease;
  display: inline-block;
  margin-top: 0;
  width: auto;
}

.email:hover {
  color: var(--text-color);
  opacity: 1;
  transform: translateY(-2px);
}

.email:visited {
  color: var(--text-color);
}

.mail {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--card-color);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  transition: all 0.3s ease;
  width: fit-content;
  margin: 0 auto;
}

.mail:hover {
  background: var(--card-color-light);
  border-color: var(--link-color);
  box-shadow: 0 4px 12px rgba(0, 0, 255, 0.15);
}

.mail i {
  color: var(--link-color);
  font-size: 16px;
  flex-shrink: 0;
}

.mail span {
  color: var(--link-color);
  font-size: 14px;
  font-weight: 500;
}

/* Desktop adjustments - smaller contact box */
@media (min-width: 769px) {
  .mail {
    padding: 8px 14px;
  }
  
  .mail i {
    font-size: 14px;
  }
  
  .mail span {
    font-size: 13px;
  }
}

.footer-social-container {
  width: 100%;
  height: 100%;
  margin-top: 20px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 12px;
}

.social-link {
  position: relative;
  width: 50px;
  height: 50px;
  padding: 12px;
  border: 2px solid var(--border-color);
  border-radius: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--link-color);
  opacity: 0.8;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  background: var(--card-color);
  overflow: visible;
}

.social-link:hover {
  opacity: 1;
  transform: translateY(-4px) scale(1.05);
  border-color: var(--link-color);
  box-shadow: 0 8px 25px rgba(0, 0, 255, 0.2);
  background: var(--card-color-light);
}

.social-link svg {
  width: 24px;
  height: 24px;
  transition: all 0.3s ease;
  fill: var(--link-color);
}

.social-link:hover svg {
  fill: var(--link-color);
  transform: scale(1.1);
}

.social-link i {
  font-size: 24px;
  transition: all 0.3s ease;
  color: var(--link-color);
}

.social-link:hover i {
  color: var(--link-color);
  transform: scale(1.1);
}

/* Desktop adjustments - smaller social icons */
@media (min-width: 769px) {
  .social-link {
    width: 44px;
    height: 44px;
    padding: 10px;
  }
  
  .social-link i {
    font-size: 20px;
  }
  
  .social-link svg {
    width: 20px;
    height: 20px;
  }
}

/* Mobile adjustments for social links */
@media (max-width: 768px) {
  .social-link {
    width: 45px;
    height: 45px;
    padding: 10px;
  }
  
  .social-link i {
    font-size: 20px;
  }
  
  .social-link svg {
    width: 20px;
    height: 20px;
  }
}

/* Developer Credit Section */
.site-credit {
  margin-top: 24px;
  text-align: center;
  font-size: 14px;
  color: var(--light-text-color);
  transition: all 0.3s ease;
}

.site-credit a {
  color: var(--light-text-color);
  text-decoration: none;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  vertical-align: baseline;
}
.site-credit a:hover {
  color: var(--link-color);
  transform: translateY(-1px);
  font-weight: 800;
}
.site-credit i {
  font-size: 16px;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}

.site-credit a:hover i {
  transform: scale(1.1);
}

/* Cool Social Media Tooltips for Index Page */
.home-social-link {
  position: relative;
  width: 50px;
  height: 50px;
  padding: 12px;
  border: 2px solid var(--border-color);
  border-radius: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--link-color);
  opacity: 0.8;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  background: var(--card-color);
  overflow: visible;
}

.home-social-link:hover {
  opacity: 1;
  transform: translateY(-4px) scale(1.05);
  border-color: var(--link-color);
  box-shadow: 0 8px 25px rgba(0, 0, 255, 0.2);
  background: var(--card-color-light);
}

.home-social-link i {
  font-size: 24px;
  transition: all 0.3s ease;
  color: var(--link-color);
}

.home-social-link:hover i {
  color: var(--link-color);
  transform: scale(1.1);
}

/* Desktop adjustments - smaller social icons */
@media (min-width: 769px) {
  .home-social-link {
    width: 44px;
    height: 44px;
    padding: 10px;
  }
  
  .home-social-link i {
    font-size: 20px;
  }
}

/* Mobile adjustments for home social links */
@media (max-width: 768px) {
  .home-social-link {
    width: 45px;
    height: 45px;
    padding: 10px;
  }
  
  .home-social-link i {
    font-size: 20px;
  }
}
/** Content **/
.heading-title {
  font-style: normal;
  font-weight: 800;
  text-align: center;
  color: var(--text-color);
  margin-top: 60px;
  font-size: 5rem;
  line-height: 5rem;
}

/* Mobile responsive heading title */
@media (max-width: 1024px) {
  .heading-title {
    font-size: 4rem;
    line-height: 4rem;
    margin-top: 50px;
  }
}

@media (max-width: 768px) {
  .heading-title {
    font-size: 3rem;
    line-height: 3rem;
    margin-top: 40px;
  }
}

@media (max-width: 480px) {
  .heading-title {
    font-size: 2.5rem;
    line-height: 2.5rem;
    margin-top: 30px;
  }
}

.heading-subtitle {
  font-style: normal;
  font-weight: 800;
  text-align: center;
  color: var(--text-color);
  margin-top: 6px;
  font-size: 4rem;
  line-height: 4rem;
}

/* Mobile responsive heading subtitle */
@media (max-width: 1024px) {
  .heading-subtitle {
    font-size: 3rem;
    line-height: 3rem;
  }
}

@media (max-width: 768px) {
  .heading-subtitle {
    font-size: 2.5rem;
    line-height: 2.5rem;
  }
}

@media (max-width: 600px) {
  .heading-subtitle {
    font-size: 1.8rem;
    line-height: 1.8rem;
  }
}

@media (max-width: 480px) {
  .heading-subtitle {
    font-size: 1.5rem;
    line-height: 1.5rem;
  }
}


.heading-description {
  font-style: normal;
  font-weight: 600;
  text-align: center;
  color: #0008ff;
  margin-top: 50px;
  margin-bottom: 50px;
  font-size: 1.3rem;
  line-height: 2rem;
  max-width: 90%;
  margin-left: auto;
  margin-right: auto;
}

/* Mobile responsive heading description */
@media (max-width: 768px) {
  .heading-description {
    font-size: 1.2rem;
    line-height: 1.8rem;
    margin-top: 40px;
    margin-bottom: 40px;
  }
}

@media (max-width: 600px) {
  .heading-description {
    font-size: 1.1rem;
    line-height: 1.6rem;
    margin-top: 30px;
    margin-bottom: 30px;
  }
}

@media (max-width: 480px) {
  .heading-description {
    font-size: 1rem;
    line-height: 1.5rem;
    margin-top: 20px;
    margin-bottom: 20px;
    max-width: 95%;
  }
}
.intro-section {
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  padding: 0px 32px;
}
@media (min-width: 576px) {
  .intro-section {
    padding: 0px 64px;
  }
}

.home-scroll-prompt {
  width: 100%;
  height: 36px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 32px;
}

.home-scroll_border {
  stroke: var(--text-color);
}

.home-scroll_center {
  fill: var(--text-color);
}

.slideshow {
  background: linear-gradient(
    126.6deg,
    rgba(255, 255, 255, 0.12) 28.69%,
    rgba(255, 255, 255, 0) 100%
  );
  -webkit-backdrop-filter: blur(140px);
  backdrop-filter: blur(140px);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 1100px;
  padding: 2%;
  aspect-ratio: 1.67;
  margin-top: 40px;
  margin-bottom: 40px;
}
.slideshow img {
  border-radius: 8px !important;
  box-shadow: 0px 4px 64px rgba(0, 0, 0, 0.2) !important;
}
@media (min-width: 576px) {
  .slideshow {
    margin-top: 62px;
    margin-bottom: 120px;
  }
}


.slideshow_wrapper {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  width: 100%;
  height: 100%;
  vertical-align: middle;
}

.slideshow_image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  box-shadow: 0px 4px 64px rgba(0, 0, 0, 0.2);
}

/** About Section **/
.home_about-section {
  width: 100%;
  max-width: 100%;
}

.home_about-sep {
  height: 0.5rem;
}

.home_about-background {
  background-image: linear-gradient(
    to top right,
    var(--gradient-2),
    var(--gradient-3)
  );
  padding: 4rem 0;
}

.home_about-container {
  max-width: 80rem;
  padding: 0 1.25rem;
  margin: 0 auto;
}
@media (min-width: 640px) {
  .home_about-container {
    padding: 0px 5rem;
  }
}

.home_about-content {
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.home_about-title {
  font-weight: 700;
  color: var(--text-color);
  margin-bottom: 1.5rem;
  font-size: 2.25rem;
  line-height: 2.5rem;
}
/** Events Section **/
.home_events-sponsors-section {
  background: linear-gradient(165deg, var(--background-color) 50%, #1b171b62 0);
  padding: 4rem 0;
}

.home_events-container {
  max-width: 80rem;
  margin: 0 auto 2rem;
  padding: 0 1.25rem;
}
@media (min-width: 640px) {
  .home_events-container {
    padding: 0px 5rem;
  }
}

.home_events-title {
  color: var(--text-color);
  opacity: 0.75;
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.home_events-grid {
  width: 100%;
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  flex-flow: wrap;
  gap: 20px;
  justify-content: center;
}

.home_event {
  width: 100%;
  cursor: pointer;
  border-radius: 8px;
  border: 1px solid transparent;
  padding: 1rem;
  opacity: 1;
  text-decoration: none;
  display: grid;
  grid-template-columns: 1fr 40px;
  box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.2);
  transition: all 0.1s ease;
  background-color: var(--header-color);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid transparent;
  transition: all 0.15s ease-in-out
}
.home_event:hover {
  opacity: 1;
  border: 2px solid #2323FF;
  background-color: var(--card-color-light);
.home_event-title{
  color: #0000FF;
}
.home_event-link-icon {
  color: var(--link-color);
}
}
@media (min-width: 1178px) {
  .home_event {
    width: 49%;
  }
}

.home_event-title {
  font-weight: 700;
  color: var(--text-color);
  margin-bottom: 0.5rem;
  font-size: 1.25rem;
  line-height: 1.5rem;
}

.home_event-description {
  display: flex;
  font-weight: 400;
  color: var(--link-color);
  opacity: 0.7;
  font-size: 1.05rem;
  line-height: 1.3rem;
}

.home_events-empty-message {
  width: 100%;
  padding: 5rem 0;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 1.1rem;
  opacity: 0.75;
}

.home_events-grid {
  width: 100%;
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  flex-flow: wrap;
  gap: 20px;
  justify-content: center;
}

.home_event-link-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.home_event-link-icon {
  color: var(--text-color);
  height: 1.5rem;
  width: 1.5rem;
}

/** Sponsors Section **/
.home_sponsors-grid {
  width: 100%;
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  flex-flow: wrap;
  gap: 36px;
  justify-content: center;
}

.home_sponsor {
  width: 250px;
  height: 100px;
  display: grid;
  grid-template-rows: 250px 50px;
  color: var(--text-color);
  text-decoration: none;
}

.home_sponsor-image {
  width: 250px;
  height: 100px;
  object-fit: contain;
  padding: 1rem;
  background: #fff;
  border-radius: 4px;
  border: 1px solid var(--border-color);
}

.home_sponsor-details {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 1.2rem;
  font-weight: 700;
}
/* Example CSS for marquee effect */
.sponsors-marquee {
    overflow: hidden;
    width: 100%;
    position: relative;
    height: 100px; /* Adjust as needed */
}

.sponsors-marquee-track {
    display: flex;
    width: max-content;
    animation: marquee-scroll 20s linear infinite;
    align-items: center;
}

.sponsor-marquee-item img {
    height: 80px;   /* Adjust as needed */
    margin: 0 20px; /* Adjust spacing between items */
    display:block;
}


@keyframes marquee-scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}
/** Join Section **/
.home_join-background {
  padding: 1rem 0;
}

.home_join-section {
  width: 100%;
  max-width: 100%;
}

.home_join-title {
  font-weight: 700;
  color: var(--text-color);
  font-size: 2.25rem;
  line-height: 2.5rem;
}
@media (max-width: 1024px) {
  .home_join-title {
    font-size: 1.75rem;
    line-height: 2rem;
  }
}

.home_join-content {
  max-width: 54rem;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
@media (max-width: 764px) {
  .home_join-content {
    flex-direction: column;
    gap: 16px;
  }
}

.type-animate {
  overflow: hidden;
  border-right: 0.15em solid #0000FF;
  white-space: nowrap;
  max-width: max-content;
  animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite;
}

/* Specific rule to fix typing animation when combined with heading-animated */
.type-animate.heading-animated {
  animation: typing 3.5s steps(40, end) 0.8s both, blink-caret 0.75s step-end infinite 0.8s !important;
  opacity: 1 !important;
  transform: none !important;
  width: 0;
}

@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}
@keyframes blink-caret {
  from,
  to {
    border-color: transparent;
  }
  50% {
    border-color: #0000FF;
  }
}
.snow {
  position: absolute;
  width: 10px;
  height: 10px;
  background: white;
  border-radius: 50%;
}
.snow:nth-child(1) {
  opacity: 0.6017;
  transform: translate(53.2924vw, -10px) scale(0.1303);
  animation: fall-1 18s -8s linear infinite;
}
@keyframes fall-1 {
  49.648% {
    transform: translate(55.8548vw, 49.648vh) scale(0.1303);
  }
  to {
    transform: translate(54.5736vw, 100vh) scale(0.1303);
  }
}
.snow:nth-child(2) {
  opacity: 0.6998;
  transform: translate(95.7941vw, -10px) scale(0.6117);
  animation: fall-2 18s -14s linear infinite;
}
@keyframes fall-2 {
  44.648% {
    transform: translate(92.6053vw, 44.648vh) scale(0.6117);
  }
  to {
    transform: translate(94.1997vw, 100vh) scale(0.6117);
  }
}
.snow:nth-child(3) {
  opacity: 0.798;
  transform: translate(59.3144vw, -10px) scale(0.9362);
  animation: fall-3 21s -19s linear infinite;
}
@keyframes fall-3 {
  37.364% {
    transform: translate(53.6481vw, 37.364vh) scale(0.9362);
  }
  to {
    transform: translate(56.48125vw, 100vh) scale(0.9362);
  }
}
.snow:nth-child(4) {
  opacity: 0.5478;
  transform: translate(84.5395vw, -10px) scale(0.2351);
  animation: fall-4 25s -16s linear infinite;
}
@keyframes fall-4 {
  49.709% {
    transform: translate(90.5783vw, 49.709vh) scale(0.2351);
  }
  to {
    transform: translate(87.5589vw, 100vh) scale(0.2351);
  }
}
.snow:nth-child(5) {
  opacity: 0.7501;
  transform: translate(5.1901vw, -10px) scale(0.9359);
  animation: fall-5 11s -7s linear infinite;
}
@keyframes fall-5 {
  40.743% {
    transform: translate(12.5766vw, 40.743vh) scale(0.9359);
  }
  to {
    transform: translate(8.88335vw, 100vh) scale(0.9359);
  }
}
.snow:nth-child(6) {
  opacity: 0.9144;
  transform: translate(70.9476vw, -10px) scale(0.7349);
  animation: fall-6 28s -23s linear infinite;
}
@keyframes fall-6 {
  63.932% {
    transform: translate(64.2027vw, 63.932vh) scale(0.7349);
  }
  to {
    transform: translate(67.57515vw, 100vh) scale(0.7349);
  }
}
.snow:nth-child(7) {
  opacity: 0.7207;
  transform: translate(26.7085vw, -10px) scale(0.676);
  animation: fall-7 15s -22s linear infinite;
}
@keyframes fall-7 {
  51.106% {
    transform: translate(22.248vw, 51.106vh) scale(0.676);
  }
  to {
    transform: translate(24.47825vw, 100vh) scale(0.676);
  }
}
.snow:nth-child(8) {
  opacity: 0.3087;
  transform: translate(43.3347vw, -10px) scale(0.2957);
  animation: fall-8 15s -27s linear infinite;
}
@keyframes fall-8 {
  78.536% {
    transform: translate(52.4344vw, 78.536vh) scale(0.2957);
  }
  to {
    transform: translate(47.88455vw, 100vh) scale(0.2957);
  }
}
.snow:nth-child(9) {
  opacity: 0.4005;
  transform: translate(54.0624vw, -10px) scale(0.737);
  animation: fall-9 24s -4s linear infinite;
}
@keyframes fall-9 {
  49.132% {
    transform: translate(60.1012vw, 49.132vh) scale(0.737);
  }
  to {
    transform: translate(57.0818vw, 100vh) scale(0.737);
  }
}
.snow:nth-child(10) {
  opacity: 0.344;
  transform: translate(15.33vw, -10px) scale(0.7498);
  animation: fall-10 28s -30s linear infinite;
}
@keyframes fall-10 {
  54.171% {
    transform: translate(15.2616vw, 54.171vh) scale(0.7498);
  }
  to {
    transform: translate(15.2958vw, 100vh) scale(0.7498);
  }
}
.snow:nth-child(11) {
  opacity: 0.9903;
  transform: translate(22.8141vw, -10px) scale(0.6655);
  animation: fall-11 13s -10s linear infinite;
}
@keyframes fall-11 {
  32.262% {
    transform: translate(31.8249vw, 32.262vh) scale(0.6655);
  }
  to {
    transform: translate(27.3195vw, 100vh) scale(0.6655);
  }
}
.snow:nth-child(12) {
  opacity: 0.1108;
  transform: translate(18.8167vw, -10px) scale(0.7392);
  animation: fall-12 14s -21s linear infinite;
}
@keyframes fall-12 {
  62.503% {
    transform: translate(13.2148vw, 62.503vh) scale(0.7392);
  }
  to {
    transform: translate(16.01575vw, 100vh) scale(0.7392);
  }
}
.snow:nth-child(13) {
  opacity: 0.423;
  transform: translate(17.5158vw, -10px) scale(0.3417);
  animation: fall-13 11s -11s linear infinite;
}
@keyframes fall-13 {
  43.688% {
    transform: translate(26.2603vw, 43.688vh) scale(0.3417);
  }
  to {
    transform: translate(21.88805vw, 100vh) scale(0.3417);
  }
}
.snow:nth-child(14) {
  opacity: 0.2086;
  transform: translate(18.4814vw, -10px) scale(0.4042);
  animation: fall-14 16s -6s linear infinite;
}
@keyframes fall-14 {
  72.286% {
    transform: translate(14.7724vw, 72.286vh) scale(0.4042);
  }
  to {
    transform: translate(16.6269vw, 100vh) scale(0.4042);
  }
}
.snow:nth-child(15) {
  opacity: 0.0218;
  transform: translate(75.2962vw, -10px) scale(0.868);
  animation: fall-15 20s -17s linear infinite;
}
@keyframes fall-15 {
  79.236% {
    transform: translate(81.5208vw, 79.236vh) scale(0.868);
  }
  to {
    transform: translate(78.4085vw, 100vh) scale(0.868);
  }
}
.snow:nth-child(16) {
  opacity: 0.3919;
  transform: translate(17.1372vw, -10px) scale(0.1909);
  animation: fall-16 13s -6s linear infinite;
}
@keyframes fall-16 {
  62.316% {
    transform: translate(17.8725vw, 62.316vh) scale(0.1909);
  }
  to {
    transform: translate(17.50485vw, 100vh) scale(0.1909);
  }
}
.snow:nth-child(17) {
  opacity: 0.9536;
  transform: translate(94.7504vw, -10px) scale(0.832);
  animation: fall-17 26s -16s linear infinite;
}
@keyframes fall-17 {
  35.713% {
    transform: translate(91.2293vw, 35.713vh) scale(0.832);
  }
  to {
    transform: translate(92.98985vw, 100vh) scale(0.832);
  }
}
.snow:nth-child(18) {
  opacity: 0.7686;
  transform: translate(86.4422vw, -10px) scale(0.8083);
  animation: fall-18 21s -19s linear infinite;
}
@keyframes fall-18 {
  64.948% {
    transform: translate(77.8948vw, 64.948vh) scale(0.8083);
  }
  to {
    transform: translate(82.1685vw, 100vh) scale(0.8083);
  }
}
.snow:nth-child(19) {
  opacity: 0.0415;
  transform: translate(8.7117vw, -10px) scale(0.6447);
  animation: fall-19 28s -25s linear infinite;
}
@keyframes fall-19 {
  38.952% {
    transform: translate(5.419vw, 38.952vh) scale(0.6447);
  }
  to {
    transform: translate(7.06535vw, 100vh) scale(0.6447);
  }
}
.snow:nth-child(20) {
  opacity: 0.5827;
  transform: translate(38.7194vw, -10px) scale(0.3712);
  animation: fall-20 20s -22s linear infinite;
}
@keyframes fall-20 {
  35.296% {
    transform: translate(30.3739vw, 35.296vh) scale(0.3712);
  }
  to {
    transform: translate(34.54665vw, 100vh) scale(0.3712);
  }
}
.snow:nth-child(21) {
  opacity: 0.006;
  transform: translate(98.3638vw, -10px) scale(0.6032);
  animation: fall-21 19s -13s linear infinite;
}
@keyframes fall-21 {
  56.763% {
    transform: translate(107.0153vw, 56.763vh) scale(0.6032);
  }
  to {
    transform: translate(102.68955vw, 100vh) scale(0.6032);
  }
}
.snow:nth-child(22) {
  opacity: 0.6322;
  transform: translate(1.5663vw, -10px) scale(0.127);
  animation: fall-22 19s -7s linear infinite;
}
@keyframes fall-22 {
  35.082% {
    transform: translate(4.711vw, 35.082vh) scale(0.127);
  }
  to {
    transform: translate(3.13865vw, 100vh) scale(0.127);
  }
}
.snow:nth-child(23) {
  opacity: 0.9473;
  transform: translate(18.1677vw, -10px) scale(0.5388);
  animation: fall-23 26s -28s linear infinite;
}
@keyframes fall-23 {
  49.426% {
    transform: translate(20.7549vw, 49.426vh) scale(0.5388);
  }
  to {
    transform: translate(19.4613vw, 100vh) scale(0.5388);
  }
}
.snow:nth-child(24) {
  opacity: 0.4814;
  transform: translate(11.9704vw, -10px) scale(0.2342);
  animation: fall-24 18s -2s linear infinite;
}
@keyframes fall-24 {
  49.537% {
    transform: translate(5.0984vw, 49.537vh) scale(0.2342);
  }
  to {
    transform: translate(8.5344vw, 100vh) scale(0.2342);
  }
}
.snow:nth-child(25) {
  opacity: 0.5632;
  transform: translate(81.8523vw, -10px) scale(0.7559);
  animation: fall-25 28s -25s linear infinite;
}
@keyframes fall-25 {
  62.5% {
    transform: translate(73.6794vw, 62.5vh) scale(0.7559);
  }
  to {
    transform: translate(77.76585vw, 100vh) scale(0.7559);
  }
}
.snow:nth-child(26) {
  opacity: 0.7263;
  transform: translate(14.7053vw, -10px) scale(0.1571);
  animation: fall-26 17s -8s linear infinite;
}
@keyframes fall-26 {
  47.367% {
    transform: translate(16.6198vw, 47.367vh) scale(0.1571);
  }
  to {
    transform: translate(15.66255vw, 100vh) scale(0.1571);
  }
}
.snow:nth-child(27) {
  opacity: 0.4089;
  transform: translate(87.8624vw, -10px) scale(1);
  animation: fall-27 14s -1s linear infinite;
}
@keyframes fall-27 {
  71.739% {
    transform: translate(91.7118vw, 71.739vh) scale(1);
  }
  to {
    transform: translate(89.7871vw, 100vh) scale(1);
  }
}
.snow:nth-child(28) {
  opacity: 0.2349;
  transform: translate(2.9611vw, -10px) scale(0.7386);
  animation: fall-28 20s -6s linear infinite;
}
@keyframes fall-28 {
  43.564% {
    transform: translate(6.6468vw, 43.564vh) scale(0.7386);
  }
  to {
    transform: translate(4.80395vw, 100vh) scale(0.7386);
  }
}
.snow:nth-child(29) {
  opacity: 0.8218;
  transform: translate(19.2733vw, -10px) scale(0.8102);
  animation: fall-29 12s -21s linear infinite;
}
@keyframes fall-29 {
  38.695% {
    transform: translate(24.3181vw, 38.695vh) scale(0.8102);
  }
  to {
    transform: translate(21.7957vw, 100vh) scale(0.8102);
  }
}
.snow:nth-child(30) {
  opacity: 0.2457;
  transform: translate(78.0686vw, -10px) scale(0.3297);
  animation: fall-30 21s -14s linear infinite;
}
@keyframes fall-30 {
  44.79% {
    transform: translate(79.9812vw, 44.79vh) scale(0.3297);
  }
  to {
    transform: translate(79.0249vw, 100vh) scale(0.3297);
  }
}
.snow:nth-child(31) {
  opacity: 0.6756;
  transform: translate(54.4056vw, -10px) scale(0.6557);
  animation: fall-31 24s -8s linear infinite;
}
@keyframes fall-31 {
  60.074% {
    transform: translate(63.6821vw, 60.074vh) scale(0.6557);
  }
  to {
    transform: translate(59.04385vw, 100vh) scale(0.6557);
  }
}
.snow:nth-child(32) {
  opacity: 0.6235;
  transform: translate(79.2669vw, -10px) scale(0.242);
  animation: fall-32 28s -9s linear infinite;
}
@keyframes fall-32 {
  37.363% {
    transform: translate(73.9467vw, 37.363vh) scale(0.242);
  }
  to {
    transform: translate(76.6068vw, 100vh) scale(0.242);
  }
}
.snow:nth-child(33) {
  opacity: 0.6742;
  transform: translate(97.3423vw, -10px) scale(0.3577);
  animation: fall-33 18s -28s linear infinite;
}
@keyframes fall-33 {
  55.832% {
    transform: translate(88.3752vw, 55.832vh) scale(0.3577);
  }
  to {
    transform: translate(92.85875vw, 100vh) scale(0.3577);
  }
}
.snow:nth-child(34) {
  opacity: 0.2594;
  transform: translate(72.6627vw, -10px) scale(0.1087);
  animation: fall-34 28s -11s linear infinite;
}
@keyframes fall-34 {
  68.254% {
    transform: translate(75.4339vw, 68.254vh) scale(0.1087);
  }
  to {
    transform: translate(74.0483vw, 100vh) scale(0.1087);
  }
}
.snow:nth-child(35) {
  opacity: 0.5107;
  transform: translate(26.1726vw, -10px) scale(0.2201);
  animation: fall-35 14s -30s linear infinite;
}
@keyframes fall-35 {
  44.4% {
    transform: translate(31.0221vw, 44.4vh) scale(0.2201);
  }
  to {
    transform: translate(28.59735vw, 100vh) scale(0.2201);
  }
}
.snow:nth-child(36) {
  opacity: 0.9794;
  transform: translate(46.4009vw, -10px) scale(0.7523);
  animation: fall-36 12s -26s linear infinite;
}
@keyframes fall-36 {
  60.979% {
    transform: translate(51.7284vw, 60.979vh) scale(0.7523);
  }
  to {
    transform: translate(49.06465vw, 100vh) scale(0.7523);
  }
}
.snow:nth-child(37) {
  opacity: 0.6912;
  transform: translate(7.1816vw, -10px) scale(0.5513);
  animation: fall-37 14s -14s linear infinite;
}
@keyframes fall-37 {
  79.327% {
    transform: translate(16.2606vw, 79.327vh) scale(0.5513);
  }
  to {
    transform: translate(11.7211vw, 100vh) scale(0.5513);
  }
}
.snow:nth-child(38) {
  opacity: 0.1238;
  transform: translate(22.6145vw, -10px) scale(0.0102);
  animation: fall-38 19s -27s linear infinite;
}
@keyframes fall-38 {
  32.326% {
    transform: translate(25.197vw, 32.326vh) scale(0.0102);
  }
  to {
    transform: translate(23.90575vw, 100vh) scale(0.0102);
  }
}
.snow:nth-child(39) {
  opacity: 0.8767;
  transform: translate(98.0997vw, -10px) scale(0.889);
  animation: fall-39 22s -23s linear infinite;
}
@keyframes fall-39 {
  51.238% {
    transform: translate(99.8192vw, 51.238vh) scale(0.889);
  }
  to {
    transform: translate(98.95945vw, 100vh) scale(0.889);
  }
}
.snow:nth-child(40) {
  opacity: 0.3965;
  transform: translate(23.9414vw, -10px) scale(0.1393);
  animation: fall-40 26s -24s linear infinite;
}
@keyframes fall-40 {
  42.299% {
    transform: translate(20.6166vw, 42.299vh) scale(0.1393);
  }
  to {
    transform: translate(22.279vw, 100vh) scale(0.1393);
  }
}
.snow:nth-child(41) {
  opacity: 0.4694;
  transform: translate(18.6821vw, -10px) scale(0.8639);
  animation: fall-41 16s -15s linear infinite;
}
@keyframes fall-41 {
  33.904% {
    transform: translate(20.5296vw, 33.904vh) scale(0.8639);
  }
  to {
    transform: translate(19.60585vw, 100vh) scale(0.8639);
  }
}
.snow:nth-child(42) {
  opacity: 0.7885;
  transform: translate(54.9324vw, -10px) scale(0.4975);
  animation: fall-42 30s -4s linear infinite;
}
@keyframes fall-42 {
  49.502% {
    transform: translate(55.0839vw, 49.502vh) scale(0.4975);
  }
  to {
    transform: translate(55.00815vw, 100vh) scale(0.4975);
  }
}
.snow:nth-child(43) {
  opacity: 0.7676;
  transform: translate(80.2901vw, -10px) scale(0.8488);
  animation: fall-43 10s -9s linear infinite;
}
@keyframes fall-43 {
  41.513% {
    transform: translate(79.2695vw, 41.513vh) scale(0.8488);
  }
  to {
    transform: translate(79.7798vw, 100vh) scale(0.8488);
  }
}
.snow:nth-child(44) {
  opacity: 0.4509;
  transform: translate(85.0057vw, -10px) scale(0.0093);
  animation: fall-44 10s -28s linear infinite;
}
@keyframes fall-44 {
  40.466% {
    transform: translate(83.1099vw, 40.466vh) scale(0.0093);
  }
  to {
    transform: translate(84.0578vw, 100vh) scale(0.0093);
  }
}
.snow:nth-child(45) {
  opacity: 0.0003;
  transform: translate(46.4029vw, -10px) scale(0.9104);
  animation: fall-45 20s -29s linear infinite;
}
@keyframes fall-45 {
  40.346% {
    transform: translate(39.0759vw, 40.346vh) scale(0.9104);
  }
  to {
    transform: translate(42.7394vw, 100vh) scale(0.9104);
  }
}
.snow:nth-child(46) {
  opacity: 0.6711;
  transform: translate(15.984vw, -10px) scale(0.8867);
  animation: fall-46 17s -11s linear infinite;
}
@keyframes fall-46 {
  62.358% {
    transform: translate(8.6051vw, 62.358vh) scale(0.8867);
  }
  to {
    transform: translate(12.29455vw, 100vh) scale(0.8867);
  }
}
.snow:nth-child(47) {
  opacity: 0.2179;
  transform: translate(70.8603vw, -10px) scale(0.7772);
  animation: fall-47 17s -6s linear infinite;
}
@keyframes fall-47 {
  46.279% {
    transform: translate(63.8458vw, 46.279vh) scale(0.7772);
  }
  to {
    transform: translate(67.35305vw, 100vh) scale(0.7772);
  }
}
.snow:nth-child(48) {
  opacity: 0.7497;
  transform: translate(23.7928vw, -10px) scale(0.6222);
  animation: fall-48 29s -9s linear infinite;
}
@keyframes fall-48 {
  36.814% {
    transform: translate(23.2032vw, 36.814vh) scale(0.6222);
  }
  to {
    transform: translate(23.498vw, 100vh) scale(0.6222);
  }
}
.snow:nth-child(49) {
  opacity: 0.7914;
  transform: translate(68.987vw, -10px) scale(0.4484);
  animation: fall-49 14s -1s linear infinite;
}
@keyframes fall-49 {
  47.862% {
    transform: translate(71.8045vw, 47.862vh) scale(0.4484);
  }
  to {
    transform: translate(70.39575vw, 100vh) scale(0.4484);
  }
}
.snow:nth-child(50) {
  opacity: 0.1725;
  transform: translate(5.9762vw, -10px) scale(0.4944);
  animation: fall-50 24s -23s linear infinite;
}
@keyframes fall-50 {
  68.031% {
    transform: translate(0.0182vw, 68.031vh) scale(0.4944);
  }
  to {
    transform: translate(2.9972vw, 100vh) scale(0.4944);
  }
}
.snow:nth-child(51) {
  opacity: 0.4058;
  transform: translate(61.8502vw, -10px) scale(0.5208);
  animation: fall-51 15s -16s linear infinite;
}
@keyframes fall-51 {
  59.612% {
    transform: translate(62.1361vw, 59.612vh) scale(0.5208);
  }
  to {
    transform: translate(61.99315vw, 100vh) scale(0.5208);
  }
}
.snow:nth-child(52) {
  opacity: 0.2784;
  transform: translate(63.7667vw, -10px) scale(0.5021);
  animation: fall-52 18s -23s linear infinite;
}
@keyframes fall-52 {
  57.359% {
    transform: translate(72.9882vw, 57.359vh) scale(0.5021);
  }
  to {
    transform: translate(68.37745vw, 100vh) scale(0.5021);
  }
}
.snow:nth-child(53) {
  opacity: 0.8219;
  transform: translate(83.2183vw, -10px) scale(0.8016);
  animation: fall-53 15s -28s linear infinite;
}
@keyframes fall-53 {
  31.802% {
    transform: translate(76.4558vw, 31.802vh) scale(0.8016);
  }
  to {
    transform: translate(79.83705vw, 100vh) scale(0.8016);
  }
}
.snow:nth-child(54) {
  opacity: 0.8857;
  transform: translate(29.7524vw, -10px) scale(0.3691);
  animation: fall-54 13s -16s linear infinite;
}
@keyframes fall-54 {
  51.179% {
    transform: translate(38.743vw, 51.179vh) scale(0.3691);
  }
  to {
    transform: translate(34.2477vw, 100vh) scale(0.3691);
  }
}
.snow:nth-child(55) {
  opacity: 0.2845;
  transform: translate(23.5144vw, -10px) scale(0.789);
  animation: fall-55 10s -26s linear infinite;
}
@keyframes fall-55 {
  78.908% {
    transform: translate(32.618vw, 78.908vh) scale(0.789);
  }
  to {
    transform: translate(28.0662vw, 100vh) scale(0.789);
  }
}
.snow:nth-child(56) {
  opacity: 0.0659;
  transform: translate(18.9904vw, -10px) scale(0.5868);
  animation: fall-56 25s -13s linear infinite;
}
@keyframes fall-56 {
  71.29% {
    transform: translate(10.9574vw, 71.29vh) scale(0.5868);
  }
  to {
    transform: translate(14.9739vw, 100vh) scale(0.5868);
  }
}
.snow:nth-child(57) {
  opacity: 0.0988;
  transform: translate(26.2121vw, -10px) scale(0.4503);
  animation: fall-57 19s -27s linear infinite;
}
@keyframes fall-57 {
  30.669% {
    transform: translate(16.8458vw, 30.669vh) scale(0.4503);
  }
  to {
    transform: translate(21.52895vw, 100vh) scale(0.4503);
  }
}
.snow:nth-child(58) {
  opacity: 0.1067;
  transform: translate(73.7135vw, -10px) scale(0.6878);
  animation: fall-58 19s -30s linear infinite;
}
@keyframes fall-58 {
  69.389% {
    transform: translate(80.9025vw, 69.389vh) scale(0.6878);
  }
  to {
    transform: translate(77.308vw, 100vh) scale(0.6878);
  }
}
.snow:nth-child(59) {
  opacity: 0.5848;
  transform: translate(54.5739vw, -10px) scale(0.2739);
  animation: fall-59 14s -20s linear infinite;
}
@keyframes fall-59 {
  60.952% {
    transform: translate(54.0014vw, 60.952vh) scale(0.2739);
  }
  to {
    transform: translate(54.28765vw, 100vh) scale(0.2739);
  }
}
.snow:nth-child(60) {
  opacity: 0.9334;
  transform: translate(74.2783vw, -10px) scale(0.6775);
  animation: fall-60 16s -7s linear infinite;
}
@keyframes fall-60 {
  72.647% {
    transform: translate(68.7325vw, 72.647vh) scale(0.6775);
  }
  to {
    transform: translate(71.5054vw, 100vh) scale(0.6775);
  }
}
.snow:nth-child(61) {
  opacity: 0.2793;
  transform: translate(42.6063vw, -10px) scale(0.0844);
  animation: fall-61 21s -5s linear infinite;
}
@keyframes fall-61 {
  71.728% {
    transform: translate(46.8412vw, 71.728vh) scale(0.0844);
  }
  to {
    transform: translate(44.72375vw, 100vh) scale(0.0844);
  }
}
.snow:nth-child(62) {
  opacity: 0.2641;
  transform: translate(45.2801vw, -10px) scale(0.688);
  animation: fall-62 20s -25s linear infinite;
}
@keyframes fall-62 {
  57.494% {
    transform: translate(41.0764vw, 57.494vh) scale(0.688);
  }
  to {
    transform: translate(43.17825vw, 100vh) scale(0.688);
  }
}
.snow:nth-child(63) {
  opacity: 0.6066;
  transform: translate(54.4725vw, -10px) scale(0.4814);
  animation: fall-63 15s -21s linear infinite;
}
@keyframes fall-63 {
  34.983% {
    transform: translate(61.5585vw, 34.983vh) scale(0.4814);
  }
  to {
    transform: translate(58.0155vw, 100vh) scale(0.4814);
  }
}
.snow:nth-child(64) {
  opacity: 0.8986;
  transform: translate(33.4057vw, -10px) scale(0.4576);
  animation: fall-64 21s -16s linear infinite;
}
@keyframes fall-64 {
  51.303% {
    transform: translate(27.6143vw, 51.303vh) scale(0.4576);
  }
  to {
    transform: translate(30.51vw, 100vh) scale(0.4576);
  }
}
.snow:nth-child(65) {
  opacity: 0.3889;
  transform: translate(22.5511vw, -10px) scale(0.6983);
  animation: fall-65 25s -14s linear infinite;
}
@keyframes fall-65 {
  67.12% {
    transform: translate(31.9598vw, 67.12vh) scale(0.6983);
  }
  to {
    transform: translate(27.25545vw, 100vh) scale(0.6983);
  }
}
.snow:nth-child(66) {
  opacity: 0.4478;
  transform: translate(66.9361vw, -10px) scale(0.7928);
  animation: fall-66 24s -10s linear infinite;
}
@keyframes fall-66 {
  38.292% {
    transform: translate(75.9913vw, 38.292vh) scale(0.7928);
  }
  to {
    transform: translate(71.4637vw, 100vh) scale(0.7928);
  }
}
.snow:nth-child(67) {
  opacity: 0.8183;
  transform: translate(98.3782vw, -10px) scale(0.0209);
  animation: fall-67 29s -11s linear infinite;
}
@keyframes fall-67 {
  61.472% {
    transform: translate(98.467vw, 61.472vh) scale(0.0209);
  }
  to {
    transform: translate(98.4226vw, 100vh) scale(0.0209);
  }
}
.snow:nth-child(68) {
  opacity: 0.5852;
  transform: translate(72.747vw, -10px) scale(0.5073);
  animation: fall-68 16s -13s linear infinite;
}
@keyframes fall-68 {
  77.366% {
    transform: translate(67.3278vw, 77.366vh) scale(0.5073);
  }
  to {
    transform: translate(70.0374vw, 100vh) scale(0.5073);
  }
}
.snow:nth-child(69) {
  opacity: 0.2544;
  transform: translate(45.5821vw, -10px) scale(0.1089);
  animation: fall-69 27s -6s linear infinite;
}
@keyframes fall-69 {
  67.908% {
    transform: translate(48.8034vw, 67.908vh) scale(0.1089);
  }
  to {
    transform: translate(47.19275vw, 100vh) scale(0.1089);
  }
}
.snow:nth-child(70) {
  opacity: 0.0777;
  transform: translate(39.612vw, -10px) scale(0.0614);
  animation: fall-70 21s -15s linear infinite;
}
@keyframes fall-70 {
  61.21% {
    transform: translate(42.4957vw, 61.21vh) scale(0.0614);
  }
  to {
    transform: translate(41.05385vw, 100vh) scale(0.0614);
  }
}
.snow:nth-child(71) {
  opacity: 0.4851;
  transform: translate(84.2025vw, -10px) scale(0.3108);
  animation: fall-71 11s -28s linear infinite;
}
@keyframes fall-71 {
  49.431% {
    transform: translate(89.51vw, 49.431vh) scale(0.3108);
  }
  to {
    transform: translate(86.85625vw, 100vh) scale(0.3108);
  }
}
.snow:nth-child(72) {
  opacity: 0.0053;
  transform: translate(88.3386vw, -10px) scale(0.6681);
  animation: fall-72 10s -15s linear infinite;
}
@keyframes fall-72 {
  57.301% {
    transform: translate(95.2476vw, 57.301vh) scale(0.6681);
  }
  to {
    transform: translate(91.7931vw, 100vh) scale(0.6681);
  }
}
.snow:nth-child(73) {
  opacity: 0.2222;
  transform: translate(75.6275vw, -10px) scale(0.467);
  animation: fall-73 26s -20s linear infinite;
}
@keyframes fall-73 {
  50.202% {
    transform: translate(85.0301vw, 50.202vh) scale(0.467);
  }
  to {
    transform: translate(80.3288vw, 100vh) scale(0.467);
  }
}
.snow:nth-child(74) {
  opacity: 0.7715;
  transform: translate(20.7733vw, -10px) scale(0.7507);
  animation: fall-74 14s -6s linear infinite;
}
@keyframes fall-74 {
  58.115% {
    transform: translate(21.4411vw, 58.115vh) scale(0.7507);
  }
  to {
    transform: translate(21.1072vw, 100vh) scale(0.7507);
  }
}
.snow:nth-child(75) {
  opacity: 0.6442;
  transform: translate(72.0016vw, -10px) scale(0.3187);
  animation: fall-75 19s -7s linear infinite;
}
@keyframes fall-75 {
  59.087% {
    transform: translate(81.0666vw, 59.087vh) scale(0.3187);
  }
  to {
    transform: translate(76.5341vw, 100vh) scale(0.3187);
  }
}
.snow:nth-child(76) {
  opacity: 0.9833;
  transform: translate(41.4093vw, -10px) scale(0.823);
  animation: fall-76 26s -27s linear infinite;
}
@keyframes fall-76 {
  49.221% {
    transform: translate(48.4361vw, 49.221vh) scale(0.823);
  }
  to {
    transform: translate(44.9227vw, 100vh) scale(0.823);
  }
}
.snow:nth-child(77) {
  opacity: 0.6697;
  transform: translate(76.1948vw, -10px) scale(0.1293);
  animation: fall-77 27s -14s linear infinite;
}
@keyframes fall-77 {
  63.317% {
    transform: translate(66.6677vw, 63.317vh) scale(0.1293);
  }
  to {
    transform: translate(71.43125vw, 100vh) scale(0.1293);
  }
}
.snow:nth-child(78) {
     opacity: 0.4777;
  transform: translate(35.886vw, -10px) scale(0.2153);
  animation: fall-78 22s -28s linear infinite;
}
@keyframes fall-78 {
  61.378% {
    transform: translate(31.3676vw, 61.378vh) scale(0.2153);
  }
  to {
    transform: translate(33.6268vw, 100vh) scale(0.2153);
  }
}
.snow:nth-child(79) {
  opacity: 0.0861;
  transform: translate(15.8421vw, -10px) scale(0.2995);
  animation: fall-79 13s -24s linear infinite;
}
@keyframes fall-79 {
  50.634% {
    transform: translate(17.2345vw, 50.634vh) scale(0.2995);
  }
  to {
    transform: translate(16.5383vw, 100vh) scale(0.2995);
  }
}
.snow:nth-child(80) {
  opacity: 0.1151;
  transform: translate(79.4935vw, -10px) scale(0.9308);
  animation: fall-80 15s -21s linear infinite;
}
@keyframes fall-80 {
  52.54% {
    transform: translate(71.5652vw, 52.54vh) scale(0.9308);
  }
  to {
    transform: translate(75.52935vw, 100vh) scale(0.9308);
  }
 }
.snow:nth-child(81) {
  opacity: 0.8193;
  transform: translate(64.0686vw, -10px) scale(0.0186);
  animation: fall-81 29s -25s linear infinite;
}
@keyframes fall-81 {
  53.332% {
    transform: translate(68.8597vw, 53.332vh) scale(0.0186);
  }
  to {
    transform: translate(66.46415vw, 100vh) scale(0.0186);
  }
}
.snow:nth-child(82) {
  opacity: 0.2839;
  transform: translate(97.1637vw, -10px) scale(0.854);
  animation: fall-82 25s -19s linear infinite;
}
@keyframes fall-82 {
  63.758% {
    transform: translate(95.9307vw, 63.758vh) scale(0.854);
  }
  to {
    transform: translate(96.5472vw, 100vh) scale(0.854);
  }
}
.snow:nth-child(83) {
  opacity: 0.1554;
  transform: translate(6.215vw, -10px) scale(0.168);
  animation: fall-83 19s -21s linear infinite;
}
@keyframes fall-83 {
  46.506% {
    transform: translate(1.9551vw, 46.506vh) scale(0.168);
  }
  to {
    transform: translate(4.08505vw, 100vh) scale(0.168);
  }
}
.snow:nth-child(84) {
  opacity: 0.4061;
  transform: translate(30.6983vw, -10px) scale(0.507);
  animation: fall-84 15s -29s linear infinite;
}
@keyframes fall-84 {
  51.173% {
    transform: translate(33.5572vw, 51.173vh) scale(0.507);
  }
  to {
    transform: translate(32.12775vw, 100vh) scale(0.507);
  }
}
.snow:nth-child(85) {
  opacity: 0.3158;
  transform: translate(37.325vw, -10px) scale(0.4599);
  animation: fall-85 25s -14s linear infinite;
}
@keyframes fall-85 {
  31.14% {
    transform: translate(46.652vw, 31.14vh) scale(0.4599);
  }
  to {
    transform: translate(41.9885vw, 100vh) scale(0.4599);
  }
}
.snow:nth-child(86) {
  opacity: 0.3753;
  transform: translate(86.0111vw, -10px) scale(0.9418);
  animation: fall-86 11s -29s linear infinite;
}
@keyframes fall-86 {
  67.24% {
    transform: translate(86.9946vw, 67.24vh) scale(0.9418);
  }
  to {
    transform: translate(86.50285vw, 100vh) scale(0.9418);
  }
}
.snow:nth-child(87) {
  opacity: 0.39;
  transform: translate(64.2667vw, -10px) scale(0.7787);
  animation: fall-87 15s -19s linear infinite;
}
@keyframes fall-87 {
  76.809% {
    transform: translate(64.3888vw, 76.809vh) scale(0.7787);
  }
  to {
    transform: translate(64.32775vw, 100vh) scale(0.7787);
  }
}
.snow:nth-child(88) {
  opacity: 0.9045;
  transform: translate(11.761vw, -10px) scale(0.8546);
  animation: fall-88 15s -28s linear infinite;
}
@keyframes fall-88 {
  76.107% {
    transform: translate(15.3781vw, 76.107vh) scale(0.8546);
  }
  to {
    transform: translate(13.56955vw, 100vh) scale(0.8546);
  }
}
.snow:nth-child(89) {
  opacity: 0.3255;
  transform: translate(96.1591vw, -10px) scale(0.9282);
  animation: fall-89 17s -7s linear infinite;
}
@keyframes fall-89 {
  34.69% {
    transform: translate(99.3278vw, 34.69vh) scale(0.9282);
  }
  to {
    transform: translate(97.74345vw, 100vh) scale(0.9282);
  }
}
.snow:nth-child(90) {
  opacity: 0.3759;
  transform: translate(92.0553vw, -10px) scale(0.4148);
  animation: fall-90 10s -4s linear infinite;
}
@keyframes fall-90 {
  40.659% {
    transform: translate(98.2663vw, 40.659vh) scale(0.4148);
  }
  to {
    transform: translate(95.1608vw, 100vh) scale(0.4148);
  }
}
.snow:nth-child(91) {
  opacity: 0.3548;
  transform: translate(19.92vw, -10px) scale(0.9443);
  animation: fall-91 13s -29s linear infinite;
}
@keyframes fall-91 {
  55.571% {
    transform: translate(15.3042vw, 55.571vh) scale(0.9443);
  }
  to {
    transform: translate(17.6121vw, 100vh) scale(0.9443);
  }
}
.snow:nth-child(92) {
  opacity: 0.1026;
  transform: translate(69.0394vw, -10px) scale(0.6359);
  animation: fall-92 25s -7s linear infinite;
}
@keyframes fall-92 {
  50.508% {
    transform: translate(65.3428vw, 50.508vh) scale(0.6359);
  }
  to {
    transform: translate(67.1911vw, 100vh) scale(0.6359);
  }
}
.snow:nth-child(93) {
  opacity: 0.3383;
  transform: translate(30.4362vw, -10px) scale(0.7713);
  animation: fall-93 25s -8s linear infinite;
}
@keyframes fall-93 {
  36.87% {
    transform: translate(32.3869vw, 36.87vh) scale(0.7713);
  }
  to {
    transform: translate(31.41155vw, 100vh) scale(0.7713);
  }
}
.snow:nth-child(94) {
  opacity: 0.1065;
  transform: translate(25.7182vw, -10px) scale(0.8832);
  animation: fall-94 23s -1s linear infinite;
}
@keyframes fall-94 {
  30.318% {
    transform: translate(21.5532vw, 30.318vh) scale(0.8832);
  }
  to {
    transform: translate(23.6357vw, 100vh) scale(0.8832);
  }
}
.snow:nth-child(95) {
  opacity: 0.0672;
  transform: translate(21.7961vw, -10px) scale(0.1112);
  animation: fall-95 24s -13s linear infinite;
}
@keyframes fall-95 {
  31.626% {
    transform: translate(19.7549vw, 31.626vh) scale(0.1112);
  }
  to {
    transform: translate(20.7755vw, 100vh) scale(0.1112);
  }
}
.snow:nth-child(96) {
  opacity: 0.8232;
  transform: translate(42.8979vw, -10px) scale(0.6402);
  animation: fall-96 21s -2s linear infinite;
}
@keyframes fall-96 {
  44.234% {
    transform: translate(40.7595vw, 44.234vh) scale(0.6402);
  }
  to {
    transform: translate(41.8287vw, 100vh) scale(0.6402);
  }
}
.snow:nth-child(97) {
  opacity: 0.949;
  transform: translate(87.9786vw, -10px) scale(0.8531);
  animation: fall-97 19s -7s linear infinite;
}
@keyframes fall-97 {
  71.866% {
    transform: translate(78.7246vw, 71.866vh) scale(0.8531);
  }
  to {
    transform: translate(83.3516vw, 100vh) scale(0.8531);
  }
}
.snow:nth-child(98) {
  opacity: 0.8127;
  transform: translate(13.9712vw, -10px) scale(0.1644);
  animation: fall-98 11s -17s linear infinite;
}
@keyframes fall-98 {
  66.687% {
    transform: translate(11.4667vw, 66.687vh) scale(0.1644);
  }
  to {
    transform: translate(12.71895vw, 100vh) scale(0.1644);
  }
}
.snow:nth-child(99) {
  opacity: 0.1944;
  transform: translate(60.9868vw, -10px) scale(0.0169);
  animation: fall-99 12s -12s linear infinite;
}
@keyframes fall-99 {
  40.643% {
    transform: translate(54.6891vw, 40.643vh) scale(0.0169);
  }
  to {
    transform: translate(57.83795vw, 100vh) scale(0.0169);
  }
}
.snow:nth-child(100) {
  opacity: 0.3463;
  transform: translate(72.1665vw, -10px) scale(0.7987);
  animation: fall-100 13s -16s linear infinite;
}
@keyframes fall-100 {
  73.332% {
    transform: translate(65.7604vw, 73.332vh) scale(0.7987);
  }
  to {
    transform: translate(68.96345vw, 100vh) scale(0.7987);
  }
}
.snow:nth-child(101) {
  opacity: 0.5394;
  transform: translate(49.0458vw, -10px) scale(0.1664);
  animation: fall-101 23s -4s linear infinite;
}
@keyframes fall-101 {
  54.441% {
    transform: translate(43.2104vw, 54.441vh) scale(0.1664);
  }
  to {
    transform: translate(46.1281vw, 100vh) scale(0.1664);
  }
}
.snow:nth-child(102) {
  opacity: 0.8466;
  transform: translate(51.6783vw, -10px) scale(0.7479);
  animation: fall-102 12s -20s linear infinite;
}
@keyframes fall-102 {
  41.723% {
    transform: translate(59.2512vw, 41.723vh) scale(0.7479);
  }
  to {
    transform: translate(55.46475vw, 100vh) scale(0.7479);
  }
}
.snow:nth-child(103) {
  opacity: 0.2543;
  transform: translate(45.0056vw, -10px) scale(0.6751);
  animation: fall-103 20s -24s linear infinite;
}
@keyframes fall-103 {
  32.843% {
    transform: translate(46.9927vw, 32.843vh) scale(0.6751);
  }
  to {
    transform: translate(45.99915vw, 100vh) scale(0.6751);
  }
}
.snow:nth-child(104) {
  opacity: 0.6092;
  transform: translate(29.7283vw, -10px) scale(0.2173);
  animation: fall-104 28s -22s linear infinite;
}
@keyframes fall-104 {
  39.466% {
    transform: translate(37.6207vw, 39.466vh) scale(0.2173);
  }
  to {
    transform: translate(33.6745vw, 100vh) scale(0.2173);
  }
}
.snow:nth-child(105) {
  opacity: 0.5718;
  transform: translate(30.72vw, -10px) scale(0.4518);
  animation: fall-105 13s -11s linear infinite;
}
@keyframes fall-105 {
  36.162% {
    transform: translate(39.1523vw, 36.162vh) scale(0.4518);
  }
  to {
    transform: translate(34.93615vw, 100vh) scale(0.4518);
  }
}
.snow:nth-child(106) {
  opacity: 0.546;
  transform: translate(28.5482vw, -10px) scale(0.0157);
  animation: fall-106 27s -26s linear infinite;
}
@keyframes fall-106 {
  41.616% {
    transform: translate(24.0324vw, 41.616vh) scale(0.0157);
  }
  to {
    transform: translate(26.2903vw, 100vh) scale(0.0157);
  }
}
.snow:nth-child(107) {
  opacity: 0.0148;
  transform: translate(83.1315vw, -10px) scale(0.2662);
  animation: fall-107 16s -17s linear infinite;
}
@keyframes fall-107 {
  42.048% {
    transform: translate(79.2667vw, 42.048vh) scale(0.2662);
  }
  to {
    transform: translate(81.1991vw, 100vh) scale(0.2662);
  }
}
.snow:nth-child(108) {
  opacity: 0.2975;
  transform: translate(46.8543vw, -10px) scale(0.6669);
  animation: fall-108 20s -8s linear infinite;
}
@keyframes fall-108 {
  71.975% {
    transform: translate(48.2727vw, 71.975vh) scale(0.6669);
  }
  to {
    transform: translate(47.5635vw, 100vh) scale(0.6669);
  }
}
.snow:nth-child(109) {
  opacity: 0.013;
  transform: translate(19.7496vw, -10px) scale(0.1819);
  animation: fall-109 23s -25s linear infinite;
}
@keyframes fall-109 {
  59.179% {
    transform: translate(10.6285vw, 59.179vh) scale(0.1819);
  }
  to {
    transform: translate(15.18905vw, 100vh) scale(0.1819);
  }
}
.snow:nth-child(110) {
  opacity: 0.5905;
  transform: translate(48.0268vw, -10px) scale(0.9383);
  animation: fall-110 22s -3s linear infinite;
}
@keyframes fall-110 {
  32.876% {
    transform: translate(39.6117vw, 32.876vh) scale(0.9383);
  }
  to {
    transform: translate(43.81925vw, 100vh) scale(0.9383);
  }
}
.snow:nth-child(111) {
  opacity: 0.7934;
  transform: translate(4.47vw, -10px) scale(0.7706);
  animation: fall-111 25s -3s linear infinite;
}
@keyframes fall-111 {
  40.205% {
    transform: translate(0.4774vw, 40.205vh) scale(0.7706);
  }
  to {
    transform: translate(2.4737vw, 100vh) scale(0.7706);
  }
}
.snow:nth-child(112) {
  opacity: 0.9494;
  transform: translate(58.8748vw, -10px) scale(0.6141);
  animation: fall-112 10s -24s linear infinite;
}
@keyframes fall-112 {
  79.87% {
    transform: translate(65.5052vw, 79.87vh) scale(0.6141);
  }
  to {
    transform: translate(62.19vw, 100vh) scale(0.6141);
  }
}
.snow:nth-child(113) {
  opacity: 0.673;
  transform: translate(50.5365vw, -10px) scale(0.7613);
  animation: fall-113 24s -17s linear infinite;
}
@keyframes fall-113 {
  74.687% {
    transform: translate(47.5488vw, 74.687vh) scale(0.7613);
  }
  to {
    transform: translate(49.04265vw, 100vh) scale(0.7613);
  }
}
.snow:nth-child(114) {
  opacity: 0.2251;
  transform: translate(33.5359vw, -10px) scale(0.0692);
  animation: fall-114 18s -19s linear infinite;
}
@keyframes fall-114 {
  71.064% {
    transform: translate(41.6718vw, 71.064vh) scale(0.0692);
  }
  to {
    transform: translate(37.60385vw, 100vh) scale(0.0692);
  }
}
.snow:nth-child(115) {
  opacity: 0.7836;
  transform: translate(91.2157vw, -10px) scale(0.9786);
  animation: fall-115 15s -18s linear infinite;
}
@keyframes fall-115 {
  43.08% {
    transform: translate(93.4712vw, 43.08vh) scale(0.9786);
  }
  to {
    transform: translate(92.34345vw, 100vh) scale(0.9786);
  }
}
.snow:nth-child(116) {
  opacity: 0.4629;
  transform: translate(96.8783vw, -10px) scale(0.9524);
  animation: fall-116 10s -12s linear infinite;
}
@keyframes fall-116 {
  68.36% {
    transform: translate(86.9262vw, 68.36vh) scale(0.9524);
  }
  to {
    transform: translate(91.90225vw, 100vh) scale(0.9524);
  }
}
.snow:nth-child(117) {
  opacity: 0.8851;
  transform: translate(64.8084vw, -10px) scale(0.3871);
  animation: fall-117 18s -21s linear infinite;
}
@keyframes fall-117 {
  44.881% {
    transform: translate(58.2695vw, 44.881vh) scale(0.3871);
  }
  to {
    transform: translate(61.53895vw, 100vh) scale(0.3871);
  }
}
.snow:nth-child(118) {
  opacity: 0.7478;
  transform: translate(96.4566vw, -10px) scale(0.5459);
  animation: fall-118 11s -1s linear infinite;
}
@keyframes fall-118 {
  74.982% {
    transform: translate(95.2567vw, 74.982vh) scale(0.5459);
  }
  to {
    transform: translate(95.85665vw, 100vh) scale(0.5459);
  }
}
.snow:nth-child(119) {
  opacity: 0.63;
  transform: translate(47.2012vw, -10px) scale(0.2364);
  animation: fall-119 26s -1s linear infinite;
}
@keyframes fall-119 {
  58.234% {
    transform: translate(41.7355vw, 58.234vh) scale(0.2364);
  }
  to {
    transform: translate(44.46835vw, 100vh) scale(0.2364);
  }
}
.snow:nth-child(120) {
  opacity: 0.038;
  transform: translate(35.8693vw, -10px) scale(0.365);
  animation: fall-120 12s -28s linear infinite;
}
@keyframes fall-120 {
  43.25% {
    transform: translate(38.5895vw, 43.25vh) scale(0.365);
  }
  to {
    transform: translate(37.2294vw, 100vh) scale(0.365);
  }
}
.snow:nth-child(121) {
  opacity: 0.4531;
  transform: translate(31.8246vw, -10px) scale(0.839);
  animation: fall-121 22s -14s linear infinite;
}
@keyframes fall-121 {
  48.678% {
    transform: translate(32.1174vw, 48.678vh) scale(0.839);
  }
  to {
    transform: translate(31.971vw, 100vh) scale(0.839);
  }
}
.snow:nth-child(122) {
  opacity: 0.2634;
  transform: translate(10.7367vw, -10px) scale(0.1881);
  animation: fall-122 28s -2s linear infinite;
}
@keyframes fall-122 {
  69.425% {
    transform: translate(3.2702vw, 69.425vh) scale(0.1881);
  }
  to {
    transform: translate(7.00345vw, 100vh) scale(0.1881);
  }
}
.snow:nth-child(123) {
  opacity: 0.7969;
  transform: translate(69.9587vw, -10px) scale(0.9998);
  animation: fall-123 13s -9s linear infinite;
}
@keyframes fall-123 {
  69.703% {
    transform: translate(73.5594vw, 69.703vh) scale(0.9998);
  }
  to {
    transform: translate(71.75905vw, 100vh) scale(0.9998);
  }
}
.snow:nth-child(124) {
  opacity: 0.9263;
  transform: translate(52.6807vw, -10px) scale(0.5101);
  animation: fall-124 12s -10s linear infinite;
}
@keyframes fall-124 {
  58.207% {
    transform: translate(58.2668vw, 58.207vh) scale(0.5101);
  }
  to {
    transform: translate(55.47375vw, 100vh) scale(0.5101);
  }
}
.snow:nth-child(125) {
  opacity: 0.4393;
  transform: translate(5.7908vw, -10px) scale(0.3268);
  animation: fall-125 16s -14s linear infinite;
}
@keyframes fall-125 {
  44.105% {
    transform: translate(1.3801vw, 44.105vh) scale(0.3268);
  }
  to {
    transform: translate(3.58545vw, 100vh) scale(0.3268);
  }
}
.snow:nth-child(126) {
  opacity: 0.3963;
  transform: translate(15.1256vw, -10px) scale(0.8821);
  animation: fall-126 21s -27s linear infinite;
}
@keyframes fall-126 {
  43.523% {
    transform: translate(19.2737vw, 43.523vh) scale(0.8821);
  }
  to {
    transform: translate(17.19965vw, 100vh) scale(0.8821);
  }
}
.snow:nth-child(127) {
  opacity: 0.7074;
  transform: translate(11.0037vw, -10px) scale(0.0451);
  animation: fall-127 14s -4s linear infinite;
}
@keyframes fall-127 {
  49.61% {
    transform: translate(4.3315vw, 49.61vh) scale(0.0451);
  }
  to {
    transform: translate(7.6676vw, 100vh) scale(0.0451);
  }
}
.snow:nth-child(128) {
  opacity: 0.2582;
  transform: translate(95.4835vw, -10px) scale(0.4923);
  animation: fall-128 20s -23s linear infinite;
}
@keyframes fall-128 {
  41.299% {
    transform: translate(101.0978vw, 41.299vh) scale(0.4923);
  }
  to {
    transform: translate(98.29065vw, 100vh) scale(0.4923);
  }
}
.snow:nth-child(129) {
  opacity: 0.7101;
  transform: translate(83.1055vw, -10px) scale(0.2726);
  animation: fall-129 15s -29s linear infinite;
}
@keyframes fall-129 {
  51.303% {
    transform: translate(87.3627vw, 51.303vh) scale(0.2726);
  }
  to {
    transform: translate(85.2341vw, 100vh) scale(0.2726);
  }
}
.snow:nth-child(130) {
  opacity: 0.9708;
  transform: translate(40.6583vw, -10px) scale(0.1615);
  animation: fall-130 14s -24s linear infinite;
}
@keyframes fall-130 {
  31.841% {
    transform: translate(47.2928vw, 31.841vh) scale(0.1615);
  }
  to {
    transform: translate(43.97555vw, 100vh) scale(0.1615);
  }
}
.snow:nth-child(131) {
  opacity: 0.1578;
  transform: translate(96.2401vw, -10px) scale(0.8128);
  animation: fall-131 26s -18s linear infinite;
}
@keyframes fall-131 {
  30.023% {
    transform: translate(92.7954vw, 30.023vh) scale(0.8128);
  }
  to {
    transform: translate(94.51775vw, 100vh) scale(0.8128);
  }
}
.snow:nth-child(132) {
  opacity: 0.1494;
  transform: translate(31.4368vw, -10px) scale(0.4193);
  animation: fall-132 18s -17s linear infinite;
}
@keyframes fall-132 {
  42.28% {
    transform: translate(35.6252vw, 42.28vh) scale(0.4193);
  }
  to {
    transform: translate(33.531vw, 100vh) scale(0.4193);
  }
}
.snow:nth-child(133) {
  opacity: 0.2418;
  transform: translate(3.4304vw, -10px) scale(0.24);
  animation: fall-133 26s -13s linear infinite;
}
@keyframes fall-133 {
  44.073% {
    transform: translate(5.7863vw, 44.073vh) scale(0.24);
  }
  to {
    transform: translate(4.60835vw, 100vh) scale(0.24);
  }
}
.snow:nth-child(134) {
  opacity: 0.837;
  transform: translate(8.0618vw, -10px) scale(0.512);
  animation: fall-134 21s -22s linear infinite;
}
@keyframes fall-134 {
  71.363% {
    transform: translate(6.4043vw, 71.363vh) scale(0.512);
  }
  to {
    transform: translate(7.23305vw, 100vh) scale(0.512);
  }
}
.snow:nth-child(135) {
  opacity: 0.21;
  transform: translate(68.7584vw, -10px) scale(0.9345);
  animation: fall-135 13s -24s linear infinite;
}
@keyframes fall-135 {
  61.904% {
    transform: translate(77.2603vw, 61.904vh) scale(0.9345);
  }
  to {
    transform: translate(73.00935vw, 100vh) scale(0.9345);
  }
}
.snow:nth-child(136) {
  opacity: 0.9596;
  transform: translate(73.005vw, -10px) scale(0.3019);
  animation: fall-136 12s -14s linear infinite;
}
@keyframes fall-136 {
  42.779% {
    transform: translate(76.7856vw, 42.779vh) scale(0.3019);
  }
  to {
    transform: translate(74.8953vw, 100vh) scale(0.3019);
  }
}
.snow:nth-child(137) {
  opacity: 0.1797;
  transform: translate(72.8153vw, -10px) scale(0.8114);
  animation: fall-137 18s -20s linear infinite;
}
@keyframes fall-137 {
  42.218% {
    transform: translate(80.0824vw, 42.218vh) scale(0.8114);
  }
  to {
    transform: translate(76.44885vw, 100vh) scale(0.8114);
  }
}
.snow:nth-child(138) {
  opacity: 0.1115;
  transform: translate(47.417vw, -10px) scale(0.7953);
  animation: fall-138 27s -17s linear infinite;
}
@keyframes fall-138 {
  59.305% {
    transform: translate(45.7045vw, 59.305vh) scale(0.7953);
  }
  to {
    transform: translate(46.56075vw, 100vh) scale(0.7953);
  }
}
.snow:nth-child(139) {
  opacity: 0.2;
  transform: translate(50.2952vw, -10px) scale(0.3588);
  animation: fall-139 16s -25s linear infinite;
}
@keyframes fall-139 {
  66.775% {
    transform: translate(40.5409vw, 66.775vh) scale(0.3588);
  }
  to {
    transform: translate(45.41805vw, 100vh) scale(0.3588);
  }
}
.snow:nth-child(140) {
  opacity: 0.881;
  transform: translate(10.3085vw, -10px) scale(0.8616);
  animation: fall-140 30s -2s linear infinite;
}
@keyframes fall-140 {
  41.599% {
    transform: translate(12.2405vw, 41.599vh) scale(0.8616);
  }
  to {
    transform: translate(11.2745vw, 100vh) scale(0.8616);
  }
}
.snow:nth-child(141) {
  opacity: 0.5881;
  transform: translate(84.5913vw, -10px) scale(0.2251);
  animation: fall-141 29s -30s linear infinite;
}
@keyframes fall-141 {
  58.72% {
    transform: translate(91.2782vw, 58.72vh) scale(0.2251);
  }
  to {
    transform: translate(87.93475vw, 100vh) scale(0.2251);
  }
}
.snow:nth-child(142) {
  opacity: 0.8711;
  transform: translate(10.0605vw, -10px) scale(0.7789);
  animation: fall-142 10s -23s linear infinite;
}
@keyframes fall-142 {
  32.584% {
    transform: translate(11.3321vw, 32.584vh) scale(0.7789);
  }
  to {
    transform: translate(10.6963vw, 100vh) scale(0.7789);
  }
}
.snow:nth-child(143) {
  opacity: 0.5901;
  transform: translate(28.8446vw, -10px) scale(0.3612);
  animation: fall-143 17s -27s linear infinite;
}
@keyframes fall-143 {
  52.584% {
    transform: translate(24.1353vw, 52.584vh) scale(0.3612);
  }
  to {
    transform: translate(26.48995vw, 100vh) scale(0.3612);
  }
}
.snow:nth-child(144) {
  opacity: 0.5165;
  transform: translate(34.0902vw, -10px) scale(0.6385);
  animation: fall-144 12s -12s linear infinite;
}
@keyframes fall-144 {
  31.042% {
    transform: translate(37.2719vw, 31.042vh) scale(0.6385);
  }
  to {
    transform: translate(35.68105vw, 100vh) scale(0.6385);
  }
}
.snow:nth-child(145) {
  opacity: 0.6476;
  transform: translate(49.3677vw, -10px) scale(0.1528);
  animation: fall-145 16s -19s linear infinite;
}
@keyframes fall-145 {
  48.493% {
    transform: translate(53.5278vw, 48.493vh) scale(0.1528);
  }
  to {
    transform: translate(51.44775vw, 100vh) scale(0.1528);
  }
}
.snow:nth-child(146) {
  opacity: 0.656;
  transform: translate(37.5088vw, -10px) scale(0.7372);
  animation: fall-146 11s -2s linear infinite;
}
@keyframes fall-146 {
  32.228% {
    transform: translate(38.7007vw, 32.228vh) scale(0.7372);
  }
  to {
    transform: translate(38.10475vw, 100vh) scale(0.7372);
  }
}
.snow:nth-child(147) {
  opacity: 0.6117;
  transform: translate(42.9799vw, -10px) scale(0.6864);
  animation: fall-147 26s -14s linear infinite;
}
@keyframes fall-147 {
  43.159% {
    transform: translate(50.2586vw, 43.159vh) scale(0.6864);
  }
  to {
    transform: translate(46.61925vw, 100vh) scale(0.6864);
  }
}
.snow:nth-child(148) {
  opacity: 0.1781;
  transform: translate(24.3949vw, -10px) scale(0.8191);
  animation: fall-148 12s -14s linear infinite;
}
@keyframes fall-148 {
  76.872% {
    transform: translate(20.4346vw, 76.872vh) scale(0.8191);
  }
  to {
    transform: translate(22.41475vw, 100vh) scale(0.8191);
  }
}
.snow:nth-child(149) {
  opacity: 0.4984;
  transform: translate(78.3647vw, -10px) scale(0.3731);
  animation: fall-149 15s -1s linear infinite;
}
@keyframes fall-149 {
  31.58% {
    transform: translate(68.8588vw, 31.58vh) scale(0.3731);
  }
  to {
    transform: translate(73.61175vw, 100vh) scale(0.3731);
  }
}
.snow:nth-child(150) {
  opacity: 0.5476;
  transform: translate(76.7066vw, -10px) scale(0.4906);
  animation: fall-150 29s -2s linear infinite;
}
@keyframes fall-150 {
  34.061% {
    transform: translate(68.9103vw, 34.061vh) scale(0.4906);
  }
  to {
    transform: translate(72.80845vw, 100vh) scale(0.4906);
  }
}
.snow:nth-child(151) {
  opacity: 0.4375;
  transform: translate(59.4377vw, -10px) scale(0.1666);
  animation: fall-151 18s -6s linear infinite;
}
@keyframes fall-151 {
  71.715% {
    transform: translate(53.3521vw, 71.715vh) scale(0.1666);
  }
  to {
    transform: translate(56.3949vw, 100vh) scale(0.1666);
  }
}
.snow:nth-child(152) {
  opacity: 0.6918;
  transform: translate(10.0739vw, -10px) scale(0.652);
  animation: fall-152 18s -23s linear infinite;
}
@keyframes fall-152 {
  48.995% {
    transform: translate(18.2222vw, 48.995vh) scale(0.652);
  }
  to {
    transform: translate(14.14805vw, 100vh) scale(0.652);
  }
}
.snow:nth-child(153) {
  opacity: 0.4575;
  transform: translate(90.0938vw, -10px) scale(0.3344);
  animation: fall-153 27s -14s linear infinite;
}
@keyframes fall-153 {
  33.381% {
    transform: translate(92.4651vw, 33.381vh) scale(0.3344);
  }
  to {
    transform: translate(91.27945vw, 100vh) scale(0.3344);
  }
}
.snow:nth-child(154) {
  opacity: 0.922;
  transform: translate(93.7848vw, -10px) scale(0.733);
  animation: fall-154 22s -21s linear infinite;
}
@keyframes fall-154 {
  70.124% {
    transform: translate(102.0698vw, 70.124vh) scale(0.733);
  }
  to {
    transform: translate(97.9273vw, 100vh) scale(0.733);
  }
}
.snow:nth-child(155) {
  opacity: 0.906;
  transform: translate(15.9844vw, -10px) scale(0.5947);
  animation: fall-155 16s -8s linear infinite;
}
@keyframes fall-155 {
  66.413% {
    transform: translate(20.5892vw, 66.413vh) scale(0.5947);
  }
  to {
    transform: translate(18.2868vw, 100vh) scale(0.5947);
  }
}
.snow:nth-child(156) {
  opacity: 0.8873;
  transform: translate(2.0063vw, -10px) scale(0.1034);
  animation: fall-156 15s -3s linear infinite;
}
@keyframes fall-156 {
  48.557% {
    transform: translate(1.5184vw, 48.557vh) scale(0.1034);
  }
  to {
    transform: translate(1.76235vw, 100vh) scale(0.1034);
  }
}
.snow:nth-child(157) {
  opacity: 0.4807;
  transform: translate(97.8196vw, -10px) scale(0.266);
  animation: fall-157 17s -28s linear infinite;
}
@keyframes fall-157 {
  69.741% {
    transform: translate(90.5269vw, 69.741vh) scale(0.266);
  }
  to {
    transform: translate(94.17325vw, 100vh) scale(0.266);
  }
}
.snow:nth-child(158) {
  opacity: 0.6409;
  transform: translate(55.8842vw, -10px) scale(0.2091);
  animation: fall-158 26s -1s linear infinite;
}
@keyframes fall-158 {
  62.204% {
    transform: translate(57.1335vw, 62.204vh) scale(0.2091);
  }
  to {
    transform: translate(56.50885vw, 100vh) scale(0.2091);
  }
}
.snow:nth-child(159) {
  opacity: 0.8375;
  transform: translate(26.1361vw, -10px) scale(0.1892);
  animation: fall-159 15s -6s linear infinite;
}
@keyframes fall-159 {
  70.951% {
    transform: translate(25.7885vw, 70.951vh) scale(0.1892);
  }
  to {
    transform: translate(25.9623vw, 100vh) scale(0.1892);
  }
}
.snow:nth-child(160) {
  opacity: 0.5029;
  transform: translate(37.0547vw, -10px) scale(0.8561);
  animation: fall-160 10s -25s linear infinite;
}
@keyframes fall-160 {
  32.317% {
    transform: translate(27.8725vw, 32.317vh) scale(0.8561);
  }
  to {
    transform: translate(32.4636vw, 100vh) scale(0.8561);
  }
}
.snow:nth-child(161) {
  opacity: 0.9065;
  transform: translate(5.8231vw, -10px) scale(0.6218);
  animation: fall-161 20s -30s linear infinite;
}
@keyframes fall-161 {
  48.358% {
    transform: translate(-0.5074vw, 48.358vh) scale(0.6218);
  }
  to {
    transform: translate(2.65785vw, 100vh) scale(0.6218);
  }
}
.snow:nth-child(162) {
  opacity: 0.5898;
  transform: translate(76.0799vw, -10px) scale(0.6711);
  animation: fall-162 29s -24s linear infinite;
}
@keyframes fall-162 {
  41.557% {
    transform: translate(79.9439vw, 41.557vh) scale(0.6711);
  }
  to {
    transform: translate(78.0119vw, 100vh) scale(0.6711);
  }
}
.snow:nth-child(163) {
  opacity: 0.7624;
  transform: translate(30.7565vw, -10px) scale(0.5907);
  animation: fall-163 28s -13s linear infinite;
}
@keyframes fall-163 {
  69.935% {
    transform: translate(24.2167vw, 69.935vh) scale(0.5907);
  }
  to {
    transform: translate(27.4866vw, 100vh) scale(0.5907);
  }
}
.snow:nth-child(164) {
  opacity: 0.7787;
  transform: translate(4.1431vw, -10px) scale(0.8331);
  animation: fall-164 28s -5s linear infinite;
}
@keyframes fall-164 {
  73.501% {
    transform: translate(12.5588vw, 73.501vh) scale(0.8331);
  }
  to {
    transform: translate(8.35095vw, 100vh) scale(0.8331);
  }
}
.snow:nth-child(165) {
  opacity: 0.33;
  transform: translate(21.2482vw, -10px) scale(0.6639);
  animation: fall-165 26s -30s linear infinite;
}
@keyframes fall-165 {
  49.625% {
    transform: translate(19.1877vw, 49.625vh) scale(0.6639);
  }
  to {
    transform: translate(20.21795vw, 100vh) scale(0.6639);
  }
}
.snow:nth-child(166) {
  opacity: 0.1413;
  transform: translate(19.4016vw, -10px) scale(0.9858);
  animation: fall-166 12s -6s linear infinite;
}
@keyframes fall-166 {
  43.635% {
    transform: translate(27.9927vw, 43.635vh) scale(0.9858);
  }
  to {
    transform: translate(23.69715vw, 100vh) scale(0.9858);
  }
}
.snow:nth-child(167) {
  opacity: 0.2654;
  transform: translate(21.7723vw, -10px) scale(0.5214);
  animation: fall-167 17s -21s linear infinite;
}
@keyframes fall-167 {
  76.081% {
    transform: translate(12.2951vw, 76.081vh) scale(0.5214);
  }
  to {
    transform: translate(17.0337vw, 100vh) scale(0.5214);
  }
}
.snow:nth-child(168) {
  opacity: 0.5728;
  transform: translate(35.1984vw, -10px) scale(0.1493);
  animation: fall-168 23s -29s linear infinite;
}
@keyframes fall-168 {
  58.652% {
    transform: translate(41.2994vw, 58.652vh) scale(0.1493);
  }
  to {
    transform: translate(38.2489vw, 100vh) scale(0.1493);
  }
}
.snow:nth-child(169) {
  opacity: 0.9701;
  transform: translate(58.429vw, -10px) scale(0.7334);
  animation: fall-169 22s -7s linear infinite;
}
@keyframes fall-169 {
  41.8% {
    transform: translate(54.0207vw, 41.8vh) scale(0.7334);
  }
  to {
    transform: translate(56.22485vw, 100vh) scale(0.7334);
  }
}
.snow:nth-child(170) {
  opacity: 0.4446;
  transform: translate(7.9756vw, -10px) scale(0.7376);
  animation: fall-170 16s -28s linear infinite;
}
@keyframes fall-170 {
  76.287% {
    transform: translate(14.6945vw, 76.287vh) scale(0.7376);
  }
  to {
    transform: translate(11.33505vw, 100vh) scale(0.7376);
  }
}
.snow:nth-child(171) {
  opacity: 0.0999;
  transform: translate(82.7438vw, -10px) scale(0.7304);
  animation: fall-171 13s -2s linear infinite;
}
@keyframes fall-171 {
  55.933% {
    transform: translate(85.2964vw, 55.933vh) scale(0.7304);
  }
  to {
    transform: translate(84.0201vw, 100vh) scale(0.7304);
  }
}
.snow:nth-child(172) {
  opacity: 0.2219;
  transform: translate(69.1169vw, -10px) scale(0.2245);
  animation: fall-172 14s -27s linear infinite;
}
@keyframes fall-172 {
  61.729% {
    transform: translate(61.5121vw, 61.729vh) scale(0.2245);
  }
  to {
    transform: translate(65.3145vw, 100vh) scale(0.2245);
  }
}
.snow:nth-child(173) {
  opacity: 0.2828;
  transform: translate(84.4153vw, -10px) scale(0.7523);
  animation: fall-173 28s -3s linear infinite;
}
@keyframes fall-173 {
  74.707% {
    transform: translate(76.2928vw, 74.707vh) scale(0.7523);
  }
  to {
    transform: translate(80.35405vw, 100vh) scale(0.7523);
  }
}
.snow:nth-child(174) {
  opacity: 0.2595;
  transform: translate(85.8634vw, -10px) scale(0.2605);
  animation: fall-174 13s -24s linear infinite;
}
@keyframes fall-174 {
  31.522% {
    transform: translate(89.8313vw, 31.522vh) scale(0.2605);
  }
  to {
    transform: translate(87.84735vw, 100vh) scale(0.2605);
  }
}
.snow:nth-child(175) {
  opacity: 0.2221;
  transform: translate(54.6634vw, -10px) scale(0.9917);
  animation: fall-175 12s -17s linear infinite;
}
@keyframes fall-175 {
  62.459% {
    transform: translate(49.6966vw, 62.459vh) scale(0.9917);
  }
  to {
    transform: translate(52.18vw, 100vh) scale(0.9917);
  }
}
.snow:nth-child(176) {
  opacity: 0.7318;
  transform: translate(10.924vw, -10px) scale(0.2175);
  animation: fall-176 16s -30s linear infinite;
}
@keyframes fall-176 {
  41.11% {
    transform: translate(13.1029vw, 41.11vh) scale(0.2175);
  }
  to {
    transform: translate(12.01345vw, 100vh) scale(0.2175);
  }
}
.snow:nth-child(177) {
  opacity: 0.7594;
  transform: translate(15.0314vw, -10px) scale(0.7345);
  animation: fall-177 28s -11s linear infinite;
}
@keyframes fall-177 {
  73.057% {
    transform: translate(5.0545vw, 73.057vh) scale(0.7345);
  }
  to {
    transform: translate(10.04295vw, 100vh) scale(0.7345);
  }
}
.snow:nth-child(178) {
  opacity: 0.0114;
  transform: translate(19.6147vw, -10px) scale(0.5032);
  animation: fall-178 11s -28s linear infinite;
}
@keyframes fall-178 {
  57.271% {
    transform: translate(11.3259vw, 57.271vh) scale(0.5032);
  }
  to {
    transform: translate(15.4703vw, 100vh) scale(0.5032);
  }
}
.snow:nth-child(179) {
  opacity: 0.85;
  transform: translate(50.1242vw, -10px) scale(0.8891);
  animation: fall-179 16s -15s linear infinite;
}
@keyframes fall-179 {
  47.487% {
    transform: translate(44.4909vw, 47.487vh) scale(0.8891);
  }
  to {
    transform: translate(47.30755vw, 100vh) scale(0.8891);
  }
}
.snow:nth-child(180) {
  opacity: 0.2867;
  transform: translate(25.5943vw, -10px) scale(0.8247);
  animation: fall-180 17s -16s linear infinite;
}
@keyframes fall-180 {
  55.748% {
    transform: translate(35.0186vw, 55.748vh) scale(0.8247);
  }
  to {
    transform: translate(30.30645vw, 100vh) scale(0.8247);
  }
}
.snow:nth-child(181) {
  opacity: 0.9961;
  transform: translate(41.3606vw, -10px) scale(0.2797);
  animation: fall-181 17s -14s linear infinite;
}
@keyframes fall-181 {
  33.093% {
    transform: translate(43.6896vw, 33.093vh) scale(0.2797);
  }
  to {
    transform: translate(42.5251vw, 100vh) scale(0.2797);
  }
}
.snow:nth-child(182) {
  opacity: 0.3082;
  transform: translate(24.1007vw, -10px) scale(0.7752);
  animation: fall-182 22s -4s linear infinite;
}
@keyframes fall-182 {
  79.826% {
    transform: translate(26.4799vw, 79.826vh) scale(0.7752);
  }
  to {
    transform: translate(25.2903vw, 100vh) scale(0.7752);
  }
}
.snow:nth-child(183) {
  opacity: 0.3444;
  transform: translate(20.1449vw, -10px) scale(0.8701);
  animation: fall-183 19s -30s linear infinite;
}
@keyframes fall-183 {
  47.311% {
    transform: translate(10.4822vw, 47.311vh) scale(0.8701);
  }
  to {
    transform: translate(15.31355vw, 100vh) scale(0.8701);
  }
}
.snow:nth-child(184) {
  opacity: 0.9444;
  transform: translate(27.4619vw, -10px) scale(0.1091);
  animation: fall-184 22s -27s linear infinite;
}
@keyframes fall-184 {
  62.267% {
    transform: translate(22.1859vw, 62.267vh) scale(0.1091);
  }
  to {
    transform: translate(24.8239vw, 100vh) scale(0.1091);
  }
}
.snow:nth-child(185) {
  opacity: 0.5612;
  transform: translate(13.4067vw, -10px) scale(0.6626);
  animation: fall-185 16s -29s linear infinite;
}
@keyframes fall-185 {
  37.117% {
    transform: translate(11.7274vw, 37.117vh) scale(0.6626);
  }
  to {
    transform: translate(12.56705vw, 100vh) scale(0.6626);
  }
}
.snow:nth-child(186) {
  opacity: 0.6685;
  transform: translate(53.2929vw, -10px) scale(0.263);
  animation: fall-186 23s -19s linear infinite;
}
@keyframes fall-186 {
  69.995% {
    transform: translate(45.1885vw, 69.995vh) scale(0.263);
  }
  to {
    transform: translate(49.2407vw, 100vh) scale(0.263);
  }
}
.snow:nth-child(187) {
  opacity: 0.9246;
  transform: translate(60.7779vw, -10px) scale(0.4892);
  animation: fall-187 22s -27s linear infinite;
}
@keyframes fall-187 {
  50.003% {
    transform: translate(52.5886vw, 50.003vh) scale(0.4892);
  }
  to {
    transform: translate(56.68325vw, 100vh) scale(0.4892);
  }
}
.snow:nth-child(188) {
  opacity: 0.2617;
  transform: translate(51.7837vw, -10px) scale(0.0114);
  animation: fall-188 19s -10s linear infinite;
}
@keyframes fall-188 {
  79.263% {
    transform: translate(44.1409vw, 79.263vh) scale(0.0114);
  }
  to {
    transform: translate(47.9623vw, 100vh) scale(0.0114);
  }
}
.snow:nth-child(189) {
  opacity: 0.9793;
  transform: translate(82.5471vw, -10px) scale(0.0206);
  animation: fall-189 22s -13s linear infinite;
}
@keyframes fall-189 {
  59.966% {
    transform: translate(83.8857vw, 59.966vh) scale(0.0206);
  }
  to {
    transform: translate(83.2164vw, 100vh) scale(0.0206);
  }
}
.snow:nth-child(190) {
  opacity: 0.6522;
  transform: translate(3.1644vw, -10px) scale(0.1297);
  animation: fall-190 17s -27s linear infinite;
}
@keyframes fall-190 {
  42.578% {
    transform: translate(3.8613vw, 42.578vh) scale(0.1297);
  }
  to {
    transform: translate(3.51285vw, 100vh) scale(0.1297);
  }
}
.snow:nth-child(191) {
  opacity: 0.4449;
  transform: translate(11.12vw, -10px) scale(0.5392);
  animation: fall-191 10s -11s linear infinite;
}
@keyframes fall-191 {
  39.385% {
    transform: translate(8.8013vw, 39.385vh) scale(0.5392);
  }
  to {
    transform: translate(9.96065vw, 100vh) scale(0.5392);
  }
}
.snow:nth-child(192) {
  opacity: 0.384;
  transform: translate(81.5348vw, -10px) scale(0.4609);
  animation: fall-192 14s -2s linear infinite;
}
@keyframes fall-192 {
  45.889% {
    transform: translate(76.5783vw, 45.889vh) scale(0.4609);
  }
  to {
    transform: translate(79.05655vw, 100vh) scale(0.4609);
  }
}
.snow:nth-child(193) {
  opacity: 0.9214;
  transform: translate(15.9738vw, -10px) scale(0.7401);
  animation: fall-193 24s -1s linear infinite;
}
@keyframes fall-193 {
  69.925% {
    transform: translate(13.3196vw, 69.925vh) scale(0.7401);
  }
  to {
    transform: translate(14.6467vw, 100vh) scale(0.7401);
  }
}
.snow:nth-child(194) {
  opacity: 0.562;
  transform: translate(5.3257vw, -10px) scale(0.4393);
  animation: fall-194 28s -15s linear infinite;
}
@keyframes fall-194 {
  73.385% {
    transform: translate(9.6311vw, 73.385vh) scale(0.4393);
  }
  to {
    transform: translate(7.4784vw, 100vh) scale(0.4393);
  }
}
.snow:nth-child(195) {
  opacity: 0.8812;
  transform: translate(60.7275vw, -10px) scale(0.9764);
  animation: fall-195 26s -11s linear infinite;
}
@keyframes fall-195 {
  37.571% {
    transform: translate(67.7193vw, 37.571vh) scale(0.9764);
  }
  to {
    transform: translate(64.2234vw, 100vh) scale(0.9764);
  }
}
.snow:nth-child(196) {
  opacity: 0.2979;
  transform: translate(75.7486vw, -10px) scale(0.8538);
  animation: fall-196 11s -15s linear infinite;
}
@keyframes fall-196 {
  41.332% {
    transform: translate(82.1328vw, 41.332vh) scale(0.8538);
  }
  to {
    transform: translate(78.9407vw, 100vh) scale(0.8538);
  }
}
.snow:nth-child(197) {
  opacity: 0.2191;
  transform: translate(49.2003vw, -10px) scale(0.0895);
  animation: fall-197 20s -24s linear infinite;
}
@keyframes fall-197 {
  32.081% {
    transform: translate(51.4896vw, 32.081vh) scale(0.0895);
  }
  to {
    transform: translate(50.34495vw, 100vh) scale(0.0895);
  }
}
.snow:nth-child(198) {
  opacity: 0.7235;
  transform: translate(69.587vw, -10px) scale(0.6144);
  animation: fall-198 15s -11s linear infinite;
}
@keyframes fall-198 {
  63.492% {
    transform: translate(71.8378vw, 63.492vh) scale(0.6144);
  }
  to {
    transform: translate(70.7124vw, 100vh) scale(0.6144);
  }
}
.snow:nth-child(199) {
  opacity: 0.9139;
  transform: translate(71.9829vw, -10px) scale(0.036);
  animation: fall-199 28s -9s linear infinite;
}
@keyframes fall-199 {
  55.538% {
    transform: translate(79.9909vw, 55.538vh) scale(0.036);
  }
  to {
    transform: translate(75.9869vw, 100vh) scale(0.036);
  }
}
.snow:nth-child(200) {
  opacity: 0.7535;
  transform: translate(75.1642vw, -10px) scale(0.4167);
  animation: fall-200 10s -5s linear infinite;
}
@keyframes fall-200 {
  68.689% {
    transform: translate(67.3469vw, 68.689vh) scale(0.4167);
  }
  to {
    transform: translate(71.25555vw, 100vh) scale(0.4167);
  }
}
.about-container {
  width: 100%;
  max-width: 120rem;
  margin: auto;
}

.about-section {
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  padding: 0px 32px;
}
@media (min-width: 576px) {
  .about-section {
    padding: 0px 64px;
  }
}

.about-description_container {
  width: 100%;
  max-width: 70%;
}
@media (max-width: 1028px) {
  .about-description_container {
    max-width: 90%;
  }
}

.about-groups-container {
  width: 80%;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  flex-wrap: wrap;
}

.group_container {
  margin: 1rem;
  min-width: 40%;
  flex: 1;
  background: var(--card-color);
  border-radius: 1rem;
  padding: 1rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-evenly;
  border: 2px solid var(--border-color);
  transition: all 0.3s ease;
}


.group_container:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 255, 0.15);
}

.group_container .group_title {
  display: flex;
  align-self: flex-start;
  justify-content: space-between;
  width: 100%;
  margin: 0;
}
.group_container .group_title .group_name {
  font-size: 1.5rem;
  font-weight: 500;
  margin: 0;
}
.group_container .group_title .group_meeting {
  color: #aaa;
  margin: 0;
}
.group_container hr {
  width: 4rem;
  margin: 0.5rem 0;
  border-top: 2px solid white;
}
.group_container .group_description {
  font-size: 0.8rem;
}

.about-section-heading {
  font-style: normal;
  font-weight: 800;
  text-align: center;
  color: var(--text-color);
  margin-top: 30px;
  font-size:  2.5rem;
  line-height: 2.5rem;
}

.about-section-description {
  font-style: normal;
  font-weight: 600;
  text-align: center;
  color: var(--light-text-color);
  margin-top: 18px;
  font-size: 1.3rem;
  line-height: 2rem;
}


.members-section {
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  padding: 0px 32px;
}

.members-container {
  width: 100%;
  max-width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 30px;
  margin-bottom: 48px;
}
@media (min-width: 576px) {
  .members-container {
    margin-top: 46px;
    margin-bottom: 69px;
  }
}

.members-grid {
  width: 100%;
  max-width: 70%;
  display: flex;
  flex-direction: column;
  flex-flow: wrap;
  gap: 32px;
  justify-content: center;
}
@media (max-width: 1024px) {
  .members-grid {
    max-width: 90%;
  }
}

.member_container {
  position: relative;
  width: 250px;
  height: 350px;
  border-radius: 16px;
  display: grid;
  grid-template-rows: 1fr 120px;
  box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.2);
  overflow: hidden;
    background-color: var(--header-color);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid transparent;
  transition: all 0.15s ease-in-out
}
.member_container:hover {
  transform: translateY(-5px);
  box-shadow: 0px 8px 24px rgba(0, 0, 255, 0.3);
}

.member_avatar-container {
  position: relative;
  border-radius:     16px 16px 0 0;
  overflow: hidden;
  width: 100%;
  height: 100%;
  vertical-align: middle;
}

.member_avatar {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  width: 100%;
  height: 100%;
  object-fit: cover;
  box-shadow: 0px 4px 64px rgba(0, 0, 0, 0.2);
}

.member_info {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 6px 20px;
  overflow: hidden;
}

.member_title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-color);
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-shrink: 0;
}

.member_details {
  font-size: 1rem;
  font-weight: 400;
  overflow: hidden;
  white-space: nowrap;
  flex-grow: 1;
  text-align: center;
}

.member_socials {
  width: 100%;
  margin-top: 2px;
  padding: 0 10px;  
  display: flex;
  justify-content: center;
  gap: 14px;
}

.member_social-link {
  height: 20px;
  width: 20px;
  color: var(--light-text-color);
  transition: 0.1s ease-in-out;
}

.member_social-link:hover {
  opacity: 1;
  color: var(--link-color);
}

.about-socials-section {
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  padding:   0px 32px;
}
@media (min-width: 576px) {
  .about-socials-section {
    padding: 0px 64px;
  }
}

.about-social-container {
  width: 100%;
  max-width: 60%;
  padding: 1.5rem 0;
  display: flex;
  flex-direction: row;
  gap: 32px;
  justify-content: space-evenly;
  align-items: center;
}
@media (max-width: 1256px) {
  .about-social-container {
    max-width: 100%;
    padding: 1rem;
  }
}
@media (max-width: 900px) {
  .about-social-container {
    flex-direction: column;
  }
}

.about-past-eboard-section {
  text-align: center;
}
.about-past-eboard-section
  .about-past-eboard-container
  .about-past-eboard
  .past-eboard-year {
  font-size: 2rem;
  color: #0000FF;
  margin-top: 1rem;
}
.about-past-eboard-section
  .about-past-eboard-container
  .about-past-eboard
  .past-eboard-orgname {
  color: #0000FF;
  margin: 0.5rem 0;
}
.about-past-eboard-section
  .about-past-eboard-container
  .about-past-eboard
  .past-eboard-orgs-container {
  display: flex;
  align-items: flex-start;
  justify-content: space-evenly;
  flex-wrap: wrap;
  width: 60%;
  margin: 1rem auto;
}
.about-past-eboard-section
  .about-past-eboard-container
  .about-past-eboard
  .past-eboard-orgs-container

  .past-eboard-org {
  margin: 0 0.5rem;
}
.past-eboard-table{
  width: 50%;
  margin-left: 27rem;
  text-align: left;
  font-size: 2rem;
  margin-bottom: 3rem;
}
.past-eboard-table_2{
  width:42%;
  margin-left: 27rem;
  text-align: left;
  font-size: 2rem;
  margin-bottom: 3rem;
}
@media only screen and (max-width: 768px) {
  .about-groups-container {
    width: 100% !important;
  }
  .about-groups-container .group_container {
    min-width: 100% !important;
  }
  .about-groups-container .group_container .group_title {
    flex-direction: column;
  }
    .past-eboard-table_2 {
    width: 80%;
    margin-left: 3rem;
}
  .past-eboard-table {
    width: 90%;
    margin-left: 3rem;
}
}
.education-section {
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  padding: 0px 32px;
  margin-bottom: 50px;
}
@media (min-width: 576px) {
  .education-section {
    padding: 0px 64px;
  }
}

.education-set-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin-top: 30px;
  margin-bottom: 48px;
}
@media (min-width: 576px) {
  .education-set-container {
    margin-top: 38px;
    margin-bottom: 60px;
  }
}

.education-set {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.education-set_title {
  color: var(--text-color);
  font-size: 1.5rem;
  font-weight: 700;
}

.education-set_description {
  color: var(--text-color);
  opacity: 0.7;
  font-size: 1rem;
  margin: 0.25rem 0 1rem;
}

.education-set_lesson-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  flex-flow: wrap;
  gap: 16px 32px;
  justify-content: center;
}

.events-section {
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  padding: 0px 32px;
}
@media (min-width: 576px) {
  .events-section {
    padding: 0px 64px;
  }
}

.events-container {
  width: 100%;
  max-width: 1400px;
  margin: 30px auto 48px;
  padding: 0 20px;
}

@media (min-width: 576px) {
  .events-container {
    margin-top: 38px;
    margin-bottom: 60px;
  }
}

.events-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 30px;
  max-width: 1400px;
  margin: 0 auto;
}

/* Desktop specific layout */
@media (min-width: 1200px) {
  .events-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
  }
}

@media (min-width: 769px) and (max-width: 1199px) {
  .events-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
  }
}

.event_container {
  position: relative;
  background: var(--card-color);
  border: 2px solid var(--border-color);
  border-radius: 20px;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  height: fit-content;
  display: flex;
  flex-direction: column;
}


.event_container:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow: 0 15px 30px rgba(0, 0, 255, 0.2);
  border-color: var(--link-color);
}


.event_badge {
  position: absolute;
  top: 15px;
  left: 15px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 6px 15px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  z-index: 10;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.event_image-container {
  position: relative;
  overflow: hidden;
  height: 250px;
}

.event_image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.event_container:hover .event_image {
  transform: scale(1.1);
}

.event_overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
  padding: 20px;
  transform: translateY(100%);
  transition: transform 0.4s ease;
}

.event_container:hover .event_overlay {
  transform: translateY(0);
}

.event_tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.event_tag {
  background: rgba(255, 255, 255, 0.2);
  color: white;
  padding: 4px 12px;
  border-radius: 15px;
  font-size: 0.75rem;
  font-weight: 500;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.event_info {
  padding: 25px;
}

.event_title {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--link-color);
  margin-bottom: 15px;
  line-height: 1.3;
  transition: color 0.3s ease;
}

.event_container:hover .event_title {
  color: var(--text-color);
}

.event_details {
  margin-bottom: 20px;
}

.event_date, .event_location {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  color: var(--light-text-color);
  font-size: 0.95rem;
}

.event_date i, .event_location i {
  color: var(--link-color);
  width: 16px;
}

.event_link-container {
  text-align: right;
}

.event_link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 45px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 50%;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-size: 1.1rem;
}

.event_link:hover {
  transform: scale(1.1) rotate(15deg);
  box-shadow: 0 8px 20px rgba(0, 0, 255, 0.3);
}

/* Responsive Design */
@media (max-width: 768px) {
  .section-title {
    font-size: 1.8rem;
    flex-direction: column;
    gap: 10px;
  }
  
  .upcoming-card {
    padding: 30px 20px;
    margin: 0 20px;
  }
  
  .upcoming-title {
    font-size: 2rem;
  }
  
  .events-container {
    padding: 0 10px;
  }
  
  .events-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .event_image-container {
    height: 200px;
  }
  
  .event_info {
    padding: 20px;
  }
}

@media (max-width: 480px) {
  .events-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  
  .event_container {
    margin: 0;
  }
}

/* Animation for page load */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.page-content {
  animation: fadeInUp 0.8s ease-out;
}

.section-animated {
  animation: fadeInUp 0.6s ease-out;
}

.section-animated:nth-child(1) { animation-delay: 0.1s; }
.section-animated:nth-child(2) { animation-delay: 0.2s; }
.section-animated:nth-child(3) { animation-delay: 0.3s; }
.section-animated:nth-child(4) { animation-delay: 0.4s; }
.section-animated:nth-child(5) { animation-delay: 0.5s; }

.card-animated {
  animation: slideInLeft 0.6s ease-out;
}

.card-animated:nth-child(1) { animation-delay: 0.1s; }
.card-animated:nth-child(2) { animation-delay: 0.2s; }
.card-animated:nth-child(3) { animation-delay: 0.3s; }
.card-animated:nth-child(4) { animation-delay: 0.4s; }

.grid-item-animated {
  animation: fadeInScale 0.6s ease-out;
}

.grid-item-animated:nth-child(1) { animation-delay: 0.1s; }
.grid-item-animated:nth-child(2) { animation-delay: 0.2s; }
.grid-item-animated:nth-child(3) { animation-delay: 0.3s; }
.grid-item-animated:nth-child(4) { animation-delay: 0.4s; }
.grid-item-animated:nth-child(5) { animation-delay: 0.5s; }
.grid-item-animated:nth-child(6) { animation-delay: 0.6s; }

.heading-animated {
  animation: fadeInUp 0.8s ease-out;
}

.slideshow-animated {
  animation: fadeInScale 1s ease-out;
  animation-delay: 0.3s;
}

/* ===== SPONSORS PAGE STYLING ===== */
.sponsors-section {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
  animation: fadeInUp 0.8s ease-out;
}

.sponsors-container {
  margin-top: 3rem;
}

.sponsors-grid {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

/* Sponsor Tier Styling */
.sponsor-tier {
  position: relative;
  animation: slideInLeft 0.6s ease-out;
}

.sponsor-tier:nth-child(2) { animation-delay: 0.2s; }
.sponsor-tier:nth-child(3) { animation-delay: 0.4s; }

.sponsor-tier-title {
  font-size: 2rem;
  font-weight: 800;
  text-align: center;
  margin-bottom: 2rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  position: relative;
  padding: 1rem 0;
}

.sponsor-tier-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 4px;
  border-radius: 2px;
}

/* Tier Colors */
.sponsor-tier-title.diamond {
  color: #b9f2ff;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.sponsor-tier-title.diamond::after {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.sponsor-tier-title.platinum {
  color: #e6e6fa;
  background: linear-gradient(135deg, #c0c0c0 0%, #e6e6fa 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.sponsor-tier-title.platinum::after {
  background: linear-gradient(135deg, #c0c0c0 0%, #e6e6fa 100%);
}

.sponsor-tier-title.server {
  color: #00ff88;
  background: linear-gradient(135deg, #00ff88 0%, #00d4aa 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.sponsor-tier-title.server::after {
  background: linear-gradient(135deg, #00ff88 0%, #00d4aa 100%);
}

/* Sponsor Container */
.sponsor-tier-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  justify-items: center;
}

/* Individual Sponsor Cards */
.sponsor {
  background: var(--card-color);
  border-radius: 20px;
  padding: 2rem;
  text-align: center;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  border: 2px solid transparent;
  animation: fadeInScale 0.6s ease-out;
  width: 100%;
  min-height: 320px;
  max-width: 300px;
  display: flex;
  flex-direction: column;
}


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

.sponsor:hover::before {
  left: 100%;
}

.sponsor:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow: 0 15px 30px rgba(0, 0, 255, 0.2);
  border-color: var(--link-color);
}


/* Sponsor Image */
.sponsor-image-container {
  margin-bottom: 1.5rem;
  position: relative;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sponsor-image-wrapper {
  display: block;
  border-radius: 15px;
  overflow: hidden;
  transition: transform 0.3s ease;
}

.sponsor-image {
  width: 100%;
  height: 160px;
  object-fit: contain;
  transition: all 0.3s ease;
  background: white;
  border-radius: 10px;
  padding: 1rem;
}

.sponsor:hover .sponsor-image {
  transform: scale(1.1);
  filter: brightness(1.1);
}

/* Sponsor Info */
.sponsor-info {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
  flex-shrink: 0;
}

.sponsor-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text-color);
  text-decoration: none;
  transition: all 0.3s ease;
  display: inline-block;
}

.sponsor-title:hover {
  color: var(--link-color);
  transform: scale(1.05);
}

/* Become a Sponsor Button */
.become-a-sponsor {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 2rem;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  text-decoration: none;
  border-radius: 50px;
  font-weight: 700;
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: all 0.3s ease;
  box-shadow: 0 8px 25px rgba(0, 0, 255, 0.3);
  position: relative;
  overflow: hidden;
}

.become-a-sponsor::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.6s;
}

.become-a-sponsor:hover::before {
  left: 100%;
}

.become-a-sponsor:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
}

/* Animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Responsive Design */
@media (max-width: 768px) {
  .sponsors-section {
    padding: 1rem;
  }
  
  .sponsor-tier-title {
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
  }
  
  .sponsor-tier-container {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .sponsor {
    padding: 1.5rem;
    min-height: 280px;
    max-width: none;
  }
  
  .sponsor-image-container {
    height: 140px;
  }
  
  .sponsor-image {
    height: 140px;
  }
  
  .become-a-sponsor {
    font-size: 1rem;
    padding: 0.8rem 1.5rem;
  }
}

@media (max-width: 480px) {
  .sponsor-tier-title {
    font-size: 1.3rem;
  }
  
  .sponsor {
    min-height: 260px;
  }
  
  .sponsor-title {
    font-size: 1.1rem;
  }
  
  .sponsor-image-container {
    height: 120px;
  }
  
  .sponsor-image {
    height: 120px;
  }
}
/* ===== MEMBERSHIP PAGE STYLING ===== */
.membership-section {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
  animation: fadeInUp 0.8s ease-out;
}

.membership-container {
  display: grid;
  gap: 2rem;
  margin-top: 3rem;
}

.membership-card {
  background: var(--card-color);
  border-radius: 15px;
  padding: 2rem;
  border: 2px solid transparent;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  animation: slideInLeft 0.6s ease-out;
}


.membership-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent);
  transition: left 0.6s;
}

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

.membership-card:hover {
  transform: translateY(-5px);
  border-color: var(--link-color);
  box-shadow: 0 15px 30px rgba(0, 0, 255, 0.2);
}


/* Special styling for important membership types */
.membership-card.founding-member {
  border: 2px solid #ffd700;
  background: linear-gradient(135deg, var(--card-color) 0%, rgba(255, 215, 0, 0.1) 100%);
}


.membership-card.lifetime-member {
  border: 2px solid #c0c0c0;
  background: linear-gradient(135deg, var(--card-color) 0%, rgba(192, 192, 192, 0.1) 100%);
}


.membership-card.voting-rights {
  border: 2px solid #00ff88;
  background: linear-gradient(135deg, var(--card-color) 0%, rgba(0, 255, 136, 0.1) 100%);
}


.membership-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.membership-number {
  background: var(--link-color);
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 25px;
  font-weight: 700;
  font-size: 0.9rem;
  min-width: 60px;
  text-align: center;
}

.membership-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-color);
}

.membership-title i {
  color: var(--link-color);
  font-size: 1.2rem;
}

.membership-content {
  color: var(--light-text-color);
  line-height: 1.7;
}

.membership-content p {
  margin-bottom: 1rem;
}

.membership-content ul {
  margin: 1rem 0;
  padding-left: 1.5rem;
}

.membership-content li {
  margin-bottom: 0.5rem;
  list-style-type: disc;
}

.membership-subsection {
  margin-top: 1.5rem;
  padding: 1rem;
  background: rgba(0, 0, 255, 0.05);
  border-radius: 10px;
  border-left: 4px solid var(--link-color);
}


.membership-subsection h4 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-color);
  font-weight: 700;
  margin-bottom: 1rem;
  font-size: 1.1rem;
}

.membership-subsection h4 i {
  color: var(--link-color);
}

.membership-subsection ul {
  margin-top: 0.5rem;
}

.membership-subsection p {
  margin-top: 1rem;
  font-style: italic;
  color: var(--light-text-color);
}

/* Call to Action */
.membership-cta {
  text-align: center;
  margin-top: 4rem;
  padding: 3rem;
  background: linear-gradient(135deg, var(--link-color) 0%, #4169E1 100%);
  border-radius: 20px;
  color: white;
  position: relative;
  overflow: hidden;
}

.membership-cta::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 10px,
    rgba(255, 255, 255, 0.05) 10px,
    rgba(255, 255, 255, 0.05) 20px
  );
  animation: slide 20s linear infinite;
}

@keyframes slide {
  0% { transform: translateX(-50px) translateY(-50px); }
  100% { transform: translateX(50px) translateY(50px); }
}

.membership-cta h3 {
  font-size: 2rem;
  margin-bottom: 0.5rem;
  position: relative;
  z-index: 1;
}

.membership-cta p {
  font-size: 1.2rem;
  margin-bottom: 2rem;
  opacity: 0.9;
  position: relative;
  z-index: 1;
}

.join-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 2rem;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  text-decoration: none;
  border-radius: 50px;
  font-weight: 700;
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: all 0.3s ease;
  box-shadow: 0 8px 25px rgba(0, 0, 255, 0.3);
  position: relative;
  z-index: 1;
}

.join-button:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

/* Staggered animations */
.membership-card:nth-child(1) { animation-delay: 0s; }
.membership-card:nth-child(2) { animation-delay: 0.1s; }
.membership-card:nth-child(3) { animation-delay: 0.2s; }
.membership-card:nth-child(4) { animation-delay: 0.3s; }
.membership-card:nth-child(5) { animation-delay: 0.4s; }
.membership-card:nth-child(6) { animation-delay: 0.5s; }
.membership-card:nth-child(7) { animation-delay: 0.6s; }
.membership-card:nth-child(8) { animation-delay: 0.7s; }
.membership-card:nth-child(9) { animation-delay: 0.8s; }
.membership-card:nth-child(10) { animation-delay: 0.9s; }

/* Responsive Design */
@media (max-width: 768px) {
  .membership-section {
    padding: 1rem;
  }
  
  .membership-card {
    padding: 1.5rem;
  }
  
  .membership-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  
  .membership-title {
    font-size: 1.3rem;
  }
  
  .membership-cta {
    padding: 2rem 1rem;
  }
  
  .membership-cta h3 {
    font-size: 1.5rem;
  }
  
  .membership-cta p {
    font-size: 1rem;
  }
  
  .join-button {
    font-size: 1rem;
    padding: 0.8rem 1.5rem;
  }
}

@media (max-width: 480px) {
  .membership-number {
    font-size: 0.8rem;
    padding: 0.4rem 0.8rem;
    min-width: 50px;
  }
  
  .membership-title {
    font-size: 1.2rem;
  }
  
  .membership-title i {
    font-size: 1rem;
  }
  
  .membership-subsection {
    padding: 0.8rem;
  }
}

/* ======================================
   GALLERY SECTION STYLES
   ====================================== */

.gallery-section {
  padding: 4rem 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.gallery-container {
  margin-top: 3rem;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-bottom: 2rem;
}

.gallery-photo {
  display: block;
  text-decoration: none;
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s ease;
  animation: fadeInUp 0.6s ease forwards;
  opacity: 0;
  transform: translateY(30px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.gallery-photo:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 40px rgba(0, 0, 255, 0.2);
}

.gallery-photo_image {
  width: 100%;
  height: 250px;
  object-fit: cover;
  transition: all 0.3s ease;
}

.gallery-photo:hover .gallery-photo_image {
  transform: scale(1.05);
}

.gallery-photo_caption-container {
  padding: 1.5rem;
  background: var(--background-color);
  border-top: 3px solid var(--link-color);
}

.gallery-photo_caption-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-color);
  text-align: center;
  margin: 0;
  letter-spacing: 0.5px;
}

/* Dark mode acrylic effect for gallery photos - matching footer theme */


/* Animation delays for staggered effect */
.gallery-photo:nth-child(1) { animation-delay: 0.1s; }
.gallery-photo:nth-child(2) { animation-delay: 0.2s; }
.gallery-photo:nth-child(3) { animation-delay: 0.3s; }
.gallery-photo:nth-child(4) { animation-delay: 0.4s; }
.gallery-photo:nth-child(5) { animation-delay: 0.5s; }
.gallery-photo:nth-child(6) { animation-delay: 0.6s; }

/* Responsive Design */
@media (max-width: 1024px) {
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .gallery-section {
    padding: 2rem 1rem;
  }
  
  .gallery-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .gallery-photo_image {
    height: 200px;
  }
  
  .gallery-photo_caption-container {
    padding: 1rem;
  }
  
  .gallery-photo_caption-title {
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  .gallery-section {
    padding: 1.5rem 0.5rem;
  }
  
  .gallery-grid {
    gap: 1rem;
  }
  
  .gallery-photo_image {
    height: 180px;
  }
  
  .gallery-photo_caption-container {
    padding: 0.8rem;
  }
  
  .gallery-photo_caption-title {
    font-size: 0.9rem;
  }
}

/* Ensure images load properly */
.gallery-photo_image {
  background-color: var(--light-text-color);
  transition: all 0.3s ease;
}

.gallery-photo_image:hover {
  filter: brightness(1.05);
}

/* Focus states for accessibility */
.gallery-photo:focus {
  outline: 2px solid var(--link-color);
  outline-offset: 2px;
}

.gallery-photo:focus .gallery-photo_image {
  transform: scale(1.02);
}

/* Expandable Past Executive Committee Styles */
.expandable-header {
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: all 0.3s ease;
  padding: 0.5rem;
  border-radius: 5px;
}

.expandable-header:hover {
  background-color: var(--card-color);
  transform: translateY(-2px);
}

.expand-icon {
  font-size: 1.2rem;
  transition: transform 0.3s ease;
  color: #0000FF;
}

.past-eboard-content {
  overflow: hidden;
  transition: all 0.3s ease;
}

.past-eboard-content.show {
  display: block !important;
}

/* Make the year text more prominent when clickable */
.expandable-header span {
  font-weight: 600;
}

/* New CSS classes to replace inline styles */
.active-nav-link {
  color: #0000FF !important;
  opacity: 1 !important;
}

.events-section-title {
  font-weight: 800 !important;
  text-align: center !important;
}

/* ===== RECRUITMENT PAGE STYLING ===== */

/* Hero Section */
.recruitment-hero {
  text-align: center;
  padding: 60px 20px;
  background: linear-gradient(135deg, var(--card-color) 0%, var(--card-color-light) 100%);
  border-radius: 20px;
  margin: 40px 20px;
}

.recruitment-cta {
  display: flex;
  gap: 20px;
  justify-content: center;
  align-items: center;
  margin-top: 40px;
  flex-wrap: wrap;
}

.cta-button {
  padding: 15px 30px;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 600;
  font-size: 1.1rem;
  transition: all 0.3s ease;
  display: inline-block;
  border: 2px solid transparent;
}

.cta-button.primary {
  background: var(--link-color);
  color: white;
  box-shadow: 0 4px 15px rgba(0, 0, 255, 0.2);
}

.cta-button.primary:hover {
  background: #0000CC;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 255, 0.3);
}

.cta-button.secondary {
  background: transparent;
  color: var(--link-color);
  border-color: var(--link-color);
}

.cta-button.secondary:hover {
  background: var(--link-color);
  color: white;
  transform: translateY(-2px);
}

/* Benefits Grid */
.why-join-section {
  padding: 80px 20px;
}

.section-title {
  font-size: 2.5rem;
  font-weight: 700;
  text-align: center;
  color: var(--text-color);
  margin-bottom: 50px;
}

.benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.benefit-card {
  background: var(--card-color);
  
  padding: 30px;
  border-radius: 15px;
  text-align: center;
  transition: all 0.3s ease;
  border: 2px solid transparent;
}

.benefit-card:hover {
  transform: translateY(-5px);
  border-color: var(--link-color);
  box-shadow: 0 10px 30px rgba(0, 0, 255, 0.1);
}

.benefit-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 20px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 2rem;
}

.benefit-card h3 {
  color: var(--text-color);
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 15px;
}

.benefit-card p {
  color: var(--light-text-color);
  line-height: 1.6;
}

/* Offerings Section */
.offerings-section {
  padding: 80px 20px;
  background: var(--card-color);
}

.offerings-container {
  max-width: 800px;
  margin: 0 auto;
}

.offering-item {
  display: flex;
  align-items: flex-start;
  gap: 25px;
  margin-bottom: 40px;
  padding: 25px;
  background: white;
  border-radius: 15px;
  transition: all 0.3s ease;
}

.offering-item:hover {
  transform: translateX(10px);
  box-shadow: 0 5px 20px rgba(0, 0, 255, 0.1);
}

.offering-number {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.offering-content h3 {
  color: var(--text-color);
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 10px;
}

.offering-content p {
  color: var(--light-text-color);
  line-height: 1.6;
}

/* Requirements Section */
.requirements-section {
  padding: 80px 20px;
}

.requirements-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 40px;
  max-width: 1000px;
  margin: 0 auto;
}

.requirement-box,
.preferred-box {
  background: var(--card-color);
  padding: 30px;
  border-radius: 15px;
  border-left: 5px solid var(--link-color);
}

.preferred-box {
  border-left-color: #FFA500;
}


.requirement-box h3,
.preferred-box h3 {
  color: var(--text-color);
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 20px;
}

.requirements-list,
.preferred-list {
  list-style: none;
  padding: 0;
}

.requirements-list li,
.preferred-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  color: var(--text-color);
}

.requirements-list i {
  color: #28a745;
}

.preferred-list i {
  color: #FFA500;
}
/* Application Process */
.application-process {
  padding: 80px 20px;
  background: var(--card-color);
}

.process-timeline {
  max-width: 800px;
  margin: 0 auto;
}

.timeline-item {
  display: flex;
  align-items: flex-start;
  gap: 25px;
  margin-bottom: 40px;
  position: relative;
}

.timeline-item:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 25px;
  top: 60px;
  width: 2px;
  height: 40px;
  background: var(--link-color);
  opacity: 0.3;
}

.timeline-number {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.timeline-content {
  background: white;
  padding: 25px;
  border-radius: 15px;
  flex: 1;
}

.timeline-content h3 {
  color: var(--text-color);
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 10px;
}

.timeline-content p {
  color: var(--light-text-color);
  line-height: 1.6;
  margin-bottom: 10px;
}

.timeline-link {
  color: var(--link-color);
  text-decoration: none;
  font-weight: 600;
}

.timeline-link:hover {
  text-decoration: underline;
}

.timeline-note {
  font-size: 0.9rem;
  color: var(--light-text-color);
  font-style: italic;
}

/* Application Form */
.application-form-section {
  padding: 80px 20px;
}

.form-container {
  max-width: 700px;
  margin: 0 auto;
  background: var(--card-color);
  padding: 40px;
  border-radius: 20px;
}

.recruitment-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.form-group {
  display: flex;
  flex-direction: column;
}

.form-group label {
  color: var(--text-color);
  font-weight: 600;
  margin-bottom: 8px;
}

.form-group input,
.form-group select,
.form-group textarea {
  padding: 12px 15px;
  border: 2px solid var(--border-color);
  border-radius: 8px;
  font-size: 1rem;
  background: white;
  color: var(--text-color);
  transition: border-color 0.3s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--link-color);
}

.checkbox-group {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  padding: 8px;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

.checkbox-label:hover {
  background: var(--card-color-light);
}

.checkbox-label input[type="checkbox"] {
  margin: 0;
  width: 18px;
  height: 18px;
  accent-color: #0000FF;
  cursor: pointer;
  border: 2px solid #0000FF;
  border-radius: 3px;
  background-color: white;
  transition: all 0.3s ease;
}

.checkbox-label input[type="checkbox"]:checked {
  background-color: #0000FF;
  border-color: #0000FF;
}

.checkbox-label input[type="checkbox"]:hover {
  border-color: #0000CC;
}

.checkbox-label input[type="checkbox"]:focus {
  outline: none;
  border-color: #0000FF;
}

.form-group.agreement {
  margin-top: 20px;
}

.form-actions {
  display: flex;
  gap: 15px;
  justify-content: center;
  margin-top: 30px;
}

.submit-btn,
.reset-btn {
  padding: 15px 30px;
  border: none;
  border-radius: 8px;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.submit-btn {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
}

.submit-btn:hover {
  /* background: #0000CC; */
  transform: translateY(-2px);
}

.reset-btn {
  background: var(--card-color-light);
  color: var(--text-color);
}

.reset-btn:hover {
  color: #764ba2;
  transform: translateY(-2px);
}

/* Responsive Design */
@media (max-width: 768px) {
  .recruitment-cta {
    flex-direction: column;
    gap: 15px;
  }
  
  .cta-button {
    width: 100%;
    max-width: 300px;
  }
  
  .benefits-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .form-row {
    grid-template-columns: 1fr;
  }
  
  .checkbox-group {
    grid-template-columns: 1fr;
  }
  
  .contact-info {
    grid-template-columns: 1fr;
  }
  
  .contact-item {
    flex-direction: column;
    text-align: center;
  }
  
  .form-actions {
    flex-direction: column;
  }
  
  .section-title {
    font-size: 2rem;
  }
  
  .requirements-content {
    grid-template-columns: 1fr;
  }
}
/* home button */
   .color-gred {
    
      display: inline-flex;
      align-items: center;
      background: linear-gradient(135deg, #667eea, #764ba2);
      text-decoration: none;
      color: white;
      padding: 0.25rem 0.5rem;
      border-radius: 6px;
      font-weight: 500;
      font-size: 2rem;
      transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      position: relative;
      overflow: hidden;
      box-shadow: 0 2px 6px rgba(102, 126, 234, 0.25);
      text-shadow: none;
      text-align: center;
      margin-bottom: 1.5rem;  
    }

    .color-gred::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
      transition: left 0.4s ease;
      
    }

    .color-gred:hover {
      background: linear-gradient(135deg, #764ba2, #8b5cf6);
      color: white;
      text-decoration: none;
      transform: translateY(-1px) scale(1.05);
      box-shadow: 0 4px 10px rgba(102, 126, 234, 0.5);
      text-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
    }

    .color-gred:hover::before {
      left: 100%;
    }