/*!******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[2].use[1]!./node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[14].oneOf[2].use[2]!./node_modules/next/font/google/target.css?{"path":"app/layout.tsx","import":"Inter","arguments":[{"subsets":["latin"],"variable":"--font-inter"}],"variableName":"inter"} ***!
  \******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* cyrillic-ext */
@font-face {
  font-family: '__Inter_f367f3';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/ba9851c3c22cd980-s.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: '__Inter_f367f3';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/21350d82a1f187e9-s.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: '__Inter_f367f3';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/c5fe6dc8356a8c31-s.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: '__Inter_f367f3';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/19cfc7226ec3afaa-s.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: '__Inter_f367f3';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/df0a9ae256c0569c-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: '__Inter_f367f3';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/8e9860b6e62d6359-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: '__Inter_f367f3';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/e4af272ccee01ff0-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}@font-face {font-family: '__Inter_Fallback_f367f3';src: local("Arial");ascent-override: 90.49%;descent-override: 22.56%;line-gap-override: 0.00%;size-adjust: 107.06%
}.__className_f367f3 {font-family: '__Inter_f367f3', '__Inter_Fallback_f367f3';font-style: normal
}.__variable_f367f3 {--font-inter: '__Inter_f367f3', '__Inter_Fallback_f367f3'
}

/*!**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[2].use[1]!./node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[14].oneOf[2].use[2]!./node_modules/next/font/google/target.css?{"path":"app/layout.tsx","import":"Playfair_Display","arguments":[{"subsets":["latin"],"variable":"--font-playfair","weight":["500","600","700","800"]}],"variableName":"playfair"} ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* cyrillic */
@font-face {
  font-family: '__Playfair_Display_7ac052';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/47f136985ef5b5cb-s.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: '__Playfair_Display_7ac052';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/4ead58c4dcc3f285-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: '__Playfair_Display_7ac052';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/28a2004cf8372660-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: '__Playfair_Display_7ac052';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/eaead17c7dbfcd5d-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
  font-family: '__Playfair_Display_7ac052';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/47f136985ef5b5cb-s.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: '__Playfair_Display_7ac052';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/4ead58c4dcc3f285-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: '__Playfair_Display_7ac052';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/28a2004cf8372660-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: '__Playfair_Display_7ac052';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/eaead17c7dbfcd5d-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
  font-family: '__Playfair_Display_7ac052';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/47f136985ef5b5cb-s.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: '__Playfair_Display_7ac052';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/4ead58c4dcc3f285-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: '__Playfair_Display_7ac052';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/28a2004cf8372660-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: '__Playfair_Display_7ac052';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/eaead17c7dbfcd5d-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
  font-family: '__Playfair_Display_7ac052';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/_next/static/media/47f136985ef5b5cb-s.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: '__Playfair_Display_7ac052';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/_next/static/media/4ead58c4dcc3f285-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: '__Playfair_Display_7ac052';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/_next/static/media/28a2004cf8372660-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: '__Playfair_Display_7ac052';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/_next/static/media/eaead17c7dbfcd5d-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}@font-face {font-family: '__Playfair_Display_Fallback_7ac052';src: local("Times New Roman");ascent-override: 97.25%;descent-override: 22.56%;line-gap-override: 0.00%;size-adjust: 111.26%
}.__className_7ac052 {font-family: '__Playfair_Display_7ac052', '__Playfair_Display_Fallback_7ac052';font-style: normal
}.__variable_7ac052 {--font-playfair: '__Playfair_Display_7ac052', '__Playfair_Display_Fallback_7ac052'
}

/*!*******************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!./app/components/styles/globals.css ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************/
*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}/*
! tailwindcss v3.4.18 | MIT License | https://tailwindcss.com
*//*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: Inter, system-ui, sans-serif; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/
dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
.pointer-events-none {
  pointer-events: none;
}
.pointer-events-auto {
  pointer-events: auto;
}
.visible {
  visibility: visible;
}
.static {
  position: static;
}
.fixed {
  position: fixed;
}
.absolute {
  position: absolute;
}
.relative {
  position: relative;
}
.sticky {
  position: sticky;
}
.inset-0 {
  inset: 0px;
}
.inset-y-0 {
  top: 0px;
  bottom: 0px;
}
.-bottom-1 {
  bottom: -0.25rem;
}
.-right-1 {
  right: -0.25rem;
}
.-right-2 {
  right: -0.5rem;
}
.-top-1 {
  top: -0.25rem;
}
.-top-12 {
  top: -3rem;
}
.-top-2 {
  top: -0.5rem;
}
.bottom-0 {
  bottom: 0px;
}
.bottom-20 {
  bottom: 5rem;
}
.bottom-4 {
  bottom: 1rem;
}
.bottom-full {
  bottom: 100%;
}
.left-0 {
  left: 0px;
}
.left-1\/2 {
  left: 50%;
}
.left-3 {
  left: 0.75rem;
}
.left-4 {
  left: 1rem;
}
.left-6 {
  left: 1.5rem;
}
.left-\[2px\] {
  left: 2px;
}
.left-full {
  left: 100%;
}
.right-0 {
  right: 0px;
}
.right-1 {
  right: 0.25rem;
}
.right-2 {
  right: 0.5rem;
}
.right-3 {
  right: 0.75rem;
}
.right-4 {
  right: 1rem;
}
.right-full {
  right: 100%;
}
.top-0 {
  top: 0px;
}
.top-0\.5 {
  top: 0.125rem;
}
.top-1 {
  top: 0.25rem;
}
.top-1\/2 {
  top: 50%;
}
.top-16 {
  top: 4rem;
}
.top-2 {
  top: 0.5rem;
}
.top-4 {
  top: 1rem;
}
.top-8 {
  top: 2rem;
}
.top-full {
  top: 100%;
}
.z-10 {
  z-index: 10;
}
.z-20 {
  z-index: 20;
}
.z-40 {
  z-index: 40;
}
.z-50 {
  z-index: 50;
}
.z-\[9999\] {
  z-index: 9999;
}
.mx-1 {
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}
.mx-2 {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}
.mx-4 {
  margin-left: 1rem;
  margin-right: 1rem;
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.-mb-px {
  margin-bottom: -1px;
}
.-ml-1 {
  margin-left: -0.25rem;
}
.-mt-1 {
  margin-top: -0.25rem;
}
.mb-1 {
  margin-bottom: 0.25rem;
}
.mb-2 {
  margin-bottom: 0.5rem;
}
.mb-3 {
  margin-bottom: 0.75rem;
}
.mb-4 {
  margin-bottom: 1rem;
}
.mb-6 {
  margin-bottom: 1.5rem;
}
.mb-8 {
  margin-bottom: 2rem;
}
.ml-1 {
  margin-left: 0.25rem;
}
.ml-2 {
  margin-left: 0.5rem;
}
.ml-3 {
  margin-left: 0.75rem;
}
.ml-4 {
  margin-left: 1rem;
}
.ml-72 {
  margin-left: 18rem;
}
.ml-8 {
  margin-left: 2rem;
}
.ml-auto {
  margin-left: auto;
}
.mr-1 {
  margin-right: 0.25rem;
}
.mr-2 {
  margin-right: 0.5rem;
}
.mr-3 {
  margin-right: 0.75rem;
}
.mt-0\.5 {
  margin-top: 0.125rem;
}
.mt-1 {
  margin-top: 0.25rem;
}
.mt-2 {
  margin-top: 0.5rem;
}
.mt-3 {
  margin-top: 0.75rem;
}
.mt-4 {
  margin-top: 1rem;
}
.mt-6 {
  margin-top: 1.5rem;
}
.mt-8 {
  margin-top: 2rem;
}
.line-clamp-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.line-clamp-3 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.block {
  display: block;
}
.inline-block {
  display: inline-block;
}
.inline {
  display: inline;
}
.flex {
  display: flex;
}
.inline-flex {
  display: inline-flex;
}
.table {
  display: table;
}
.grid {
  display: grid;
}
.hidden {
  display: none;
}
.h-0 {
  height: 0px;
}
.h-0\.5 {
  height: 0.125rem;
}
.h-1 {
  height: 0.25rem;
}
.h-10 {
  height: 2.5rem;
}
.h-12 {
  height: 3rem;
}
.h-16 {
  height: 4rem;
}
.h-2 {
  height: 0.5rem;
}
.h-20 {
  height: 5rem;
}
.h-24 {
  height: 6rem;
}
.h-3 {
  height: 0.75rem;
}
.h-32 {
  height: 8rem;
}
.h-4 {
  height: 1rem;
}
.h-5 {
  height: 1.25rem;
}
.h-6 {
  height: 1.5rem;
}
.h-64 {
  height: 16rem;
}
.h-8 {
  height: 2rem;
}
.h-80 {
  height: 20rem;
}
.h-9 {
  height: 2.25rem;
}
.h-96 {
  height: 24rem;
}
.h-\[32rem\] {
  height: 32rem;
}
.h-\[80vh\] {
  height: 80vh;
}
.h-auto {
  height: auto;
}
.h-full {
  height: 100%;
}
.max-h-60 {
  max-height: 15rem;
}
.max-h-64 {
  max-height: 16rem;
}
.max-h-80 {
  max-height: 20rem;
}
.max-h-96 {
  max-height: 24rem;
}
.max-h-\[90vh\] {
  max-height: 90vh;
}
.max-h-full {
  max-height: 100%;
}
.min-h-64 {
  min-height: 16rem;
}
.min-h-full {
  min-height: 100%;
}
.min-h-screen {
  min-height: 100vh;
}
.w-0 {
  width: 0px;
}
.w-1 {
  width: 0.25rem;
}
.w-1\/2 {
  width: 50%;
}
.w-10 {
  width: 2.5rem;
}
.w-11 {
  width: 2.75rem;
}
.w-12 {
  width: 3rem;
}
.w-16 {
  width: 4rem;
}
.w-2 {
  width: 0.5rem;
}
.w-20 {
  width: 5rem;
}
.w-24 {
  width: 6rem;
}
.w-3 {
  width: 0.75rem;
}
.w-3\/4 {
  width: 75%;
}
.w-32 {
  width: 8rem;
}
.w-4 {
  width: 1rem;
}
.w-48 {
  width: 12rem;
}
.w-5 {
  width: 1.25rem;
}
.w-6 {
  width: 1.5rem;
}
.w-64 {
  width: 16rem;
}
.w-7 {
  width: 1.75rem;
}
.w-72 {
  width: 18rem;
}
.w-8 {
  width: 2rem;
}
.w-80 {
  width: 20rem;
}
.w-9 {
  width: 2.25rem;
}
.w-96 {
  width: 24rem;
}
.w-\[320px\] {
  width: 320px;
}
.w-\[32rem\] {
  width: 32rem;
}
.w-full {
  width: 100%;
}
.min-w-0 {
  min-width: 0px;
}
.min-w-48 {
  min-width: 12rem;
}
.min-w-\[20px\] {
  min-width: 20px;
}
.min-w-full {
  min-width: 100%;
}
.max-w-2xl {
  max-width: 42rem;
}
.max-w-4xl {
  max-width: 56rem;
}
.max-w-6xl {
  max-width: 72rem;
}
.max-w-7xl {
  max-width: 80rem;
}
.max-w-full {
  max-width: 100%;
}
.max-w-lg {
  max-width: 32rem;
}
.max-w-md {
  max-width: 28rem;
}
.max-w-none {
  max-width: none;
}
.max-w-sm {
  max-width: 24rem;
}
.max-w-xs {
  max-width: 20rem;
}
.flex-1 {
  flex: 1 1 0%;
}
.flex-shrink-0 {
  flex-shrink: 0;
}
.shrink-0 {
  flex-shrink: 0;
}
.grow {
  flex-grow: 1;
}
.-translate-x-1\/2 {
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-y-1\/2 {
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-0 {
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-3 {
  --tw-translate-x: 0.75rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-4 {
  --tw-translate-x: 1rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-5 {
  --tw-translate-x: 1.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-full {
  --tw-translate-x: 100%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-rotate-90 {
  --tw-rotate: -90deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-180 {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
@keyframes bounce {

  0%, 100% {
    transform: translateY(-25%);
    animation-timing-function: cubic-bezier(0.8,0,1,1);
  }

  50% {
    transform: none;
    animation-timing-function: cubic-bezier(0,0,0.2,1);
  }
}
.animate-bounce {
  animation: bounce 1s infinite;
}
@keyframes pulse {

  50% {
    opacity: .5;
  }
}
.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes spin {

  to {
    transform: rotate(360deg);
  }
}
.animate-spin {
  animation: spin 1s linear infinite;
}
.cursor-default {
  cursor: default;
}
.cursor-move {
  cursor: move;
}
.cursor-not-allowed {
  cursor: not-allowed;
}
.cursor-pointer {
  cursor: pointer;
}
.cursor-text {
  cursor: text;
}
.cursor-wait {
  cursor: wait;
}
.select-none {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.resize-none {
  resize: none;
}
.resize-y {
  resize: vertical;
}
.resize-x {
  resize: horizontal;
}
.resize {
  resize: both;
}
.appearance-none {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-cols-7 {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
.grid-cols-8 {
  grid-template-columns: repeat(8, minmax(0, 1fr));
}
.flex-row-reverse {
  flex-direction: row-reverse;
}
.flex-col {
  flex-direction: column;
}
.flex-wrap {
  flex-wrap: wrap;
}
.items-start {
  align-items: flex-start;
}
.items-end {
  align-items: flex-end;
}
.items-center {
  align-items: center;
}
.justify-start {
  justify-content: flex-start;
}
.justify-end {
  justify-content: flex-end;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.gap-0 {
  gap: 0px;
}
.gap-1 {
  gap: 0.25rem;
}
.gap-2 {
  gap: 0.5rem;
}
.gap-3 {
  gap: 0.75rem;
}
.gap-4 {
  gap: 1rem;
}
.gap-6 {
  gap: 1.5rem;
}
.gap-x-3 {
  -moz-column-gap: 0.75rem;
       column-gap: 0.75rem;
}
.gap-y-1 {
  row-gap: 0.25rem;
}
.-space-x-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(-0.5rem * var(--tw-space-x-reverse));
  margin-left: calc(-0.5rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-x-1 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(0.25rem * var(--tw-space-x-reverse));
  margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-x-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-x-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(0.75rem * var(--tw-space-x-reverse));
  margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-x-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(1rem * var(--tw-space-x-reverse));
  margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-x-6 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(1.5rem * var(--tw-space-x-reverse));
  margin-left: calc(1.5rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-x-8 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(2rem * var(--tw-space-x-reverse));
  margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-y-1 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}
.space-y-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
.space-y-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}
.space-y-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}
.space-y-6 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}
.space-x-reverse > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 1;
}
.divide-y > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-y-reverse: 0;
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}
.divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-divide-opacity, 1));
}
.divide-secondary-200 > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(228 228 231 / var(--tw-divide-opacity, 1));
}
.overflow-auto {
  overflow: auto;
}
.overflow-hidden {
  overflow: hidden;
}
.overflow-x-auto {
  overflow-x: auto;
}
.overflow-y-auto {
  overflow-y: auto;
}
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.whitespace-nowrap {
  white-space: nowrap;
}
.whitespace-pre-wrap {
  white-space: pre-wrap;
}
.rounded {
  border-radius: 0.25rem;
}
.rounded-2xl {
  border-radius: 1rem;
}
.rounded-3xl {
  border-radius: 1.5rem;
}
.rounded-full {
  border-radius: 9999px;
}
.rounded-lg {
  border-radius: 0.5rem;
}
.rounded-md {
  border-radius: 0.375rem;
}
.rounded-sm {
  border-radius: 0.125rem;
}
.rounded-xl {
  border-radius: 0.75rem;
}
.rounded-b-2xl {
  border-bottom-right-radius: 1rem;
  border-bottom-left-radius: 1rem;
}
.rounded-l-xl {
  border-top-left-radius: 0.75rem;
  border-bottom-left-radius: 0.75rem;
}
.rounded-r-xl {
  border-top-right-radius: 0.75rem;
  border-bottom-right-radius: 0.75rem;
}
.rounded-t {
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
}
.border {
  border-width: 1px;
}
.border-0 {
  border-width: 0px;
}
.border-2 {
  border-width: 2px;
}
.border-4 {
  border-width: 4px;
}
.border-b {
  border-bottom-width: 1px;
}
.border-b-2 {
  border-bottom-width: 2px;
}
.border-l {
  border-left-width: 1px;
}
.border-l-4 {
  border-left-width: 4px;
}
.border-r {
  border-right-width: 1px;
}
.border-t {
  border-top-width: 1px;
}
.border-dashed {
  border-style: dashed;
}
.border-none {
  border-style: none;
}
.border-black {
  --tw-border-opacity: 1;
  border-color: rgb(0 0 0 / var(--tw-border-opacity, 1));
}
.border-blue-200 {
  --tw-border-opacity: 1;
  border-color: rgb(191 219 254 / var(--tw-border-opacity, 1));
}
.border-blue-500 {
  --tw-border-opacity: 1;
  border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
}
.border-blue-600 {
  --tw-border-opacity: 1;
  border-color: rgb(37 99 235 / var(--tw-border-opacity, 1));
}
.border-current {
  border-color: currentColor;
}
.border-gray-100 {
  --tw-border-opacity: 1;
  border-color: rgb(243 244 246 / var(--tw-border-opacity, 1));
}
.border-gray-200 {
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}
.border-gray-300 {
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
}
.border-gray-800 {
  --tw-border-opacity: 1;
  border-color: rgb(31 41 55 / var(--tw-border-opacity, 1));
}
.border-gray-900 {
  --tw-border-opacity: 1;
  border-color: rgb(17 24 39 / var(--tw-border-opacity, 1));
}
.border-green-200 {
  --tw-border-opacity: 1;
  border-color: rgb(187 247 208 / var(--tw-border-opacity, 1));
}
.border-primary-200 {
  --tw-border-opacity: 1;
  border-color: rgb(186 230 253 / var(--tw-border-opacity, 1));
}
.border-primary-500 {
  --tw-border-opacity: 1;
  border-color: rgb(14 165 233 / var(--tw-border-opacity, 1));
}
.border-primary-600 {
  --tw-border-opacity: 1;
  border-color: rgb(2 132 199 / var(--tw-border-opacity, 1));
}
.border-red-200 {
  --tw-border-opacity: 1;
  border-color: rgb(254 202 202 / var(--tw-border-opacity, 1));
}
.border-red-500 {
  --tw-border-opacity: 1;
  border-color: rgb(239 68 68 / var(--tw-border-opacity, 1));
}
.border-secondary-100 {
  --tw-border-opacity: 1;
  border-color: rgb(244 244 245 / var(--tw-border-opacity, 1));
}
.border-secondary-200 {
  --tw-border-opacity: 1;
  border-color: rgb(228 228 231 / var(--tw-border-opacity, 1));
}
.border-secondary-300 {
  --tw-border-opacity: 1;
  border-color: rgb(212 212 216 / var(--tw-border-opacity, 1));
}
.border-secondary-700 {
  --tw-border-opacity: 1;
  border-color: rgb(63 63 70 / var(--tw-border-opacity, 1));
}
.border-transparent {
  border-color: transparent;
}
.border-white {
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
}
.border-white\/20 {
  border-color: rgb(255 255 255 / 0.2);
}
.border-white\/30 {
  border-color: rgb(255 255 255 / 0.3);
}
.border-yellow-200 {
  --tw-border-opacity: 1;
  border-color: rgb(254 240 138 / var(--tw-border-opacity, 1));
}
.border-yellow-400 {
  --tw-border-opacity: 1;
  border-color: rgb(250 204 21 / var(--tw-border-opacity, 1));
}
.border-b-secondary-800 {
  --tw-border-opacity: 1;
  border-bottom-color: rgb(39 39 42 / var(--tw-border-opacity, 1));
}
.border-b-transparent {
  border-bottom-color: transparent;
}
.border-l-gray-300 {
  --tw-border-opacity: 1;
  border-left-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
}
.border-l-green-500 {
  --tw-border-opacity: 1;
  border-left-color: rgb(34 197 94 / var(--tw-border-opacity, 1));
}
.border-l-red-500 {
  --tw-border-opacity: 1;
  border-left-color: rgb(239 68 68 / var(--tw-border-opacity, 1));
}
.border-l-secondary-800 {
  --tw-border-opacity: 1;
  border-left-color: rgb(39 39 42 / var(--tw-border-opacity, 1));
}
.border-l-transparent {
  border-left-color: transparent;
}
.border-l-yellow-500 {
  --tw-border-opacity: 1;
  border-left-color: rgb(234 179 8 / var(--tw-border-opacity, 1));
}
.border-r-secondary-800 {
  --tw-border-opacity: 1;
  border-right-color: rgb(39 39 42 / var(--tw-border-opacity, 1));
}
.border-r-transparent {
  border-right-color: transparent;
}
.border-t-black {
  --tw-border-opacity: 1;
  border-top-color: rgb(0 0 0 / var(--tw-border-opacity, 1));
}
.border-t-gray-600 {
  --tw-border-opacity: 1;
  border-top-color: rgb(75 85 99 / var(--tw-border-opacity, 1));
}
.border-t-secondary-800 {
  --tw-border-opacity: 1;
  border-top-color: rgb(39 39 42 / var(--tw-border-opacity, 1));
}
.border-t-transparent {
  border-top-color: transparent;
}
.border-t-white {
  --tw-border-opacity: 1;
  border-top-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
}
.bg-black {
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
}
.bg-black\/20 {
  background-color: rgb(0 0 0 / 0.2);
}
.bg-black\/50 {
  background-color: rgb(0 0 0 / 0.5);
}
.bg-black\/80 {
  background-color: rgb(0 0 0 / 0.8);
}
.bg-blue-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));
}
.bg-blue-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
}
.bg-blue-50\/50 {
  background-color: rgb(239 246 255 / 0.5);
}
.bg-blue-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
}
.bg-blue-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
}
.bg-brand-green-700 {
  --tw-bg-opacity: 1;
  background-color: rgb(45 90 45 / var(--tw-bg-opacity, 1));
}
.bg-gray-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}
.bg-gray-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
}
.bg-gray-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(156 163 175 / var(--tw-bg-opacity, 1));
}
.bg-gray-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}
.bg-gray-50\/50 {
  background-color: rgb(249 250 251 / 0.5);
}
.bg-gray-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(107 114 128 / var(--tw-bg-opacity, 1));
}
.bg-gray-900 {
  --tw-bg-opacity: 1;
  background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1));
}
.bg-green-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(220 252 231 / var(--tw-bg-opacity, 1));
}
.bg-green-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(74 222 128 / var(--tw-bg-opacity, 1));
}
.bg-green-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(240 253 244 / var(--tw-bg-opacity, 1));
}
.bg-green-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1));
}
.bg-green-500\/20 {
  background-color: rgb(34 197 94 / 0.2);
}
.bg-indigo-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(99 102 241 / var(--tw-bg-opacity, 1));
}
.bg-orange-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 237 213 / var(--tw-bg-opacity, 1));
}
.bg-orange-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(234 88 12 / var(--tw-bg-opacity, 1));
}
.bg-pink-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(236 72 153 / var(--tw-bg-opacity, 1));
}
.bg-primary-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(224 242 254 / var(--tw-bg-opacity, 1));
}
.bg-primary-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(240 249 255 / var(--tw-bg-opacity, 1));
}
.bg-primary-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(2 132 199 / var(--tw-bg-opacity, 1));
}
.bg-purple-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(243 232 255 / var(--tw-bg-opacity, 1));
}
.bg-purple-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(168 85 247 / var(--tw-bg-opacity, 1));
}
.bg-purple-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(147 51 234 / var(--tw-bg-opacity, 1));
}
.bg-red-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
}
.bg-red-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
}
.bg-red-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
}
.bg-red-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
}
.bg-secondary-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(244 244 245 / var(--tw-bg-opacity, 1));
}
.bg-secondary-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(228 228 231 / var(--tw-bg-opacity, 1));
}
.bg-secondary-300 {
  --tw-bg-opacity: 1;
  background-color: rgb(212 212 216 / var(--tw-bg-opacity, 1));
}
.bg-secondary-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(250 250 250 / var(--tw-bg-opacity, 1));
}
.bg-secondary-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(82 82 91 / var(--tw-bg-opacity, 1));
}
.bg-secondary-800 {
  --tw-bg-opacity: 1;
  background-color: rgb(39 39 42 / var(--tw-bg-opacity, 1));
}
.bg-secondary-900 {
  --tw-bg-opacity: 1;
  background-color: rgb(24 24 27 / var(--tw-bg-opacity, 1));
}
.bg-transparent {
  background-color: transparent;
}
.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.bg-white\/50 {
  background-color: rgb(255 255 255 / 0.5);
}
.bg-white\/70 {
  background-color: rgb(255 255 255 / 0.7);
}
.bg-white\/80 {
  background-color: rgb(255 255 255 / 0.8);
}
.bg-yellow-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 249 195 / var(--tw-bg-opacity, 1));
}
.bg-yellow-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 252 232 / var(--tw-bg-opacity, 1));
}
.bg-yellow-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(234 179 8 / var(--tw-bg-opacity, 1));
}
.bg-opacity-50 {
  --tw-bg-opacity: 0.5;
}
.bg-opacity-90 {
  --tw-bg-opacity: 0.9;
}
.bg-gradient-to-br {
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}
.bg-gradient-to-r {
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
}
.bg-gradient-to-t {
  background-image: linear-gradient(to top, var(--tw-gradient-stops));
}
.from-black {
  --tw-gradient-from: #000 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-black\/70 {
  --tw-gradient-from: rgb(0 0 0 / 0.7) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-brand-green-600 {
  --tw-gradient-from: #4a7c59 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(74 124 89 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-brand-rose-50\/70 {
  --tw-gradient-from: rgb(248 244 244 / 0.7) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(248 244 244 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-gray-800 {
  --tw-gradient-from: #1f2937 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(31 41 55 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.via-gray-800 {
  --tw-gradient-to: rgb(31 41 55 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #1f2937 var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-gray-900 {
  --tw-gradient-to: rgb(17 24 39 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #111827 var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-white {
  --tw-gradient-to: rgb(255 255 255 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #fff var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.to-black {
  --tw-gradient-to: #000 var(--tw-gradient-to-position);
}
.to-emerald-500 {
  --tw-gradient-to: #10b981 var(--tw-gradient-to-position);
}
.to-gray-700 {
  --tw-gradient-to: #374151 var(--tw-gradient-to-position);
}
.to-transparent {
  --tw-gradient-to: transparent var(--tw-gradient-to-position);
}
.object-contain {
  -o-object-fit: contain;
     object-fit: contain;
}
.object-cover {
  -o-object-fit: cover;
     object-fit: cover;
}
.p-1 {
  padding: 0.25rem;
}
.p-1\.5 {
  padding: 0.375rem;
}
.p-12 {
  padding: 3rem;
}
.p-2 {
  padding: 0.5rem;
}
.p-3 {
  padding: 0.75rem;
}
.p-4 {
  padding: 1rem;
}
.p-5 {
  padding: 1.25rem;
}
.p-6 {
  padding: 1.5rem;
}
.p-8 {
  padding: 2rem;
}
.px-1 {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}
.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}
.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.px-8 {
  padding-left: 2rem;
  padding-right: 2rem;
}
.py-0\.5 {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}
.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.py-1\.5 {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}
.py-12 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}
.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.pb-8 {
  padding-bottom: 2rem;
}
.pl-10 {
  padding-left: 2.5rem;
}
.pl-12 {
  padding-left: 3rem;
}
.pl-16 {
  padding-left: 4rem;
}
.pl-3 {
  padding-left: 0.75rem;
}
.pr-10 {
  padding-right: 2.5rem;
}
.pr-12 {
  padding-right: 3rem;
}
.pr-3 {
  padding-right: 0.75rem;
}
.pr-4 {
  padding-right: 1rem;
}
.pt-0 {
  padding-top: 0px;
}
.pt-0\.5 {
  padding-top: 0.125rem;
}
.pt-16 {
  padding-top: 4rem;
}
.pt-2 {
  padding-top: 0.5rem;
}
.pt-3 {
  padding-top: 0.75rem;
}
.pt-4 {
  padding-top: 1rem;
}
.pt-6 {
  padding-top: 1.5rem;
}
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.font-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}
.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}
.text-\[10px\] {
  font-size: 10px;
}
.text-\[12px\] {
  font-size: 12px;
}
.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}
.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}
.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}
.font-bold {
  font-weight: 700;
}
.font-medium {
  font-weight: 500;
}
.font-semibold {
  font-weight: 600;
}
.uppercase {
  text-transform: uppercase;
}
.capitalize {
  text-transform: capitalize;
}
.italic {
  font-style: italic;
}
.leading-6 {
  line-height: 1.5rem;
}
.leading-none {
  line-height: 1;
}
.leading-relaxed {
  line-height: 1.625;
}
.leading-snug {
  line-height: 1.375;
}
.tracking-wide {
  letter-spacing: 0.025em;
}
.tracking-wider {
  letter-spacing: 0.05em;
}
.text-black {
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
}
.text-blue-100 {
  --tw-text-opacity: 1;
  color: rgb(219 234 254 / var(--tw-text-opacity, 1));
}
.text-blue-500 {
  --tw-text-opacity: 1;
  color: rgb(59 130 246 / var(--tw-text-opacity, 1));
}
.text-blue-600 {
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / var(--tw-text-opacity, 1));
}
.text-blue-700 {
  --tw-text-opacity: 1;
  color: rgb(29 78 216 / var(--tw-text-opacity, 1));
}
.text-blue-800 {
  --tw-text-opacity: 1;
  color: rgb(30 64 175 / var(--tw-text-opacity, 1));
}
.text-blue-900 {
  --tw-text-opacity: 1;
  color: rgb(30 58 138 / var(--tw-text-opacity, 1));
}
.text-brand-green-700 {
  --tw-text-opacity: 1;
  color: rgb(45 90 45 / var(--tw-text-opacity, 1));
}
.text-gray-300 {
  --tw-text-opacity: 1;
  color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}
.text-gray-400 {
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.text-gray-500 {
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.text-gray-600 {
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}
.text-gray-700 {
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
.text-gray-800 {
  --tw-text-opacity: 1;
  color: rgb(31 41 55 / var(--tw-text-opacity, 1));
}
.text-gray-900 {
  --tw-text-opacity: 1;
  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.text-green-300 {
  --tw-text-opacity: 1;
  color: rgb(134 239 172 / var(--tw-text-opacity, 1));
}
.text-green-500 {
  --tw-text-opacity: 1;
  color: rgb(34 197 94 / var(--tw-text-opacity, 1));
}
.text-green-600 {
  --tw-text-opacity: 1;
  color: rgb(22 163 74 / var(--tw-text-opacity, 1));
}
.text-green-800 {
  --tw-text-opacity: 1;
  color: rgb(22 101 52 / var(--tw-text-opacity, 1));
}
.text-orange-500 {
  --tw-text-opacity: 1;
  color: rgb(249 115 22 / var(--tw-text-opacity, 1));
}
.text-orange-600 {
  --tw-text-opacity: 1;
  color: rgb(234 88 12 / var(--tw-text-opacity, 1));
}
.text-primary-600 {
  --tw-text-opacity: 1;
  color: rgb(2 132 199 / var(--tw-text-opacity, 1));
}
.text-primary-700 {
  --tw-text-opacity: 1;
  color: rgb(3 105 161 / var(--tw-text-opacity, 1));
}
.text-primary-800 {
  --tw-text-opacity: 1;
  color: rgb(7 89 133 / var(--tw-text-opacity, 1));
}
.text-purple-500 {
  --tw-text-opacity: 1;
  color: rgb(168 85 247 / var(--tw-text-opacity, 1));
}
.text-purple-600 {
  --tw-text-opacity: 1;
  color: rgb(147 51 234 / var(--tw-text-opacity, 1));
}
.text-purple-800 {
  --tw-text-opacity: 1;
  color: rgb(107 33 168 / var(--tw-text-opacity, 1));
}
.text-red-500 {
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}
.text-red-600 {
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}
.text-red-700 {
  --tw-text-opacity: 1;
  color: rgb(185 28 28 / var(--tw-text-opacity, 1));
}
.text-red-800 {
  --tw-text-opacity: 1;
  color: rgb(153 27 27 / var(--tw-text-opacity, 1));
}
.text-red-900 {
  --tw-text-opacity: 1;
  color: rgb(127 29 29 / var(--tw-text-opacity, 1));
}
.text-secondary-200 {
  --tw-text-opacity: 1;
  color: rgb(228 228 231 / var(--tw-text-opacity, 1));
}
.text-secondary-300 {
  --tw-text-opacity: 1;
  color: rgb(212 212 216 / var(--tw-text-opacity, 1));
}
.text-secondary-400 {
  --tw-text-opacity: 1;
  color: rgb(161 161 170 / var(--tw-text-opacity, 1));
}
.text-secondary-500 {
  --tw-text-opacity: 1;
  color: rgb(113 113 122 / var(--tw-text-opacity, 1));
}
.text-secondary-600 {
  --tw-text-opacity: 1;
  color: rgb(82 82 91 / var(--tw-text-opacity, 1));
}
.text-secondary-700 {
  --tw-text-opacity: 1;
  color: rgb(63 63 70 / var(--tw-text-opacity, 1));
}
.text-secondary-800 {
  --tw-text-opacity: 1;
  color: rgb(39 39 42 / var(--tw-text-opacity, 1));
}
.text-secondary-900 {
  --tw-text-opacity: 1;
  color: rgb(24 24 27 / var(--tw-text-opacity, 1));
}
.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.text-white\/80 {
  color: rgb(255 255 255 / 0.8);
}
.text-white\/90 {
  color: rgb(255 255 255 / 0.9);
}
.text-yellow-500 {
  --tw-text-opacity: 1;
  color: rgb(234 179 8 / var(--tw-text-opacity, 1));
}
.text-yellow-700 {
  --tw-text-opacity: 1;
  color: rgb(161 98 7 / var(--tw-text-opacity, 1));
}
.text-yellow-800 {
  --tw-text-opacity: 1;
  color: rgb(133 77 14 / var(--tw-text-opacity, 1));
}
.underline {
  text-decoration-line: underline;
}
.placeholder-gray-500::-moz-placeholder {
  --tw-placeholder-opacity: 1;
  color: rgb(107 114 128 / var(--tw-placeholder-opacity, 1));
}
.placeholder-gray-500::placeholder {
  --tw-placeholder-opacity: 1;
  color: rgb(107 114 128 / var(--tw-placeholder-opacity, 1));
}
.placeholder-secondary-500::-moz-placeholder {
  --tw-placeholder-opacity: 1;
  color: rgb(113 113 122 / var(--tw-placeholder-opacity, 1));
}
.placeholder-secondary-500::placeholder {
  --tw-placeholder-opacity: 1;
  color: rgb(113 113 122 / var(--tw-placeholder-opacity, 1));
}
.opacity-0 {
  opacity: 0;
}
.opacity-100 {
  opacity: 1;
}
.opacity-25 {
  opacity: 0.25;
}
.opacity-50 {
  opacity: 0.5;
}
.opacity-60 {
  opacity: 0.6;
}
.opacity-75 {
  opacity: 0.75;
}
.shadow {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-2xl {
  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-dg-md {
  --tw-shadow: 0 4px 16px rgba(0,0,0,.08);
  --tw-shadow-colored: 0 4px 16px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-dg-sm {
  --tw-shadow: 0 2px 10px rgba(0,0,0,.06);
  --tw-shadow-colored: 0 2px 10px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-lg {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-md {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-sm {
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-xl {
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-black\/30 {
  --tw-shadow-color: rgb(0 0 0 / 0.3);
  --tw-shadow: var(--tw-shadow-colored);
}
.outline-none {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.outline {
  outline-style: solid;
}
.ring-2 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-primary-500 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(14 165 233 / var(--tw-ring-opacity, 1));
}
.ring-opacity-50 {
  --tw-ring-opacity: 0.5;
}
.blur {
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.backdrop-blur-md {
  --tw-backdrop-blur: blur(12px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.backdrop-blur-sm {
  --tw-backdrop-blur: blur(4px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-opacity {
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-shadow {
  transition-property: box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.duration-200 {
  transition-duration: 200ms;
}
.duration-300 {
  transition-duration: 300ms;
}
.ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.ease-out {
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

:root {
  --foreground-rgb: 0, 0, 0;
  --background-start-rgb: 214, 219, 220;
  --background-end-rgb: 255, 255, 255;
}

@media (prefers-color-scheme: dark) {
  :root {
    --foreground-rgb: 255, 255, 255;
    --background-start-rgb: 0, 0, 0;
    --background-end-rgb: 0, 0, 0;
  }
  }
  
  body {
  color: rgb(var(--foreground-rgb));
  background: radial-gradient(1200px 800px at 20% 10%, rgba(255,255,255,0.6) 0%, transparent 60%),
    radial-gradient(1000px 700px at 80% 90%, rgba(0,0,0,0.04) 0%, transparent 70%),
    linear-gradient(135deg, rgb(var(--background-start-rgb)) 0%, rgb(var(--background-end-rgb)) 100%);
  background-attachment: fixed;
}

/* When sunny theme is active, clear the default body background to show sunny.scss */
html.sunny, html.weather-sunny,
body.sunny, body.weather-sunny {
  background: #fbb002 !important;
  background-color: #fbb002 !important; /* warm sunny base */
}

/* Remove default body gap so no underlying bg shows as a top line */
body.sunny, body.weather-sunny {
  margin: 0 !important;
  padding: 0 !important;
}

/* Sunny: let the page background show through all wrappers */
.sunny .dg-bg, .weather-sunny .dg-bg {
  background: transparent !important;
}
.sunny .bg-white, .weather-sunny .bg-white,
.sunny .bg-gray-50, .weather-sunny .bg-gray-50,
.sunny .bg-gray-100, .weather-sunny .bg-gray-100,
.sunny .bg-neutral-50, .weather-sunny .bg-neutral-50 {
  background: transparent !important;
}

/* Subtle global vignette for depth */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(80% 60% at 50% 50%, transparent 60%, rgba(0,0,0,0.06) 100%);
  z-index: 0;
}

/* In sunny theme, remove vignette to avoid any top-edge line */
.sunny::after, .weather-sunny::after,
body.sunny::after, body.weather-sunny::after,
html.sunny::after, html.weather-sunny::after {
  content: none !important;
  background: none !important;
  display: none !important;
  visibility: hidden !important;
}

/* Ensure no accidental top border in sunny */
body.sunny,
body.weather-sunny {
  border-top: 0 !important;
}

/* Basic Design System */
.dg-h1 { font: 700 44px/1.15 var(--font-playfair), serif; color: var(--dg-ink); }
.dg-h2 { font: 700 30px/1.2  var(--font-playfair), serif; color: var(--dg-ink); }
.dg-text { font: 400 16px/1.65 var(--font-inter), system-ui, sans-serif; color: var(--dg-ink-2); }
.dg-text-sm { font-size: 14px; color: var(--dg-ink-2); }

/* Weather Themes - Complete Design */
.sunny, .weather-sunny {
  /* Defer background to sunny.scss for rich composition; keep transitions global */
  position: relative;
  overflow: hidden;
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.sunny *, .weather-sunny * {
  transition: color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.3s ease, transform 0.2s ease;
}

/* Minimal, airy surfaces */
.sunny .sidebar, .weather-sunny .sidebar {
  background: rgba(255, 251, 235, 0.9) !important;
  border-color: rgba(255, 196, 120, 0.45) !important;
  box-shadow: 0 8px 28px rgba(255, 196, 120, 0.18) !important;
  backdrop-filter: blur(16px) !important;
}

.sunny .header, .weather-sunny .header {
  background: rgba(255, 249, 235, 0.95) !important;
  border: 0 !important; /* remove thin line on top */
  box-shadow: 0 6px 20px rgba(255, 196, 120, 0.16) !important;
  backdrop-filter: blur(16px) !important;
}

.sunny .card, .weather-sunny .card {
  background: rgba(255, 253, 245, 0.9) !important;
  border-color: rgba(255, 196, 120, 0.45) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06), 0 6px 18px rgba(255, 196, 120, 0.18) !important;
  backdrop-filter: blur(16px) !important;
}

/* Buttons align to sunny.scss palette (sky + warm accent) */
.sunny .btn-primary, .weather-sunny .btn-primary {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%) !important;
  color: #3a2a12 !important;
  border-color: rgba(245, 158, 11, 0.9) !important;
  box-shadow: 0 8px 22px rgba(245, 158, 11, 0.28) !important;
}

.sunny .btn-secondary, .weather-sunny .btn-secondary {
  background: linear-gradient(135deg, #fff1bf 0%, #ffd48a 100%) !important;
  color: #2b2b2b !important;
  border-color: rgba(255, 196, 120, 0.9) !important;
  box-shadow: 0 6px 18px rgba(255, 196, 120, 0.28) !important;
}

/* Sunny: ensure all buttons inside cards are themed (covers widgets like Topic/Follow) */
.sunny .card button, .weather-sunny .card button,
.sunny .card a[role="button"], .weather-sunny .card a[role="button"],
.sunny .card .btn, .weather-sunny .card .btn {
  background: linear-gradient(135deg, #fff1bf 0%, #ffd48a 100%) !important;
  border: 1px solid rgba(255, 196, 120, 0.9) !important;
  color: #7a4b0a !important;
  border-radius: 10px !important;
  padding: 8px 12px !important;
  transition: all 0.25s ease !important;
  box-shadow: 0 4px 12px rgba(255, 196, 120, 0.28) !important;
}

.sunny .card button:hover, .weather-sunny .card button:hover,
.sunny .card a[role="button"]:hover, .weather-sunny .card a[role="button"]:hover,
.sunny .card .btn:hover, .weather-sunny .card .btn:hover {
  background: linear-gradient(135deg, #fff1bf 0%, #ffcf7a 100%) !important;
  box-shadow: 0 8px 16px rgba(255, 196, 120, 0.35) !important;
  transform: translateY(-1px) !important;
}

/* Sunny theme: base style for generic buttons that don't declare a variant */
.sunny button:not([class*='btn-']), .weather-sunny button:not([class*='btn-']),
.sunny .btn:not([class*='btn-']), .weather-sunny .btn:not([class*='btn-']),
.sunny [role="button"]:not([class*='btn-']), .weather-sunny [role="button"]:not([class*='btn-']),
.sunny a[role="button"]:not([class*='btn-']), .weather-sunny a[role="button"]:not([class*='btn-']) {
  background: linear-gradient(135deg, #fff1bf 0%, #ffd48a 100%) !important;
  border: 1px solid rgba(255, 196, 120, 0.9) !important;
  color: #7a4b0a !important;
  border-radius: 10px !important;
  padding: 8px 12px !important;
  transition: all 0.25s ease !important;
  box-shadow: 0 4px 12px rgba(255, 196, 120, 0.28) !important;
}

.sunny button:not([class*='btn-']):hover, .weather-sunny button:not([class*='btn-']):hover,
.sunny .btn:not([class*='btn-']):hover, .weather-sunny .btn:not([class*='btn-']):hover,
.sunny [role="button"]:not([class*='btn-']):hover, .weather-sunny [role="button"]:not([class*='btn-']):hover,
.sunny a[role="button"]:not([class*='btn-']):hover, .weather-sunny a[role="button"]:not([class*='btn-']):hover {
  background: linear-gradient(135deg, #fff1bf 0%, #ffcf7a 100%) !important;
  box-shadow: 0 8px 16px rgba(255, 196, 120, 0.35) !important;
  transform: translateY(-1px) !important;
}

/* Sunny: icons and inner text in buttons */
.sunny button svg, .weather-sunny button svg,
.sunny .btn svg, .weather-sunny .btn svg,
.sunny [role="button"] svg, .weather-sunny [role="button"] svg,
.sunny a[role="button"] svg, .weather-sunny a[role="button"] svg {
  stroke: #7a4b0a !important;
  fill: none !important;
  stroke-width: 1.5 !important;
}

.sunny button span, .weather-sunny button span,
.sunny .btn span, .weather-sunny .btn span,
.sunny [role="button"] span, .weather-sunny [role="button"] span,
.sunny a[role="button"] span, .weather-sunny a[role="button"] span,
.sunny button div, .weather-sunny button div,
.sunny .btn div, .weather-sunny .btn div {
  color: #7a4b0a !important;
  font-weight: 500 !important;
}

/* Sunny: focus/disabled states */
.sunny button:focus, .weather-sunny button:focus,
.sunny .btn:focus, .weather-sunny .btn:focus {
  outline: 2px solid rgba(245, 158, 11, 0.5) !important;
  outline-offset: 2px !important;
}

.sunny button:disabled, .weather-sunny button:disabled,
.sunny .btn:disabled, .weather-sunny .btn:disabled {
  opacity: 0.6 !important;
  cursor: not-allowed !important;
  filter: saturate(0.85);
}

/* Sunny variants */
.sunny .btn-success, .weather-sunny .btn-success,
.sunny .success, .weather-sunny .success {
  background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%) !important;
  color: #065f46 !important;
  border: 1px solid rgba(16, 185, 129, 0.5) !important;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25) !important;
}

.sunny .btn-danger, .weather-sunny .btn-danger,
.sunny .danger, .weather-sunny .danger {
  background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%) !important;
  color: #7f1d1d !important;
  border: 1px solid rgba(239, 68, 68, 0.5) !important;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.25) !important;
}

.sunny .btn-outline, .weather-sunny .btn-outline,
.sunny .outline, .weather-sunny .outline {
  background: transparent !important;
  color: #7a4b0a !important;
  border: 1px solid rgba(255, 196, 120, 0.9) !important;
}

.sunny .btn-ghost, .weather-sunny .btn-ghost,
.sunny .ghost, .weather-sunny .ghost {
  background: rgba(255, 212, 138, 0.18) !important;
  color: #7a4b0a !important;
  border: 1px solid rgba(255, 196, 120, 0.4) !important;
}

.sunny .btn-link, .weather-sunny .btn-link,
.sunny .link, .weather-sunny .link {
  background: transparent !important;
  border: 0 !important;
  color: #b45309 !important;
  text-decoration: underline;
}

/* Elegant text tones */
.sunny h1, .sunny h2, .sunny h3, .sunny h4, .sunny h5, .sunny h6,
.weather-sunny h1, .weather-sunny h2, .weather-sunny h3, .weather-sunny h4, .weather-sunny h5, .weather-sunny h6 {
  color: #333333 !important;
}

.sunny p, .sunny span, .sunny div, .sunny a,
.weather-sunny p, .weather-sunny span, .weather-sunny div, .weather-sunny a {
  color: #4a4a4a !important;
}

.rainy, .weather-rainy {
  background: linear-gradient(180deg, #07131c 0%, #305472 100%);
  position: relative;
  overflow: hidden;
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Rainy theme: Enhanced background with depth */
.rainy::before, .weather-rainy::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    radial-gradient(circle at 20% 20%, rgba(59, 130, 246, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(30, 58, 138, 0.1) 0%, transparent 50%),
    linear-gradient(45deg, rgba(59, 130, 246, 0.05) 0%, transparent 50%, rgba(30, 58, 138, 0.05) 100%);
  z-index: 1;
  pointer-events: none;
}

.rainy::after, .weather-rainy::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    linear-gradient(90deg, transparent 0%, rgba(59, 130, 246, 0.08) 50%, transparent 100%),
    linear-gradient(0deg, transparent 0%, rgba(30, 58, 138, 0.08) 50%, transparent 100%);
  z-index: 1;
  pointer-events: none;
  animation: rainAmbient 3s ease-in-out infinite alternate;
}

@keyframes rainAmbient {
  0% { opacity: 0.3; }
  100% { opacity: 0.7; }
}

.rainy *, .weather-rainy * {
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Rainy theme: Sidebar styling */
.rainy .sidebar, .weather-rainy .sidebar {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(30, 58, 138, 0.9) 100%) !important;
  border-color: rgba(59, 130, 246, 0.3) !important;
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.2) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

/* Rainy theme: Header styling */
.rainy .header, .weather-rainy .header {
  background: linear-gradient(135deg, rgba(30, 58, 138, 0.9) 0%, rgba(15, 23, 42, 0.95) 100%) !important;
  border-color: rgba(59, 130, 246, 0.3) !important;
  box-shadow: 0 2px 20px rgba(59, 130, 246, 0.2) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

/* Rainy theme: Card styling */
.rainy .card, .weather-rainy .card {
  background: linear-gradient(135deg, rgba(30, 58, 138, 0.8) 0%, rgba(15, 23, 42, 0.9) 100%) !important;
  border: 1px solid rgba(59, 130, 246, 0.3) !important;
  box-shadow: 0 4px 20px rgba(59, 130, 246, 0.2) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

/* Rainy theme: Button styling */
.rainy .btn-primary, .weather-rainy .btn-primary {
  background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%) !important;
  color: white !important;
  border: 1px solid rgba(59, 130, 246, 0.5) !important;
  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

.rainy .btn-primary:hover, .weather-rainy .btn-primary:hover {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4) !important;
  transform: translateY(-2px) !important;
}

.rainy .btn-secondary, .weather-rainy .btn-secondary {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(30, 58, 138, 0.3) 100%) !important;
  color: #e2e8f0 !important;
  border: 1px solid rgba(59, 130, 246, 0.4) !important;
  box-shadow: 0 2px 10px rgba(59, 130, 246, 0.2) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

.rainy .btn-secondary:hover, .weather-rainy .btn-secondary:hover {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.3) 0%, rgba(30, 58, 138, 0.4) 100%) !important;
  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3) !important;
  transform: translateY(-1px) !important;
}

/* Rainy theme: Text styling */
.rainy h1, .rainy h2, .rainy h3, .rainy h4, .rainy h5, .rainy h6,
.weather-rainy h1, .weather-rainy h2, .weather-rainy h3, .weather-rainy h4, .weather-rainy h5, .weather-rainy h6 {
  color: #f1f5f9 !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

.rainy p, .rainy span, .rainy div, .rainy a,
.weather-rainy p, .weather-rainy span, .weather-rainy div, .weather-rainy a {
  color: #e2e8f0 !important;
}

.rainy .text-muted, .weather-rainy .text-muted {
  color: #94a3b8 !important;
}

/* Rainy theme: Reaction buttons styling */
.rainy .card button, .weather-rainy .card button,
.rainy .card a, .weather-rainy .card a,
.rainy button, .weather-rainy button,
.rainy .btn, .weather-rainy .btn,
.rainy [role="button"], .weather-rainy [role="button"],
.rainy a[role="button"], .weather-rainy a[role="button"] {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(30, 58, 138, 0.2) 100%) !important;
  border: 1px solid rgba(59, 130, 246, 0.4) !important;
  color: #e2e8f0 !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2) !important;
}

.rainy .card button:hover, .weather-rainy .card button:hover,
.rainy .card a:hover, .weather-rainy .card a:hover,
.rainy button:hover, .weather-rainy button:hover,
.rainy .btn:hover, .weather-rainy .btn:hover,
.rainy [role="button"]:hover, .weather-rainy [role="button"]:hover,
.rainy a[role="button"]:hover, .weather-rainy a[role="button"]:hover {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.25) 0%, rgba(30, 58, 138, 0.3) 100%) !important;
  border-color: rgba(59, 130, 246, 0.6) !important;
  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3) !important;
  transform: translateY(-1px) scale(1.02) !important;
}

/* Rainy theme: Icons and text in buttons */
.rainy .card button svg, .weather-rainy .card button svg,
.rainy .card a svg, .weather-rainy .card a svg,
.rainy button svg, .weather-rainy button svg,
.rainy .btn svg, .weather-rainy .btn svg {
  stroke: #e2e8f0 !important;
  fill: none !important;
  stroke-width: 1.5 !important;
}

.rainy .card button span, .weather-rainy .card button span,
.rainy .card a span, .weather-rainy .card a span,
.rainy button span, .weather-rainy button span,
.rainy .btn span, .weather-rainy .btn span,
.rainy button div, .weather-rainy button div,
.rainy .btn div, .weather-rainy .btn div {
  color: #cbd5e1 !important;
  font-weight: 500 !important;
}

/* Rainy theme: Override Tailwind classes */
.rainy .bg-transparent, .weather-rainy .bg-transparent {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(30, 58, 138, 0.2) 100%) !important;
}

.rainy .border-transparent, .weather-rainy .border-transparent {
  border-color: rgba(59, 130, 246, 0.4) !important;
}

.rainy .text-gray-500, .weather-rainy .text-gray-500,
.rainy .text-gray-400, .weather-rainy .text-gray-400,
.rainy .text-gray-300, .weather-rainy .text-gray-300 {
  color: #cbd5e1 !important;
}

.rainy .hover\:bg-gray-50:hover, .weather-rainy .hover\:bg-gray-50:hover,
.rainy .hover\:bg-gray-100:hover, .weather-rainy .hover\:bg-gray-100:hover {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.25) 0%, rgba(30, 58, 138, 0.3) 100%) !important;
}

.rainy .hover\:text-gray-600:hover, .weather-rainy .hover\:text-gray-600:hover,
.rainy .hover\:text-gray-700:hover, .weather-rainy .hover\:text-gray-700:hover {
  color: #e2e8f0 !important;
}


.rainy .header, .weather-rainy .header {
  background: #1e3a8a !important;
  border-color: #3b82f6 !important;
}

.rainy .card, .weather-rainy .card {
  background: #1e40af !important;
  border-color: #3b82f6 !important;
  box-shadow: 0 4px 20px rgba(30, 64, 175, 0.3) !important;
}

.rainy .btn-primary, .weather-rainy .btn-primary {
  background: #3b82f6 !important;
  color: white !important;
  border-color: #3b82f6 !important;
}

.rainy .btn-secondary, .weather-rainy .btn-secondary {
  background: #1e40af !important;
  color: white !important;
  border-color: #1e40af !important;
}

.rainy h1, .rainy h2, .rainy h3, .rainy h4, .rainy h5, .rainy h6,
.weather-rainy h1, .weather-rainy h2, .weather-rainy h3, .weather-rainy h4, .weather-rainy h5, .weather-rainy h6 {
  color: #f1f5f9 !important;
}

.rainy p, .rainy span, .rainy div, .rainy a,
.weather-rainy p, .weather-rainy span, .weather-rainy div, .weather-rainy a {
  color: #cbd5e1 !important;
}

.cloudy, .weather-cloudy {
  background: linear-gradient(135deg, #4b5563 0%, #6b7280 50%, #9ca3af 100%);
  position: relative;
  overflow: hidden;
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.cloudy *, .weather-cloudy * {
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.cloudy .sidebar, .weather-cloudy .sidebar {
  background: #4b5563 !important;
  border-color: #6b7280 !important;
}

.cloudy .header, .weather-cloudy .header {
  background: #374151 !important;
  border-color: #6b7280 !important;
}

.cloudy .card, .weather-cloudy .card {
  background: #4b5563 !important;
  border-color: #6b7280 !important;
  box-shadow: 0 4px 20px rgba(75, 85, 99, 0.3) !important;
}

.cloudy .btn-primary, .weather-cloudy .btn-primary {
  background: #6b7280 !important;
  color: white !important;
  border-color: #6b7280 !important;
}

.cloudy .btn-secondary, .weather-cloudy .btn-secondary {
  background: #4b5563 !important;
  color: white !important;
  border-color: #4b5563 !important;
}

.cloudy h1, .cloudy h2, .cloudy h3, .cloudy h4, .cloudy h5, .cloudy h6,
.weather-cloudy h1, .weather-cloudy h2, .weather-cloudy h3, .weather-cloudy h4, .weather-cloudy h5, .weather-cloudy h6 {
  color: #f9fafb !important;
}

.cloudy p, .cloudy span, .cloudy div, .cloudy a,
.weather-cloudy p, .weather-cloudy span, .weather-cloudy div, .weather-cloudy a {
  color: #d1d5db !important;
}

.night, .weather-night {
  background: 
    radial-gradient(ellipse at top, #1e293b 0%, #0f172a 50%),
    linear-gradient(135deg, #0f172a 0%, #1e293b 30%, #334155 70%, #0f172a 100%);
  position: relative;
  overflow: hidden;
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.night *, .weather-night * {
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.night .sidebar, .weather-night .sidebar {
  background: linear-gradient(135deg, #1e293b 0%, #334155 100%) !important;
  border-color: #475569 !important;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3) !important;
}

.night .header, .weather-night .header {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
  border-color: #475569 !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4) !important;
}

.night .card, .weather-night .card {
  background: linear-gradient(135deg, #1e293b 0%, #334155 100%) !important;
  border-color: #475569 !important;
  box-shadow: 
    0 4px 20px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(71, 85, 105, 0.2) !important;
}

.night .btn-primary, .weather-night .btn-primary {
  background: linear-gradient(135deg, #475569 0%, #334155 100%) !important;
  color: white !important;
  border-color: #475569 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

.night .btn-secondary, .weather-night .btn-secondary {
  background: linear-gradient(135deg, #334155 0%, #1e293b 100%) !important;
  color: white !important;
  border-color: #334155 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

/* Night theme: ALL buttons and interactive elements */
.night button, .weather-night button,
.night .btn, .weather-night .btn,
.night [role="button"], .weather-night [role="button"],
.night a[role="button"], .weather-night a[role="button"],
.night .interaction-button, .weather-night .interaction-button,
.night .reaction-button, .weather-night .reaction-button {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(148, 163, 184, 0.3) !important;
  color: #e2e8f0 !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 8px !important;
  padding: 8px 12px !important;
  transition: all 0.3s ease !important;
}

.night button:hover, .weather-night button:hover,
.night .btn:hover, .weather-night .btn:hover,
.night [role="button"]:hover, .weather-night [role="button"]:hover,
.night a[role="button"]:hover, .weather-night a[role="button"]:hover,
.night .interaction-button:hover, .weather-night .interaction-button:hover,
.night .reaction-button:hover, .weather-night .reaction-button:hover {
  border-color: #60a5fa !important;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.2) !important;
  background: rgba(148, 163, 184, 0.2) !important;
  transform: translateY(-1px) !important;
}

/* Night theme: ALL icons and text */
.night button svg, .weather-night button svg,
.night .btn svg, .weather-night .btn svg,
.night [role="button"] svg, .weather-night [role="button"] svg,
.night a[role="button"] svg, .weather-night a[role="button"] svg {
  stroke: #e2e8f0 !important;
  fill: none !important;
  stroke-width: 1.5 !important;
}

.night button span, .weather-night button span,
.night .btn span, .weather-night .btn span,
.night [role="button"] span, .weather-night [role="button"] span,
.night a[role="button"] span, .weather-night a[role="button"] span,
.night button div, .weather-night button div,
.night .btn div, .weather-night .btn div {
  color: #cbd5e1 !important;
  font-weight: 500 !important;
}

/* Force override for any button-like elements */
.night [class*="button"], .weather-night [class*="button"],
.night [class*="btn"], .weather-night [class*="btn"],
.night [class*="interaction"], .weather-night [class*="interaction"] {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(148, 163, 184, 0.3) !important;
  color: #e2e8f0 !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

/* Override ALL Tailwind button classes in night theme */
.night .bg-transparent, .weather-night .bg-transparent {
  background: rgba(255, 255, 255, 0.08) !important;
}

.night .border-transparent, .weather-night .border-transparent {
  border-color: rgba(148, 163, 184, 0.3) !important;
}

.night .text-gray-500, .weather-night .text-gray-500,
.night .text-gray-400, .weather-night .text-gray-400,
.night .text-gray-300, .weather-night .text-gray-300 {
  color: #cbd5e1 !important;
}

.night .hover\:bg-gray-50:hover, .weather-night .hover\:bg-gray-50:hover,
.night .hover\:bg-gray-100:hover, .weather-night .hover\:bg-gray-100:hover {
  background: rgba(148, 163, 184, 0.2) !important;
}

.night .hover\:text-gray-600:hover, .weather-night .hover\:text-gray-600:hover,
.night .hover\:text-gray-700:hover, .weather-night .hover\:text-gray-700:hover {
  color: #e2e8f0 !important;
}

/* Force all interactive elements to use night theme */
.night *, .weather-night * {
  transition: all 0.3s ease !important;
}

.night button:focus, .weather-night button:focus,
.night .btn:focus, .weather-night .btn:focus {
  outline: 2px solid #60a5fa !important;
  outline-offset: 2px !important;
}

.night h1, .night h2, .night h3, .night h4, .night h5, .night h6,
.weather-night h1, .weather-night h2, .weather-night h3, .weather-night h4, .weather-night h5, .weather-night h6 {
  color: #f1f5f9 !important;
}

.night p, .night span, .night div, .night a,
.weather-night p, .weather-night span, .weather-night div, .weather-night a {
  color: #cbd5e1 !important;
}

/* Night theme - ALL elements */
.night button, .weather-night button {
  background: #334155 !important;
  color: white !important;
  border-color: #334155 !important;
}

.night input, .night textarea, .night select,
.weather-night input, .weather-night textarea, .weather-night select {
  background: #1e293b !important;
  color: #cbd5e1 !important;
  border-color: #334155 !important;
}

.night [class*="bg-"], .weather-night [class*="bg-"] {
  background: #1e293b !important;
}

.night [class*="text-"], .weather-night [class*="text-"] {
  color: #cbd5e1 !important;
}

.night [class*="border-"], .weather-night [class*="border-"] {
  border-color: #334155 !important;
}

/* Force all Tailwind classes in night theme */
.night .bg-white, .weather-night .bg-white {
  background: #1e293b !important;
}

.night .bg-gray-50, .weather-night .bg-gray-50 {
  background: #1e293b !important;
}

.night .bg-gray-100, .weather-night .bg-gray-100 {
  background: #334155 !important;
}

.night .text-gray-900, .weather-night .text-gray-900 {
  color: #f1f5f9 !important;
}

.night .text-gray-800, .weather-night .text-gray-800 {
  color: #f1f5f9 !important;
}

.night .text-gray-700, .weather-night .text-gray-700 {
  color: #cbd5e1 !important;
}

.night .text-gray-600, .weather-night .text-gray-600 {
  color: #cbd5e1 !important;
}

.night .text-gray-500, .weather-night .text-gray-500 {
  color: #94a3b8 !important;
}

.night .border-gray-200, .weather-night .border-gray-200 {
  border-color: #334155 !important;
}

.night .border-gray-300, .weather-night .border-gray-300 {
  border-color: #334155 !important;
}

.night .shadow-md, .weather-night .shadow-md {
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.4) !important;
}

.night .shadow-lg, .weather-night .shadow-lg {
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.5) !important;
}

/* Night theme - Override ALL possible elements */
.night *, .weather-night * {
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.night .bg-blue-500, .weather-night .bg-blue-500 {
  background: #334155 !important;
}

.night .bg-blue-600, .weather-night .bg-blue-600 {
  background: #1e293b !important;
}

.night .text-blue-600, .weather-night .text-blue-600 {
  color: #60a5fa !important;
}

.night .text-blue-500, .weather-night .text-blue-500 {
  color: #60a5fa !important;
}

.night .hover\:bg-blue-700:hover, .weather-night .hover\:bg-blue-700:hover {
  background: #475569 !important;
}

.night .hover\:bg-gray-100:hover, .weather-night .hover\:bg-gray-100:hover {
  background: #334155 !important;
}

.night .hover\:bg-gray-200:hover, .weather-night .hover\:bg-gray-200:hover {
  background: #334155 !important;
}

/* Force all elements to use night colors */
.night [class*="hover:"], .weather-night [class*="hover:"] {
  transition: all 0.3s ease !important;
}

.night [class*="focus:"], .weather-night [class*="focus:"] {
  outline-color: #60a5fa !important;
}

.night [class*="ring-"], .weather-night [class*="ring-"] {
  ring-color: #60a5fa !important;
}

.snowy, .weather-snowy {
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 50%, #cbd5e1 100%);
  position: relative;
  overflow: hidden;
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.snowy *, .weather-snowy * {
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.snowy .sidebar, .weather-snowy .sidebar {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
}

.snowy .header, .weather-snowy .header {
  background: #e2e8f0 !important;
  border-color: #cbd5e1 !important;
}

.snowy .card, .weather-snowy .card {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 4px 20px rgba(203, 213, 225, 0.3) !important;
}

.snowy .btn-primary, .weather-snowy .btn-primary {
  background: #0ea5e9 !important;
  color: white !important;
  border-color: #0ea5e9 !important;
}

.snowy .btn-secondary, .weather-snowy .btn-secondary {
  background: #0284c7 !important;
  color: white !important;
  border-color: #0284c7 !important;
}

.snowy h1, .snowy h2, .snowy h3, .snowy h4, .snowy h5, .snowy h6,
.weather-snowy h1, .weather-snowy h2, .weather-snowy h3, .weather-snowy h4, .weather-snowy h5, .weather-snowy h6 {
  color: #0f172a !important;
}

.snowy p, .snowy span, .snowy div, .snowy a,
.weather-snowy p, .weather-snowy span, .weather-snowy div, .weather-snowy a {
  color: #334155 !important;
}

/* Simple weather effects */

.rainy::before, .weather-rainy::before {
    content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 2px,
      rgba(59, 130, 246, 0.1) 2px,
      rgba(59, 130, 246, 0.1) 4px
    );
  animation: rainFall 1s linear infinite;
  pointer-events: none;
  z-index: 1;
}

.night::before, .weather-night::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    /* Bright stars - different sizes and intensities */
    radial-gradient(2px 2px at 50px 50px, #ffffff, transparent),
    radial-gradient(1.5px 1.5px at 100px 100px, #ffffff, transparent),
    radial-gradient(1px 1px at 150px 30px, #ffffff, transparent),
    radial-gradient(2px 2px at 200px 80px, #ffffff, transparent),
    radial-gradient(1px 1px at 250px 20px, #ffffff, transparent),
    radial-gradient(1.5px 1.5px at 300px 120px, #ffffff, transparent),
    radial-gradient(1px 1px at 350px 60px, #ffffff, transparent),
    radial-gradient(2px 2px at 400px 90px, #ffffff, transparent),
    radial-gradient(1px 1px at 450px 40px, #ffffff, transparent),
    radial-gradient(1.5px 1.5px at 500px 110px, #ffffff, transparent),
    radial-gradient(1px 1px at 550px 25px, #ffffff, transparent),
    radial-gradient(2px 2px at 600px 70px, #ffffff, transparent),
    radial-gradient(1px 1px at 650px 15px, #ffffff, transparent),
    radial-gradient(1.5px 1.5px at 700px 95px, #ffffff, transparent),
    radial-gradient(1px 1px at 750px 55px, #ffffff, transparent),
    radial-gradient(2px 2px at 800px 35px, #ffffff, transparent),
    radial-gradient(1px 1px at 850px 105px, #ffffff, transparent),
    radial-gradient(1.5px 1.5px at 900px 45px, #ffffff, transparent),
    radial-gradient(1px 1px at 950px 85px, #ffffff, transparent),
    radial-gradient(2px 2px at 1000px 65px, #ffffff, transparent),
    /* Medium stars */
    radial-gradient(1px 1px at 75px 75px, rgba(255,255,255,0.8), transparent),
    radial-gradient(0.8px 0.8px at 125px 45px, rgba(255,255,255,0.8), transparent),
    radial-gradient(1px 1px at 175px 95px, rgba(255,255,255,0.8), transparent),
    radial-gradient(0.8px 0.8px at 225px 65px, rgba(255,255,255,0.8), transparent),
    radial-gradient(1px 1px at 275px 35px, rgba(255,255,255,0.8), transparent),
    radial-gradient(0.8px 0.8px at 325px 85px, rgba(255,255,255,0.8), transparent),
    radial-gradient(1px 1px at 375px 55px, rgba(255,255,255,0.8), transparent),
    radial-gradient(0.8px 0.8px at 425px 105px, rgba(255,255,255,0.8), transparent),
    radial-gradient(1px 1px at 475px 25px, rgba(255,255,255,0.8), transparent),
    radial-gradient(0.8px 0.8px at 525px 75px, rgba(255,255,255,0.8), transparent),
    /* Dim stars */
    radial-gradient(0.5px 0.5px at 85px 85px, rgba(255,255,255,0.4), transparent),
    radial-gradient(0.3px 0.3px at 135px 55px, rgba(255,255,255,0.4), transparent),
    radial-gradient(0.5px 0.5px at 185px 105px, rgba(255,255,255,0.4), transparent),
    radial-gradient(0.3px 0.3px at 235px 75px, rgba(255,255,255,0.4), transparent),
    radial-gradient(0.5px 0.5px at 285px 45px, rgba(255,255,255,0.4), transparent),
    radial-gradient(0.3px 0.3px at 335px 95px, rgba(255,255,255,0.4), transparent),
    radial-gradient(0.5px 0.5px at 385px 65px, rgba(255,255,255,0.4), transparent),
    radial-gradient(0.3px 0.3px at 435px 115px, rgba(255,255,255,0.4), transparent),
    radial-gradient(0.5px 0.5px at 485px 35px, rgba(255,255,255,0.4), transparent),
    radial-gradient(0.3px 0.3px at 535px 85px, rgba(255,255,255,0.4), transparent),
    /* Very dim stars */
    radial-gradient(0.2px 0.2px at 95px 95px, rgba(255,255,255,0.2), transparent),
    radial-gradient(0.2px 0.2px at 145px 65px, rgba(255,255,255,0.2), transparent),
    radial-gradient(0.2px 0.2px at 195px 115px, rgba(255,255,255,0.2), transparent),
    radial-gradient(0.2px 0.2px at 245px 85px, rgba(255,255,255,0.2), transparent),
    radial-gradient(0.2px 0.2px at 295px 55px, rgba(255,255,255,0.2), transparent),
    radial-gradient(0.2px 0.2px at 345px 105px, rgba(255,255,255,0.2), transparent),
    radial-gradient(0.2px 0.2px at 395px 75px, rgba(255,255,255,0.2), transparent),
    radial-gradient(0.2px 0.2px at 445px 125px, rgba(255,255,255,0.2), transparent),
    radial-gradient(0.2px 0.2px at 495px 45px, rgba(255,255,255,0.2), transparent),
    radial-gradient(0.2px 0.2px at 545px 95px, rgba(255,255,255,0.2), transparent);
  background-repeat: repeat;
  background-size: 200px 200px;
  animation: twinkle 6s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}

/* Additional star layers with different animation speeds */
.night::before, .weather-night::before {
  animation: 
    twinkle 4s ease-in-out infinite,
    twinkleSlow 8s ease-in-out infinite 2s,
    twinkleFast 3s ease-in-out infinite 1s;
}

/* Add more star layers for realistic effect */
.night, .weather-night {
  position: relative;
}

.night::before, .weather-night::before {
  animation: 
    twinkle 4s ease-in-out infinite,
    twinkleSlow 8s ease-in-out infinite 2s,
    twinkleFast 3s ease-in-out infinite 1s;
}

/* Second star layer with different timing */
.night::before, .weather-night::before {
  background: 
    /* Bright stars - different sizes and intensities */
    radial-gradient(2px 2px at 50px 50px, #ffffff, transparent),
    radial-gradient(1.5px 1.5px at 100px 100px, #ffffff, transparent),
    radial-gradient(1px 1px at 150px 30px, #ffffff, transparent),
    radial-gradient(2px 2px at 200px 80px, #ffffff, transparent),
    radial-gradient(1px 1px at 250px 20px, #ffffff, transparent),
    radial-gradient(1.5px 1.5px at 300px 120px, #ffffff, transparent),
    radial-gradient(1px 1px at 350px 60px, #ffffff, transparent),
    radial-gradient(2px 2px at 400px 90px, #ffffff, transparent),
    radial-gradient(1px 1px at 450px 40px, #ffffff, transparent),
    radial-gradient(1.5px 1.5px at 500px 110px, #ffffff, transparent),
    radial-gradient(1px 1px at 550px 25px, #ffffff, transparent),
    radial-gradient(2px 2px at 600px 70px, #ffffff, transparent),
    radial-gradient(1px 1px at 650px 15px, #ffffff, transparent),
    radial-gradient(1.5px 1.5px at 700px 95px, #ffffff, transparent),
    radial-gradient(1px 1px at 750px 55px, #ffffff, transparent),
    radial-gradient(2px 2px at 800px 35px, #ffffff, transparent),
    radial-gradient(1px 1px at 850px 105px, #ffffff, transparent),
    radial-gradient(1.5px 1.5px at 900px 45px, #ffffff, transparent),
    radial-gradient(1px 1px at 950px 85px, #ffffff, transparent),
    radial-gradient(2px 2px at 1000px 65px, #ffffff, transparent),
    /* Medium stars */
    radial-gradient(1px 1px at 75px 75px, rgba(255,255,255,0.8), transparent),
    radial-gradient(0.8px 0.8px at 125px 45px, rgba(255,255,255,0.8), transparent),
    radial-gradient(1px 1px at 175px 95px, rgba(255,255,255,0.8), transparent),
    radial-gradient(0.8px 0.8px at 225px 65px, rgba(255,255,255,0.8), transparent),
    radial-gradient(1px 1px at 275px 35px, rgba(255,255,255,0.8), transparent),
    radial-gradient(0.8px 0.8px at 325px 85px, rgba(255,255,255,0.8), transparent),
    radial-gradient(1px 1px at 375px 55px, rgba(255,255,255,0.8), transparent),
    radial-gradient(0.8px 0.8px at 425px 105px, rgba(255,255,255,0.8), transparent),
    radial-gradient(1px 1px at 475px 25px, rgba(255,255,255,0.8), transparent),
    radial-gradient(0.8px 0.8px at 525px 75px, rgba(255,255,255,0.8), transparent),
    /* Dim stars */
    radial-gradient(0.5px 0.5px at 85px 85px, rgba(255,255,255,0.4), transparent),
    radial-gradient(0.3px 0.3px at 135px 55px, rgba(255,255,255,0.4), transparent),
    radial-gradient(0.5px 0.5px at 185px 105px, rgba(255,255,255,0.4), transparent),
    radial-gradient(0.3px 0.3px at 235px 75px, rgba(255,255,255,0.4), transparent),
    radial-gradient(0.5px 0.5px at 285px 45px, rgba(255,255,255,0.4), transparent),
    radial-gradient(0.3px 0.3px at 335px 95px, rgba(255,255,255,0.4), transparent),
    radial-gradient(0.5px 0.5px at 385px 65px, rgba(255,255,255,0.4), transparent),
    radial-gradient(0.3px 0.3px at 435px 115px, rgba(255,255,255,0.4), transparent),
    radial-gradient(0.5px 0.5px at 485px 35px, rgba(255,255,255,0.4), transparent),
    radial-gradient(0.3px 0.3px at 535px 85px, rgba(255,255,255,0.4), transparent),
    /* Very dim stars */
    radial-gradient(0.2px 0.2px at 95px 95px, rgba(255,255,255,0.2), transparent),
    radial-gradient(0.2px 0.2px at 145px 65px, rgba(255,255,255,0.2), transparent),
    radial-gradient(0.2px 0.2px at 195px 115px, rgba(255,255,255,0.2), transparent),
    radial-gradient(0.2px 0.2px at 245px 85px, rgba(255,255,255,0.2), transparent),
    radial-gradient(0.2px 0.2px at 295px 55px, rgba(255,255,255,0.2), transparent),
    radial-gradient(0.2px 0.2px at 345px 105px, rgba(255,255,255,0.2), transparent),
    radial-gradient(0.2px 0.2px at 395px 75px, rgba(255,255,255,0.2), transparent),
    radial-gradient(0.2px 0.2px at 445px 125px, rgba(255,255,255,0.2), transparent),
    radial-gradient(0.2px 0.2px at 495px 45px, rgba(255,255,255,0.2), transparent),
    radial-gradient(0.2px 0.2px at 545px 95px, rgba(255,255,255,0.2), transparent);
  background-repeat: repeat;
  background-size: 200px 200px;
  animation: 
    twinkle 4s ease-in-out infinite,
    twinkleSlow 8s ease-in-out infinite 2s,
    twinkleFast 3s ease-in-out infinite 1s;
}

.night::after, .weather-night::after {
  content: '';
  position: fixed;
  top: 30px;
  right: 40px;
  width: 80px;
  height: 80px;
  background: 
    radial-gradient(circle at 30% 30%, #f8fafc 0%, #e2e8f0 30%, #cbd5e1 60%, transparent 70%),
    radial-gradient(circle at 70% 70%, #f1f5f9 0%, #e2e8f0 40%, transparent 60%);
  border-radius: 50%;
  box-shadow: 
    0 0 20px rgba(248, 250, 252, 0.3),
    0 0 40px rgba(248, 250, 252, 0.2),
    inset -10px -10px 20px rgba(0, 0, 0, 0.3);
  animation: moonGlow 6s ease-in-out infinite;
  pointer-events: none;
  z-index: 2;
}

.snowy::before, .weather-snowy::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    radial-gradient(2px 2px at 20px 30px, #fff, transparent),
    radial-gradient(2px 2px at 40px 70px, rgba(255,255,255,0.8), transparent),
    radial-gradient(1px 1px at 90px 40px, #fff, transparent),
    radial-gradient(1px 1px at 130px 80px, rgba(255,255,255,0.6), transparent),
    radial-gradient(2px 2px at 160px 30px, #fff, transparent);
  background-repeat: repeat;
  background-size: 200px 100px;
  animation: snowFall 3s linear infinite;
  pointer-events: none;
  z-index: 1;
}

/* Simple animations */
@keyframes sunRays {
  0% { transform: rotate(0deg); opacity: 0.3; }
  50% { transform: rotate(180deg); opacity: 0.6; }
  100% { transform: rotate(360deg); opacity: 0.3; }
}

@keyframes rainFall {
  0% { transform: translateY(-100vh); opacity: 1; }
  100% { transform: translateY(100vh); opacity: 0; }
}

@keyframes twinkle {
  0%, 100% { opacity: 0.2; }
  25% { opacity: 0.8; }
  50% { opacity: 1; }
  75% { opacity: 0.6; }
}

@keyframes twinkleSlow {
  0%, 100% { opacity: 0.1; }
  50% { opacity: 0.4; }
}

@keyframes twinkleFast {
  0%, 100% { opacity: 0.3; }
  25% { opacity: 0.9; }
  50% { opacity: 0.7; }
  75% { opacity: 1; }
}

@keyframes snowFall {
  0% { transform: translateY(-100vh) rotate(0deg); opacity: 1; }
  100% { transform: translateY(100vh) rotate(360deg); opacity: 0; }
}

@keyframes moonGlow {
  0%, 100% { 
    transform: scale(1);
    box-shadow: 
      0 0 20px rgba(248, 250, 252, 0.3),
      0 0 40px rgba(248, 250, 252, 0.2),
      inset -10px -10px 20px rgba(0, 0, 0, 0.3);
  }
  50% { 
    transform: scale(1.05);
    box-shadow: 
      0 0 30px rgba(248, 250, 252, 0.5),
      0 0 60px rgba(248, 250, 252, 0.3),
      inset -10px -10px 20px rgba(0, 0, 0, 0.3);
  }
}

/* Basic button styles */
.btn-primary {
  border-radius: 0.75rem;
  --tw-bg-opacity: 1;
  background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}
.night .btn-primary, .weather-night .btn-primary {
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.4);
  background: #1e293b;
}
.night .btn-primary:hover, .weather-night .btn-primary:hover {
  background: #475569;
}
.btn-primary:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(29 78 216 / var(--tw-bg-opacity, 1));
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.btn-secondary {
  border-radius: 0.75rem;
  --tw-bg-opacity: 1;
  background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.night .btn-secondary, .weather-night .btn-secondary {
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.4);
}

.btn-secondary:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.btn-ghost {
  border-radius: 0.75rem;
  border-width: 1px;
  border-color: rgb(255 255 255 / 0.5);
  background-color: rgb(255 255 255 / 0.4);
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(31 41 55 / var(--tw-text-opacity, 1));
  --tw-backdrop-blur: blur(12px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.night .btn-ghost, .weather-night .btn-ghost {
  color: #f1f5f9;
}

.btn-ghost:hover {
  background-color: rgb(255 255 255 / 0.6);
}

.btn-ghost:is(.dark *) {
  background-color: rgb(255 255 255 / 0.1);
  --tw-text-opacity: 1;
  color: rgb(229 231 235 / var(--tw-text-opacity, 1));
}

.btn-ghost:hover:is(.dark *) {
  background-color: rgb(255 255 255 / 0.15);
}

/* Basic card styles */
.card {
  border-radius: 1rem;
  border-width: 1px;
  border-color: rgb(229 231 235 / 0.6);
  background-color: rgb(255 255 255 / 0.8);
  padding: 1.5rem;
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  --tw-backdrop-blur: blur(12px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.night .card, .weather-night .card {
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.5);
}

.card-elevated {
  border-radius: 1rem;
  border-width: 1px;
  border-color: rgb(229 231 235 / 0.7);
  background-color: rgb(255 255 255 / 0.9);
  padding: 1.5rem;
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  --tw-backdrop-blur: blur(12px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.card-glass {
  border-radius: 1rem;
  border-width: 1px;
  border-color: rgb(229 231 235 / 0.5);
  background-color: rgb(255 255 255 / 0.7);
  padding: 1.5rem;
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  --tw-backdrop-blur: blur(16px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.night .card-glass, .weather-night .card-glass {
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.5);
}

/* Basic text styles */
  .heading-1 {
  font-size: 1.875rem;
  line-height: 2.25rem;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
  .night .heading-1, .weather-night .heading-1 {
  color: #f1f5f9;
}
  
  .heading-2 {
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
  
  .night .heading-2, .weather-night .heading-2 {
  color: #f1f5f9;
}

.heading-3 {
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}

.night .heading-3, .weather-night .heading-3 {
  color: #f1f5f9;
}

.heading-4 {
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}

.night .heading-4, .weather-night .heading-4 {
  color: #f1f5f9;
}

.body-regular {
  font-size: 1rem;
  line-height: 1.5rem;
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}

.night .body-regular, .weather-night .body-regular {
  color: #cbd5e1;
}

.text-muted {
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}

.rainy .text-muted, .weather-rainy .text-muted {
  color: #cbd5e1;
}

.night .text-muted, .weather-night .text-muted {
  color: #cbd5e1;
  color: #94a3b8;
}

/* Input styles */
.input {
  width: 100%;
  border-radius: 0.5rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.night .input, .weather-night .input {
  border-color: #334155;
}
.input:focus {
  --tw-border-opacity: 1;
  border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1));
}

.input-textarea {
  width: 100%;
  resize: none;
  border-radius: 0.5rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.night .input-textarea, .weather-night .input-textarea {
  border-color: #334155;
}

.input-textarea:focus {
  --tw-border-opacity: 1;
  border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1));
}

/* Button styles */
.btn-icon {
  border-radius: 0.5rem;
  padding: 0.5rem;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.rainy .btn-icon:hover, .weather-rainy .btn-icon:hover {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.25) 0%, rgba(30, 58, 138, 0.3) 100%);
}

.night .btn-icon:hover, .weather-night .btn-icon:hover {
  background: rgba(148, 163, 184, 0.2);
}
.night .btn-icon:hover, .weather-night .btn-icon:hover {
  background: #334155;
}
.btn-icon:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}

.btn-primary {
  border-radius: 0.5rem;
  --tw-bg-opacity: 1;
  background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.night .btn-primary, .weather-night .btn-primary {
  background: #1e293b;
}

.night .btn-primary:hover, .weather-night .btn-primary:hover {
  background: #475569;
}

.btn-primary:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(29 78 216 / var(--tw-bg-opacity, 1));
}

.btn-secondary {
  border-radius: 0.5rem;
  --tw-bg-opacity: 1;
  background-color: rgb(75 85 99 / var(--tw-bg-opacity, 1));
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.btn-secondary:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
}

/* Basic layout styles */
.dg-bg {
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}

.sunny .dg-bg, .weather-sunny .dg-bg {
  background: transparent;
}
.night .dg-bg, .weather-night .dg-bg {
  background: #1e293b;
}

.sidebar {
  border-right-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.sunny .sidebar, .weather-sunny .sidebar {
  background: transparent;
}

.night .sidebar, .weather-night .sidebar {
  background: #1e293b;
  border-color: #334155;
}

.header {
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.sunny .header, .weather-sunny .header {
  background: transparent;
}

.night .header, .weather-night .header {
  background: #1e293b;
  border-color: #334155;
}

/* Rain Effects for Rainy Theme */
.rainy .rain, .weather-rainy .rain {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 1;
}

.rainy .drop, .weather-rainy .drop {
  position: absolute;
  width: 2px;
  height: 20px;
  background: linear-gradient(to bottom, transparent, #60a5fa, #3b82f6);
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  top: -20px;
  --angle: 91deg;
  opacity: 0.8;
  animation: fall linear infinite;
  box-shadow: 0 0 6px rgba(96, 165, 250, 0.5);
}

/* Different sizes for rain drops */
.rainy .drop:nth-child(odd), .weather-rainy .drop:nth-child(odd) {
  width: 1.5px;
  height: 15px;
  opacity: 0.6;
}

.rainy .drop:nth-child(3n), .weather-rainy .drop:nth-child(3n) {
  width: 2.5px;
  height: 25px;
  opacity: 0.9;
}

.rainy .drop:nth-child(5n), .weather-rainy .drop:nth-child(5n) {
  width: 1px;
  height: 12px;
  opacity: 0.5;
}

/* Generate rain drops with random properties */
.rainy .drop:nth-child(1), .weather-rainy .drop:nth-child(1) { left: 5vw; animation-duration: 1.2s; animation-delay: -0.1s; }
.rainy .drop:nth-child(2), .weather-rainy .drop:nth-child(2) { left: 15vw; animation-duration: 1.5s; animation-delay: -0.3s; }
.rainy .drop:nth-child(3), .weather-rainy .drop:nth-child(3) { left: 25vw; animation-duration: 1.8s; animation-delay: -0.5s; }
.rainy .drop:nth-child(4), .weather-rainy .drop:nth-child(4) { left: 35vw; animation-duration: 1.1s; animation-delay: -0.2s; }
.rainy .drop:nth-child(5), .weather-rainy .drop:nth-child(5) { left: 45vw; animation-duration: 1.6s; animation-delay: -0.4s; }
.rainy .drop:nth-child(6), .weather-rainy .drop:nth-child(6) { left: 55vw; animation-duration: 1.3s; animation-delay: -0.6s; }
.rainy .drop:nth-child(7), .weather-rainy .drop:nth-child(7) { left: 65vw; animation-duration: 1.7s; animation-delay: -0.1s; }
.rainy .drop:nth-child(8), .weather-rainy .drop:nth-child(8) { left: 75vw; animation-duration: 1.4s; animation-delay: -0.7s; }
.rainy .drop:nth-child(9), .weather-rainy .drop:nth-child(9) { left: 85vw; animation-duration: 1.9s; animation-delay: -0.3s; }
.rainy .drop:nth-child(10), .weather-rainy .drop:nth-child(10) { left: 95vw; animation-duration: 1.2s; animation-delay: -0.5s; }
.rainy .drop:nth-child(11), .weather-rainy .drop:nth-child(11) { left: 10vw; animation-duration: 1.5s; animation-delay: -0.8s; }
.rainy .drop:nth-child(12), .weather-rainy .drop:nth-child(12) { left: 20vw; animation-duration: 1.8s; animation-delay: -0.2s; }
.rainy .drop:nth-child(13), .weather-rainy .drop:nth-child(13) { left: 30vw; animation-duration: 1.1s; animation-delay: -0.6s; }
.rainy .drop:nth-child(14), .weather-rainy .drop:nth-child(14) { left: 40vw; animation-duration: 1.6s; animation-delay: -0.4s; }
.rainy .drop:nth-child(15), .weather-rainy .drop:nth-child(15) { left: 50vw; animation-duration: 1.3s; animation-delay: -0.9s; }
.rainy .drop:nth-child(16), .weather-rainy .drop:nth-child(16) { left: 60vw; animation-duration: 1.7s; animation-delay: -0.1s; }
.rainy .drop:nth-child(17), .weather-rainy .drop:nth-child(17) { left: 70vw; animation-duration: 1.4s; animation-delay: -0.5s; }
.rainy .drop:nth-child(18), .weather-rainy .drop:nth-child(18) { left: 80vw; animation-duration: 1.9s; animation-delay: -0.3s; }
.rainy .drop:nth-child(19), .weather-rainy .drop:nth-child(19) { left: 90vw; animation-duration: 1.2s; animation-delay: -0.7s; }
.rainy .drop:nth-child(20), .weather-rainy .drop:nth-child(20) { left: 100vw; animation-duration: 1.6s; animation-delay: -0.2s; }
.rainy .drop:nth-child(21), .weather-rainy .drop:nth-child(21) { left: 7vw; animation-duration: 1.4s; animation-delay: -0.4s; }
.rainy .drop:nth-child(22), .weather-rainy .drop:nth-child(22) { left: 17vw; animation-duration: 1.7s; animation-delay: -0.6s; }
.rainy .drop:nth-child(23), .weather-rainy .drop:nth-child(23) { left: 27vw; animation-duration: 1.3s; animation-delay: -0.8s; }
.rainy .drop:nth-child(24), .weather-rainy .drop:nth-child(24) { left: 37vw; animation-duration: 1.9s; animation-delay: -0.1s; }
.rainy .drop:nth-child(25), .weather-rainy .drop:nth-child(25) { left: 47vw; animation-duration: 1.5s; animation-delay: -0.3s; }
.rainy .drop:nth-child(26), .weather-rainy .drop:nth-child(26) { left: 57vw; animation-duration: 1.8s; animation-delay: -0.5s; }
.rainy .drop:nth-child(27), .weather-rainy .drop:nth-child(27) { left: 67vw; animation-duration: 1.2s; animation-delay: -0.7s; }
.rainy .drop:nth-child(28), .weather-rainy .drop:nth-child(28) { left: 77vw; animation-duration: 1.6s; animation-delay: -0.9s; }
.rainy .drop:nth-child(29), .weather-rainy .drop:nth-child(29) { left: 87vw; animation-duration: 1.4s; animation-delay: -0.2s; }
.rainy .drop:nth-child(30), .weather-rainy .drop:nth-child(30) { left: 97vw; animation-duration: 1.7s; animation-delay: -0.4s; }
.rainy .drop:nth-child(31), .weather-rainy .drop:nth-child(31) { left: 12vw; animation-duration: 1.1s; animation-delay: -0.6s; }
.rainy .drop:nth-child(32), .weather-rainy .drop:nth-child(32) { left: 22vw; animation-duration: 1.8s; animation-delay: -0.8s; }
.rainy .drop:nth-child(33), .weather-rainy .drop:nth-child(33) { left: 32vw; animation-duration: 1.3s; animation-delay: -0.1s; }
.rainy .drop:nth-child(34), .weather-rainy .drop:nth-child(34) { left: 42vw; animation-duration: 1.6s; animation-delay: -0.3s; }
.rainy .drop:nth-child(35), .weather-rainy .drop:nth-child(35) { left: 52vw; animation-duration: 1.9s; animation-delay: -0.5s; }
.rainy .drop:nth-child(36), .weather-rainy .drop:nth-child(36) { left: 62vw; animation-duration: 1.4s; animation-delay: -0.7s; }
.rainy .drop:nth-child(37), .weather-rainy .drop:nth-child(37) { left: 72vw; animation-duration: 1.7s; animation-delay: -0.9s; }
.rainy .drop:nth-child(38), .weather-rainy .drop:nth-child(38) { left: 82vw; animation-duration: 1.2s; animation-delay: -0.2s; }
.rainy .drop:nth-child(39), .weather-rainy .drop:nth-child(39) { left: 92vw; animation-duration: 1.5s; animation-delay: -0.4s; }
.rainy .drop:nth-child(40), .weather-rainy .drop:nth-child(40) { left: 102vw; animation-duration: 1.8s; animation-delay: -0.6s; }
.rainy .drop:nth-child(41), .weather-rainy .drop:nth-child(41) { left: 8vw; animation-duration: 1.3s; animation-delay: -0.8s; }
.rainy .drop:nth-child(42), .weather-rainy .drop:nth-child(42) { left: 18vw; animation-duration: 1.6s; animation-delay: -0.1s; }
.rainy .drop:nth-child(43), .weather-rainy .drop:nth-child(43) { left: 28vw; animation-duration: 1.9s; animation-delay: -0.3s; }
.rainy .drop:nth-child(44), .weather-rainy .drop:nth-child(44) { left: 38vw; animation-duration: 1.4s; animation-delay: -0.5s; }
.rainy .drop:nth-child(45), .weather-rainy .drop:nth-child(45) { left: 48vw; animation-duration: 1.7s; animation-delay: -0.7s; }
.rainy .drop:nth-child(46), .weather-rainy .drop:nth-child(46) { left: 58vw; animation-duration: 1.2s; animation-delay: -0.9s; }
.rainy .drop:nth-child(47), .weather-rainy .drop:nth-child(47) { left: 68vw; animation-duration: 1.5s; animation-delay: -0.2s; }
.rainy .drop:nth-child(48), .weather-rainy .drop:nth-child(48) { left: 78vw; animation-duration: 1.8s; animation-delay: -0.4s; }
.rainy .drop:nth-child(49), .weather-rainy .drop:nth-child(49) { left: 88vw; animation-duration: 1.3s; animation-delay: -0.6s; }
.rainy .drop:nth-child(50), .weather-rainy .drop:nth-child(50) { left: 98vw; animation-duration: 1.6s; animation-delay: -0.8s; }
.rainy .drop:nth-child(51), .weather-rainy .drop:nth-child(51) { left: 3vw; animation-duration: 1.3s; animation-delay: -0.2s; }
.rainy .drop:nth-child(52), .weather-rainy .drop:nth-child(52) { left: 13vw; animation-duration: 1.7s; animation-delay: -0.4s; }
.rainy .drop:nth-child(53), .weather-rainy .drop:nth-child(53) { left: 23vw; animation-duration: 1.4s; animation-delay: -0.6s; }
.rainy .drop:nth-child(54), .weather-rainy .drop:nth-child(54) { left: 33vw; animation-duration: 1.8s; animation-delay: -0.8s; }
.rainy .drop:nth-child(55), .weather-rainy .drop:nth-child(55) { left: 43vw; animation-duration: 1.2s; animation-delay: -0.1s; }
.rainy .drop:nth-child(56), .weather-rainy .drop:nth-child(56) { left: 53vw; animation-duration: 1.6s; animation-delay: -0.3s; }
.rainy .drop:nth-child(57), .weather-rainy .drop:nth-child(57) { left: 63vw; animation-duration: 1.9s; animation-delay: -0.5s; }
.rainy .drop:nth-child(58), .weather-rainy .drop:nth-child(58) { left: 73vw; animation-duration: 1.1s; animation-delay: -0.7s; }
.rainy .drop:nth-child(59), .weather-rainy .drop:nth-child(59) { left: 83vw; animation-duration: 1.5s; animation-delay: -0.9s; }
.rainy .drop:nth-child(60), .weather-rainy .drop:nth-child(60) { left: 93vw; animation-duration: 1.8s; animation-delay: -0.2s; }
.rainy .drop:nth-child(61), .weather-rainy .drop:nth-child(61) { left: 103vw; animation-duration: 1.4s; animation-delay: -0.4s; }
.rainy .drop:nth-child(62), .weather-rainy .drop:nth-child(62) { left: 6vw; animation-duration: 1.7s; animation-delay: -0.6s; }
.rainy .drop:nth-child(63), .weather-rainy .drop:nth-child(63) { left: 16vw; animation-duration: 1.3s; animation-delay: -0.8s; }
.rainy .drop:nth-child(64), .weather-rainy .drop:nth-child(64) { left: 26vw; animation-duration: 1.6s; animation-delay: -0.1s; }
.rainy .drop:nth-child(65), .weather-rainy .drop:nth-child(65) { left: 36vw; animation-duration: 1.9s; animation-delay: -0.3s; }
.rainy .drop:nth-child(66), .weather-rainy .drop:nth-child(66) { left: 46vw; animation-duration: 1.2s; animation-delay: -0.5s; }
.rainy .drop:nth-child(67), .weather-rainy .drop:nth-child(67) { left: 56vw; animation-duration: 1.5s; animation-delay: -0.7s; }
.rainy .drop:nth-child(68), .weather-rainy .drop:nth-child(68) { left: 66vw; animation-duration: 1.8s; animation-delay: -0.9s; }
.rainy .drop:nth-child(69), .weather-rainy .drop:nth-child(69) { left: 76vw; animation-duration: 1.4s; animation-delay: -0.2s; }
.rainy .drop:nth-child(70), .weather-rainy .drop:nth-child(70) { left: 86vw; animation-duration: 1.7s; animation-delay: -0.4s; }
.rainy .drop:nth-child(71), .weather-rainy .drop:nth-child(71) { left: 96vw; animation-duration: 1.3s; animation-delay: -0.6s; }
.rainy .drop:nth-child(72), .weather-rainy .drop:nth-child(72) { left: 106vw; animation-duration: 1.6s; animation-delay: -0.8s; }
.rainy .drop:nth-child(73), .weather-rainy .drop:nth-child(73) { left: 9vw; animation-duration: 1.9s; animation-delay: -0.1s; }
.rainy .drop:nth-child(74), .weather-rainy .drop:nth-child(74) { left: 19vw; animation-duration: 1.2s; animation-delay: -0.3s; }
.rainy .drop:nth-child(75), .weather-rainy .drop:nth-child(75) { left: 29vw; animation-duration: 1.5s; animation-delay: -0.5s; }
.rainy .drop:nth-child(76), .weather-rainy .drop:nth-child(76) { left: 39vw; animation-duration: 1.8s; animation-delay: -0.7s; }
.rainy .drop:nth-child(77), .weather-rainy .drop:nth-child(77) { left: 49vw; animation-duration: 1.4s; animation-delay: -0.9s; }
.rainy .drop:nth-child(78), .weather-rainy .drop:nth-child(78) { left: 59vw; animation-duration: 1.7s; animation-delay: -0.2s; }
.rainy .drop:nth-child(79), .weather-rainy .drop:nth-child(79) { left: 69vw; animation-duration: 1.3s; animation-delay: -0.4s; }
.rainy .drop:nth-child(80), .weather-rainy .drop:nth-child(80) { left: 79vw; animation-duration: 1.6s; animation-delay: -0.6s; }
.rainy .drop:nth-child(81), .weather-rainy .drop:nth-child(81) { left: 89vw; animation-duration: 1.9s; animation-delay: -0.8s; }
.rainy .drop:nth-child(82), .weather-rainy .drop:nth-child(82) { left: 99vw; animation-duration: 1.1s; animation-delay: -0.1s; }
.rainy .drop:nth-child(83), .weather-rainy .drop:nth-child(83) { left: 109vw; animation-duration: 1.5s; animation-delay: -0.3s; }
.rainy .drop:nth-child(84), .weather-rainy .drop:nth-child(84) { left: 4vw; animation-duration: 1.8s; animation-delay: -0.5s; }
.rainy .drop:nth-child(85), .weather-rainy .drop:nth-child(85) { left: 14vw; animation-duration: 1.4s; animation-delay: -0.7s; }
.rainy .drop:nth-child(86), .weather-rainy .drop:nth-child(86) { left: 24vw; animation-duration: 1.7s; animation-delay: -0.9s; }
.rainy .drop:nth-child(87), .weather-rainy .drop:nth-child(87) { left: 34vw; animation-duration: 1.3s; animation-delay: -0.2s; }
.rainy .drop:nth-child(88), .weather-rainy .drop:nth-child(88) { left: 44vw; animation-duration: 1.6s; animation-delay: -0.4s; }
.rainy .drop:nth-child(89), .weather-rainy .drop:nth-child(89) { left: 54vw; animation-duration: 1.9s; animation-delay: -0.6s; }
.rainy .drop:nth-child(90), .weather-rainy .drop:nth-child(90) { left: 64vw; animation-duration: 1.2s; animation-delay: -0.8s; }
.rainy .drop:nth-child(91), .weather-rainy .drop:nth-child(91) { left: 74vw; animation-duration: 1.5s; animation-delay: -0.1s; }
.rainy .drop:nth-child(92), .weather-rainy .drop:nth-child(92) { left: 84vw; animation-duration: 1.8s; animation-delay: -0.3s; }
.rainy .drop:nth-child(93), .weather-rainy .drop:nth-child(93) { left: 94vw; animation-duration: 1.4s; animation-delay: -0.5s; }
.rainy .drop:nth-child(94), .weather-rainy .drop:nth-child(94) { left: 104vw; animation-duration: 1.7s; animation-delay: -0.7s; }
.rainy .drop:nth-child(95), .weather-rainy .drop:nth-child(95) { left: 11vw; animation-duration: 1.3s; animation-delay: -0.9s; }
.rainy .drop:nth-child(96), .weather-rainy .drop:nth-child(96) { left: 21vw; animation-duration: 1.6s; animation-delay: -0.2s; }
.rainy .drop:nth-child(97), .weather-rainy .drop:nth-child(97) { left: 31vw; animation-duration: 1.9s; animation-delay: -0.4s; }
.rainy .drop:nth-child(98), .weather-rainy .drop:nth-child(98) { left: 41vw; animation-duration: 1.2s; animation-delay: -0.6s; }
.rainy .drop:nth-child(99), .weather-rainy .drop:nth-child(99) { left: 51vw; animation-duration: 1.5s; animation-delay: -0.8s; }
.rainy .drop:nth-child(100), .weather-rainy .drop:nth-child(100) { left: 61vw; animation-duration: 1.8s; animation-delay: -0.1s; }

/* Fall animation for rain drops */
@keyframes fall {
  0% {
    transform: rotate(var(--angle)) translateX(0);
    opacity: 0.8;
  }
  50% {
    opacity: 0.6;
  }
  100% {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
    opacity: 0.3;
  }
}

/* Realistic layered rain override (streaks with depth and wind) */
.rainy .rain, .weather-rainy .rain { position: fixed; inset: 0; pointer-events: none; z-index: 1; }
.rainy .rain-layer, .weather-rainy .rain-layer { position: absolute; inset: 0; }
.rainy .rain-layer.back, .weather-rainy .rain-layer.back { opacity: 0.35; filter: blur(0.4px); }
.rainy .rain-layer.mid, .weather-rainy .rain-layer.mid { opacity: 0.6; }
.rainy .rain-layer.front, .weather-rainy .rain-layer.front { opacity: 0.9; }

.rainy .rain-layer .drop, .weather-rainy .rain-layer .drop {
  position: absolute;
  left: calc(100vw * var(--x)) !important;
  top: -10vh;
  width: 2px;
  height: calc(12px + var(--size) * 24px);
  background: linear-gradient(to bottom, rgba(173,216,230,0), rgba(147,197,253,0.75));
  border-radius: 1px;
  transform: translate3d(0, -100vh, 0);
  opacity: calc(0.3 + var(--opacity));
  animation: rain-fall-mid linear infinite;
  animation-duration: calc(0.6s + var(--speed) * 1.6s) !important;
  animation-delay: calc(var(--delay) * -2s) !important;
  will-change: transform;
  box-shadow: 0 0 6px rgba(96,165,250,0.35);
}

.rainy .rain-layer.back .drop, .weather-rainy .rain-layer.back .drop { animation-name: rain-fall-back !important; }
.rainy .rain-layer.mid .drop, .weather-rainy .rain-layer.mid .drop { animation-name: rain-fall-mid !important; }
.rainy .rain-layer.front .drop, .weather-rainy .rain-layer.front .drop { animation-name: rain-fall-front !important; }

@keyframes rain-fall-back { to { transform: translate3d(var(--wind), 110vh, 0) scaleY(1.1); } }
@keyframes rain-fall-mid  { to { transform: translate3d(calc(var(--wind) * 1.2), 110vh, 0) scaleY(1.15); } }
@keyframes rain-fall-front{ to { transform: translate3d(calc(var(--wind) * 1.4), 110vh, 0) scaleY(1.2); } }
.after\:absolute::after {
  content: var(--tw-content);
  position: absolute;
}
.after\:left-\[2px\]::after {
  content: var(--tw-content);
  left: 2px;
}
.after\:top-0\.5::after {
  content: var(--tw-content);
  top: 0.125rem;
}
.after\:top-\[2px\]::after {
  content: var(--tw-content);
  top: 2px;
}
.after\:h-5::after {
  content: var(--tw-content);
  height: 1.25rem;
}
.after\:w-5::after {
  content: var(--tw-content);
  width: 1.25rem;
}
.after\:rounded-full::after {
  content: var(--tw-content);
  border-radius: 9999px;
}
.after\:border::after {
  content: var(--tw-content);
  border-width: 1px;
}
.after\:border-gray-300::after {
  content: var(--tw-content);
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
}
.after\:border-secondary-300::after {
  content: var(--tw-content);
  --tw-border-opacity: 1;
  border-color: rgb(212 212 216 / var(--tw-border-opacity, 1));
}
.after\:bg-white::after {
  content: var(--tw-content);
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.after\:transition-all::after {
  content: var(--tw-content);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.after\:content-\[\'\'\]::after {
  --tw-content: '';
  content: var(--tw-content);
}
.hover\:scale-105:hover {
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.hover\:scale-\[1\.02\]:hover {
  --tw-scale-x: 1.02;
  --tw-scale-y: 1.02;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.hover\:border-gray-300:hover {
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
}
.hover\:border-gray-400:hover {
  --tw-border-opacity: 1;
  border-color: rgb(156 163 175 / var(--tw-border-opacity, 1));
}
.hover\:border-secondary-300:hover {
  --tw-border-opacity: 1;
  border-color: rgb(212 212 216 / var(--tw-border-opacity, 1));
}
.hover\:border-secondary-400:hover {
  --tw-border-opacity: 1;
  border-color: rgb(161 161 170 / var(--tw-border-opacity, 1));
}
.hover\:bg-black\/70:hover {
  background-color: rgb(0 0 0 / 0.7);
}
.hover\:bg-blue-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(29 78 216 / var(--tw-bg-opacity, 1));
}
.hover\:bg-brand-green-600:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(74 124 89 / var(--tw-bg-opacity, 1));
}
.hover\:bg-brand-rose-50\/60:hover {
  background-color: rgb(248 244 244 / 0.6);
}
.hover\:bg-gray-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}
.hover\:bg-gray-200:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
}
.hover\:bg-gray-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}
.hover\:bg-gray-800:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}
.hover\:bg-green-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(240 253 244 / var(--tw-bg-opacity, 1));
}
.hover\:bg-orange-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(194 65 12 / var(--tw-bg-opacity, 1));
}
.hover\:bg-primary-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(240 249 255 / var(--tw-bg-opacity, 1));
}
.hover\:bg-primary-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(3 105 161 / var(--tw-bg-opacity, 1));
}
.hover\:bg-purple-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(126 34 206 / var(--tw-bg-opacity, 1));
}
.hover\:bg-red-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
}
.hover\:bg-red-600:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
}
.hover\:bg-red-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(185 28 28 / var(--tw-bg-opacity, 1));
}
.hover\:bg-secondary-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(244 244 245 / var(--tw-bg-opacity, 1));
}
.hover\:bg-secondary-200:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(228 228 231 / var(--tw-bg-opacity, 1));
}
.hover\:bg-secondary-400:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(161 161 170 / var(--tw-bg-opacity, 1));
}
.hover\:bg-secondary-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(250 250 250 / var(--tw-bg-opacity, 1));
}
.hover\:bg-secondary-800:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(39 39 42 / var(--tw-bg-opacity, 1));
}
.hover\:bg-white:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.hover\:bg-opacity-60:hover {
  --tw-bg-opacity: 0.6;
}
.hover\:text-blue-500:hover {
  --tw-text-opacity: 1;
  color: rgb(59 130 246 / var(--tw-text-opacity, 1));
}
.hover\:text-blue-600:hover {
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / var(--tw-text-opacity, 1));
}
.hover\:text-blue-700:hover {
  --tw-text-opacity: 1;
  color: rgb(29 78 216 / var(--tw-text-opacity, 1));
}
.hover\:text-blue-800:hover {
  --tw-text-opacity: 1;
  color: rgb(30 64 175 / var(--tw-text-opacity, 1));
}
.hover\:text-brand-green-700:hover {
  --tw-text-opacity: 1;
  color: rgb(45 90 45 / var(--tw-text-opacity, 1));
}
.hover\:text-gray-300:hover {
  --tw-text-opacity: 1;
  color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}
.hover\:text-gray-500:hover {
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.hover\:text-gray-600:hover {
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}
.hover\:text-gray-700:hover {
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
.hover\:text-gray-800:hover {
  --tw-text-opacity: 1;
  color: rgb(31 41 55 / var(--tw-text-opacity, 1));
}
.hover\:text-gray-900:hover {
  --tw-text-opacity: 1;
  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.hover\:text-green-700:hover {
  --tw-text-opacity: 1;
  color: rgb(21 128 61 / var(--tw-text-opacity, 1));
}
.hover\:text-primary-400:hover {
  --tw-text-opacity: 1;
  color: rgb(56 189 248 / var(--tw-text-opacity, 1));
}
.hover\:text-red-500:hover {
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}
.hover\:text-red-600:hover {
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}
.hover\:text-red-700:hover {
  --tw-text-opacity: 1;
  color: rgb(185 28 28 / var(--tw-text-opacity, 1));
}
.hover\:text-red-900:hover {
  --tw-text-opacity: 1;
  color: rgb(127 29 29 / var(--tw-text-opacity, 1));
}
.hover\:text-secondary-500:hover {
  --tw-text-opacity: 1;
  color: rgb(113 113 122 / var(--tw-text-opacity, 1));
}
.hover\:text-secondary-600:hover {
  --tw-text-opacity: 1;
  color: rgb(82 82 91 / var(--tw-text-opacity, 1));
}
.hover\:text-secondary-700:hover {
  --tw-text-opacity: 1;
  color: rgb(63 63 70 / var(--tw-text-opacity, 1));
}
.hover\:text-secondary-900:hover {
  --tw-text-opacity: 1;
  color: rgb(24 24 27 / var(--tw-text-opacity, 1));
}
.hover\:text-white:hover {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.hover\:underline:hover {
  text-decoration-line: underline;
}
.hover\:opacity-70:hover {
  opacity: 0.7;
}
.hover\:opacity-75:hover {
  opacity: 0.75;
}
.hover\:opacity-80:hover {
  opacity: 0.8;
}
.hover\:opacity-90:hover {
  opacity: 0.9;
}
.hover\:shadow-dg-md:hover {
  --tw-shadow: 0 4px 16px rgba(0,0,0,.08);
  --tw-shadow-colored: 0 4px 16px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:shadow-lg:hover {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:shadow-md:hover {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:shadow-xl:hover {
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.focus\:border-blue-500:focus {
  --tw-border-opacity: 1;
  border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
}
.focus\:border-brand-green-700:focus {
  --tw-border-opacity: 1;
  border-color: rgb(45 90 45 / var(--tw-border-opacity, 1));
}
.focus\:border-primary-500:focus {
  --tw-border-opacity: 1;
  border-color: rgb(14 165 233 / var(--tw-border-opacity, 1));
}
.focus\:border-red-500:focus {
  --tw-border-opacity: 1;
  border-color: rgb(239 68 68 / var(--tw-border-opacity, 1));
}
.focus\:border-transparent:focus {
  border-color: transparent;
}
.focus\:bg-white:focus {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.focus\:outline-none:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.focus\:ring-2:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus\:ring-inset:focus {
  --tw-ring-inset: inset;
}
.focus\:ring-black:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(0 0 0 / var(--tw-ring-opacity, 1));
}
.focus\:ring-blue-500:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1));
}
.focus\:ring-brand-green-700:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(45 90 45 / var(--tw-ring-opacity, 1));
}
.focus\:ring-current:focus {
  --tw-ring-color: currentColor;
}
.focus\:ring-primary-500:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(14 165 233 / var(--tw-ring-opacity, 1));
}
.focus\:ring-purple-500:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(168 85 247 / var(--tw-ring-opacity, 1));
}
.focus\:ring-red-500:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(239 68 68 / var(--tw-ring-opacity, 1));
}
.focus\:ring-secondary-500:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(113 113 122 / var(--tw-ring-opacity, 1));
}
.focus\:ring-offset-0:focus {
  --tw-ring-offset-width: 0px;
}
.focus\:ring-offset-2:focus {
  --tw-ring-offset-width: 2px;
}
.focus\:ring-offset-current:focus {
  --tw-ring-offset-color: currentColor;
}
.disabled\:cursor-not-allowed:disabled {
  cursor: not-allowed;
}
.disabled\:opacity-50:disabled {
  opacity: 0.5;
}
.group:hover .group-hover\:underline {
  text-decoration-line: underline;
}
.group:hover .group-hover\:opacity-100 {
  opacity: 1;
}
.peer:checked ~ .peer-checked\:border-white {
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
}
.peer:checked ~ .peer-checked\:bg-blue-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
}
.peer:checked ~ .peer-checked\:bg-primary-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(2 132 199 / var(--tw-bg-opacity, 1));
}
.peer:checked ~ .peer-checked\:after\:translate-x-full::after {
  content: var(--tw-content);
  --tw-translate-x: 100%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.peer:checked ~ .peer-checked\:after\:border-white::after {
  content: var(--tw-content);
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
}
.peer:focus ~ .peer-focus\:outline-none {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.peer:focus ~ .peer-focus\:ring-4 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.peer:focus ~ .peer-focus\:ring-blue-300 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(147 197 253 / var(--tw-ring-opacity, 1));
}
.peer:focus ~ .peer-focus\:ring-primary-300 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(125 211 252 / var(--tw-ring-opacity, 1));
}
@media (min-width: 640px) {

  .sm\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sm\:flex-row {
    flex-direction: row;
  }

  .sm\:items-start {
    align-items: flex-start;
  }

  .sm\:items-end {
    align-items: flex-end;
  }

  .sm\:p-6 {
    padding: 1.5rem;
  }
}
@media (min-width: 768px) {

  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .md\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .md\:grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {

  .lg\:col-span-1 {
    grid-column: span 1 / span 1;
  }

  .lg\:col-span-3 {
    grid-column: span 3 / span 3;
  }

  .lg\:block {
    display: block;
  }

  .lg\:max-w-md {
    max-width: 28rem;
  }

  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lg\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
/*!********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[13].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[13].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[14].oneOf[13].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[14].oneOf[13].use[5]!./app/components/styles/night.scss ***!
  \********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* Night theme - Realistic stars and cosmic background */
.night, .weather-night {
  position: relative;
  overflow: hidden;
  /* Deep space background with nebula */
  background: radial-gradient(ellipse at 20% 30%, rgba(59, 130, 246, 0.1) 0%, transparent 50%), radial-gradient(ellipse at 80% 70%, rgba(147, 51, 234, 0.08) 0%, transparent 50%), linear-gradient(135deg, #0a0f1a 0%, #0f172a 30%, #1e293b 70%, #0a0f1a 100%);
  /* Realistic star field with actual star shapes */
}
.night::before, .weather-night::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: radial-gradient(2px 2px at 15% 25%, #ffffff 50%, transparent 51%), radial-gradient(1px 1px at 15% 25%, #ffffff 50%, transparent 51%), radial-gradient(2px 2px at 35% 45%, #ffffff 50%, transparent 51%), radial-gradient(1px 1px at 35% 45%, #ffffff 50%, transparent 51%), radial-gradient(2px 2px at 55% 15%, #ffffff 50%, transparent 51%), radial-gradient(1px 1px at 55% 15%, #ffffff 50%, transparent 51%), radial-gradient(2px 2px at 75% 35%, #ffffff 50%, transparent 51%), radial-gradient(1px 1px at 75% 35%, #ffffff 50%, transparent 51%), radial-gradient(2px 2px at 85% 55%, #ffffff 50%, transparent 51%), radial-gradient(1px 1px at 85% 55%, #ffffff 50%, transparent 51%), radial-gradient(2px 2px at 25% 75%, #ffffff 50%, transparent 51%), radial-gradient(1px 1px at 25% 75%, #ffffff 50%, transparent 51%), radial-gradient(2px 2px at 45% 85%, #ffffff 50%, transparent 51%), radial-gradient(1px 1px at 45% 85%, #ffffff 50%, transparent 51%), radial-gradient(2px 2px at 65% 65%, #ffffff 50%, transparent 51%), radial-gradient(1px 1px at 65% 65%, #ffffff 50%, transparent 51%), radial-gradient(2px 2px at 95% 25%, #ffffff 50%, transparent 51%), radial-gradient(1px 1px at 95% 25%, #ffffff 50%, transparent 51%), radial-gradient(2px 2px at 5% 55%, #ffffff 50%, transparent 51%), radial-gradient(1px 1px at 5% 55%, #ffffff 50%, transparent 51%), radial-gradient(1px 1px at 20% 40%, rgba(255, 255, 255, 0.8) 50%, transparent 51%), radial-gradient(1px 1px at 40% 20%, rgba(255, 255, 255, 0.8) 50%, transparent 51%), radial-gradient(1px 1px at 60% 50%, rgba(255, 255, 255, 0.8) 50%, transparent 51%), radial-gradient(1px 1px at 80% 30%, rgba(255, 255, 255, 0.8) 50%, transparent 51%), radial-gradient(1px 1px at 30% 80%, rgba(255, 255, 255, 0.8) 50%, transparent 51%), radial-gradient(1px 1px at 50% 90%, rgba(255, 255, 255, 0.8) 50%, transparent 51%), radial-gradient(1px 1px at 70% 70%, rgba(255, 255, 255, 0.8) 50%, transparent 51%), radial-gradient(1px 1px at 90% 60%, rgba(255, 255, 255, 0.8) 50%, transparent 51%), radial-gradient(0.5px 0.5px at 10% 10%, rgba(255, 255, 255, 0.6) 50%, transparent 51%), radial-gradient(0.5px 0.5px at 30% 30%, rgba(255, 255, 255, 0.6) 50%, transparent 51%), radial-gradient(0.5px 0.5px at 50% 10%, rgba(255, 255, 255, 0.6) 50%, transparent 51%), radial-gradient(0.5px 0.5px at 70% 30%, rgba(255, 255, 255, 0.6) 50%, transparent 51%), radial-gradient(0.5px 0.5px at 90% 10%, rgba(255, 255, 255, 0.6) 50%, transparent 51%), radial-gradient(0.5px 0.5px at 10% 50%, rgba(255, 255, 255, 0.6) 50%, transparent 51%), radial-gradient(0.5px 0.5px at 30% 70%, rgba(255, 255, 255, 0.6) 50%, transparent 51%), radial-gradient(0.5px 0.5px at 50% 50%, rgba(255, 255, 255, 0.6) 50%, transparent 51%), radial-gradient(0.5px 0.5px at 70% 70%, rgba(255, 255, 255, 0.6) 50%, transparent 51%), radial-gradient(0.5px 0.5px at 90% 50%, rgba(255, 255, 255, 0.6) 50%, transparent 51%), radial-gradient(0.5px 0.5px at 10% 90%, rgba(255, 255, 255, 0.6) 50%, transparent 51%), radial-gradient(0.5px 0.5px at 30% 90%, rgba(255, 255, 255, 0.6) 50%, transparent 51%), radial-gradient(0.5px 0.5px at 50% 90%, rgba(255, 255, 255, 0.6) 50%, transparent 51%), radial-gradient(0.5px 0.5px at 70% 90%, rgba(255, 255, 255, 0.6) 50%, transparent 51%), radial-gradient(0.5px 0.5px at 90% 90%, rgba(255, 255, 255, 0.6) 50%, transparent 51%);
  background-repeat: repeat;
  background-size: 800px 600px;
  background-position: 0 0;
  animation: starTwinkle 8s ease-in-out infinite, starDrift 60s linear infinite, sparkle 7s ease-in-out infinite;
  opacity: 0.9;
}
.night, .weather-night {
  /* Star flares overlay (replaces previous moon to avoid duplicate) */
}
.night::after, .weather-night::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.6;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='900' viewBox='0 0 1200 900'%3E%3Cg fill='none' stroke='white' stroke-opacity='0.9' stroke-width='1.2'%3E%3Cg opacity='0.85'%3E%3Cpath d='M600 120 l0 -10 m0 20 l0 -10 m-10 0 l10 0 m-20 0 l10 0'/%3E%3C/g%3E%3Cg opacity='0.8'%3E%3Cpath d='M250 260 l0 -8 m0 16 l0 -8 m-8 0 l8 0 m-16 0 l8 0'/%3E%3C/g%3E%3Cg opacity='0.8'%3E%3Cpath d='M980 300 l0 -8 m0 16 l0 -8 m-8 0 l8 0 m-16 0 l8 0'/%3E%3C/g%3E%3Cg opacity='0.75'%3E%3Cpath d='M800 520 l0 -9 m0 18 l0 -9 m-9 0 l9 0 m-18 0 l9 0'/%3E%3C/g%3E%3Cg opacity='0.8'%3E%3Cpath d='M150 560 l0 -7 m0 14 l0 -7 m-7 0 l7 0 m-14 0 l7 0'/%3E%3C/g%3E%3Cg opacity='0.85'%3E%3Cpath d='M1050 650 l0 -9 m0 18 l0 -9 m-9 0 l9 0 m-18 0 l9 0'/%3E%3C/g%3E%3Cg opacity='0.9'%3E%3Cpath d='M420 420 l0 -8 m0 16 l0 -8 m-8 0 l8 0 m-16 0 l8 0'/%3E%3C/g%3E%3Cg opacity='0.8'%3E%3Cpath d='M940 120 l0 -7 m0 14 l0 -7 m-7 0 l7 0 m-14 0 l7 0'/%3E%3C/g%3E%3Cg opacity='0.85'%3E%3Cpath d='M320 140 l0 -7 m0 14 l0 -7 m-7 0 l7 0 m-14 0 l7 0'/%3E%3C/g%3E%3Cg opacity='0.8'%3E%3Cpath d='M108 380 l0 -6 m0 12 l0 -6 m-6 0 l6 0 m-12 0 l6 0'/%3E%3C/g%3E%3Cg opacity='0.85'%3E%3Cpath d='M1090 420 l0 -6 m0 12 l0 -6 m-6 0 l6 0 m-12 0 l6 0'/%3E%3C/g%3E%3Cg opacity='0.9'%3E%3Cpath d='M540 760 l0 -7 m0 14 l0 -7 m-7 0 l7 0 m-14 0 l7 0'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 1200px 900px;
  animation: sparkle 6s ease-in-out infinite;
}
.night, .weather-night {
  /* Night theme colors */
  --dg-bg: #0f172a;
  --dg-ink: #f1f5f9;
  --dg-accent: #3b82f6;
  --dg-primary: #1e293b;
  --dg-secondary: #334155;
  --dg-success: #10b981;
  --dg-warning: #f59e0b;
  --dg-error: #ef4444;
  --dg-card-bg: rgba(30, 41, 59, 0.8);
  --dg-border: rgba(51, 65, 85, 0.5);
  --dg-hover: rgba(59, 130, 246, 0.1);
  --dg-text-primary: #f1f5f9;
  --dg-text-secondary: #cbd5e1;
  --dg-text-muted: #94a3b8;
  --dg-sidebar-bg: linear-gradient(135deg, #1e293b 0%, #334155 100%);
  --dg-header-bg: linear-gradient(135deg, #1e293b 0%, #334155 100%);
  /* Sidebar styling */
}
.night .sidebar, .weather-night .sidebar {
  background: var(--dg-sidebar-bg) !important;
  border-color: var(--dg-border) !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3) !important;
}
.night, .weather-night {
  /* Header styling */
}
.night .header, .weather-night .header {
  background: var(--dg-header-bg) !important;
  border-color: var(--dg-border) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}
.night, .weather-night {
  /* Card styling */
}
.night .card, .weather-night .card {
  background: var(--dg-card-bg) !important;
  border-color: var(--dg-border) !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2) !important;
  backdrop-filter: blur(10px) !important;
}
.night, .weather-night {
  /* Button styling */
}
.night .btn-primary, .weather-night .btn-primary {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%) !important;
  border-color: #3b82f6 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3) !important;
}
.night .btn-secondary, .weather-night .btn-secondary {
  background: linear-gradient(135deg, #334155 0%, #475569 100%) !important;
  border-color: #334155 !important;
  color: #f1f5f9 !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}
.night, .weather-night {
  /* Text styling */
}
.night h1, .night h2, .night h3, .night h4, .night h5, .night h6, .weather-night h1, .weather-night h2, .weather-night h3, .weather-night h4, .weather-night h5, .weather-night h6 {
  color: var(--dg-text-primary) !important;
}
.night p, .night span, .night div, .night a, .weather-night p, .weather-night span, .weather-night div, .weather-night a {
  color: var(--dg-text-secondary) !important;
}
.night .text-muted, .weather-night .text-muted {
  color: var(--dg-text-muted) !important;
}
.night, .weather-night {
  /* Night theme - Specific styles for buttons within cards (e.g., reaction buttons) */
}
.night .card button, .night .card a, .weather-night .card button, .weather-night .card a {
  background: rgba(255, 255, 255, 0.05) !important;
  color: #f1f5f9 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  transition: all 0.3s ease !important;
}
.night .card button:hover, .night .card a:hover, .weather-night .card button:hover, .weather-night .card a:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 0 10px rgba(96, 165, 250, 0.3) !important;
  transform: scale(1.05);
}
.night, .weather-night {
  /* Ensure icons and text inside these buttons also inherit colors */
}
.night .card button *, .night .card a *, .weather-night .card button *, .weather-night .card a * {
  color: #f1f5f9 !important;
}
.night, .weather-night {
  /* Override Tailwind classes */
}
.night [class*=bg-white], .night [class*=bg-gray], .night [class*=bg-slate], .night [class*=bg-zinc], .night [class*=bg-neutral], .weather-night [class*=bg-white], .weather-night [class*=bg-gray], .weather-night [class*=bg-slate], .weather-night [class*=bg-zinc], .weather-night [class*=bg-neutral] {
  background: transparent !important;
}
.night [class*=text-gray], .night [class*=text-slate], .night [class*=text-zinc], .night [class*=text-neutral], .weather-night [class*=text-gray], .weather-night [class*=text-slate], .weather-night [class*=text-zinc], .weather-night [class*=text-neutral] {
  color: var(--dg-text-secondary) !important;
}
.night [class*=border-gray], .night [class*=border-slate], .night [class*=border-zinc], .night [class*=border-neutral], .weather-night [class*=border-gray], .weather-night [class*=border-slate], .weather-night [class*=border-zinc], .weather-night [class*=border-neutral] {
  border-color: var(--dg-border) !important;
}

/* Realistic star animations */
@keyframes starTwinkle {
  0%, 100% {
    opacity: 0.6;
    transform: scale(1);
  }
  25% {
    opacity: 1;
    transform: scale(1.1);
  }
  50% {
    opacity: 0.8;
    transform: scale(0.9);
  }
  75% {
    opacity: 1;
    transform: scale(1.05);
  }
}
@keyframes starDrift {
  0% {
    background-position: 0 0;
    transform: translateX(0);
  }
  50% {
    background-position: 400px 300px;
    transform: translateX(10px);
  }
  100% {
    background-position: 800px 600px;
    transform: translateX(0);
  }
}
@keyframes moonGlow {
  0%, 100% {
    filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.3));
    transform: scale(1);
  }
  50% {
    filter: drop-shadow(0 0 30px rgba(255, 255, 255, 0.6));
    transform: scale(1.05);
  }
}
/* Subtle sparkle pulse for star flares overlay */
@keyframes sparkle {
  0%, 100% {
    opacity: 0.4;
  }
  50% {
    opacity: 0.75;
  }
}
/* Aurora animation */
@keyframes auroraWave {
  0% {
    transform: translateY(-2%) scale(1);
    opacity: 0.7;
  }
  50% {
    transform: translateY(2%) scale(1.03);
    opacity: 0.9;
  }
  100% {
    transform: translateY(-1%) scale(1.01);
    opacity: 0.75;
  }
}
@keyframes twinkleSlow {
  0%, 100% {
    opacity: 0.2;
  }
  50% {
    opacity: 0.8;
  }
}
@keyframes twinkleFast {
  0%, 100% {
    opacity: 0.4;
  }
  25%, 75% {
    opacity: 1;
  }
}
@keyframes moonGlow {
  0% {
    box-shadow: 0 0 20px rgba(248, 250, 252, 0.3), 0 0 40px rgba(248, 250, 252, 0.2), 0 0 60px rgba(248, 250, 252, 0.1);
  }
  100% {
    box-shadow: 0 0 30px rgba(248, 250, 252, 0.4), 0 0 50px rgba(248, 250, 252, 0.3), 0 0 70px rgba(248, 250, 252, 0.2);
  }
}
/*!********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[13].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[13].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[14].oneOf[13].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[14].oneOf[13].use[5]!./app/components/styles/rainy.scss ***!
  \********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/* Scoped SCSS rainy effect - only under .rainy /.weather-rainy */
.rainy,
.weather-rainy {
  position: relative;
  overflow: hidden;
  /* No gradient background – removed disturbing overlay */
}
.rainy::before,
.weather-rainy::before {
  content: none !important;
}
.rainy,
.weather-rainy {
  /* Remove ALL background colors in rainy mode */
}
.rainy *,
.weather-rainy * {
  background: transparent !important;
}
.rainy,
.weather-rainy {
  /* But keep specific elements visible */
}
.rainy .card,
.rainy .sidebar,
.rainy .header,
.rainy button,
.rainy .btn,
.rainy [role=button],
.weather-rainy .card,
.weather-rainy .sidebar,
.weather-rainy .header,
.weather-rainy button,
.weather-rainy .btn,
.weather-rainy [role=button] {
  background: inherit !important;
}
.rainy,
.weather-rainy {
  /* Ensure content sits above rain */
}
.rainy main,
.rainy .content,
.rainy .container,
.rainy .page-wrapper,
.weather-rainy main,
.weather-rainy .content,
.weather-rainy .container,
.weather-rainy .page-wrapper {
  position: relative;
  z-index: 2;
}
.rainy .rain,
.weather-rainy .rain {
  position: fixed;
  width: 120vw;
  height: 100vh;
  left: -10vw;
  top: 0;
  z-index: 1;
  pointer-events: none;
  /* Hide interactive hover helpers for clean background-only effect */
}
.rainy .rain .left,
.rainy .rain .right,
.weather-rainy .rain .left,
.weather-rainy .rain .right {
  width: 20vw;
  height: 100vh;
  left: 10vw;
  position: absolute;
  z-index: 2;
  display: none;
}
.rainy .rain .right,
.weather-rainy .rain .right {
  left: initial;
  right: 10vw;
}
.rainy .rain .right.center,
.weather-rainy .rain .right.center {
  right: 30vw;
}
.rainy .rain .left.center,
.weather-rainy .rain .left.center {
  left: 30vw;
}
@property --angle {
  .rainy .rain,
  .weather-rainy .rain {
    syntax: "<angle>";
    inherits: false;
    initial-value: 91deg;
  }
}
.rainy .rain .drop,
.weather-rainy .rain .drop {
  border: 0.2vmin solid transparent;
  border-bottom-color: rgba(171, 194, 233, 0.55);
  position: absolute;
  top: -5vmin;
  --angle: 91deg;
  filter: blur(0.2px);
}
.rainy .rain .drop:nth-child(1),
.weather-rainy .rain .drop:nth-child(1) {
  opacity: 0.56;
  left: 32.2vw;
  border-left-width: 1.5vmin;
  animation: fall-1 0.75s -3.5s ease-in infinite;
}
@keyframes fall-1 {
  6.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(2),
.weather-rainy .rain .drop:nth-child(2) {
  opacity: 0.31;
  left: 33.8vw;
  border-left-width: 0.2vmin;
  animation: fall-2 0.6s -9s ease-in infinite;
}
@keyframes fall-2 {
  3.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(3),
.weather-rainy .rain .drop:nth-child(3) {
  opacity: 0.35;
  left: 3.2vw;
  border-left-width: 0.9vmin;
  animation: fall-3 0.15s -11.5s ease-in infinite;
}
@keyframes fall-3 {
  8.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(4),
.weather-rainy .rain .drop:nth-child(4) {
  opacity: 0.56;
  left: 95.7vw;
  border-left-width: 1vmin;
  animation: fall-4 1.65s -5s ease-in infinite;
}
@keyframes fall-4 {
  3.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(5),
.weather-rainy .rain .drop:nth-child(5) {
  opacity: 0.67;
  left: 60.4vw;
  border-left-width: 1.4vmin;
  animation: fall-5 0.75s -9.5s ease-in infinite;
}
@keyframes fall-5 {
  10% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(6),
.weather-rainy .rain .drop:nth-child(6) {
  opacity: 0.54;
  left: 13.8vw;
  border-left-width: 1.9vmin;
  animation: fall-6 1.05s -2s ease-in infinite;
}
@keyframes fall-6 {
  4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(7),
.weather-rainy .rain .drop:nth-child(7) {
  opacity: 0.49;
  left: 24.3vw;
  border-left-width: 1.4vmin;
  animation: fall-7 0.75s -11.5s ease-in infinite;
}
@keyframes fall-7 {
  0.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(8),
.weather-rainy .rain .drop:nth-child(8) {
  opacity: 0.4;
  left: 59.6vw;
  border-left-width: 1.7vmin;
  animation: fall-8 0.6s -4s ease-in infinite;
}
@keyframes fall-8 {
  6.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(9),
.weather-rainy .rain .drop:nth-child(9) {
  opacity: 0.39;
  left: 22vw;
  border-left-width: 1vmin;
  animation: fall-9 0.6s -6s ease-in infinite;
}
@keyframes fall-9 {
  6.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(10),
.weather-rainy .rain .drop:nth-child(10) {
  opacity: 0.36;
  left: 26.4vw;
  border-left-width: 1.4vmin;
  animation: fall-10 0.9s -8.5s ease-in infinite;
}
@keyframes fall-10 {
  5.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(11),
.weather-rainy .rain .drop:nth-child(11) {
  opacity: 0.63;
  left: 68.4vw;
  border-left-width: 0.8vmin;
  animation: fall-11 1.5s -9.5s ease-in infinite;
}
@keyframes fall-11 {
  4.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(12),
.weather-rainy .rain .drop:nth-child(12) {
  opacity: 0.42;
  left: 6.2vw;
  border-left-width: 0.3vmin;
  animation: fall-12 0.75s -1.5s ease-in infinite;
}
@keyframes fall-12 {
  9% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(13),
.weather-rainy .rain .drop:nth-child(13) {
  opacity: 0.51;
  left: 3.6vw;
  border-left-width: 1.2vmin;
  animation: fall-13 1.35s -1s ease-in infinite;
}
@keyframes fall-13 {
  2.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(14),
.weather-rainy .rain .drop:nth-child(14) {
  opacity: 0.39;
  left: 65.9vw;
  border-left-width: 0.1vmin;
  animation: fall-14 2.25s -3.5s ease-in infinite;
}
@keyframes fall-14 {
  9% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(15),
.weather-rainy .rain .drop:nth-child(15) {
  opacity: 0.64;
  left: 55.6vw;
  border-left-width: 0.4vmin;
  animation: fall-15 1.65s -8s ease-in infinite;
}
@keyframes fall-15 {
  10% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(16),
.weather-rainy .rain .drop:nth-child(16) {
  opacity: 0.65;
  left: 59.8vw;
  border-left-width: 1.9vmin;
  animation: fall-16 0.75s -4.5s ease-in infinite;
}
@keyframes fall-16 {
  5.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(17),
.weather-rainy .rain .drop:nth-child(17) {
  opacity: 0.39;
  left: 107.3vw;
  border-left-width: 0.7vmin;
  animation: fall-17 1.05s -9s ease-in infinite;
}
@keyframes fall-17 {
  2.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(18),
.weather-rainy .rain .drop:nth-child(18) {
  opacity: 0.57;
  left: 52.3vw;
  border-left-width: 1.2vmin;
  animation: fall-18 0.3s -5.5s ease-in infinite;
}
@keyframes fall-18 {
  7% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(19),
.weather-rainy .rain .drop:nth-child(19) {
  opacity: 0.4;
  left: 11.3vw;
  border-left-width: 1vmin;
  animation: fall-19 1.35s -6.5s ease-in infinite;
}
@keyframes fall-19 {
  9.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(20),
.weather-rainy .rain .drop:nth-child(20) {
  opacity: 0.33;
  left: 105.2vw;
  border-left-width: 0.8vmin;
  animation: fall-20 1.35s -0.5s ease-in infinite;
}
@keyframes fall-20 {
  9.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(21),
.weather-rainy .rain .drop:nth-child(21) {
  opacity: 0.52;
  left: 111.6vw;
  border-left-width: 0.5vmin;
  animation: fall-21 1.2s -9.5s ease-in infinite;
}
@keyframes fall-21 {
  3.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(22),
.weather-rainy .rain .drop:nth-child(22) {
  opacity: 0.67;
  left: 64.3vw;
  border-left-width: 1.6vmin;
  animation: fall-22 0.75s -9.5s ease-in infinite;
}
@keyframes fall-22 {
  5.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(23),
.weather-rainy .rain .drop:nth-child(23) {
  opacity: 0.59;
  left: 8.5vw;
  border-left-width: 1.6vmin;
  animation: fall-23 2.25s -6.5s ease-in infinite;
}
@keyframes fall-23 {
  4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(24),
.weather-rainy .rain .drop:nth-child(24) {
  opacity: 0.49;
  left: 30.7vw;
  border-left-width: 0.8vmin;
  animation: fall-24 2.1s -3s ease-in infinite;
}
@keyframes fall-24 {
  2.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(25),
.weather-rainy .rain .drop:nth-child(25) {
  opacity: 0.39;
  left: 103.9vw;
  border-left-width: 0.9vmin;
  animation: fall-25 1.5s -5s ease-in infinite;
}
@keyframes fall-25 {
  0.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(26),
.weather-rainy .rain .drop:nth-child(26) {
  opacity: 0.46;
  left: 72vw;
  border-left-width: 0.5vmin;
  animation: fall-26 0.45s -8s ease-in infinite;
}
@keyframes fall-26 {
  4.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(27),
.weather-rainy .rain .drop:nth-child(27) {
  opacity: 0.6;
  left: 99.5vw;
  border-left-width: 1.5vmin;
  animation: fall-27 1.5s -1.5s ease-in infinite;
}
@keyframes fall-27 {
  2.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(28),
.weather-rainy .rain .drop:nth-child(28) {
  opacity: 0.48;
  left: 19.6vw;
  border-left-width: 1.3vmin;
  animation: fall-28 1.95s -3s ease-in infinite;
}
@keyframes fall-28 {
  3.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(29),
.weather-rainy .rain .drop:nth-child(29) {
  opacity: 0.4;
  left: 37.6vw;
  border-left-width: 1.2vmin;
  animation: fall-29 1.95s -6s ease-in infinite;
}
@keyframes fall-29 {
  3.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(30),
.weather-rainy .rain .drop:nth-child(30) {
  opacity: 0.62;
  left: 59.8vw;
  border-left-width: 1.3vmin;
  animation: fall-30 0.45s -2s ease-in infinite;
}
@keyframes fall-30 {
  0.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(31),
.weather-rainy .rain .drop:nth-child(31) {
  opacity: 0.35;
  left: 3.5vw;
  border-left-width: 1.2vmin;
  animation: fall-31 0.75s -7.5s ease-in infinite;
}
@keyframes fall-31 {
  9% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(32),
.weather-rainy .rain .drop:nth-child(32) {
  opacity: 0.7;
  left: 42.2vw;
  border-left-width: 0.7vmin;
  animation: fall-32 0.45s -8s ease-in infinite;
}
@keyframes fall-32 {
  5% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(33),
.weather-rainy .rain .drop:nth-child(33) {
  opacity: 0.56;
  left: 85.5vw;
  border-left-width: 1.6vmin;
  animation: fall-33 2.1s -10s ease-in infinite;
}
@keyframes fall-33 {
  7.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(34),
.weather-rainy .rain .drop:nth-child(34) {
  opacity: 0.33;
  left: 109vw;
  border-left-width: 1.4vmin;
  animation: fall-34 0.15s -12s ease-in infinite;
}
@keyframes fall-34 {
  3.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(35),
.weather-rainy .rain .drop:nth-child(35) {
  opacity: 0.44;
  left: 35.8vw;
  border-left-width: 1.3vmin;
  animation: fall-35 0.15s -8.5s ease-in infinite;
}
@keyframes fall-35 {
  9.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(36),
.weather-rainy .rain .drop:nth-child(36) {
  opacity: 0.68;
  left: 36.2vw;
  border-left-width: 1vmin;
  animation: fall-36 0.75s -1.5s ease-in infinite;
}
@keyframes fall-36 {
  8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(37),
.weather-rainy .rain .drop:nth-child(37) {
  opacity: 0.61;
  left: 95.1vw;
  border-left-width: 1.1vmin;
  animation: fall-37 0.6s -7.5s ease-in infinite;
}
@keyframes fall-37 {
  3% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(38),
.weather-rainy .rain .drop:nth-child(38) {
  opacity: 0.36;
  left: 99.1vw;
  border-left-width: 1.9vmin;
  animation: fall-38 2.25s -5s ease-in infinite;
}
@keyframes fall-38 {
  8.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(39),
.weather-rainy .rain .drop:nth-child(39) {
  opacity: 0.61;
  left: 71.1vw;
  border-left-width: 0.2vmin;
  animation: fall-39 1.35s -3.5s ease-in infinite;
}
@keyframes fall-39 {
  9% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(40),
.weather-rainy .rain .drop:nth-child(40) {
  opacity: 0.67;
  left: 4vw;
  border-left-width: 0.6vmin;
  animation: fall-40 0.6s -3.5s ease-in infinite;
}
@keyframes fall-40 {
  3% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(41),
.weather-rainy .rain .drop:nth-child(41) {
  opacity: 0.65;
  left: 80.2vw;
  border-left-width: 0.6vmin;
  animation: fall-41 1.95s -4.5s ease-in infinite;
}
@keyframes fall-41 {
  5.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(42),
.weather-rainy .rain .drop:nth-child(42) {
  opacity: 0.7;
  left: 109.9vw;
  border-left-width: 0.2vmin;
  animation: fall-42 2.1s -1.5s ease-in infinite;
}
@keyframes fall-42 {
  7% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(43),
.weather-rainy .rain .drop:nth-child(43) {
  opacity: 0.48;
  left: 67.9vw;
  border-left-width: 0.8vmin;
  animation: fall-43 1.5s -8s ease-in infinite;
}
@keyframes fall-43 {
  3.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(44),
.weather-rainy .rain .drop:nth-child(44) {
  opacity: 0.57;
  left: 61.2vw;
  border-left-width: 1.2vmin;
  animation: fall-44 0.15s -4s ease-in infinite;
}
@keyframes fall-44 {
  2.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(45),
.weather-rainy .rain .drop:nth-child(45) {
  opacity: 0.38;
  left: 14.8vw;
  border-left-width: 0.5vmin;
  animation: fall-45 1.65s -12.5s ease-in infinite;
}
@keyframes fall-45 {
  4.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(46),
.weather-rainy .rain .drop:nth-child(46) {
  opacity: 0.46;
  left: 9vw;
  border-left-width: 1.4vmin;
  animation: fall-46 0.3s -6.5s ease-in infinite;
}
@keyframes fall-46 {
  2.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(47),
.weather-rainy .rain .drop:nth-child(47) {
  opacity: 0.4;
  left: 65.9vw;
  border-left-width: 0.9vmin;
  animation: fall-47 0.9s -5.5s ease-in infinite;
}
@keyframes fall-47 {
  0.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(48),
.weather-rainy .rain .drop:nth-child(48) {
  opacity: 0.54;
  left: 87.2vw;
  border-left-width: 1.1vmin;
  animation: fall-48 1.05s -10s ease-in infinite;
}
@keyframes fall-48 {
  5.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(49),
.weather-rainy .rain .drop:nth-child(49) {
  opacity: 0.65;
  left: 69.9vw;
  border-left-width: 1.6vmin;
  animation: fall-49 2.1s -6.5s ease-in infinite;
}
@keyframes fall-49 {
  7.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(50),
.weather-rainy .rain .drop:nth-child(50) {
  opacity: 0.52;
  left: 92.1vw;
  border-left-width: 1.8vmin;
  animation: fall-50 0.3s -6s ease-in infinite;
}
@keyframes fall-50 {
  5% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(51),
.weather-rainy .rain .drop:nth-child(51) {
  opacity: 0.32;
  left: 72.7vw;
  border-left-width: 0.3vmin;
  animation: fall-51 1.2s -5.5s ease-in infinite;
}
@keyframes fall-51 {
  7.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(52),
.weather-rainy .rain .drop:nth-child(52) {
  opacity: 0.57;
  left: 29.9vw;
  border-left-width: 1.7vmin;
  animation: fall-52 1.5s -1s ease-in infinite;
}
@keyframes fall-52 {
  5.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(53),
.weather-rainy .rain .drop:nth-child(53) {
  opacity: 0.57;
  left: 78vw;
  border-left-width: 0.7vmin;
  animation: fall-53 1.35s -9.5s ease-in infinite;
}
@keyframes fall-53 {
  0.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(54),
.weather-rainy .rain .drop:nth-child(54) {
  opacity: 0.41;
  left: 54.6vw;
  border-left-width: 1.8vmin;
  animation: fall-54 1.35s -9s ease-in infinite;
}
@keyframes fall-54 {
  6.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(55),
.weather-rainy .rain .drop:nth-child(55) {
  opacity: 0.32;
  left: 35vw;
  border-left-width: 1.6vmin;
  animation: fall-55 0.9s -2.5s ease-in infinite;
}
@keyframes fall-55 {
  9% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(56),
.weather-rainy .rain .drop:nth-child(56) {
  opacity: 0.66;
  left: 42.9vw;
  border-left-width: 1.5vmin;
  animation: fall-56 0.75s -12s ease-in infinite;
}
@keyframes fall-56 {
  5% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(57),
.weather-rainy .rain .drop:nth-child(57) {
  opacity: 0.66;
  left: 117.3vw;
  border-left-width: 0.1vmin;
  animation: fall-57 0.3s -9s ease-in infinite;
}
@keyframes fall-57 {
  2.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(58),
.weather-rainy .rain .drop:nth-child(58) {
  opacity: 0.44;
  left: 36.8vw;
  border-left-width: 0.1vmin;
  animation: fall-58 0.15s -6s ease-in infinite;
}
@keyframes fall-58 {
  2.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(59),
.weather-rainy .rain .drop:nth-child(59) {
  opacity: 0.62;
  left: 100.7vw;
  border-left-width: 1.2vmin;
  animation: fall-59 0.75s -11.5s ease-in infinite;
}
@keyframes fall-59 {
  4.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(60),
.weather-rainy .rain .drop:nth-child(60) {
  opacity: 0.44;
  left: 85vw;
  border-left-width: 1.6vmin;
  animation: fall-60 0.15s -10.5s ease-in infinite;
}
@keyframes fall-60 {
  7.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(61),
.weather-rainy .rain .drop:nth-child(61) {
  opacity: 0.36;
  left: 17.9vw;
  border-left-width: 0.3vmin;
  animation: fall-61 0.15s -4s ease-in infinite;
}
@keyframes fall-61 {
  1.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(62),
.weather-rainy .rain .drop:nth-child(62) {
  opacity: 0.65;
  left: 10.1vw;
  border-left-width: 0.3vmin;
  animation: fall-62 1.65s -8.5s ease-in infinite;
}
@keyframes fall-62 {
  0.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(63),
.weather-rainy .rain .drop:nth-child(63) {
  opacity: 0.36;
  left: 74vw;
  border-left-width: 1.1vmin;
  animation: fall-63 1.95s -5s ease-in infinite;
}
@keyframes fall-63 {
  8.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(64),
.weather-rainy .rain .drop:nth-child(64) {
  opacity: 0.52;
  left: 92.7vw;
  border-left-width: 0.9vmin;
  animation: fall-64 2.25s -10.5s ease-in infinite;
}
@keyframes fall-64 {
  0.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(65),
.weather-rainy .rain .drop:nth-child(65) {
  opacity: 0.57;
  left: 73.3vw;
  border-left-width: 0.9vmin;
  animation: fall-65 1.5s -6s ease-in infinite;
}
@keyframes fall-65 {
  4.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(66),
.weather-rainy .rain .drop:nth-child(66) {
  opacity: 0.58;
  left: 69.5vw;
  border-left-width: 1vmin;
  animation: fall-66 1.2s -1.5s ease-in infinite;
}
@keyframes fall-66 {
  2.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(67),
.weather-rainy .rain .drop:nth-child(67) {
  opacity: 0.58;
  left: 111.7vw;
  border-left-width: 0.5vmin;
  animation: fall-67 1.05s -6s ease-in infinite;
}
@keyframes fall-67 {
  5% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(68),
.weather-rainy .rain .drop:nth-child(68) {
  opacity: 0.58;
  left: 118.9vw;
  border-left-width: 0.3vmin;
  animation: fall-68 1.35s -7s ease-in infinite;
}
@keyframes fall-68 {
  3.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(69),
.weather-rainy .rain .drop:nth-child(69) {
  opacity: 0.44;
  left: 32.9vw;
  border-left-width: 1.6vmin;
  animation: fall-69 1.05s -10s ease-in infinite;
}
@keyframes fall-69 {
  7% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(70),
.weather-rainy .rain .drop:nth-child(70) {
  opacity: 0.43;
  left: 3.7vw;
  border-left-width: 1.5vmin;
  animation: fall-70 1.8s -6s ease-in infinite;
}
@keyframes fall-70 {
  8.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(71),
.weather-rainy .rain .drop:nth-child(71) {
  opacity: 0.57;
  left: 45.3vw;
  border-left-width: 2vmin;
  animation: fall-71 1.5s -8.5s ease-in infinite;
}
@keyframes fall-71 {
  5.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(72),
.weather-rainy .rain .drop:nth-child(72) {
  opacity: 0.4;
  left: 62.6vw;
  border-left-width: 1.3vmin;
  animation: fall-72 0.75s -11.5s ease-in infinite;
}
@keyframes fall-72 {
  0.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(73),
.weather-rainy .rain .drop:nth-child(73) {
  opacity: 0.66;
  left: 73.9vw;
  border-left-width: 1vmin;
  animation: fall-73 1.2s -11s ease-in infinite;
}
@keyframes fall-73 {
  7% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(74),
.weather-rainy .rain .drop:nth-child(74) {
  opacity: 0.42;
  left: 72.2vw;
  border-left-width: 1.4vmin;
  animation: fall-74 0.75s -9s ease-in infinite;
}
@keyframes fall-74 {
  3% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(75),
.weather-rainy .rain .drop:nth-child(75) {
  opacity: 0.56;
  left: 113.1vw;
  border-left-width: 1.9vmin;
  animation: fall-75 0.15s -12s ease-in infinite;
}
@keyframes fall-75 {
  2.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(76),
.weather-rainy .rain .drop:nth-child(76) {
  opacity: 0.35;
  left: 17.9vw;
  border-left-width: 1.2vmin;
  animation: fall-76 0.15s -8s ease-in infinite;
}
@keyframes fall-76 {
  2.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(77),
.weather-rainy .rain .drop:nth-child(77) {
  opacity: 0.39;
  left: 104.3vw;
  border-left-width: 1.7vmin;
  animation: fall-77 1.5s -9s ease-in infinite;
}
@keyframes fall-77 {
  7.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(78),
.weather-rainy .rain .drop:nth-child(78) {
  opacity: 0.45;
  left: 41.5vw;
  border-left-width: 1.3vmin;
  animation: fall-78 0.3s -5s ease-in infinite;
}
@keyframes fall-78 {
  7.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(79),
.weather-rainy .rain .drop:nth-child(79) {
  opacity: 0.63;
  left: 54.9vw;
  border-left-width: 0.6vmin;
  animation: fall-79 0.3s -4.5s ease-in infinite;
}
@keyframes fall-79 {
  3.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(80),
.weather-rainy .rain .drop:nth-child(80) {
  opacity: 0.32;
  left: 82.4vw;
  border-left-width: 0.7vmin;
  animation: fall-80 0.15s -6.5s ease-in infinite;
}
@keyframes fall-80 {
  2.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(81),
.weather-rainy .rain .drop:nth-child(81) {
  opacity: 0.6;
  left: 90.9vw;
  border-left-width: 0.4vmin;
  animation: fall-81 1.65s -2.5s ease-in infinite;
}
@keyframes fall-81 {
  2.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(82),
.weather-rainy .rain .drop:nth-child(82) {
  opacity: 0.66;
  left: 37.9vw;
  border-left-width: 1.3vmin;
  animation: fall-82 1.5s -11.5s ease-in infinite;
}
@keyframes fall-82 {
  9.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(83),
.weather-rainy .rain .drop:nth-child(83) {
  opacity: 0.32;
  left: 109.2vw;
  border-left-width: 0.4vmin;
  animation: fall-83 1.05s -4s ease-in infinite;
}
@keyframes fall-83 {
  5% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(84),
.weather-rainy .rain .drop:nth-child(84) {
  opacity: 0.41;
  left: 51.1vw;
  border-left-width: 1.1vmin;
  animation: fall-84 1.35s -4s ease-in infinite;
}
@keyframes fall-84 {
  9.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(85),
.weather-rainy .rain .drop:nth-child(85) {
  opacity: 0.67;
  left: 22.5vw;
  border-left-width: 1.8vmin;
  animation: fall-85 1.8s -3.5s ease-in infinite;
}
@keyframes fall-85 {
  5% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(86),
.weather-rainy .rain .drop:nth-child(86) {
  opacity: 0.42;
  left: 98.1vw;
  border-left-width: 0.7vmin;
  animation: fall-86 1.8s -3.5s ease-in infinite;
}
@keyframes fall-86 {
  2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(87),
.weather-rainy .rain .drop:nth-child(87) {
  opacity: 0.35;
  left: 71.1vw;
  border-left-width: 0.3vmin;
  animation: fall-87 2.25s -8.5s ease-in infinite;
}
@keyframes fall-87 {
  9% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(88),
.weather-rainy .rain .drop:nth-child(88) {
  opacity: 0.33;
  left: 80vw;
  border-left-width: 1.4vmin;
  animation: fall-88 1.65s -5s ease-in infinite;
}
@keyframes fall-88 {
  1% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(89),
.weather-rainy .rain .drop:nth-child(89) {
  opacity: 0.4;
  left: 114.2vw;
  border-left-width: 0.3vmin;
  animation: fall-89 0.15s -7.5s ease-in infinite;
}
@keyframes fall-89 {
  7.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(90),
.weather-rainy .rain .drop:nth-child(90) {
  opacity: 0.44;
  left: 89.9vw;
  border-left-width: 1vmin;
  animation: fall-90 0.6s -10.5s ease-in infinite;
}
@keyframes fall-90 {
  2.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(91),
.weather-rainy .rain .drop:nth-child(91) {
  opacity: 0.67;
  left: 29.4vw;
  border-left-width: 0.3vmin;
  animation: fall-91 2.25s -5.5s ease-in infinite;
}
@keyframes fall-91 {
  9.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(92),
.weather-rainy .rain .drop:nth-child(92) {
  opacity: 0.6;
  left: 58.9vw;
  border-left-width: 1.9vmin;
  animation: fall-92 1.8s -5.5s ease-in infinite;
}
@keyframes fall-92 {
  4.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(93),
.weather-rainy .rain .drop:nth-child(93) {
  opacity: 0.66;
  left: 3.6vw;
  border-left-width: 1.6vmin;
  animation: fall-93 0.9s -3s ease-in infinite;
}
@keyframes fall-93 {
  9.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(94),
.weather-rainy .rain .drop:nth-child(94) {
  opacity: 0.52;
  left: 117.5vw;
  border-left-width: 0.7vmin;
  animation: fall-94 0.3s -12.5s ease-in infinite;
}
@keyframes fall-94 {
  4.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(95),
.weather-rainy .rain .drop:nth-child(95) {
  opacity: 0.51;
  left: 63.8vw;
  border-left-width: 0.5vmin;
  animation: fall-95 1.95s -12s ease-in infinite;
}
@keyframes fall-95 {
  0.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(96),
.weather-rainy .rain .drop:nth-child(96) {
  opacity: 0.49;
  left: 99.1vw;
  border-left-width: 2vmin;
  animation: fall-96 2.1s -5.5s ease-in infinite;
}
@keyframes fall-96 {
  6.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(97),
.weather-rainy .rain .drop:nth-child(97) {
  opacity: 0.32;
  left: 116.5vw;
  border-left-width: 0.3vmin;
  animation: fall-97 0.15s -12.5s ease-in infinite;
}
@keyframes fall-97 {
  9.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(98),
.weather-rainy .rain .drop:nth-child(98) {
  opacity: 0.68;
  left: 40.5vw;
  border-left-width: 1.2vmin;
  animation: fall-98 1.8s -0.5s ease-in infinite;
}
@keyframes fall-98 {
  6.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(99),
.weather-rainy .rain .drop:nth-child(99) {
  opacity: 0.61;
  left: 95.2vw;
  border-left-width: 1.1vmin;
  animation: fall-99 1.05s -10.5s ease-in infinite;
}
@keyframes fall-99 {
  5% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(100),
.weather-rainy .rain .drop:nth-child(100) {
  opacity: 0.66;
  left: 69vw;
  border-left-width: 0.2vmin;
  animation: fall-100 1.5s -10s ease-in infinite;
}
@keyframes fall-100 {
  5% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(101),
.weather-rainy .rain .drop:nth-child(101) {
  opacity: 0.55;
  left: 87.7vw;
  border-left-width: 0.6vmin;
  animation: fall-101 0.75s -1s ease-in infinite;
}
@keyframes fall-101 {
  6.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(102),
.weather-rainy .rain .drop:nth-child(102) {
  opacity: 0.46;
  left: 105.3vw;
  border-left-width: 1.1vmin;
  animation: fall-102 1.35s -5.5s ease-in infinite;
}
@keyframes fall-102 {
  1% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(103),
.weather-rainy .rain .drop:nth-child(103) {
  opacity: 0.54;
  left: 12.1vw;
  border-left-width: 1.1vmin;
  animation: fall-103 0.9s -7.5s ease-in infinite;
}
@keyframes fall-103 {
  3.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(104),
.weather-rainy .rain .drop:nth-child(104) {
  opacity: 0.54;
  left: 35.9vw;
  border-left-width: 1vmin;
  animation: fall-104 1.8s -2s ease-in infinite;
}
@keyframes fall-104 {
  8.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(105),
.weather-rainy .rain .drop:nth-child(105) {
  opacity: 0.52;
  left: 13.8vw;
  border-left-width: 1.4vmin;
  animation: fall-105 1.2s -1.5s ease-in infinite;
}
@keyframes fall-105 {
  4.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(106),
.weather-rainy .rain .drop:nth-child(106) {
  opacity: 0.45;
  left: 87.4vw;
  border-left-width: 0.8vmin;
  animation: fall-106 1.2s -1s ease-in infinite;
}
@keyframes fall-106 {
  9.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(107),
.weather-rainy .rain .drop:nth-child(107) {
  opacity: 0.39;
  left: 98.6vw;
  border-left-width: 1.6vmin;
  animation: fall-107 0.75s -8.5s ease-in infinite;
}
@keyframes fall-107 {
  2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(108),
.weather-rainy .rain .drop:nth-child(108) {
  opacity: 0.59;
  left: 84.5vw;
  border-left-width: 1vmin;
  animation: fall-108 1.8s -9.5s ease-in infinite;
}
@keyframes fall-108 {
  4.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(109),
.weather-rainy .rain .drop:nth-child(109) {
  opacity: 0.5;
  left: 31.6vw;
  border-left-width: 2vmin;
  animation: fall-109 1.8s -12.5s ease-in infinite;
}
@keyframes fall-109 {
  2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(110),
.weather-rainy .rain .drop:nth-child(110) {
  opacity: 0.62;
  left: 108vw;
  border-left-width: 0.1vmin;
  animation: fall-110 1.65s -11s ease-in infinite;
}
@keyframes fall-110 {
  4.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(111),
.weather-rainy .rain .drop:nth-child(111) {
  opacity: 0.69;
  left: 38vw;
  border-left-width: 1vmin;
  animation: fall-111 1.95s -1.5s ease-in infinite;
}
@keyframes fall-111 {
  3% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(112),
.weather-rainy .rain .drop:nth-child(112) {
  opacity: 0.39;
  left: 39.5vw;
  border-left-width: 0.3vmin;
  animation: fall-112 0.3s -2s ease-in infinite;
}
@keyframes fall-112 {
  7% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(113),
.weather-rainy .rain .drop:nth-child(113) {
  opacity: 0.55;
  left: 65.8vw;
  border-left-width: 1.4vmin;
  animation: fall-113 0.3s -0.5s ease-in infinite;
}
@keyframes fall-113 {
  6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(114),
.weather-rainy .rain .drop:nth-child(114) {
  opacity: 0.36;
  left: 56.6vw;
  border-left-width: 1.3vmin;
  animation: fall-114 0.6s -4s ease-in infinite;
}
@keyframes fall-114 {
  8.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(115),
.weather-rainy .rain .drop:nth-child(115) {
  opacity: 0.33;
  left: 81.4vw;
  border-left-width: 1.8vmin;
  animation: fall-115 1.5s -12.5s ease-in infinite;
}
@keyframes fall-115 {
  6.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(116),
.weather-rainy .rain .drop:nth-child(116) {
  opacity: 0.51;
  left: 68.4vw;
  border-left-width: 0.2vmin;
  animation: fall-116 1.65s -11.5s ease-in infinite;
}
@keyframes fall-116 {
  9.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(117),
.weather-rainy .rain .drop:nth-child(117) {
  opacity: 0.66;
  left: 11.3vw;
  border-left-width: 0.6vmin;
  animation: fall-117 1.65s -8s ease-in infinite;
}
@keyframes fall-117 {
  8.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(118),
.weather-rainy .rain .drop:nth-child(118) {
  opacity: 0.35;
  left: 94.3vw;
  border-left-width: 0.7vmin;
  animation: fall-118 1.95s -12s ease-in infinite;
}
@keyframes fall-118 {
  5% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(119),
.weather-rainy .rain .drop:nth-child(119) {
  opacity: 0.67;
  left: 111.2vw;
  border-left-width: 1.4vmin;
  animation: fall-119 2.1s -10s ease-in infinite;
}
@keyframes fall-119 {
  9.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(120),
.weather-rainy .rain .drop:nth-child(120) {
  opacity: 0.5;
  left: 3vw;
  border-left-width: 0.5vmin;
  animation: fall-120 0.6s -8.5s ease-in infinite;
}
@keyframes fall-120 {
  6.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(121),
.weather-rainy .rain .drop:nth-child(121) {
  opacity: 0.56;
  left: 70.2vw;
  border-left-width: 0.9vmin;
  animation: fall-121 0.6s -5s ease-in infinite;
}
@keyframes fall-121 {
  2.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(122),
.weather-rainy .rain .drop:nth-child(122) {
  opacity: 0.49;
  left: 69.5vw;
  border-left-width: 1.2vmin;
  animation: fall-122 0.15s -3.5s ease-in infinite;
}
@keyframes fall-122 {
  5.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(123),
.weather-rainy .rain .drop:nth-child(123) {
  opacity: 0.4;
  left: 27.7vw;
  border-left-width: 1.8vmin;
  animation: fall-123 1.5s -8.5s ease-in infinite;
}
@keyframes fall-123 {
  10% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(124),
.weather-rainy .rain .drop:nth-child(124) {
  opacity: 0.56;
  left: 43.7vw;
  border-left-width: 1.9vmin;
  animation: fall-124 0.75s -12.5s ease-in infinite;
}
@keyframes fall-124 {
  3% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(125),
.weather-rainy .rain .drop:nth-child(125) {
  opacity: 0.61;
  left: 84.1vw;
  border-left-width: 1.7vmin;
  animation: fall-125 2.25s -4s ease-in infinite;
}
@keyframes fall-125 {
  5.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(126),
.weather-rainy .rain .drop:nth-child(126) {
  opacity: 0.46;
  left: 38.2vw;
  border-left-width: 0.1vmin;
  animation: fall-126 0.15s -3.5s ease-in infinite;
}
@keyframes fall-126 {
  2.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(127),
.weather-rainy .rain .drop:nth-child(127) {
  opacity: 0.67;
  left: 24.3vw;
  border-left-width: 1.5vmin;
  animation: fall-127 1.95s -8s ease-in infinite;
}
@keyframes fall-127 {
  6.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(128),
.weather-rainy .rain .drop:nth-child(128) {
  opacity: 0.7;
  left: 13.9vw;
  border-left-width: 0.7vmin;
  animation: fall-128 2.25s -7.5s ease-in infinite;
}
@keyframes fall-128 {
  5.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(129),
.weather-rainy .rain .drop:nth-child(129) {
  opacity: 0.7;
  left: 48.4vw;
  border-left-width: 1vmin;
  animation: fall-129 0.45s -0.5s ease-in infinite;
}
@keyframes fall-129 {
  9.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(130),
.weather-rainy .rain .drop:nth-child(130) {
  opacity: 0.43;
  left: 84.2vw;
  border-left-width: 0.1vmin;
  animation: fall-130 0.15s -6s ease-in infinite;
}
@keyframes fall-130 {
  0.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(131),
.weather-rainy .rain .drop:nth-child(131) {
  opacity: 0.63;
  left: 6.1vw;
  border-left-width: 0.1vmin;
  animation: fall-131 0.3s -6.5s ease-in infinite;
}
@keyframes fall-131 {
  8.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(132),
.weather-rainy .rain .drop:nth-child(132) {
  opacity: 0.37;
  left: 45vw;
  border-left-width: 0.4vmin;
  animation: fall-132 2.1s -12s ease-in infinite;
}
@keyframes fall-132 {
  3.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(133),
.weather-rainy .rain .drop:nth-child(133) {
  opacity: 0.33;
  left: 33.7vw;
  border-left-width: 0.6vmin;
  animation: fall-133 0.75s -4.5s ease-in infinite;
}
@keyframes fall-133 {
  7.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(134),
.weather-rainy .rain .drop:nth-child(134) {
  opacity: 0.4;
  left: 75.8vw;
  border-left-width: 0.2vmin;
  animation: fall-134 0.15s -7s ease-in infinite;
}
@keyframes fall-134 {
  7.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(135),
.weather-rainy .rain .drop:nth-child(135) {
  opacity: 0.57;
  left: 59.5vw;
  border-left-width: 1.6vmin;
  animation: fall-135 2.1s -6s ease-in infinite;
}
@keyframes fall-135 {
  2.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(136),
.weather-rainy .rain .drop:nth-child(136) {
  opacity: 0.61;
  left: 64.7vw;
  border-left-width: 0.1vmin;
  animation: fall-136 2.1s -0.5s ease-in infinite;
}
@keyframes fall-136 {
  0.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(137),
.weather-rainy .rain .drop:nth-child(137) {
  opacity: 0.39;
  left: 1.7vw;
  border-left-width: 1.7vmin;
  animation: fall-137 0.9s -7s ease-in infinite;
}
@keyframes fall-137 {
  2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(138),
.weather-rainy .rain .drop:nth-child(138) {
  opacity: 0.37;
  left: 14.9vw;
  border-left-width: 1.5vmin;
  animation: fall-138 2.1s -10.5s ease-in infinite;
}
@keyframes fall-138 {
  1% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(139),
.weather-rainy .rain .drop:nth-child(139) {
  opacity: 0.42;
  left: 18.8vw;
  border-left-width: 1.3vmin;
  animation: fall-139 0.3s -1s ease-in infinite;
}
@keyframes fall-139 {
  8.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(140),
.weather-rainy .rain .drop:nth-child(140) {
  opacity: 0.6;
  left: 13.9vw;
  border-left-width: 1.7vmin;
  animation: fall-140 1.05s -3s ease-in infinite;
}
@keyframes fall-140 {
  4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(141),
.weather-rainy .rain .drop:nth-child(141) {
  opacity: 0.43;
  left: 114.5vw;
  border-left-width: 0.5vmin;
  animation: fall-141 0.45s -4.5s ease-in infinite;
}
@keyframes fall-141 {
  8.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(142),
.weather-rainy .rain .drop:nth-child(142) {
  opacity: 0.57;
  left: 12.8vw;
  border-left-width: 1.9vmin;
  animation: fall-142 1.05s -9s ease-in infinite;
}
@keyframes fall-142 {
  2.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(143),
.weather-rainy .rain .drop:nth-child(143) {
  opacity: 0.53;
  left: 9.6vw;
  border-left-width: 1.1vmin;
  animation: fall-143 1.5s -5s ease-in infinite;
}
@keyframes fall-143 {
  7.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(144),
.weather-rainy .rain .drop:nth-child(144) {
  opacity: 0.42;
  left: 8.5vw;
  border-left-width: 0.2vmin;
  animation: fall-144 0.15s -11.5s ease-in infinite;
}
@keyframes fall-144 {
  2.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(145),
.weather-rainy .rain .drop:nth-child(145) {
  opacity: 0.5;
  left: 48.5vw;
  border-left-width: 0.1vmin;
  animation: fall-145 1.5s -2s ease-in infinite;
}
@keyframes fall-145 {
  7.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(146),
.weather-rainy .rain .drop:nth-child(146) {
  opacity: 0.7;
  left: 101.5vw;
  border-left-width: 1.1vmin;
  animation: fall-146 2.1s -8s ease-in infinite;
}
@keyframes fall-146 {
  9% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(147),
.weather-rainy .rain .drop:nth-child(147) {
  opacity: 0.61;
  left: 100.9vw;
  border-left-width: 0.9vmin;
  animation: fall-147 0.45s -1.5s ease-in infinite;
}
@keyframes fall-147 {
  4.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(148),
.weather-rainy .rain .drop:nth-child(148) {
  opacity: 0.31;
  left: 99.7vw;
  border-left-width: 0.9vmin;
  animation: fall-148 0.15s -5s ease-in infinite;
}
@keyframes fall-148 {
  9.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(149),
.weather-rainy .rain .drop:nth-child(149) {
  opacity: 0.67;
  left: 5.6vw;
  border-left-width: 1.2vmin;
  animation: fall-149 1.35s -2.5s ease-in infinite;
}
@keyframes fall-149 {
  5.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(150),
.weather-rainy .rain .drop:nth-child(150) {
  opacity: 0.58;
  left: 40.3vw;
  border-left-width: 0.9vmin;
  animation: fall-150 0.45s -12s ease-in infinite;
}
@keyframes fall-150 {
  9% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(151),
.weather-rainy .rain .drop:nth-child(151) {
  opacity: 0.57;
  left: 24.1vw;
  border-left-width: 1vmin;
  animation: fall-151 1.95s -10s ease-in infinite;
}
@keyframes fall-151 {
  7.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(152),
.weather-rainy .rain .drop:nth-child(152) {
  opacity: 0.48;
  left: 35.5vw;
  border-left-width: 1.2vmin;
  animation: fall-152 1.35s -4s ease-in infinite;
}
@keyframes fall-152 {
  4.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(153),
.weather-rainy .rain .drop:nth-child(153) {
  opacity: 0.7;
  left: 111.5vw;
  border-left-width: 0.2vmin;
  animation: fall-153 1.35s -11s ease-in infinite;
}
@keyframes fall-153 {
  6.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(154),
.weather-rainy .rain .drop:nth-child(154) {
  opacity: 0.55;
  left: 66.1vw;
  border-left-width: 1.9vmin;
  animation: fall-154 0.45s -6.5s ease-in infinite;
}
@keyframes fall-154 {
  2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(155),
.weather-rainy .rain .drop:nth-child(155) {
  opacity: 0.49;
  left: 7.5vw;
  border-left-width: 0.2vmin;
  animation: fall-155 0.75s -0.5s ease-in infinite;
}
@keyframes fall-155 {
  6.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(156),
.weather-rainy .rain .drop:nth-child(156) {
  opacity: 0.61;
  left: 61.6vw;
  border-left-width: 1.4vmin;
  animation: fall-156 1.05s -3.5s ease-in infinite;
}
@keyframes fall-156 {
  5.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(157),
.weather-rainy .rain .drop:nth-child(157) {
  opacity: 0.57;
  left: 7.2vw;
  border-left-width: 1.3vmin;
  animation: fall-157 1.8s -8.5s ease-in infinite;
}
@keyframes fall-157 {
  1.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(158),
.weather-rainy .rain .drop:nth-child(158) {
  opacity: 0.52;
  left: 109.4vw;
  border-left-width: 0.2vmin;
  animation: fall-158 1.2s -1s ease-in infinite;
}
@keyframes fall-158 {
  9% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(159),
.weather-rainy .rain .drop:nth-child(159) {
  opacity: 0.56;
  left: 81.6vw;
  border-left-width: 0.3vmin;
  animation: fall-159 1.35s -1s ease-in infinite;
}
@keyframes fall-159 {
  5.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(160),
.weather-rainy .rain .drop:nth-child(160) {
  opacity: 0.56;
  left: 40.1vw;
  border-left-width: 0.5vmin;
  animation: fall-160 2.1s -11s ease-in infinite;
}
@keyframes fall-160 {
  2.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(161),
.weather-rainy .rain .drop:nth-child(161) {
  opacity: 0.38;
  left: 45vw;
  border-left-width: 0.7vmin;
  animation: fall-161 1.8s -12s ease-in infinite;
}
@keyframes fall-161 {
  5.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(162),
.weather-rainy .rain .drop:nth-child(162) {
  opacity: 0.67;
  left: 104vw;
  border-left-width: 1.1vmin;
  animation: fall-162 0.3s -6.5s ease-in infinite;
}
@keyframes fall-162 {
  7.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(163),
.weather-rainy .rain .drop:nth-child(163) {
  opacity: 0.69;
  left: 84.1vw;
  border-left-width: 1.2vmin;
  animation: fall-163 0.45s -4.5s ease-in infinite;
}
@keyframes fall-163 {
  3.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(164),
.weather-rainy .rain .drop:nth-child(164) {
  opacity: 0.56;
  left: 64.2vw;
  border-left-width: 0.3vmin;
  animation: fall-164 0.3s -3s ease-in infinite;
}
@keyframes fall-164 {
  4.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(165),
.weather-rainy .rain .drop:nth-child(165) {
  opacity: 0.39;
  left: 46.3vw;
  border-left-width: 1.9vmin;
  animation: fall-165 0.75s -10s ease-in infinite;
}
@keyframes fall-165 {
  4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(166),
.weather-rainy .rain .drop:nth-child(166) {
  opacity: 0.51;
  left: 84.9vw;
  border-left-width: 0.8vmin;
  animation: fall-166 0.6s -2.5s ease-in infinite;
}
@keyframes fall-166 {
  9.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(167),
.weather-rainy .rain .drop:nth-child(167) {
  opacity: 0.53;
  left: 40.7vw;
  border-left-width: 2vmin;
  animation: fall-167 0.6s -12.5s ease-in infinite;
}
@keyframes fall-167 {
  4.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(168),
.weather-rainy .rain .drop:nth-child(168) {
  opacity: 0.52;
  left: 96.2vw;
  border-left-width: 1.5vmin;
  animation: fall-168 0.75s -11s ease-in infinite;
}
@keyframes fall-168 {
  1.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(169),
.weather-rainy .rain .drop:nth-child(169) {
  opacity: 0.35;
  left: 18vw;
  border-left-width: 1.7vmin;
  animation: fall-169 0.6s -6.5s ease-in infinite;
}
@keyframes fall-169 {
  3.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(170),
.weather-rainy .rain .drop:nth-child(170) {
  opacity: 0.36;
  left: 32.8vw;
  border-left-width: 0.3vmin;
  animation: fall-170 1.35s -0.5s ease-in infinite;
}
@keyframes fall-170 {
  8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(171),
.weather-rainy .rain .drop:nth-child(171) {
  opacity: 0.33;
  left: 49.7vw;
  border-left-width: 0.9vmin;
  animation: fall-171 1.8s -7.5s ease-in infinite;
}
@keyframes fall-171 {
  0.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(172),
.weather-rainy .rain .drop:nth-child(172) {
  opacity: 0.59;
  left: 29.1vw;
  border-left-width: 1.1vmin;
  animation: fall-172 1.65s -10s ease-in infinite;
}
@keyframes fall-172 {
  3.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(173),
.weather-rainy .rain .drop:nth-child(173) {
  opacity: 0.56;
  left: 89.6vw;
  border-left-width: 0.9vmin;
  animation: fall-173 0.6s -1.5s ease-in infinite;
}
@keyframes fall-173 {
  6.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(174),
.weather-rainy .rain .drop:nth-child(174) {
  opacity: 0.54;
  left: 93.3vw;
  border-left-width: 0.2vmin;
  animation: fall-174 2.1s -4.5s ease-in infinite;
}
@keyframes fall-174 {
  8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(175),
.weather-rainy .rain .drop:nth-child(175) {
  opacity: 0.69;
  left: 51.8vw;
  border-left-width: 1.1vmin;
  animation: fall-175 1.95s -4.5s ease-in infinite;
}
@keyframes fall-175 {
  5.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(176),
.weather-rainy .rain .drop:nth-child(176) {
  opacity: 0.37;
  left: 5.8vw;
  border-left-width: 2vmin;
  animation: fall-176 1.05s -12s ease-in infinite;
}
@keyframes fall-176 {
  4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(177),
.weather-rainy .rain .drop:nth-child(177) {
  opacity: 0.45;
  left: 20.5vw;
  border-left-width: 0.3vmin;
  animation: fall-177 1.5s -6.5s ease-in infinite;
}
@keyframes fall-177 {
  4.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(178),
.weather-rainy .rain .drop:nth-child(178) {
  opacity: 0.34;
  left: 83.8vw;
  border-left-width: 1vmin;
  animation: fall-178 0.3s -4s ease-in infinite;
}
@keyframes fall-178 {
  8.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(179),
.weather-rainy .rain .drop:nth-child(179) {
  opacity: 0.61;
  left: 47vw;
  border-left-width: 1.3vmin;
  animation: fall-179 0.9s -12s ease-in infinite;
}
@keyframes fall-179 {
  0.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(180),
.weather-rainy .rain .drop:nth-child(180) {
  opacity: 0.52;
  left: 116.2vw;
  border-left-width: 0.8vmin;
  animation: fall-180 1.8s -7.5s ease-in infinite;
}
@keyframes fall-180 {
  8.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(181),
.weather-rainy .rain .drop:nth-child(181) {
  opacity: 0.55;
  left: 9.4vw;
  border-left-width: 1.1vmin;
  animation: fall-181 0.6s -5s ease-in infinite;
}
@keyframes fall-181 {
  1% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(182),
.weather-rainy .rain .drop:nth-child(182) {
  opacity: 0.43;
  left: 6.5vw;
  border-left-width: 1vmin;
  animation: fall-182 2.25s -1s ease-in infinite;
}
@keyframes fall-182 {
  0.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(183),
.weather-rainy .rain .drop:nth-child(183) {
  opacity: 0.58;
  left: 32.9vw;
  border-left-width: 1.3vmin;
  animation: fall-183 1.35s -0.5s ease-in infinite;
}
@keyframes fall-183 {
  1.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(184),
.weather-rainy .rain .drop:nth-child(184) {
  opacity: 0.64;
  left: 40.3vw;
  border-left-width: 1.2vmin;
  animation: fall-184 0.3s -1.5s ease-in infinite;
}
@keyframes fall-184 {
  4.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(185),
.weather-rainy .rain .drop:nth-child(185) {
  opacity: 0.4;
  left: 27.5vw;
  border-left-width: 0.2vmin;
  animation: fall-185 1.5s -9s ease-in infinite;
}
@keyframes fall-185 {
  4.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(186),
.weather-rainy .rain .drop:nth-child(186) {
  opacity: 0.48;
  left: 3.2vw;
  border-left-width: 2vmin;
  animation: fall-186 0.75s -7.5s ease-in infinite;
}
@keyframes fall-186 {
  0.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(187),
.weather-rainy .rain .drop:nth-child(187) {
  opacity: 0.31;
  left: 48.1vw;
  border-left-width: 0.5vmin;
  animation: fall-187 1.65s -1s ease-in infinite;
}
@keyframes fall-187 {
  7.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(188),
.weather-rainy .rain .drop:nth-child(188) {
  opacity: 0.41;
  left: 13.3vw;
  border-left-width: 0.8vmin;
  animation: fall-188 0.75s -3.5s ease-in infinite;
}
@keyframes fall-188 {
  0.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(189),
.weather-rainy .rain .drop:nth-child(189) {
  opacity: 0.6;
  left: 21.6vw;
  border-left-width: 1.9vmin;
  animation: fall-189 2.25s -3s ease-in infinite;
}
@keyframes fall-189 {
  2.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(190),
.weather-rainy .rain .drop:nth-child(190) {
  opacity: 0.56;
  left: 102.6vw;
  border-left-width: 1.1vmin;
  animation: fall-190 0.45s -1.5s ease-in infinite;
}
@keyframes fall-190 {
  9.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(191),
.weather-rainy .rain .drop:nth-child(191) {
  opacity: 0.43;
  left: 74.1vw;
  border-left-width: 0.1vmin;
  animation: fall-191 2.25s -0.5s ease-in infinite;
}
@keyframes fall-191 {
  3.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(192),
.weather-rainy .rain .drop:nth-child(192) {
  opacity: 0.4;
  left: 3.2vw;
  border-left-width: 0.4vmin;
  animation: fall-192 0.15s -6s ease-in infinite;
}
@keyframes fall-192 {
  3.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(193),
.weather-rainy .rain .drop:nth-child(193) {
  opacity: 0.32;
  left: 66.1vw;
  border-left-width: 1.7vmin;
  animation: fall-193 1.2s -9s ease-in infinite;
}
@keyframes fall-193 {
  8.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(194),
.weather-rainy .rain .drop:nth-child(194) {
  opacity: 0.68;
  left: 35.5vw;
  border-left-width: 0.4vmin;
  animation: fall-194 2.25s -9.5s ease-in infinite;
}
@keyframes fall-194 {
  3% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(195),
.weather-rainy .rain .drop:nth-child(195) {
  opacity: 0.59;
  left: 56.3vw;
  border-left-width: 1.1vmin;
  animation: fall-195 0.9s -6.5s ease-in infinite;
}
@keyframes fall-195 {
  3% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(196),
.weather-rainy .rain .drop:nth-child(196) {
  opacity: 0.5;
  left: 118.9vw;
  border-left-width: 1.5vmin;
  animation: fall-196 0.75s -8s ease-in infinite;
}
@keyframes fall-196 {
  3.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(197),
.weather-rainy .rain .drop:nth-child(197) {
  opacity: 0.37;
  left: 25.4vw;
  border-left-width: 0.6vmin;
  animation: fall-197 1.05s -4s ease-in infinite;
}
@keyframes fall-197 {
  1.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(198),
.weather-rainy .rain .drop:nth-child(198) {
  opacity: 0.44;
  left: 49.5vw;
  border-left-width: 2vmin;
  animation: fall-198 1.5s -7.5s ease-in infinite;
}
@keyframes fall-198 {
  7.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(199),
.weather-rainy .rain .drop:nth-child(199) {
  opacity: 0.34;
  left: 109.5vw;
  border-left-width: 0.4vmin;
  animation: fall-199 1.65s -11s ease-in infinite;
}
@keyframes fall-199 {
  9.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(200),
.weather-rainy .rain .drop:nth-child(200) {
  opacity: 0.41;
  left: 18.5vw;
  border-left-width: 0.7vmin;
  animation: fall-200 1.65s -12.5s ease-in infinite;
}
@keyframes fall-200 {
  8.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(201),
.weather-rainy .rain .drop:nth-child(201) {
  opacity: 0.55;
  left: 61.6vw;
  border-left-width: 0.1vmin;
  animation: fall-201 0.6s -10.5s ease-in infinite;
}
@keyframes fall-201 {
  5.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(202),
.weather-rainy .rain .drop:nth-child(202) {
  opacity: 0.67;
  left: 112.3vw;
  border-left-width: 1.1vmin;
  animation: fall-202 0.45s -2.5s ease-in infinite;
}
@keyframes fall-202 {
  0.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(203),
.weather-rainy .rain .drop:nth-child(203) {
  opacity: 0.54;
  left: 113.4vw;
  border-left-width: 2vmin;
  animation: fall-203 0.3s -5s ease-in infinite;
}
@keyframes fall-203 {
  9.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(204),
.weather-rainy .rain .drop:nth-child(204) {
  opacity: 0.34;
  left: 55.3vw;
  border-left-width: 0.8vmin;
  animation: fall-204 0.15s -10.5s ease-in infinite;
}
@keyframes fall-204 {
  5.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(205),
.weather-rainy .rain .drop:nth-child(205) {
  opacity: 0.52;
  left: 28.8vw;
  border-left-width: 0.7vmin;
  animation: fall-205 0.3s -1s ease-in infinite;
}
@keyframes fall-205 {
  8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(206),
.weather-rainy .rain .drop:nth-child(206) {
  opacity: 0.62;
  left: 38.6vw;
  border-left-width: 0.6vmin;
  animation: fall-206 1.5s -7.5s ease-in infinite;
}
@keyframes fall-206 {
  6.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(207),
.weather-rainy .rain .drop:nth-child(207) {
  opacity: 0.66;
  left: 91.6vw;
  border-left-width: 0.2vmin;
  animation: fall-207 1.5s -8.5s ease-in infinite;
}
@keyframes fall-207 {
  2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(208),
.weather-rainy .rain .drop:nth-child(208) {
  opacity: 0.42;
  left: 98.5vw;
  border-left-width: 0.5vmin;
  animation: fall-208 1.95s -9.5s ease-in infinite;
}
@keyframes fall-208 {
  6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(209),
.weather-rainy .rain .drop:nth-child(209) {
  opacity: 0.59;
  left: 104.7vw;
  border-left-width: 0.5vmin;
  animation: fall-209 1.05s -10s ease-in infinite;
}
@keyframes fall-209 {
  4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(210),
.weather-rainy .rain .drop:nth-child(210) {
  opacity: 0.56;
  left: 17.6vw;
  border-left-width: 1.3vmin;
  animation: fall-210 1.2s -9s ease-in infinite;
}
@keyframes fall-210 {
  1.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(211),
.weather-rainy .rain .drop:nth-child(211) {
  opacity: 0.51;
  left: 32.5vw;
  border-left-width: 1.3vmin;
  animation: fall-211 0.45s -2.5s ease-in infinite;
}
@keyframes fall-211 {
  7% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(212),
.weather-rainy .rain .drop:nth-child(212) {
  opacity: 0.45;
  left: 110.4vw;
  border-left-width: 0.5vmin;
  animation: fall-212 1.2s -10.5s ease-in infinite;
}
@keyframes fall-212 {
  2.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(213),
.weather-rainy .rain .drop:nth-child(213) {
  opacity: 0.57;
  left: 61.1vw;
  border-left-width: 1.9vmin;
  animation: fall-213 0.45s -7s ease-in infinite;
}
@keyframes fall-213 {
  2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(214),
.weather-rainy .rain .drop:nth-child(214) {
  opacity: 0.42;
  left: 26.6vw;
  border-left-width: 1.6vmin;
  animation: fall-214 1.5s -8s ease-in infinite;
}
@keyframes fall-214 {
  9% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(215),
.weather-rainy .rain .drop:nth-child(215) {
  opacity: 0.49;
  left: 36.5vw;
  border-left-width: 1.1vmin;
  animation: fall-215 1.2s -10.5s ease-in infinite;
}
@keyframes fall-215 {
  6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(216),
.weather-rainy .rain .drop:nth-child(216) {
  opacity: 0.69;
  left: 115.3vw;
  border-left-width: 1.7vmin;
  animation: fall-216 2.25s -11s ease-in infinite;
}
@keyframes fall-216 {
  3.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(217),
.weather-rainy .rain .drop:nth-child(217) {
  opacity: 0.56;
  left: 109.5vw;
  border-left-width: 0.6vmin;
  animation: fall-217 1.5s -10.5s ease-in infinite;
}
@keyframes fall-217 {
  3.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(218),
.weather-rainy .rain .drop:nth-child(218) {
  opacity: 0.39;
  left: 14.3vw;
  border-left-width: 1.3vmin;
  animation: fall-218 2.25s -7s ease-in infinite;
}
@keyframes fall-218 {
  8.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(219),
.weather-rainy .rain .drop:nth-child(219) {
  opacity: 0.31;
  left: 69.5vw;
  border-left-width: 0.6vmin;
  animation: fall-219 1.2s -7.5s ease-in infinite;
}
@keyframes fall-219 {
  9.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(220),
.weather-rainy .rain .drop:nth-child(220) {
  opacity: 0.58;
  left: 67.9vw;
  border-left-width: 1.7vmin;
  animation: fall-220 1.95s -3s ease-in infinite;
}
@keyframes fall-220 {
  5.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(221),
.weather-rainy .rain .drop:nth-child(221) {
  opacity: 0.37;
  left: 115.9vw;
  border-left-width: 0.7vmin;
  animation: fall-221 1.35s -0.5s ease-in infinite;
}
@keyframes fall-221 {
  8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(222),
.weather-rainy .rain .drop:nth-child(222) {
  opacity: 0.4;
  left: 88.3vw;
  border-left-width: 0.6vmin;
  animation: fall-222 1.05s -6.5s ease-in infinite;
}
@keyframes fall-222 {
  6.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(223),
.weather-rainy .rain .drop:nth-child(223) {
  opacity: 0.6;
  left: 106.3vw;
  border-left-width: 0.6vmin;
  animation: fall-223 1.65s -2.5s ease-in infinite;
}
@keyframes fall-223 {
  2.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(224),
.weather-rainy .rain .drop:nth-child(224) {
  opacity: 0.47;
  left: 54.8vw;
  border-left-width: 0.1vmin;
  animation: fall-224 0.45s -12.5s ease-in infinite;
}
@keyframes fall-224 {
  4.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(225),
.weather-rainy .rain .drop:nth-child(225) {
  opacity: 0.59;
  left: 66.7vw;
  border-left-width: 1.3vmin;
  animation: fall-225 1.95s -6.5s ease-in infinite;
}
@keyframes fall-225 {
  0.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(226),
.weather-rainy .rain .drop:nth-child(226) {
  opacity: 0.63;
  left: 52.7vw;
  border-left-width: 2vmin;
  animation: fall-226 0.45s -3s ease-in infinite;
}
@keyframes fall-226 {
  0.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(227),
.weather-rainy .rain .drop:nth-child(227) {
  opacity: 0.65;
  left: 17.1vw;
  border-left-width: 1.6vmin;
  animation: fall-227 0.75s -1s ease-in infinite;
}
@keyframes fall-227 {
  8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(228),
.weather-rainy .rain .drop:nth-child(228) {
  opacity: 0.7;
  left: 73.9vw;
  border-left-width: 0.5vmin;
  animation: fall-228 1.8s -1s ease-in infinite;
}
@keyframes fall-228 {
  3.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(229),
.weather-rainy .rain .drop:nth-child(229) {
  opacity: 0.43;
  left: 62.8vw;
  border-left-width: 0.4vmin;
  animation: fall-229 0.15s -9.5s ease-in infinite;
}
@keyframes fall-229 {
  8.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(230),
.weather-rainy .rain .drop:nth-child(230) {
  opacity: 0.32;
  left: 70.2vw;
  border-left-width: 1.5vmin;
  animation: fall-230 0.15s -0.5s ease-in infinite;
}
@keyframes fall-230 {
  1.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(231),
.weather-rainy .rain .drop:nth-child(231) {
  opacity: 0.33;
  left: 70.2vw;
  border-left-width: 1.1vmin;
  animation: fall-231 0.9s -3s ease-in infinite;
}
@keyframes fall-231 {
  4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(232),
.weather-rainy .rain .drop:nth-child(232) {
  opacity: 0.51;
  left: 10.3vw;
  border-left-width: 1.4vmin;
  animation: fall-232 1.95s -3.5s ease-in infinite;
}
@keyframes fall-232 {
  3.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(233),
.weather-rainy .rain .drop:nth-child(233) {
  opacity: 0.37;
  left: 5.6vw;
  border-left-width: 1.3vmin;
  animation: fall-233 0.6s -12s ease-in infinite;
}
@keyframes fall-233 {
  9% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(234),
.weather-rainy .rain .drop:nth-child(234) {
  opacity: 0.36;
  left: 114.3vw;
  border-left-width: 1vmin;
  animation: fall-234 1.2s -9s ease-in infinite;
}
@keyframes fall-234 {
  7.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(235),
.weather-rainy .rain .drop:nth-child(235) {
  opacity: 0.68;
  left: 68.2vw;
  border-left-width: 2vmin;
  animation: fall-235 1.95s -5s ease-in infinite;
}
@keyframes fall-235 {
  2.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(236),
.weather-rainy .rain .drop:nth-child(236) {
  opacity: 0.47;
  left: 44.2vw;
  border-left-width: 1vmin;
  animation: fall-236 2.25s -8.5s ease-in infinite;
}
@keyframes fall-236 {
  8.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(237),
.weather-rainy .rain .drop:nth-child(237) {
  opacity: 0.7;
  left: 71.4vw;
  border-left-width: 0.6vmin;
  animation: fall-237 2.1s -1s ease-in infinite;
}
@keyframes fall-237 {
  1.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(238),
.weather-rainy .rain .drop:nth-child(238) {
  opacity: 0.66;
  left: 42.4vw;
  border-left-width: 0.2vmin;
  animation: fall-238 1.35s -5s ease-in infinite;
}
@keyframes fall-238 {
  5.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(239),
.weather-rainy .rain .drop:nth-child(239) {
  opacity: 0.63;
  left: 45.7vw;
  border-left-width: 1.8vmin;
  animation: fall-239 1.35s -4.5s ease-in infinite;
}
@keyframes fall-239 {
  1.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(240),
.weather-rainy .rain .drop:nth-child(240) {
  opacity: 0.57;
  left: 97.6vw;
  border-left-width: 0.6vmin;
  animation: fall-240 0.45s -2.5s ease-in infinite;
}
@keyframes fall-240 {
  9.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(241),
.weather-rainy .rain .drop:nth-child(241) {
  opacity: 0.36;
  left: 1vw;
  border-left-width: 1.7vmin;
  animation: fall-241 1.65s -1s ease-in infinite;
}
@keyframes fall-241 {
  6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(242),
.weather-rainy .rain .drop:nth-child(242) {
  opacity: 0.68;
  left: 70vw;
  border-left-width: 1vmin;
  animation: fall-242 1.65s -12s ease-in infinite;
}
@keyframes fall-242 {
  7.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(243),
.weather-rainy .rain .drop:nth-child(243) {
  opacity: 0.55;
  left: 85.8vw;
  border-left-width: 1.5vmin;
  animation: fall-243 1.95s -4.5s ease-in infinite;
}
@keyframes fall-243 {
  1% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(244),
.weather-rainy .rain .drop:nth-child(244) {
  opacity: 0.62;
  left: 30.5vw;
  border-left-width: 1.8vmin;
  animation: fall-244 2.1s -10.5s ease-in infinite;
}
@keyframes fall-244 {
  0.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(245),
.weather-rainy .rain .drop:nth-child(245) {
  opacity: 0.51;
  left: 38vw;
  border-left-width: 1.3vmin;
  animation: fall-245 2.25s -3s ease-in infinite;
}
@keyframes fall-245 {
  4.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(246),
.weather-rainy .rain .drop:nth-child(246) {
  opacity: 0.39;
  left: 18.2vw;
  border-left-width: 0.3vmin;
  animation: fall-246 0.75s -10s ease-in infinite;
}
@keyframes fall-246 {
  9.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(247),
.weather-rainy .rain .drop:nth-child(247) {
  opacity: 0.49;
  left: 54.7vw;
  border-left-width: 0.3vmin;
  animation: fall-247 1.05s -5.5s ease-in infinite;
}
@keyframes fall-247 {
  2.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(248),
.weather-rainy .rain .drop:nth-child(248) {
  opacity: 0.37;
  left: 116.5vw;
  border-left-width: 1.4vmin;
  animation: fall-248 0.9s -12.5s ease-in infinite;
}
@keyframes fall-248 {
  4.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(249),
.weather-rainy .rain .drop:nth-child(249) {
  opacity: 0.44;
  left: 86.6vw;
  border-left-width: 0.5vmin;
  animation: fall-249 1.95s -2s ease-in infinite;
}
@keyframes fall-249 {
  5.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(250),
.weather-rainy .rain .drop:nth-child(250) {
  opacity: 0.62;
  left: 114.9vw;
  border-left-width: 1.9vmin;
  animation: fall-250 1.65s -5.5s ease-in infinite;
}
@keyframes fall-250 {
  5.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(251),
.weather-rainy .rain .drop:nth-child(251) {
  opacity: 0.37;
  left: 25.4vw;
  border-left-width: 0.8vmin;
  animation: fall-251 1.35s -2.5s ease-in infinite;
}
@keyframes fall-251 {
  1.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(252),
.weather-rainy .rain .drop:nth-child(252) {
  opacity: 0.44;
  left: 58.5vw;
  border-left-width: 0.7vmin;
  animation: fall-252 0.15s -2s ease-in infinite;
}
@keyframes fall-252 {
  9.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(253),
.weather-rainy .rain .drop:nth-child(253) {
  opacity: 0.36;
  left: 19.8vw;
  border-left-width: 0.4vmin;
  animation: fall-253 0.3s -2.5s ease-in infinite;
}
@keyframes fall-253 {
  9.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(254),
.weather-rainy .rain .drop:nth-child(254) {
  opacity: 0.33;
  left: 11.4vw;
  border-left-width: 1vmin;
  animation: fall-254 1.5s -3.5s ease-in infinite;
}
@keyframes fall-254 {
  4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(255),
.weather-rainy .rain .drop:nth-child(255) {
  opacity: 0.37;
  left: 44.6vw;
  border-left-width: 0.3vmin;
  animation: fall-255 0.75s -2s ease-in infinite;
}
@keyframes fall-255 {
  1.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(256),
.weather-rainy .rain .drop:nth-child(256) {
  opacity: 0.5;
  left: 82.4vw;
  border-left-width: 0.2vmin;
  animation: fall-256 0.9s -2s ease-in infinite;
}
@keyframes fall-256 {
  0.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(257),
.weather-rainy .rain .drop:nth-child(257) {
  opacity: 0.61;
  left: 108.1vw;
  border-left-width: 0.6vmin;
  animation: fall-257 1.95s -12.5s ease-in infinite;
}
@keyframes fall-257 {
  8.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(258),
.weather-rainy .rain .drop:nth-child(258) {
  opacity: 0.62;
  left: 48.3vw;
  border-left-width: 0.6vmin;
  animation: fall-258 1.05s -6s ease-in infinite;
}
@keyframes fall-258 {
  7% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(259),
.weather-rainy .rain .drop:nth-child(259) {
  opacity: 0.65;
  left: 85.8vw;
  border-left-width: 1.9vmin;
  animation: fall-259 1.95s -6.5s ease-in infinite;
}
@keyframes fall-259 {
  8.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(260),
.weather-rainy .rain .drop:nth-child(260) {
  opacity: 0.39;
  left: 15.1vw;
  border-left-width: 0.7vmin;
  animation: fall-260 1.8s -10s ease-in infinite;
}
@keyframes fall-260 {
  4.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(261),
.weather-rainy .rain .drop:nth-child(261) {
  opacity: 0.42;
  left: 27.2vw;
  border-left-width: 1.8vmin;
  animation: fall-261 1.8s -7.5s ease-in infinite;
}
@keyframes fall-261 {
  9.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(262),
.weather-rainy .rain .drop:nth-child(262) {
  opacity: 0.7;
  left: 99vw;
  border-left-width: 0.4vmin;
  animation: fall-262 1.05s -2s ease-in infinite;
}
@keyframes fall-262 {
  8.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(263),
.weather-rainy .rain .drop:nth-child(263) {
  opacity: 0.49;
  left: 54.1vw;
  border-left-width: 2vmin;
  animation: fall-263 0.6s -5s ease-in infinite;
}
@keyframes fall-263 {
  6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(264),
.weather-rainy .rain .drop:nth-child(264) {
  opacity: 0.34;
  left: 32vw;
  border-left-width: 1.1vmin;
  animation: fall-264 0.15s -12.5s ease-in infinite;
}
@keyframes fall-264 {
  0.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(265),
.weather-rainy .rain .drop:nth-child(265) {
  opacity: 0.49;
  left: 79.1vw;
  border-left-width: 0.9vmin;
  animation: fall-265 0.75s -9s ease-in infinite;
}
@keyframes fall-265 {
  8.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(266),
.weather-rainy .rain .drop:nth-child(266) {
  opacity: 0.42;
  left: 99.1vw;
  border-left-width: 1.1vmin;
  animation: fall-266 0.9s -9.5s ease-in infinite;
}
@keyframes fall-266 {
  2.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(267),
.weather-rainy .rain .drop:nth-child(267) {
  opacity: 0.59;
  left: 33.5vw;
  border-left-width: 0.6vmin;
  animation: fall-267 0.6s -10s ease-in infinite;
}
@keyframes fall-267 {
  0.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(268),
.weather-rainy .rain .drop:nth-child(268) {
  opacity: 0.69;
  left: 33.3vw;
  border-left-width: 1.2vmin;
  animation: fall-268 1.65s -10s ease-in infinite;
}
@keyframes fall-268 {
  0.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(269),
.weather-rainy .rain .drop:nth-child(269) {
  opacity: 0.43;
  left: 46.6vw;
  border-left-width: 1.6vmin;
  animation: fall-269 0.3s -5s ease-in infinite;
}
@keyframes fall-269 {
  6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(270),
.weather-rainy .rain .drop:nth-child(270) {
  opacity: 0.35;
  left: 9.5vw;
  border-left-width: 0.1vmin;
  animation: fall-270 0.9s -3.5s ease-in infinite;
}
@keyframes fall-270 {
  3.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(271),
.weather-rainy .rain .drop:nth-child(271) {
  opacity: 0.46;
  left: 64.1vw;
  border-left-width: 1.4vmin;
  animation: fall-271 1.95s -4.5s ease-in infinite;
}
@keyframes fall-271 {
  9.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(272),
.weather-rainy .rain .drop:nth-child(272) {
  opacity: 0.36;
  left: 68.4vw;
  border-left-width: 1.4vmin;
  animation: fall-272 1.2s -6.5s ease-in infinite;
}
@keyframes fall-272 {
  6.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(273),
.weather-rainy .rain .drop:nth-child(273) {
  opacity: 0.34;
  left: 30.7vw;
  border-left-width: 1.3vmin;
  animation: fall-273 0.75s -9.5s ease-in infinite;
}
@keyframes fall-273 {
  8.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(274),
.weather-rainy .rain .drop:nth-child(274) {
  opacity: 0.51;
  left: 31.3vw;
  border-left-width: 1.2vmin;
  animation: fall-274 0.45s -1.5s ease-in infinite;
}
@keyframes fall-274 {
  2.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(275),
.weather-rainy .rain .drop:nth-child(275) {
  opacity: 0.63;
  left: 11.4vw;
  border-left-width: 1vmin;
  animation: fall-275 0.45s -6.5s ease-in infinite;
}
@keyframes fall-275 {
  2.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(276),
.weather-rainy .rain .drop:nth-child(276) {
  opacity: 0.31;
  left: 104vw;
  border-left-width: 1.2vmin;
  animation: fall-276 0.9s -11s ease-in infinite;
}
@keyframes fall-276 {
  4.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(277),
.weather-rainy .rain .drop:nth-child(277) {
  opacity: 0.47;
  left: 62.9vw;
  border-left-width: 0.7vmin;
  animation: fall-277 0.6s -11s ease-in infinite;
}
@keyframes fall-277 {
  4.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(278),
.weather-rainy .rain .drop:nth-child(278) {
  opacity: 0.44;
  left: 109.6vw;
  border-left-width: 0.8vmin;
  animation: fall-278 2.25s -5.5s ease-in infinite;
}
@keyframes fall-278 {
  9.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(279),
.weather-rainy .rain .drop:nth-child(279) {
  opacity: 0.6;
  left: 97.6vw;
  border-left-width: 1.2vmin;
  animation: fall-279 1.95s -8.5s ease-in infinite;
}
@keyframes fall-279 {
  7.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(280),
.weather-rainy .rain .drop:nth-child(280) {
  opacity: 0.36;
  left: 19.4vw;
  border-left-width: 1.9vmin;
  animation: fall-280 1.35s -7s ease-in infinite;
}
@keyframes fall-280 {
  3.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(281),
.weather-rainy .rain .drop:nth-child(281) {
  opacity: 0.52;
  left: 10.2vw;
  border-left-width: 2vmin;
  animation: fall-281 0.45s -3s ease-in infinite;
}
@keyframes fall-281 {
  7.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(282),
.weather-rainy .rain .drop:nth-child(282) {
  opacity: 0.59;
  left: 32.4vw;
  border-left-width: 0.4vmin;
  animation: fall-282 0.9s -12.5s ease-in infinite;
}
@keyframes fall-282 {
  9.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(283),
.weather-rainy .rain .drop:nth-child(283) {
  opacity: 0.42;
  left: 115.5vw;
  border-left-width: 0.8vmin;
  animation: fall-283 2.1s -12s ease-in infinite;
}
@keyframes fall-283 {
  4.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(284),
.weather-rainy .rain .drop:nth-child(284) {
  opacity: 0.59;
  left: 20.6vw;
  border-left-width: 1.4vmin;
  animation: fall-284 0.15s -2.5s ease-in infinite;
}
@keyframes fall-284 {
  9.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(285),
.weather-rainy .rain .drop:nth-child(285) {
  opacity: 0.58;
  left: 67vw;
  border-left-width: 1.3vmin;
  animation: fall-285 0.3s -11.5s ease-in infinite;
}
@keyframes fall-285 {
  5.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(286),
.weather-rainy .rain .drop:nth-child(286) {
  opacity: 0.51;
  left: 69.8vw;
  border-left-width: 0.2vmin;
  animation: fall-286 1.95s -4.5s ease-in infinite;
}
@keyframes fall-286 {
  3.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(287),
.weather-rainy .rain .drop:nth-child(287) {
  opacity: 0.62;
  left: 12.1vw;
  border-left-width: 0.4vmin;
  animation: fall-287 1.65s -8.5s ease-in infinite;
}
@keyframes fall-287 {
  6.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(288),
.weather-rainy .rain .drop:nth-child(288) {
  opacity: 0.52;
  left: 82.7vw;
  border-left-width: 0.9vmin;
  animation: fall-288 0.45s -12.5s ease-in infinite;
}
@keyframes fall-288 {
  3.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(289),
.weather-rainy .rain .drop:nth-child(289) {
  opacity: 0.6;
  left: 26.4vw;
  border-left-width: 1.6vmin;
  animation: fall-289 2.25s -3s ease-in infinite;
}
@keyframes fall-289 {
  3.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(290),
.weather-rainy .rain .drop:nth-child(290) {
  opacity: 0.61;
  left: 119.5vw;
  border-left-width: 1.8vmin;
  animation: fall-290 0.9s -8.5s ease-in infinite;
}
@keyframes fall-290 {
  1.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(291),
.weather-rainy .rain .drop:nth-child(291) {
  opacity: 0.41;
  left: 38.6vw;
  border-left-width: 1.7vmin;
  animation: fall-291 0.75s -1.5s ease-in infinite;
}
@keyframes fall-291 {
  0.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(292),
.weather-rainy .rain .drop:nth-child(292) {
  opacity: 0.43;
  left: 22.4vw;
  border-left-width: 0.6vmin;
  animation: fall-292 0.45s -1s ease-in infinite;
}
@keyframes fall-292 {
  5.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(293),
.weather-rainy .rain .drop:nth-child(293) {
  opacity: 0.64;
  left: 111.5vw;
  border-left-width: 1.3vmin;
  animation: fall-293 0.9s -5s ease-in infinite;
}
@keyframes fall-293 {
  2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(294),
.weather-rainy .rain .drop:nth-child(294) {
  opacity: 0.68;
  left: 99.3vw;
  border-left-width: 0.4vmin;
  animation: fall-294 1.95s -11s ease-in infinite;
}
@keyframes fall-294 {
  1.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(295),
.weather-rainy .rain .drop:nth-child(295) {
  opacity: 0.31;
  left: 91.4vw;
  border-left-width: 0.9vmin;
  animation: fall-295 0.75s -7.5s ease-in infinite;
}
@keyframes fall-295 {
  8.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(296),
.weather-rainy .rain .drop:nth-child(296) {
  opacity: 0.34;
  left: 18.9vw;
  border-left-width: 0.1vmin;
  animation: fall-296 1.5s -12.5s ease-in infinite;
}
@keyframes fall-296 {
  0.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(297),
.weather-rainy .rain .drop:nth-child(297) {
  opacity: 0.53;
  left: 96.9vw;
  border-left-width: 0.7vmin;
  animation: fall-297 1.8s -0.5s ease-in infinite;
}
@keyframes fall-297 {
  3.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(298),
.weather-rainy .rain .drop:nth-child(298) {
  opacity: 0.64;
  left: 78.6vw;
  border-left-width: 0.1vmin;
  animation: fall-298 1.2s -5s ease-in infinite;
}
@keyframes fall-298 {
  1.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(299),
.weather-rainy .rain .drop:nth-child(299) {
  opacity: 0.63;
  left: 73.3vw;
  border-left-width: 0.5vmin;
  animation: fall-299 1.2s -0.5s ease-in infinite;
}
@keyframes fall-299 {
  6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(300),
.weather-rainy .rain .drop:nth-child(300) {
  opacity: 0.46;
  left: 55vw;
  border-left-width: 0.6vmin;
  animation: fall-300 1.35s -12.5s ease-in infinite;
}
@keyframes fall-300 {
  0.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(301),
.weather-rainy .rain .drop:nth-child(301) {
  opacity: 0.54;
  left: 92.6vw;
  border-left-width: 0.5vmin;
  animation: fall-301 0.3s -3s ease-in infinite;
}
@keyframes fall-301 {
  6.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(302),
.weather-rainy .rain .drop:nth-child(302) {
  opacity: 0.48;
  left: 118.4vw;
  border-left-width: 0.4vmin;
  animation: fall-302 1.35s -5.5s ease-in infinite;
}
@keyframes fall-302 {
  0.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(303),
.weather-rainy .rain .drop:nth-child(303) {
  opacity: 0.6;
  left: 39.7vw;
  border-left-width: 0.8vmin;
  animation: fall-303 1.5s -4s ease-in infinite;
}
@keyframes fall-303 {
  7.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(304),
.weather-rainy .rain .drop:nth-child(304) {
  opacity: 0.5;
  left: 83.5vw;
  border-left-width: 1.9vmin;
  animation: fall-304 0.3s -11.5s ease-in infinite;
}
@keyframes fall-304 {
  4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(305),
.weather-rainy .rain .drop:nth-child(305) {
  opacity: 0.48;
  left: 62.1vw;
  border-left-width: 0.3vmin;
  animation: fall-305 2.25s -5.5s ease-in infinite;
}
@keyframes fall-305 {
  3.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(306),
.weather-rainy .rain .drop:nth-child(306) {
  opacity: 0.54;
  left: 32.9vw;
  border-left-width: 0.7vmin;
  animation: fall-306 0.9s -4s ease-in infinite;
}
@keyframes fall-306 {
  6.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(307),
.weather-rainy .rain .drop:nth-child(307) {
  opacity: 0.39;
  left: 101.3vw;
  border-left-width: 0.7vmin;
  animation: fall-307 0.45s -4.5s ease-in infinite;
}
@keyframes fall-307 {
  5.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(308),
.weather-rainy .rain .drop:nth-child(308) {
  opacity: 0.42;
  left: 8.8vw;
  border-left-width: 1.7vmin;
  animation: fall-308 0.15s -10.5s ease-in infinite;
}
@keyframes fall-308 {
  9.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(309),
.weather-rainy .rain .drop:nth-child(309) {
  opacity: 0.33;
  left: 72.8vw;
  border-left-width: 1.5vmin;
  animation: fall-309 0.15s -4.5s ease-in infinite;
}
@keyframes fall-309 {
  1.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(310),
.weather-rainy .rain .drop:nth-child(310) {
  opacity: 0.53;
  left: 27.2vw;
  border-left-width: 0.4vmin;
  animation: fall-310 2.1s -11.5s ease-in infinite;
}
@keyframes fall-310 {
  3% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(311),
.weather-rainy .rain .drop:nth-child(311) {
  opacity: 0.6;
  left: 11.7vw;
  border-left-width: 0.5vmin;
  animation: fall-311 0.75s -10.5s ease-in infinite;
}
@keyframes fall-311 {
  5.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(312),
.weather-rainy .rain .drop:nth-child(312) {
  opacity: 0.38;
  left: 109.2vw;
  border-left-width: 2vmin;
  animation: fall-312 0.3s -2.5s ease-in infinite;
}
@keyframes fall-312 {
  10% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(313),
.weather-rainy .rain .drop:nth-child(313) {
  opacity: 0.67;
  left: 36.5vw;
  border-left-width: 1vmin;
  animation: fall-313 1.95s -12s ease-in infinite;
}
@keyframes fall-313 {
  4.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(314),
.weather-rainy .rain .drop:nth-child(314) {
  opacity: 0.45;
  left: 0.3vw;
  border-left-width: 1.2vmin;
  animation: fall-314 1.8s -7.5s ease-in infinite;
}
@keyframes fall-314 {
  0.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(315),
.weather-rainy .rain .drop:nth-child(315) {
  opacity: 0.6;
  left: 82.9vw;
  border-left-width: 1.6vmin;
  animation: fall-315 0.9s -11.5s ease-in infinite;
}
@keyframes fall-315 {
  6.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(316),
.weather-rainy .rain .drop:nth-child(316) {
  opacity: 0.63;
  left: 32vw;
  border-left-width: 2vmin;
  animation: fall-316 1.2s -4s ease-in infinite;
}
@keyframes fall-316 {
  7% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(317),
.weather-rainy .rain .drop:nth-child(317) {
  opacity: 0.37;
  left: 18.9vw;
  border-left-width: 0.1vmin;
  animation: fall-317 1.8s -3s ease-in infinite;
}
@keyframes fall-317 {
  0.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(318),
.weather-rainy .rain .drop:nth-child(318) {
  opacity: 0.7;
  left: 77.6vw;
  border-left-width: 1.5vmin;
  animation: fall-318 0.75s -5.5s ease-in infinite;
}
@keyframes fall-318 {
  2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(319),
.weather-rainy .rain .drop:nth-child(319) {
  opacity: 0.68;
  left: 52.2vw;
  border-left-width: 0.2vmin;
  animation: fall-319 1.5s -4.5s ease-in infinite;
}
@keyframes fall-319 {
  8.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(320),
.weather-rainy .rain .drop:nth-child(320) {
  opacity: 0.45;
  left: 118.3vw;
  border-left-width: 1.3vmin;
  animation: fall-320 1.65s -0.5s ease-in infinite;
}
@keyframes fall-320 {
  0.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(321),
.weather-rainy .rain .drop:nth-child(321) {
  opacity: 0.59;
  left: 115vw;
  border-left-width: 1.4vmin;
  animation: fall-321 2.25s -5.5s ease-in infinite;
}
@keyframes fall-321 {
  1.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(322),
.weather-rainy .rain .drop:nth-child(322) {
  opacity: 0.68;
  left: 57.5vw;
  border-left-width: 1.1vmin;
  animation: fall-322 0.6s -11.5s ease-in infinite;
}
@keyframes fall-322 {
  4.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(323),
.weather-rainy .rain .drop:nth-child(323) {
  opacity: 0.66;
  left: 105.9vw;
  border-left-width: 1.6vmin;
  animation: fall-323 1.5s -12s ease-in infinite;
}
@keyframes fall-323 {
  9.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(324),
.weather-rainy .rain .drop:nth-child(324) {
  opacity: 0.32;
  left: 100vw;
  border-left-width: 0.7vmin;
  animation: fall-324 0.45s -11.5s ease-in infinite;
}
@keyframes fall-324 {
  7.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(325),
.weather-rainy .rain .drop:nth-child(325) {
  opacity: 0.51;
  left: 60.9vw;
  border-left-width: 2vmin;
  animation: fall-325 0.6s -12s ease-in infinite;
}
@keyframes fall-325 {
  4.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(326),
.weather-rainy .rain .drop:nth-child(326) {
  opacity: 0.35;
  left: 64.6vw;
  border-left-width: 1.7vmin;
  animation: fall-326 1.2s -4s ease-in infinite;
}
@keyframes fall-326 {
  4.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(327),
.weather-rainy .rain .drop:nth-child(327) {
  opacity: 0.56;
  left: 94.1vw;
  border-left-width: 1.6vmin;
  animation: fall-327 2.25s -5s ease-in infinite;
}
@keyframes fall-327 {
  8.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(328),
.weather-rainy .rain .drop:nth-child(328) {
  opacity: 0.53;
  left: 70.3vw;
  border-left-width: 1.6vmin;
  animation: fall-328 2.1s -5s ease-in infinite;
}
@keyframes fall-328 {
  6.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(329),
.weather-rainy .rain .drop:nth-child(329) {
  opacity: 0.6;
  left: 79.9vw;
  border-left-width: 1.9vmin;
  animation: fall-329 1.35s -8s ease-in infinite;
}
@keyframes fall-329 {
  8.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(330),
.weather-rainy .rain .drop:nth-child(330) {
  opacity: 0.67;
  left: 69.2vw;
  border-left-width: 1.2vmin;
  animation: fall-330 2.1s -1.5s ease-in infinite;
}
@keyframes fall-330 {
  6.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(331),
.weather-rainy .rain .drop:nth-child(331) {
  opacity: 0.4;
  left: 26.9vw;
  border-left-width: 0.7vmin;
  animation: fall-331 1.65s -2s ease-in infinite;
}
@keyframes fall-331 {
  6.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(332),
.weather-rainy .rain .drop:nth-child(332) {
  opacity: 0.36;
  left: 15.8vw;
  border-left-width: 2vmin;
  animation: fall-332 0.3s -8s ease-in infinite;
}
@keyframes fall-332 {
  2.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(333),
.weather-rainy .rain .drop:nth-child(333) {
  opacity: 0.37;
  left: 9.5vw;
  border-left-width: 1vmin;
  animation: fall-333 1.65s -10.5s ease-in infinite;
}
@keyframes fall-333 {
  0.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(334),
.weather-rainy .rain .drop:nth-child(334) {
  opacity: 0.61;
  left: 44vw;
  border-left-width: 0.5vmin;
  animation: fall-334 0.75s -6s ease-in infinite;
}
@keyframes fall-334 {
  5% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(335),
.weather-rainy .rain .drop:nth-child(335) {
  opacity: 0.63;
  left: 46.3vw;
  border-left-width: 1.3vmin;
  animation: fall-335 2.25s -1.5s ease-in infinite;
}
@keyframes fall-335 {
  2.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(336),
.weather-rainy .rain .drop:nth-child(336) {
  opacity: 0.53;
  left: 117.1vw;
  border-left-width: 0.3vmin;
  animation: fall-336 1.35s -12s ease-in infinite;
}
@keyframes fall-336 {
  3.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(337),
.weather-rainy .rain .drop:nth-child(337) {
  opacity: 0.65;
  left: 108.2vw;
  border-left-width: 0.8vmin;
  animation: fall-337 1.5s -9s ease-in infinite;
}
@keyframes fall-337 {
  1.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(338),
.weather-rainy .rain .drop:nth-child(338) {
  opacity: 0.49;
  left: 99.6vw;
  border-left-width: 1.3vmin;
  animation: fall-338 1.05s -7s ease-in infinite;
}
@keyframes fall-338 {
  6.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(339),
.weather-rainy .rain .drop:nth-child(339) {
  opacity: 0.45;
  left: 117.6vw;
  border-left-width: 1.8vmin;
  animation: fall-339 1.95s -8.5s ease-in infinite;
}
@keyframes fall-339 {
  5.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(340),
.weather-rainy .rain .drop:nth-child(340) {
  opacity: 0.48;
  left: 110.3vw;
  border-left-width: 0.8vmin;
  animation: fall-340 1.5s -12s ease-in infinite;
}
@keyframes fall-340 {
  1.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(341),
.weather-rainy .rain .drop:nth-child(341) {
  opacity: 0.66;
  left: 76.9vw;
  border-left-width: 1.2vmin;
  animation: fall-341 1.05s -5s ease-in infinite;
}
@keyframes fall-341 {
  9.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(342),
.weather-rainy .rain .drop:nth-child(342) {
  opacity: 0.36;
  left: 117vw;
  border-left-width: 0.6vmin;
  animation: fall-342 0.15s -8s ease-in infinite;
}
@keyframes fall-342 {
  5.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(343),
.weather-rainy .rain .drop:nth-child(343) {
  opacity: 0.64;
  left: 65.7vw;
  border-left-width: 0.3vmin;
  animation: fall-343 1.95s -7.5s ease-in infinite;
}
@keyframes fall-343 {
  3.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(344),
.weather-rainy .rain .drop:nth-child(344) {
  opacity: 0.66;
  left: 62.2vw;
  border-left-width: 1.8vmin;
  animation: fall-344 1.2s -7s ease-in infinite;
}
@keyframes fall-344 {
  2.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(345),
.weather-rainy .rain .drop:nth-child(345) {
  opacity: 0.57;
  left: 5.9vw;
  border-left-width: 1.8vmin;
  animation: fall-345 0.3s -3.5s ease-in infinite;
}
@keyframes fall-345 {
  2.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(346),
.weather-rainy .rain .drop:nth-child(346) {
  opacity: 0.64;
  left: 44vw;
  border-left-width: 2vmin;
  animation: fall-346 0.3s -11s ease-in infinite;
}
@keyframes fall-346 {
  5.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(347),
.weather-rainy .rain .drop:nth-child(347) {
  opacity: 0.32;
  left: 52.2vw;
  border-left-width: 1.2vmin;
  animation: fall-347 0.9s -6s ease-in infinite;
}
@keyframes fall-347 {
  0.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(348),
.weather-rainy .rain .drop:nth-child(348) {
  opacity: 0.66;
  left: 28.5vw;
  border-left-width: 0.8vmin;
  animation: fall-348 0.75s -9.5s ease-in infinite;
}
@keyframes fall-348 {
  2.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(349),
.weather-rainy .rain .drop:nth-child(349) {
  opacity: 0.49;
  left: 66.4vw;
  border-left-width: 1.4vmin;
  animation: fall-349 1.5s -1s ease-in infinite;
}
@keyframes fall-349 {
  2.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(350),
.weather-rainy .rain .drop:nth-child(350) {
  opacity: 0.65;
  left: 55.1vw;
  border-left-width: 1.3vmin;
  animation: fall-350 1.05s -10s ease-in infinite;
}
@keyframes fall-350 {
  1% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(351),
.weather-rainy .rain .drop:nth-child(351) {
  opacity: 0.43;
  left: 73.1vw;
  border-left-width: 0.2vmin;
  animation: fall-351 2.1s -8.5s ease-in infinite;
}
@keyframes fall-351 {
  3.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(352),
.weather-rainy .rain .drop:nth-child(352) {
  opacity: 0.5;
  left: 13.1vw;
  border-left-width: 1.9vmin;
  animation: fall-352 1.2s -8s ease-in infinite;
}
@keyframes fall-352 {
  1% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(353),
.weather-rainy .rain .drop:nth-child(353) {
  opacity: 0.38;
  left: 104.7vw;
  border-left-width: 0.9vmin;
  animation: fall-353 1.05s -2s ease-in infinite;
}
@keyframes fall-353 {
  5.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(354),
.weather-rainy .rain .drop:nth-child(354) {
  opacity: 0.37;
  left: 94.3vw;
  border-left-width: 0.6vmin;
  animation: fall-354 0.6s -11.5s ease-in infinite;
}
@keyframes fall-354 {
  6.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(355),
.weather-rainy .rain .drop:nth-child(355) {
  opacity: 0.5;
  left: 41.3vw;
  border-left-width: 0.1vmin;
  animation: fall-355 1.05s -7s ease-in infinite;
}
@keyframes fall-355 {
  9.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(356),
.weather-rainy .rain .drop:nth-child(356) {
  opacity: 0.38;
  left: 58.1vw;
  border-left-width: 1.2vmin;
  animation: fall-356 1.05s -8.5s ease-in infinite;
}
@keyframes fall-356 {
  3.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(357),
.weather-rainy .rain .drop:nth-child(357) {
  opacity: 0.59;
  left: 20.2vw;
  border-left-width: 1.6vmin;
  animation: fall-357 1.35s -6.5s ease-in infinite;
}
@keyframes fall-357 {
  8.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(358),
.weather-rainy .rain .drop:nth-child(358) {
  opacity: 0.38;
  left: 65.2vw;
  border-left-width: 1.5vmin;
  animation: fall-358 1.65s -0.5s ease-in infinite;
}
@keyframes fall-358 {
  2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(359),
.weather-rainy .rain .drop:nth-child(359) {
  opacity: 0.59;
  left: 31.1vw;
  border-left-width: 2vmin;
  animation: fall-359 1.05s -0.5s ease-in infinite;
}
@keyframes fall-359 {
  9.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(360),
.weather-rainy .rain .drop:nth-child(360) {
  opacity: 0.47;
  left: 74.2vw;
  border-left-width: 0.6vmin;
  animation: fall-360 0.45s -12s ease-in infinite;
}
@keyframes fall-360 {
  7.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(361),
.weather-rainy .rain .drop:nth-child(361) {
  opacity: 0.54;
  left: 64.3vw;
  border-left-width: 1.1vmin;
  animation: fall-361 1.2s -3s ease-in infinite;
}
@keyframes fall-361 {
  0.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(362),
.weather-rainy .rain .drop:nth-child(362) {
  opacity: 0.37;
  left: 1.4vw;
  border-left-width: 1vmin;
  animation: fall-362 1.05s -6.5s ease-in infinite;
}
@keyframes fall-362 {
  2.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(363),
.weather-rainy .rain .drop:nth-child(363) {
  opacity: 0.59;
  left: 4.1vw;
  border-left-width: 1.3vmin;
  animation: fall-363 2.25s -4.5s ease-in infinite;
}
@keyframes fall-363 {
  5.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(364),
.weather-rainy .rain .drop:nth-child(364) {
  opacity: 0.65;
  left: 64.5vw;
  border-left-width: 0.8vmin;
  animation: fall-364 0.45s -1s ease-in infinite;
}
@keyframes fall-364 {
  6.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(365),
.weather-rainy .rain .drop:nth-child(365) {
  opacity: 0.42;
  left: 22.6vw;
  border-left-width: 1.2vmin;
  animation: fall-365 1.35s -6.5s ease-in infinite;
}
@keyframes fall-365 {
  0.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(366),
.weather-rainy .rain .drop:nth-child(366) {
  opacity: 0.38;
  left: 65.9vw;
  border-left-width: 0.8vmin;
  animation: fall-366 1.95s -5s ease-in infinite;
}
@keyframes fall-366 {
  5.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(367),
.weather-rainy .rain .drop:nth-child(367) {
  opacity: 0.55;
  left: 49.2vw;
  border-left-width: 0.4vmin;
  animation: fall-367 1.95s -1s ease-in infinite;
}
@keyframes fall-367 {
  9% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(368),
.weather-rainy .rain .drop:nth-child(368) {
  opacity: 0.53;
  left: 73.8vw;
  border-left-width: 1vmin;
  animation: fall-368 2.1s -7s ease-in infinite;
}
@keyframes fall-368 {
  9.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(369),
.weather-rainy .rain .drop:nth-child(369) {
  opacity: 0.68;
  left: 50vw;
  border-left-width: 0.8vmin;
  animation: fall-369 1.5s -1.5s ease-in infinite;
}
@keyframes fall-369 {
  2.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(370),
.weather-rainy .rain .drop:nth-child(370) {
  opacity: 0.55;
  left: 2.5vw;
  border-left-width: 1.6vmin;
  animation: fall-370 2.1s -8s ease-in infinite;
}
@keyframes fall-370 {
  9.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(371),
.weather-rainy .rain .drop:nth-child(371) {
  opacity: 0.7;
  left: 8.3vw;
  border-left-width: 1.1vmin;
  animation: fall-371 1.65s -3s ease-in infinite;
}
@keyframes fall-371 {
  9% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(372),
.weather-rainy .rain .drop:nth-child(372) {
  opacity: 0.57;
  left: 105.3vw;
  border-left-width: 1.4vmin;
  animation: fall-372 0.45s -4.5s ease-in infinite;
}
@keyframes fall-372 {
  2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(373),
.weather-rainy .rain .drop:nth-child(373) {
  opacity: 0.62;
  left: 84.1vw;
  border-left-width: 1vmin;
  animation: fall-373 0.3s -9.5s ease-in infinite;
}
@keyframes fall-373 {
  9% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(374),
.weather-rainy .rain .drop:nth-child(374) {
  opacity: 0.55;
  left: 72.9vw;
  border-left-width: 0.1vmin;
  animation: fall-374 1.35s -12s ease-in infinite;
}
@keyframes fall-374 {
  1% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(375),
.weather-rainy .rain .drop:nth-child(375) {
  opacity: 0.38;
  left: 32.5vw;
  border-left-width: 1.3vmin;
  animation: fall-375 0.6s -9s ease-in infinite;
}
@keyframes fall-375 {
  4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(376),
.weather-rainy .rain .drop:nth-child(376) {
  opacity: 0.49;
  left: 102.3vw;
  border-left-width: 0.3vmin;
  animation: fall-376 1.2s -1.5s ease-in infinite;
}
@keyframes fall-376 {
  9% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(377),
.weather-rainy .rain .drop:nth-child(377) {
  opacity: 0.43;
  left: 46.4vw;
  border-left-width: 0.3vmin;
  animation: fall-377 2.25s -1.5s ease-in infinite;
}
@keyframes fall-377 {
  1.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(378),
.weather-rainy .rain .drop:nth-child(378) {
  opacity: 0.62;
  left: 100.3vw;
  border-left-width: 0.7vmin;
  animation: fall-378 1.8s -6.5s ease-in infinite;
}
@keyframes fall-378 {
  6.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(379),
.weather-rainy .rain .drop:nth-child(379) {
  opacity: 0.5;
  left: 20.5vw;
  border-left-width: 1.2vmin;
  animation: fall-379 1.2s -5s ease-in infinite;
}
@keyframes fall-379 {
  7.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(380),
.weather-rainy .rain .drop:nth-child(380) {
  opacity: 0.52;
  left: 60.2vw;
  border-left-width: 0.5vmin;
  animation: fall-380 1.5s -0.5s ease-in infinite;
}
@keyframes fall-380 {
  5.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(381),
.weather-rainy .rain .drop:nth-child(381) {
  opacity: 0.54;
  left: 1.4vw;
  border-left-width: 1.6vmin;
  animation: fall-381 2.1s -9.5s ease-in infinite;
}
@keyframes fall-381 {
  10% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(382),
.weather-rainy .rain .drop:nth-child(382) {
  opacity: 0.64;
  left: 1.8vw;
  border-left-width: 1vmin;
  animation: fall-382 1.95s -6s ease-in infinite;
}
@keyframes fall-382 {
  9.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(383),
.weather-rainy .rain .drop:nth-child(383) {
  opacity: 0.38;
  left: 12.4vw;
  border-left-width: 1.4vmin;
  animation: fall-383 1.35s -10s ease-in infinite;
}
@keyframes fall-383 {
  9.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(384),
.weather-rainy .rain .drop:nth-child(384) {
  opacity: 0.67;
  left: 105.5vw;
  border-left-width: 0.5vmin;
  animation: fall-384 0.6s -8s ease-in infinite;
}
@keyframes fall-384 {
  5.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(385),
.weather-rainy .rain .drop:nth-child(385) {
  opacity: 0.4;
  left: 29.8vw;
  border-left-width: 0.8vmin;
  animation: fall-385 2.1s -6s ease-in infinite;
}
@keyframes fall-385 {
  1.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(386),
.weather-rainy .rain .drop:nth-child(386) {
  opacity: 0.41;
  left: 108.9vw;
  border-left-width: 1vmin;
  animation: fall-386 1.35s -12.5s ease-in infinite;
}
@keyframes fall-386 {
  2.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(387),
.weather-rainy .rain .drop:nth-child(387) {
  opacity: 0.65;
  left: 98.4vw;
  border-left-width: 1.8vmin;
  animation: fall-387 1.8s -3s ease-in infinite;
}
@keyframes fall-387 {
  2.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(388),
.weather-rainy .rain .drop:nth-child(388) {
  opacity: 0.51;
  left: 17.6vw;
  border-left-width: 1.6vmin;
  animation: fall-388 1.2s -1s ease-in infinite;
}
@keyframes fall-388 {
  1.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(389),
.weather-rainy .rain .drop:nth-child(389) {
  opacity: 0.52;
  left: 92.6vw;
  border-left-width: 0.1vmin;
  animation: fall-389 0.15s -11.5s ease-in infinite;
}
@keyframes fall-389 {
  6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(390),
.weather-rainy .rain .drop:nth-child(390) {
  opacity: 0.41;
  left: 9.8vw;
  border-left-width: 0.9vmin;
  animation: fall-390 1.2s -11.5s ease-in infinite;
}
@keyframes fall-390 {
  8.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(391),
.weather-rainy .rain .drop:nth-child(391) {
  opacity: 0.34;
  left: 46.9vw;
  border-left-width: 0.6vmin;
  animation: fall-391 0.6s -6.5s ease-in infinite;
}
@keyframes fall-391 {
  9.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(392),
.weather-rainy .rain .drop:nth-child(392) {
  opacity: 0.32;
  left: 118.9vw;
  border-left-width: 0.1vmin;
  animation: fall-392 1.8s -4.5s ease-in infinite;
}
@keyframes fall-392 {
  4.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(393),
.weather-rainy .rain .drop:nth-child(393) {
  opacity: 0.44;
  left: 29.7vw;
  border-left-width: 1.7vmin;
  animation: fall-393 0.6s -8.5s ease-in infinite;
}
@keyframes fall-393 {
  1.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(394),
.weather-rainy .rain .drop:nth-child(394) {
  opacity: 0.42;
  left: 12vw;
  border-left-width: 1.5vmin;
  animation: fall-394 1.5s -1.5s ease-in infinite;
}
@keyframes fall-394 {
  7% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(395),
.weather-rainy .rain .drop:nth-child(395) {
  opacity: 0.36;
  left: 56vw;
  border-left-width: 0.1vmin;
  animation: fall-395 2.25s -3.5s ease-in infinite;
}
@keyframes fall-395 {
  3.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(396),
.weather-rainy .rain .drop:nth-child(396) {
  opacity: 0.43;
  left: 30.7vw;
  border-left-width: 1.1vmin;
  animation: fall-396 1.65s -6s ease-in infinite;
}
@keyframes fall-396 {
  4.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(397),
.weather-rainy .rain .drop:nth-child(397) {
  opacity: 0.66;
  left: 40.4vw;
  border-left-width: 1.5vmin;
  animation: fall-397 1.95s -10.5s ease-in infinite;
}
@keyframes fall-397 {
  6.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(398),
.weather-rainy .rain .drop:nth-child(398) {
  opacity: 0.47;
  left: 117.8vw;
  border-left-width: 1.9vmin;
  animation: fall-398 1.2s -6.5s ease-in infinite;
}
@keyframes fall-398 {
  9.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(399),
.weather-rainy .rain .drop:nth-child(399) {
  opacity: 0.65;
  left: 108.9vw;
  border-left-width: 0.3vmin;
  animation: fall-399 0.3s -12s ease-in infinite;
}
@keyframes fall-399 {
  1% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(400),
.weather-rainy .rain .drop:nth-child(400) {
  opacity: 0.35;
  left: 29.3vw;
  border-left-width: 1.6vmin;
  animation: fall-400 1.95s -4.5s ease-in infinite;
}
@keyframes fall-400 {
  4.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(401),
.weather-rainy .rain .drop:nth-child(401) {
  opacity: 0.67;
  left: 116.7vw;
  border-left-width: 0.3vmin;
  animation: fall-401 2.1s -4s ease-in infinite;
}
@keyframes fall-401 {
  8.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(402),
.weather-rainy .rain .drop:nth-child(402) {
  opacity: 0.33;
  left: 98.3vw;
  border-left-width: 1vmin;
  animation: fall-402 1.2s -4s ease-in infinite;
}
@keyframes fall-402 {
  8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(403),
.weather-rainy .rain .drop:nth-child(403) {
  opacity: 0.59;
  left: 99.4vw;
  border-left-width: 1.6vmin;
  animation: fall-403 0.45s -2.5s ease-in infinite;
}
@keyframes fall-403 {
  10% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(404),
.weather-rainy .rain .drop:nth-child(404) {
  opacity: 0.39;
  left: 62.2vw;
  border-left-width: 1.3vmin;
  animation: fall-404 0.45s -12s ease-in infinite;
}
@keyframes fall-404 {
  4.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(405),
.weather-rainy .rain .drop:nth-child(405) {
  opacity: 0.69;
  left: 112.5vw;
  border-left-width: 1.4vmin;
  animation: fall-405 1.35s -3s ease-in infinite;
}
@keyframes fall-405 {
  4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(406),
.weather-rainy .rain .drop:nth-child(406) {
  opacity: 0.61;
  left: 17vw;
  border-left-width: 0.1vmin;
  animation: fall-406 0.15s -4.5s ease-in infinite;
}
@keyframes fall-406 {
  8.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(407),
.weather-rainy .rain .drop:nth-child(407) {
  opacity: 0.54;
  left: 111vw;
  border-left-width: 1.9vmin;
  animation: fall-407 2.1s -5.5s ease-in infinite;
}
@keyframes fall-407 {
  2.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(408),
.weather-rainy .rain .drop:nth-child(408) {
  opacity: 0.59;
  left: 98.8vw;
  border-left-width: 1.8vmin;
  animation: fall-408 0.3s -7.5s ease-in infinite;
}
@keyframes fall-408 {
  1.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(409),
.weather-rainy .rain .drop:nth-child(409) {
  opacity: 0.47;
  left: 69.8vw;
  border-left-width: 0.3vmin;
  animation: fall-409 1.05s -0.5s ease-in infinite;
}
@keyframes fall-409 {
  9.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(410),
.weather-rainy .rain .drop:nth-child(410) {
  opacity: 0.48;
  left: 91vw;
  border-left-width: 1vmin;
  animation: fall-410 1.2s -9.5s ease-in infinite;
}
@keyframes fall-410 {
  6.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(411),
.weather-rainy .rain .drop:nth-child(411) {
  opacity: 0.58;
  left: 44.7vw;
  border-left-width: 1.7vmin;
  animation: fall-411 1.5s -12.5s ease-in infinite;
}
@keyframes fall-411 {
  0.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(412),
.weather-rainy .rain .drop:nth-child(412) {
  opacity: 0.7;
  left: 106.1vw;
  border-left-width: 1.7vmin;
  animation: fall-412 1.65s -4.5s ease-in infinite;
}
@keyframes fall-412 {
  5.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(413),
.weather-rainy .rain .drop:nth-child(413) {
  opacity: 0.5;
  left: 27.7vw;
  border-left-width: 0.8vmin;
  animation: fall-413 1.65s -1s ease-in infinite;
}
@keyframes fall-413 {
  4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(414),
.weather-rainy .rain .drop:nth-child(414) {
  opacity: 0.47;
  left: 45vw;
  border-left-width: 1.8vmin;
  animation: fall-414 0.9s -11.5s ease-in infinite;
}
@keyframes fall-414 {
  1.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(415),
.weather-rainy .rain .drop:nth-child(415) {
  opacity: 0.7;
  left: 57.3vw;
  border-left-width: 1vmin;
  animation: fall-415 1.95s -4s ease-in infinite;
}
@keyframes fall-415 {
  8.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(416),
.weather-rainy .rain .drop:nth-child(416) {
  opacity: 0.69;
  left: 58.5vw;
  border-left-width: 1.7vmin;
  animation: fall-416 1.5s -12.5s ease-in infinite;
}
@keyframes fall-416 {
  9% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(417),
.weather-rainy .rain .drop:nth-child(417) {
  opacity: 0.4;
  left: 73.6vw;
  border-left-width: 0.1vmin;
  animation: fall-417 1.5s -7s ease-in infinite;
}
@keyframes fall-417 {
  7% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(418),
.weather-rainy .rain .drop:nth-child(418) {
  opacity: 0.5;
  left: 43.9vw;
  border-left-width: 1.7vmin;
  animation: fall-418 2.25s -6s ease-in infinite;
}
@keyframes fall-418 {
  3% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(419),
.weather-rainy .rain .drop:nth-child(419) {
  opacity: 0.6;
  left: 30vw;
  border-left-width: 0.1vmin;
  animation: fall-419 0.15s -11s ease-in infinite;
}
@keyframes fall-419 {
  9.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(420),
.weather-rainy .rain .drop:nth-child(420) {
  opacity: 0.52;
  left: 13.8vw;
  border-left-width: 1.1vmin;
  animation: fall-420 1.5s -2.5s ease-in infinite;
}
@keyframes fall-420 {
  9% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(421),
.weather-rainy .rain .drop:nth-child(421) {
  opacity: 0.57;
  left: 14.2vw;
  border-left-width: 0.4vmin;
  animation: fall-421 2.1s -7s ease-in infinite;
}
@keyframes fall-421 {
  5% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(422),
.weather-rainy .rain .drop:nth-child(422) {
  opacity: 0.43;
  left: 75.3vw;
  border-left-width: 1.9vmin;
  animation: fall-422 1.35s -1.5s ease-in infinite;
}
@keyframes fall-422 {
  9% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(423),
.weather-rainy .rain .drop:nth-child(423) {
  opacity: 0.42;
  left: 114.9vw;
  border-left-width: 1.1vmin;
  animation: fall-423 1.65s -10.5s ease-in infinite;
}
@keyframes fall-423 {
  0.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(424),
.weather-rainy .rain .drop:nth-child(424) {
  opacity: 0.35;
  left: 37.9vw;
  border-left-width: 0.2vmin;
  animation: fall-424 1.05s -9s ease-in infinite;
}
@keyframes fall-424 {
  6.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(425),
.weather-rainy .rain .drop:nth-child(425) {
  opacity: 0.43;
  left: 69vw;
  border-left-width: 1.5vmin;
  animation: fall-425 1.95s -8s ease-in infinite;
}
@keyframes fall-425 {
  3% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(426),
.weather-rainy .rain .drop:nth-child(426) {
  opacity: 0.66;
  left: 90vw;
  border-left-width: 0.6vmin;
  animation: fall-426 2.25s -0.5s ease-in infinite;
}
@keyframes fall-426 {
  7.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(427),
.weather-rainy .rain .drop:nth-child(427) {
  opacity: 0.55;
  left: 101.9vw;
  border-left-width: 0.8vmin;
  animation: fall-427 0.75s -10s ease-in infinite;
}
@keyframes fall-427 {
  4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(428),
.weather-rainy .rain .drop:nth-child(428) {
  opacity: 0.7;
  left: 64.5vw;
  border-left-width: 0.6vmin;
  animation: fall-428 0.9s -7.5s ease-in infinite;
}
@keyframes fall-428 {
  0.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(429),
.weather-rainy .rain .drop:nth-child(429) {
  opacity: 0.39;
  left: 64.3vw;
  border-left-width: 0.3vmin;
  animation: fall-429 1.05s -6s ease-in infinite;
}
@keyframes fall-429 {
  7.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(430),
.weather-rainy .rain .drop:nth-child(430) {
  opacity: 0.5;
  left: 54.5vw;
  border-left-width: 1vmin;
  animation: fall-430 0.75s -1.5s ease-in infinite;
}
@keyframes fall-430 {
  0.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(431),
.weather-rainy .rain .drop:nth-child(431) {
  opacity: 0.32;
  left: 18.9vw;
  border-left-width: 1.7vmin;
  animation: fall-431 0.45s -2.5s ease-in infinite;
}
@keyframes fall-431 {
  9% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(432),
.weather-rainy .rain .drop:nth-child(432) {
  opacity: 0.62;
  left: 107.1vw;
  border-left-width: 1.3vmin;
  animation: fall-432 0.9s -7.5s ease-in infinite;
}
@keyframes fall-432 {
  1.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(433),
.weather-rainy .rain .drop:nth-child(433) {
  opacity: 0.54;
  left: 108.5vw;
  border-left-width: 1.7vmin;
  animation: fall-433 1.8s -1.5s ease-in infinite;
}
@keyframes fall-433 {
  2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(434),
.weather-rainy .rain .drop:nth-child(434) {
  opacity: 0.46;
  left: 113.2vw;
  border-left-width: 1.4vmin;
  animation: fall-434 1.95s -5s ease-in infinite;
}
@keyframes fall-434 {
  0.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(435),
.weather-rainy .rain .drop:nth-child(435) {
  opacity: 0.65;
  left: 107vw;
  border-left-width: 1.8vmin;
  animation: fall-435 1.5s -8s ease-in infinite;
}
@keyframes fall-435 {
  4.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(436),
.weather-rainy .rain .drop:nth-child(436) {
  opacity: 0.32;
  left: 112.9vw;
  border-left-width: 0.1vmin;
  animation: fall-436 1.05s -12s ease-in infinite;
}
@keyframes fall-436 {
  7.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(437),
.weather-rainy .rain .drop:nth-child(437) {
  opacity: 0.4;
  left: 40.6vw;
  border-left-width: 1.6vmin;
  animation: fall-437 0.6s -6s ease-in infinite;
}
@keyframes fall-437 {
  9.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(438),
.weather-rainy .rain .drop:nth-child(438) {
  opacity: 0.63;
  left: 101.4vw;
  border-left-width: 1.3vmin;
  animation: fall-438 0.9s -9.5s ease-in infinite;
}
@keyframes fall-438 {
  1.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(439),
.weather-rainy .rain .drop:nth-child(439) {
  opacity: 0.62;
  left: 103.6vw;
  border-left-width: 0.9vmin;
  animation: fall-439 0.45s -1.5s ease-in infinite;
}
@keyframes fall-439 {
  2.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(440),
.weather-rainy .rain .drop:nth-child(440) {
  opacity: 0.38;
  left: 117.8vw;
  border-left-width: 0.8vmin;
  animation: fall-440 1.95s -2s ease-in infinite;
}
@keyframes fall-440 {
  8.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(441),
.weather-rainy .rain .drop:nth-child(441) {
  opacity: 0.48;
  left: 62.9vw;
  border-left-width: 0.6vmin;
  animation: fall-441 1.2s -10.5s ease-in infinite;
}
@keyframes fall-441 {
  7.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(442),
.weather-rainy .rain .drop:nth-child(442) {
  opacity: 0.65;
  left: 65.7vw;
  border-left-width: 1.3vmin;
  animation: fall-442 0.9s -8.5s ease-in infinite;
}
@keyframes fall-442 {
  5% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(443),
.weather-rainy .rain .drop:nth-child(443) {
  opacity: 0.51;
  left: 115vw;
  border-left-width: 0.2vmin;
  animation: fall-443 0.6s -9.5s ease-in infinite;
}
@keyframes fall-443 {
  6.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(444),
.weather-rainy .rain .drop:nth-child(444) {
  opacity: 0.69;
  left: 33.4vw;
  border-left-width: 1.3vmin;
  animation: fall-444 0.6s -5s ease-in infinite;
}
@keyframes fall-444 {
  7.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(445),
.weather-rainy .rain .drop:nth-child(445) {
  opacity: 0.61;
  left: 50.3vw;
  border-left-width: 1.5vmin;
  animation: fall-445 0.9s -6s ease-in infinite;
}
@keyframes fall-445 {
  9.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(446),
.weather-rainy .rain .drop:nth-child(446) {
  opacity: 0.65;
  left: 115.7vw;
  border-left-width: 0.2vmin;
  animation: fall-446 1.2s -11s ease-in infinite;
}
@keyframes fall-446 {
  0.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(447),
.weather-rainy .rain .drop:nth-child(447) {
  opacity: 0.37;
  left: 110.2vw;
  border-left-width: 1.8vmin;
  animation: fall-447 1.95s -8.5s ease-in infinite;
}
@keyframes fall-447 {
  9% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(448),
.weather-rainy .rain .drop:nth-child(448) {
  opacity: 0.55;
  left: 14vw;
  border-left-width: 1.5vmin;
  animation: fall-448 2.1s -11s ease-in infinite;
}
@keyframes fall-448 {
  8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(449),
.weather-rainy .rain .drop:nth-child(449) {
  opacity: 0.53;
  left: 84vw;
  border-left-width: 0.3vmin;
  animation: fall-449 0.75s -1.5s ease-in infinite;
}
@keyframes fall-449 {
  4.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(450),
.weather-rainy .rain .drop:nth-child(450) {
  opacity: 0.46;
  left: 31.7vw;
  border-left-width: 0.6vmin;
  animation: fall-450 1.2s -10.5s ease-in infinite;
}
@keyframes fall-450 {
  8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(451),
.weather-rainy .rain .drop:nth-child(451) {
  opacity: 0.37;
  left: 2.3vw;
  border-left-width: 0.5vmin;
  animation: fall-451 0.45s -8s ease-in infinite;
}
@keyframes fall-451 {
  0.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(452),
.weather-rainy .rain .drop:nth-child(452) {
  opacity: 0.31;
  left: 14.7vw;
  border-left-width: 1.1vmin;
  animation: fall-452 0.3s -11s ease-in infinite;
}
@keyframes fall-452 {
  5% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(453),
.weather-rainy .rain .drop:nth-child(453) {
  opacity: 0.65;
  left: 87.6vw;
  border-left-width: 1.9vmin;
  animation: fall-453 1.8s -0.5s ease-in infinite;
}
@keyframes fall-453 {
  3.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(454),
.weather-rainy .rain .drop:nth-child(454) {
  opacity: 0.46;
  left: 20.8vw;
  border-left-width: 1.6vmin;
  animation: fall-454 1.35s -6.5s ease-in infinite;
}
@keyframes fall-454 {
  3.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(455),
.weather-rainy .rain .drop:nth-child(455) {
  opacity: 0.33;
  left: 90.1vw;
  border-left-width: 1.5vmin;
  animation: fall-455 2.1s -6.5s ease-in infinite;
}
@keyframes fall-455 {
  4.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(456),
.weather-rainy .rain .drop:nth-child(456) {
  opacity: 0.38;
  left: 78.5vw;
  border-left-width: 1.5vmin;
  animation: fall-456 2.25s -7s ease-in infinite;
}
@keyframes fall-456 {
  0.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(457),
.weather-rainy .rain .drop:nth-child(457) {
  opacity: 0.46;
  left: 85.8vw;
  border-left-width: 0.4vmin;
  animation: fall-457 0.15s -8s ease-in infinite;
}
@keyframes fall-457 {
  4.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(458),
.weather-rainy .rain .drop:nth-child(458) {
  opacity: 0.34;
  left: 74.8vw;
  border-left-width: 0.4vmin;
  animation: fall-458 1.2s -12.5s ease-in infinite;
}
@keyframes fall-458 {
  4.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(459),
.weather-rainy .rain .drop:nth-child(459) {
  opacity: 0.55;
  left: 93.6vw;
  border-left-width: 1.4vmin;
  animation: fall-459 1.95s -2.5s ease-in infinite;
}
@keyframes fall-459 {
  7% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(460),
.weather-rainy .rain .drop:nth-child(460) {
  opacity: 0.57;
  left: 102.7vw;
  border-left-width: 0.9vmin;
  animation: fall-460 0.75s -0.5s ease-in infinite;
}
@keyframes fall-460 {
  0.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(461),
.weather-rainy .rain .drop:nth-child(461) {
  opacity: 0.46;
  left: 32.8vw;
  border-left-width: 0.9vmin;
  animation: fall-461 2.25s -10.5s ease-in infinite;
}
@keyframes fall-461 {
  1% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(462),
.weather-rainy .rain .drop:nth-child(462) {
  opacity: 0.46;
  left: 118.8vw;
  border-left-width: 0.7vmin;
  animation: fall-462 0.15s -11.5s ease-in infinite;
}
@keyframes fall-462 {
  2.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(463),
.weather-rainy .rain .drop:nth-child(463) {
  opacity: 0.7;
  left: 107.7vw;
  border-left-width: 1.2vmin;
  animation: fall-463 2.1s -3.5s ease-in infinite;
}
@keyframes fall-463 {
  0.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(464),
.weather-rainy .rain .drop:nth-child(464) {
  opacity: 0.56;
  left: 33.6vw;
  border-left-width: 0.1vmin;
  animation: fall-464 0.15s -2s ease-in infinite;
}
@keyframes fall-464 {
  3% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(465),
.weather-rainy .rain .drop:nth-child(465) {
  opacity: 0.32;
  left: 43.8vw;
  border-left-width: 0.3vmin;
  animation: fall-465 0.9s -12.5s ease-in infinite;
}
@keyframes fall-465 {
  7.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(466),
.weather-rainy .rain .drop:nth-child(466) {
  opacity: 0.36;
  left: 24vw;
  border-left-width: 0.4vmin;
  animation: fall-466 0.6s -4s ease-in infinite;
}
@keyframes fall-466 {
  9.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(467),
.weather-rainy .rain .drop:nth-child(467) {
  opacity: 0.54;
  left: 82.5vw;
  border-left-width: 0.3vmin;
  animation: fall-467 1.65s -10.5s ease-in infinite;
}
@keyframes fall-467 {
  8.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(468),
.weather-rainy .rain .drop:nth-child(468) {
  opacity: 0.47;
  left: 111.3vw;
  border-left-width: 0.7vmin;
  animation: fall-468 2.1s -4s ease-in infinite;
}
@keyframes fall-468 {
  7.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(469),
.weather-rainy .rain .drop:nth-child(469) {
  opacity: 0.44;
  left: 98.4vw;
  border-left-width: 0.5vmin;
  animation: fall-469 0.6s -9.5s ease-in infinite;
}
@keyframes fall-469 {
  1.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(470),
.weather-rainy .rain .drop:nth-child(470) {
  opacity: 0.43;
  left: 49.9vw;
  border-left-width: 2vmin;
  animation: fall-470 2.25s -7.5s ease-in infinite;
}
@keyframes fall-470 {
  1.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(471),
.weather-rainy .rain .drop:nth-child(471) {
  opacity: 0.31;
  left: 71.4vw;
  border-left-width: 1.2vmin;
  animation: fall-471 1.05s -3s ease-in infinite;
}
@keyframes fall-471 {
  4.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(472),
.weather-rainy .rain .drop:nth-child(472) {
  opacity: 0.34;
  left: 85.8vw;
  border-left-width: 0.1vmin;
  animation: fall-472 2.25s -4s ease-in infinite;
}
@keyframes fall-472 {
  2.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(473),
.weather-rainy .rain .drop:nth-child(473) {
  opacity: 0.57;
  left: 73.5vw;
  border-left-width: 0.8vmin;
  animation: fall-473 0.15s -5.5s ease-in infinite;
}
@keyframes fall-473 {
  9% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(474),
.weather-rainy .rain .drop:nth-child(474) {
  opacity: 0.61;
  left: 8.2vw;
  border-left-width: 1.4vmin;
  animation: fall-474 1.65s -4.5s ease-in infinite;
}
@keyframes fall-474 {
  8.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(475),
.weather-rainy .rain .drop:nth-child(475) {
  opacity: 0.48;
  left: 80vw;
  border-left-width: 1.2vmin;
  animation: fall-475 2.1s -5.5s ease-in infinite;
}
@keyframes fall-475 {
  4.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(476),
.weather-rainy .rain .drop:nth-child(476) {
  opacity: 0.46;
  left: 16.2vw;
  border-left-width: 1.8vmin;
  animation: fall-476 1.95s -4s ease-in infinite;
}
@keyframes fall-476 {
  6.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(477),
.weather-rainy .rain .drop:nth-child(477) {
  opacity: 0.39;
  left: 119.9vw;
  border-left-width: 1.8vmin;
  animation: fall-477 0.6s -5s ease-in infinite;
}
@keyframes fall-477 {
  3.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(478),
.weather-rainy .rain .drop:nth-child(478) {
  opacity: 0.33;
  left: 24vw;
  border-left-width: 1.5vmin;
  animation: fall-478 1.95s -1.5s ease-in infinite;
}
@keyframes fall-478 {
  8.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(479),
.weather-rainy .rain .drop:nth-child(479) {
  opacity: 0.47;
  left: 43.2vw;
  border-left-width: 1.7vmin;
  animation: fall-479 0.6s -6.5s ease-in infinite;
}
@keyframes fall-479 {
  2.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(480),
.weather-rainy .rain .drop:nth-child(480) {
  opacity: 0.5;
  left: 34vw;
  border-left-width: 0.4vmin;
  animation: fall-480 0.3s -8.5s ease-in infinite;
}
@keyframes fall-480 {
  1.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(481),
.weather-rainy .rain .drop:nth-child(481) {
  opacity: 0.49;
  left: 84.9vw;
  border-left-width: 1vmin;
  animation: fall-481 1.95s -6.5s ease-in infinite;
}
@keyframes fall-481 {
  5.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(482),
.weather-rainy .rain .drop:nth-child(482) {
  opacity: 0.57;
  left: 7.7vw;
  border-left-width: 1.2vmin;
  animation: fall-482 1.8s -4s ease-in infinite;
}
@keyframes fall-482 {
  2.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(483),
.weather-rainy .rain .drop:nth-child(483) {
  opacity: 0.36;
  left: 109.4vw;
  border-left-width: 1.8vmin;
  animation: fall-483 0.45s -0.5s ease-in infinite;
}
@keyframes fall-483 {
  5.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(484),
.weather-rainy .rain .drop:nth-child(484) {
  opacity: 0.41;
  left: 33.6vw;
  border-left-width: 2vmin;
  animation: fall-484 0.6s -1.5s ease-in infinite;
}
@keyframes fall-484 {
  6.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(485),
.weather-rainy .rain .drop:nth-child(485) {
  opacity: 0.37;
  left: 116.5vw;
  border-left-width: 0.4vmin;
  animation: fall-485 1.2s -3.5s ease-in infinite;
}
@keyframes fall-485 {
  4.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(486),
.weather-rainy .rain .drop:nth-child(486) {
  opacity: 0.42;
  left: 19.1vw;
  border-left-width: 0.7vmin;
  animation: fall-486 1.5s -10s ease-in infinite;
}
@keyframes fall-486 {
  6.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(487),
.weather-rainy .rain .drop:nth-child(487) {
  opacity: 0.59;
  left: 25.5vw;
  border-left-width: 0.5vmin;
  animation: fall-487 0.9s -9.5s ease-in infinite;
}
@keyframes fall-487 {
  2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(488),
.weather-rainy .rain .drop:nth-child(488) {
  opacity: 0.68;
  left: 26.6vw;
  border-left-width: 1.8vmin;
  animation: fall-488 0.6s -6.5s ease-in infinite;
}
@keyframes fall-488 {
  7.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(489),
.weather-rainy .rain .drop:nth-child(489) {
  opacity: 0.47;
  left: 93.9vw;
  border-left-width: 0.1vmin;
  animation: fall-489 0.45s -5s ease-in infinite;
}
@keyframes fall-489 {
  6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(490),
.weather-rainy .rain .drop:nth-child(490) {
  opacity: 0.56;
  left: 89.8vw;
  border-left-width: 1.4vmin;
  animation: fall-490 0.6s -3.5s ease-in infinite;
}
@keyframes fall-490 {
  5.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(491),
.weather-rainy .rain .drop:nth-child(491) {
  opacity: 0.38;
  left: 70.3vw;
  border-left-width: 0.5vmin;
  animation: fall-491 1.05s -3.5s ease-in infinite;
}
@keyframes fall-491 {
  0.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(492),
.weather-rainy .rain .drop:nth-child(492) {
  opacity: 0.37;
  left: 23.4vw;
  border-left-width: 0.1vmin;
  animation: fall-492 2.25s -9.5s ease-in infinite;
}
@keyframes fall-492 {
  3.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(493),
.weather-rainy .rain .drop:nth-child(493) {
  opacity: 0.43;
  left: 75.6vw;
  border-left-width: 1.8vmin;
  animation: fall-493 1.05s -1.5s ease-in infinite;
}
@keyframes fall-493 {
  3.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(494),
.weather-rainy .rain .drop:nth-child(494) {
  opacity: 0.43;
  left: 23.8vw;
  border-left-width: 1.2vmin;
  animation: fall-494 1.05s -2.5s ease-in infinite;
}
@keyframes fall-494 {
  3.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(495),
.weather-rainy .rain .drop:nth-child(495) {
  opacity: 0.67;
  left: 60vw;
  border-left-width: 1.2vmin;
  animation: fall-495 0.45s -10s ease-in infinite;
}
@keyframes fall-495 {
  3.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(496),
.weather-rainy .rain .drop:nth-child(496) {
  opacity: 0.62;
  left: 11.6vw;
  border-left-width: 1.8vmin;
  animation: fall-496 0.6s -4s ease-in infinite;
}
@keyframes fall-496 {
  10% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(497),
.weather-rainy .rain .drop:nth-child(497) {
  opacity: 0.54;
  left: 55.2vw;
  border-left-width: 1.3vmin;
  animation: fall-497 0.45s -7s ease-in infinite;
}
@keyframes fall-497 {
  1.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(498),
.weather-rainy .rain .drop:nth-child(498) {
  opacity: 0.61;
  left: 77.9vw;
  border-left-width: 1.3vmin;
  animation: fall-498 0.6s -1.5s ease-in infinite;
}
@keyframes fall-498 {
  8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(499),
.weather-rainy .rain .drop:nth-child(499) {
  opacity: 0.66;
  left: 103.5vw;
  border-left-width: 2vmin;
  animation: fall-499 2.25s -9s ease-in infinite;
}
@keyframes fall-499 {
  8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.rainy .rain .drop:nth-child(500),
.weather-rainy .rain .drop:nth-child(500) {
  opacity: 0.7;
  left: 31vw;
  border-left-width: 1.6vmin;
  animation: fall-500 1.8s -4.5s ease-in infinite;
}
@keyframes fall-500 {
  4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
/*!********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[13].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[13].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[14].oneOf[13].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[14].oneOf[13].use[5]!./app/components/styles/snowy.scss ***!
  \********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/* ❄️ Snowy Theme - Beautiful Winter Design with Real Snowflakes ❄️ */
.snowy, .weather-snowy {
  position: relative;
  overflow: hidden;
  /* Beautiful winter gradient background - much darker for snow visibility */
  background: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.15) 0%, transparent 50%), radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.1) 0%, transparent 50%), linear-gradient(135deg, #0a0f1a 0%, #0f172a 30%, #1e293b 70%, #334155 100%);
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  /* Kill any inherited decorative pseudo-elements/animations (e.g., rotating starfields) */
}
.snowy::before, .snowy::after, .weather-snowy::before, .weather-snowy::after {
  content: none !important;
  background: none !important;
  animation: none !important;
}
.snowy, .weather-snowy {
  /* Theme variables - winter blue palette */
  --dg-bg: #0a0f1a;
  --dg-ink: #ffffff;
  --dg-accent: #60a5fa;
  --dg-primary: #1e40af;
  --dg-secondary: #3b82f6;
  --dg-success: #10b981;
  --dg-warning: #f59e0b;
  --dg-error: #ef4444;
  --dg-card-bg: rgba(15, 23, 42, 0.9);
  --dg-border: rgba(96, 165, 250, 0.5);
  --dg-hover: rgba(96, 165, 250, 0.3);
  --dg-text-primary: #ffffff;
  --dg-text-secondary: #e2e8f0;
  --dg-text-muted: #94a3b8;
  --dg-sidebar-bg: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%);
  --dg-header-bg: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%);
  /* Sidebar styling with winter theme */
}
.snowy .sidebar, .weather-snowy .sidebar {
  background: var(--dg-sidebar-bg) !important;
  border-color: var(--dg-border) !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(15px) !important;
}
.snowy, .weather-snowy {
  /* Header styling with winter theme */
}
.snowy .header, .weather-snowy .header {
  background: var(--dg-header-bg) !important;
  border-color: var(--dg-border) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(15px) !important;
}
.snowy, .weather-snowy {
  /* Card styling with winter theme */
}
.snowy .card, .weather-snowy .card {
  background: var(--dg-card-bg) !important;
  border-color: var(--dg-border) !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(15px) !important;
}
.snowy, .weather-snowy {
  /* Button styling with winter theme */
}
.snowy .btn-primary, .weather-snowy .btn-primary {
  background: linear-gradient(135deg, #3b82f6 0%, #1e40af 50%, #1d4ed8 100%) !important;
  border-color: #3b82f6 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}
.snowy .btn-secondary, .weather-snowy .btn-secondary {
  background: linear-gradient(135deg, #1e40af 0%, #1d4ed8 50%, #2563eb 100%) !important;
  border-color: #1e40af !important;
  color: #ffffff !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}
.snowy, .weather-snowy {
  /* Text styling */
}
.snowy h1, .snowy h2, .snowy h3, .snowy h4, .snowy h5, .snowy h6, .weather-snowy h1, .weather-snowy h2, .weather-snowy h3, .weather-snowy h4, .weather-snowy h5, .weather-snowy h6 {
  color: var(--dg-text-primary) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}
.snowy p, .snowy span, .snowy div, .snowy a, .weather-snowy p, .weather-snowy span, .weather-snowy div, .weather-snowy a {
  color: var(--dg-text-secondary) !important;
}
.snowy .text-muted, .weather-snowy .text-muted {
  color: var(--dg-text-muted) !important;
}
.snowy, .weather-snowy {
  /* Reaction buttons styling with winter theme */
}
.snowy .card button, .snowy .card a, .weather-snowy .card button, .weather-snowy .card a {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.3) 0%, rgba(30, 64, 175, 0.3) 100%) !important;
  border: 1px solid rgba(96, 165, 250, 0.4) !important;
  color: #ffffff !important;
  backdrop-filter: blur(10px) !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}
.snowy .card button:hover, .snowy .card a:hover, .weather-snowy .card button:hover, .weather-snowy .card a:hover {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.5) 0%, rgba(30, 64, 175, 0.5) 100%) !important;
  box-shadow: 0 4px 8px rgba(96, 165, 250, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
  transform: translateY(-2px);
}
.snowy, .weather-snowy {
  /* Ensure icons and text inside these buttons also inherit colors */
}
.snowy .card button *, .snowy .card a *, .weather-snowy .card button *, .weather-snowy .card a * {
  color: #ffffff !important;
}
.snowy, .weather-snowy {
  /* Override Tailwind classes - force winter theme everywhere */
}
.snowy [class*=bg-gray], .snowy [class*=bg-white], .snowy [class*=bg-slate], .snowy [class*=bg-zinc], .snowy [class*=bg-neutral], .weather-snowy [class*=bg-gray], .weather-snowy [class*=bg-white], .weather-snowy [class*=bg-slate], .weather-snowy [class*=bg-zinc], .weather-snowy [class*=bg-neutral] {
  background: transparent !important;
}
.snowy, .weather-snowy {
  /* Force all main containers to use winter theme */
}
.snowy body, .snowy html, .snowy main, .snowy .content, .snowy .container, .snowy .page-wrapper, .weather-snowy body, .weather-snowy html, .weather-snowy main, .weather-snowy .content, .weather-snowy .container, .weather-snowy .page-wrapper {
  background: var(--dg-bg) !important;
}
.snowy, .weather-snowy {
  /* Override any light backgrounds (including slash-opacity utilities) */
}
.snowy .bg-white, .snowy .bg-white\/5, .snowy .bg-white\/10, .snowy .bg-white\/20, .snowy .bg-white\/30, .snowy .bg-white\/40, .snowy .bg-white\/50,
.snowy .bg-gray-50, .snowy .bg-gray-100, .snowy .bg-gray-200,
.snowy .bg-slate-50, .snowy .bg-slate-100, .snowy .bg-slate-200,
.snowy .bg-zinc-50, .snowy .bg-zinc-100, .snowy .bg-zinc-200,
.snowy [class*="bg-white/"], .snowy [class*=bg-gray-1], .snowy [class*=bg-slate-1], .snowy [class*=bg-zinc-1], .weather-snowy .bg-white, .weather-snowy .bg-white\/5, .weather-snowy .bg-white\/10, .weather-snowy .bg-white\/20, .weather-snowy .bg-white\/30, .weather-snowy .bg-white\/40, .weather-snowy .bg-white\/50,
.weather-snowy .bg-gray-50, .weather-snowy .bg-gray-100, .weather-snowy .bg-gray-200,
.weather-snowy .bg-slate-50, .weather-snowy .bg-slate-100, .weather-snowy .bg-slate-200,
.weather-snowy .bg-zinc-50, .weather-snowy .bg-zinc-100, .weather-snowy .bg-zinc-200,
.weather-snowy [class*="bg-white/"], .weather-snowy [class*=bg-gray-1], .weather-snowy [class*=bg-slate-1], .weather-snowy [class*=bg-zinc-1] {
  background: var(--dg-card-bg) !important;
  color: var(--dg-text-secondary) !important;
}
.snowy, .weather-snowy {
  /* Darken common UI containers that might still be white */
}
.snowy .card, .snowy .card-elevated, .snowy .card-glass, .snowy .panel, .snowy .widget, .snowy .widget-card, .snowy .compose, .snowy .profile-card,
.snowy .timeline-card, .snowy .thread-card, .snowy .dg-card, .snowy .dg-card--subtle, .weather-snowy .card, .weather-snowy .card-elevated, .weather-snowy .card-glass, .weather-snowy .panel, .weather-snowy .widget, .weather-snowy .widget-card, .weather-snowy .compose, .weather-snowy .profile-card,
.weather-snowy .timeline-card, .weather-snowy .thread-card, .weather-snowy .dg-card, .weather-snowy .dg-card--subtle {
  background: var(--dg-card-bg) !important;
  border-color: var(--dg-border) !important;
  color: var(--dg-text-secondary) !important;
  backdrop-filter: blur(12px) !important;
}
.snowy, .weather-snowy {
  /* Neutralize bright white gradient cards (e.g., hero/spotlight widgets) */
}
.snowy .dg-gradient-hero, .snowy .dg-gradient-chip, .snowy .gradient-card, .snowy .spotlight, .snowy .hero, .snowy .glass-hero,
.snowy .card[style*=linear-gradient], .snowy [class*=gradient], .weather-snowy .dg-gradient-hero, .weather-snowy .dg-gradient-chip, .weather-snowy .gradient-card, .weather-snowy .spotlight, .weather-snowy .hero, .weather-snowy .glass-hero,
.weather-snowy .card[style*=linear-gradient], .weather-snowy [class*=gradient] {
  background: var(--dg-card-bg) !important;
  background-image: none !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2) !important;
}
.snowy, .weather-snowy {
  /* Replace any white glass gradients with winter glass */
}
.snowy .glass, .snowy .glass-card, .snowy .glass-panel, .snowy .frosted, .snowy .frosted-card, .weather-snowy .glass, .weather-snowy .glass-card, .weather-snowy .glass-panel, .weather-snowy .frosted, .weather-snowy .frosted-card {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.75) 0%, rgba(15, 23, 42, 0.6) 100%) !important;
  border-color: var(--dg-border) !important;
  color: var(--dg-text-secondary) !important;
  backdrop-filter: blur(16px) !important;
}
.snowy, .weather-snowy {
  /* If any element has inline white backgrounds, neutralize them */
}
.snowy [style*="background-color: rgb(255"], .snowy [style*="background:#fff"], .snowy [style*="background: #fff"],
.snowy [style*="background-color:#fff"], .snowy [style*="background-color: #ffffff"], .weather-snowy [style*="background-color: rgb(255"], .weather-snowy [style*="background:#fff"], .weather-snowy [style*="background: #fff"],
.weather-snowy [style*="background-color:#fff"], .weather-snowy [style*="background-color: #ffffff"] {
  background: var(--dg-card-bg) !important;
  color: var(--dg-text-secondary) !important;
}
.snowy, .weather-snowy {
  /* Force text colors */
}
.snowy .text-gray-900, .snowy .text-gray-800, .snowy .text-gray-700, .snowy .text-slate-900, .snowy .text-slate-800, .weather-snowy .text-gray-900, .weather-snowy .text-gray-800, .weather-snowy .text-gray-700, .weather-snowy .text-slate-900, .weather-snowy .text-slate-800 {
  color: var(--dg-text-primary) !important;
}
.snowy .text-gray-600, .snowy .text-gray-500, .snowy .text-slate-600, .snowy .text-slate-500, .weather-snowy .text-gray-600, .weather-snowy .text-gray-500, .weather-snowy .text-slate-600, .weather-snowy .text-slate-500 {
  color: var(--dg-text-secondary) !important;
}
.snowy .text-gray-400, .snowy .text-gray-300, .snowy .text-slate-400, .snowy .text-slate-300, .weather-snowy .text-gray-400, .weather-snowy .text-gray-300, .weather-snowy .text-slate-400, .weather-snowy .text-slate-300 {
  color: var(--dg-text-muted) !important;
}
.snowy [class*=text-gray], .snowy [class*=text-slate], .snowy [class*=text-zinc], .snowy [class*=text-neutral], .weather-snowy [class*=text-gray], .weather-snowy [class*=text-slate], .weather-snowy [class*=text-zinc], .weather-snowy [class*=text-neutral] {
  color: var(--dg-text-secondary) !important;
}
.snowy [class*=border-gray], .snowy [class*=border-slate], .snowy [class*=border-zinc], .snowy [class*=border-neutral], .weather-snowy [class*=border-gray], .weather-snowy [class*=border-slate], .weather-snowy [class*=border-zinc], .weather-snowy [class*=border-neutral] {
  border-color: var(--dg-border) !important;
}
.snowy [class*="hover:bg-gray"], .snowy [class*="hover:bg-slate"], .snowy [class*="hover:bg-zinc"], .snowy [class*="hover:bg-neutral"], .weather-snowy [class*="hover:bg-gray"], .weather-snowy [class*="hover:bg-slate"], .weather-snowy [class*="hover:bg-zinc"], .weather-snowy [class*="hover:bg-neutral"] {
  background: var(--dg-hover) !important;
}
.snowy [class*="hover:text-gray"], .snowy [class*="hover:text-slate"], .snowy [class*="hover:text-zinc"], .snowy [class*="hover:text-neutral"], .weather-snowy [class*="hover:text-gray"], .weather-snowy [class*="hover:text-slate"], .weather-snowy [class*="hover:text-zinc"], .weather-snowy [class*="hover:text-neutral"] {
  color: var(--dg-text-primary) !important;
}

/* Beautiful snow effect with real snowflake symbols */
.snow {
  position: fixed;
  top: -10vh;
  left: 0;
  width: 100vw;
  height: 120vh;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

/* Individual snowflake styling - much more visible */
.snow > div {
  font-size: 50px;
  color: rgb(255, 255, 255);
  position: absolute;
  top: -5vh;
  text-shadow: 0 0 15px rgba(255, 255, 255, 0.8), 0 0 25px rgba(255, 255, 255, 0.6), 0 0 35px rgba(255, 255, 255, 0.4), 0 0 45px rgba(255, 255, 255, 0.2);
  animation: snowfall 9s linear infinite;
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.5));
}

/* Different snowflake sizes and blur effects */
.snow > div:nth-child(2n) {
  filter: blur(1px);
  font-size: 40px;
  opacity: 0.8;
}

.snow > div:nth-child(6n) {
  filter: blur(2px);
  font-size: 30px;
  opacity: 0.6;
}

.snow > div:nth-child(10n) {
  filter: blur(3px);
  font-size: 25px;
  opacity: 0.4;
}

/* Individual snowflake animations with different paths and timings */
.snow > div:nth-child(1) {
  --size: 0.8vw;
  --left-ini: 0vw;
  --left-end: -1vw;
  left: 70vw;
  animation: snowfall 9s linear infinite;
  animation-delay: -1s;
}

.snow > div:nth-child(2) {
  --size: 0.2vw;
  --left-ini: -7vw;
  --left-end: 10vw;
  left: 65vw;
  animation: snowfall 15s linear infinite;
  animation-delay: -8s;
}

.snow > div:nth-child(3) {
  --size: 1vw;
  --left-ini: 6vw;
  --left-end: 6vw;
  left: 1vw;
  animation: snowfall 9s linear infinite;
  animation-delay: -7s;
}

.snow > div:nth-child(4) {
  --size: 0.2vw;
  --left-ini: -3vw;
  --left-end: 9vw;
  left: 88vw;
  animation: snowfall 14s linear infinite;
  animation-delay: -5s;
}

.snow > div:nth-child(5) {
  --size: 0.4vw;
  --left-ini: -2vw;
  --left-end: -9vw;
  left: 74vw;
  animation: snowfall 6s linear infinite;
  animation-delay: -4s;
}

.snow > div:nth-child(6) {
  --size: 0.2vw;
  --left-ini: 5vw;
  --left-end: 1vw;
  left: 35vw;
  animation: snowfall 6s linear infinite;
  animation-delay: -7s;
}

.snow > div:nth-child(7) {
  --size: 0.4vw;
  --left-ini: -2vw;
  --left-end: -1vw;
  left: 27vw;
  animation: snowfall 10s linear infinite;
  animation-delay: -8s;
}

.snow > div:nth-child(8) {
  --size: 1vw;
  --left-ini: -9vw;
  --left-end: -2vw;
  left: 69vw;
  animation: snowfall 8s linear infinite;
  animation-delay: -8s;
}

.snow > div:nth-child(9) {
  --size: 0.2vw;
  --left-ini: -1vw;
  --left-end: -5vw;
  left: 84vw;
  animation: snowfall 11s linear infinite;
  animation-delay: -6s;
}

.snow > div:nth-child(10) {
  --size: 0.2vw;
  --left-ini: 7vw;
  --left-end: -9vw;
  left: 82vw;
  animation: snowfall 10s linear infinite;
  animation-delay: -3s;
}

.snow > div:nth-child(11) {
  --size: 0.6vw;
  --left-ini: -2vw;
  --left-end: -1vw;
  left: 48vw;
  animation: snowfall 10s linear infinite;
  animation-delay: -1s;
}

.snow > div:nth-child(12) {
  --size: 0.2vw;
  --left-ini: 5vw;
  --left-end: 6vw;
  left: 39vw;
  animation: snowfall 15s linear infinite;
  animation-delay: -8s;
}

.snow > div:nth-child(13) {
  --size: 0.2vw;
  --left-ini: 6vw;
  --left-end: 5vw;
  left: 3vw;
  animation: snowfall 9s linear infinite;
  animation-delay: -8s;
}

.snow > div:nth-child(14) {
  --size: 0.8vw;
  --left-ini: -5vw;
  --left-end: -2vw;
  left: 49vw;
  animation: snowfall 11s linear infinite;
  animation-delay: -8s;
}

.snow > div:nth-child(15) {
  --size: 0.6vw;
  --left-ini: 10vw;
  --left-end: 4vw;
  left: 77vw;
  animation: snowfall 7s linear infinite;
  animation-delay: -4s;
}

.snow > div:nth-child(16) {
  --size: 0.8vw;
  --left-ini: -3vw;
  --left-end: 1vw;
  left: 86vw;
  animation: snowfall 14s linear infinite;
  animation-delay: -8s;
}

.snow > div:nth-child(17) {
  --size: 1vw;
  --left-ini: 6vw;
  --left-end: -7vw;
  left: 18vw;
  animation: snowfall 9s linear infinite;
  animation-delay: -6s;
}

.snow > div:nth-child(18) {
  --size: 1vw;
  --left-ini: -9vw;
  --left-end: 4vw;
  left: 64vw;
  animation: snowfall 13s linear infinite;
  animation-delay: -7s;
}

.snow > div:nth-child(19) {
  --size: 1vw;
  --left-ini: 2vw;
  --left-end: -7vw;
  left: 52vw;
  animation: snowfall 15s linear infinite;
  animation-delay: -9s;
}

.snow > div:nth-child(20) {
  --size: 0.4vw;
  --left-ini: 0vw;
  --left-end: 8vw;
  left: 5vw;
  animation: snowfall 8s linear infinite;
  animation-delay: -9s;
}

.snow > div:nth-child(21) {
  --size: 0.6vw;
  --left-ini: -9vw;
  --left-end: -2vw;
  left: 10vw;
  animation: snowfall 12s linear infinite;
  animation-delay: -3s;
}

.snow > div:nth-child(22) {
  --size: 0.8vw;
  --left-ini: -3vw;
  --left-end: -8vw;
  left: 54vw;
  animation: snowfall 11s linear infinite;
  animation-delay: -9s;
}

.snow > div:nth-child(23) {
  --size: 0.6vw;
  --left-ini: -7vw;
  --left-end: -8vw;
  left: 20vw;
  animation: snowfall 6s linear infinite;
  animation-delay: -3s;
}

.snow > div:nth-child(24) {
  --size: 0.4vw;
  --left-ini: 10vw;
  --left-end: -4vw;
  left: 68vw;
  animation: snowfall 10s linear infinite;
  animation-delay: -8s;
}

.snow > div:nth-child(25) {
  --size: 1vw;
  --left-ini: 3vw;
  --left-end: 5vw;
  left: 90vw;
  animation: snowfall 7s linear infinite;
  animation-delay: -9s;
}

.snow > div:nth-child(26) {
  --size: 1vw;
  --left-ini: -7vw;
  --left-end: 5vw;
  left: 71vw;
  animation: snowfall 13s linear infinite;
  animation-delay: -2s;
}

.snow > div:nth-child(27) {
  --size: 0.6vw;
  --left-ini: 9vw;
  --left-end: 4vw;
  left: 2vw;
  animation: snowfall 15s linear infinite;
  animation-delay: -5s;
}

.snow > div:nth-child(28) {
  --size: 1vw;
  --left-ini: -5vw;
  --left-end: 3vw;
  left: 23vw;
  animation: snowfall 12s linear infinite;
  animation-delay: -1s;
}

.snow > div:nth-child(29) {
  --size: 0.4vw;
  --left-ini: -2vw;
  --left-end: -1vw;
  left: 39vw;
  animation: snowfall 14s linear infinite;
  animation-delay: -9s;
}

.snow > div:nth-child(30) {
  --size: 0.6vw;
  --left-ini: -9vw;
  --left-end: -5vw;
  left: 76vw;
  animation: snowfall 10s linear infinite;
  animation-delay: -5s;
}

.snow > div:nth-child(31) {
  --size: 0.4vw;
  --left-ini: -5vw;
  --left-end: 3vw;
  left: 14vw;
  animation: snowfall 8s linear infinite;
  animation-delay: -5s;
}

.snow > div:nth-child(32) {
  --size: 0.2vw;
  --left-ini: 5vw;
  --left-end: -1vw;
  left: 86vw;
  animation: snowfall 10s linear infinite;
  animation-delay: -9s;
}

.snow > div:nth-child(33) {
  --size: 0.4vw;
  --left-ini: -3vw;
  --left-end: 10vw;
  left: 66vw;
  animation: snowfall 6s linear infinite;
  animation-delay: -6s;
}

.snow > div:nth-child(34) {
  --size: 1vw;
  --left-ini: -3vw;
  --left-end: 6vw;
  left: 75vw;
  animation: snowfall 14s linear infinite;
  animation-delay: -9s;
}

.snow > div:nth-child(35) {
  --size: 1vw;
  --left-ini: -6vw;
  --left-end: 7vw;
  left: 22vw;
  animation: snowfall 7s linear infinite;
  animation-delay: -5s;
}

.snow > div:nth-child(36) {
  --size: 1vw;
  --left-ini: 3vw;
  --left-end: 4vw;
  left: 10vw;
  animation: snowfall 11s linear infinite;
  animation-delay: -10s;
}

.snow > div:nth-child(37) {
  --size: 0.6vw;
  --left-ini: 2vw;
  --left-end: 10vw;
  left: 95vw;
  animation: snowfall 13s linear infinite;
  animation-delay: -6s;
}

.snow > div:nth-child(38) {
  --size: 0.8vw;
  --left-ini: 5vw;
  --left-end: 8vw;
  left: 34vw;
  animation: snowfall 9s linear infinite;
  animation-delay: -10s;
}

.snow > div:nth-child(39) {
  --size: 0.8vw;
  --left-ini: 4vw;
  --left-end: 0vw;
  left: 80vw;
  animation: snowfall 11s linear infinite;
  animation-delay: -2s;
}

.snow > div:nth-child(40) {
  --size: 0.8vw;
  --left-ini: 1vw;
  --left-end: -7vw;
  left: 45vw;
  animation: snowfall 11s linear infinite;
  animation-delay: -4s;
}

.snow > div:nth-child(41) {
  --size: 0.2vw;
  --left-ini: 9vw;
  --left-end: 10vw;
  left: 82vw;
  animation: snowfall 8s linear infinite;
  animation-delay: -2s;
}

.snow > div:nth-child(42) {
  --size: 1vw;
  --left-ini: 9vw;
  --left-end: -9vw;
  left: 22vw;
  animation: snowfall 10s linear infinite;
  animation-delay: -6s;
}

.snow > div:nth-child(43) {
  --size: 0.6vw;
  --left-ini: 5vw;
  --left-end: 8vw;
  left: 66vw;
  animation: snowfall 11s linear infinite;
  animation-delay: -1s;
}

.snow > div:nth-child(44) {
  --size: 0.6vw;
  --left-ini: -5vw;
  --left-end: -2vw;
  left: 75vw;
  animation: snowfall 12s linear infinite;
  animation-delay: -4s;
}

.snow > div:nth-child(45) {
  --size: 0.2vw;
  --left-ini: 0vw;
  --left-end: 3vw;
  left: 2vw;
  animation: snowfall 7s linear infinite;
  animation-delay: -5s;
}

.snow > div:nth-child(46) {
  --size: 0.2vw;
  --left-ini: 8vw;
  --left-end: -3vw;
  left: 94vw;
  animation: snowfall 8s linear infinite;
  animation-delay: -9s;
}

.snow > div:nth-child(47) {
  --size: 0.6vw;
  --left-ini: -6vw;
  --left-end: -9vw;
  left: 95vw;
  animation: snowfall 11s linear infinite;
  animation-delay: -4s;
}

.snow > div:nth-child(48) {
  --size: 0.2vw;
  --left-ini: -5vw;
  --left-end: 6vw;
  left: 34vw;
  animation: snowfall 10s linear infinite;
  animation-delay: -6s;
}

.snow > div:nth-child(49) {
  --size: 0.8vw;
  --left-ini: 4vw;
  --left-end: 8vw;
  left: 22vw;
  animation: snowfall 12s linear infinite;
  animation-delay: -10s;
}

.snow > div:nth-child(50) {
  --size: 0.2vw;
  --left-ini: -4vw;
  --left-end: 4vw;
  left: 100vw;
  animation: snowfall 14s linear infinite;
  animation-delay: -9s;
}

/* Snowfall animation with wind effect */
@keyframes snowfall {
  0% {
    transform: translate3d(var(--left-ini), 0, 0) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translate3d(var(--left-end), 110vh, 0) rotate(360deg);
    opacity: 0;
  }
}
/*!********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[13].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[13].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[14].oneOf[13].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[14].oneOf[13].use[5]!./app/components/styles/sunny.scss ***!
  \********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/* Sunny theme - Refined golden warmth with atmospheric light */
html.sunny, html.weather-sunny,
body.sunny, body.weather-sunny {
  position: relative;
  overflow: hidden;
  /* Sunny background — soft depth without bands */
  background: radial-gradient(140% 80% at 50% -20%, rgba(255, 255, 255, 0.38) 0%, rgba(255, 255, 255, 0) 60%), linear-gradient(180deg, #fff4ce 0%, #ffe29b 55%, #ffd06c 100%) !important;
  background-color: #ffe29b !important;
  background-attachment: initial !important;
  --dg-bg: #fffaf0;
  --dg-ink: #2e2a23;
  --dg-accent: #fbbf24;
  --dg-primary: #f59e0b;
  --dg-secondary: #fdba74;
  --dg-success: #16a34a;
  --dg-warning: #f59e0b;
  --dg-error: #ef4444;
  --dg-card-bg: rgba(255, 253, 245, 0.95);
  --dg-border: rgba(255, 200, 120, 0.45);
  --dg-hover: rgba(253, 186, 116, 0.15);
  --dg-text-primary: #1e293b;
  --dg-text-secondary: #374151;
  --dg-text-muted: #78716c;
  --dg-sidebar-bg: rgba(255, 250, 230, 0.92);
  --dg-header-bg: rgba(255, 248, 225, 0.94);
  /* Disable any overlays */
}
html.sunny::before, html.weather-sunny::before,
body.sunny::before, body.weather-sunny::before {
  display: none !important;
}
html.sunny::after, html.weather-sunny::after,
body.sunny::after, body.weather-sunny::after {
  display: none !important;
}
html.sunny, html.weather-sunny,
body.sunny, body.weather-sunny {
  /* Force remove any top borders or lines */
  border-top: 0 !important;
  outline: none !important;
  /* Remove any potential top borders from all child elements */
}
html.sunny *, html.weather-sunny *,
body.sunny *, body.weather-sunny * {
  border-top: 0 !important;
}
html.sunny, html.weather-sunny,
body.sunny, body.weather-sunny {
  /* Layout layers on top of the glow */
}
html.sunny > *, html.weather-sunny > *,
body.sunny > *, body.weather-sunny > * {
  position: relative;
  z-index: 1;
}
html.sunny, html.weather-sunny,
body.sunny, body.weather-sunny {
  /* Sidebar — more depth and warmth */
}
html.sunny .sidebar, html.weather-sunny .sidebar,
body.sunny .sidebar, body.weather-sunny .sidebar {
  background: linear-gradient(180deg, rgba(255, 253, 245, 0.96) 0%, rgba(255, 248, 230, 0.92) 100%) !important;
  border-color: var(--dg-border) !important;
  box-shadow: 0 10px 28px rgba(255, 200, 120, 0.15), 0 4px 12px rgba(0, 0, 0, 0.05) !important;
  backdrop-filter: blur(18px);
}
html.sunny, html.weather-sunny,
body.sunny, body.weather-sunny {
  /* Header — add faint light reflection */
}
html.sunny .header, html.weather-sunny .header,
body.sunny .header, body.weather-sunny .header {
  background: linear-gradient(180deg, rgba(255, 253, 245, 0.96) 0%, rgba(255, 247, 228, 0.9) 100%) !important;
  border: 0 !important;
  box-shadow: 0 8px 24px rgba(255, 200, 120, 0.15), 0 2px 8px rgba(0, 0, 0, 0.04) !important;
  backdrop-filter: blur(18px);
}
html.sunny, html.weather-sunny,
body.sunny, body.weather-sunny {
  /* Card — smoother glow reflection */
}
html.sunny .card, html.weather-sunny .card,
body.sunny .card, body.weather-sunny .card {
  background: linear-gradient(180deg, rgba(255, 253, 245, 0.97) 0%, rgba(255, 248, 230, 0.92) 100%) !important;
  border: 1px solid var(--dg-border) !important;
  box-shadow: 0 8px 24px rgba(255, 196, 120, 0.2), 0 4px 12px rgba(0, 0, 0, 0.05) !important;
  backdrop-filter: blur(14px);
  border-radius: 16px;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.3s ease;
}
html.sunny .card:hover, html.weather-sunny .card:hover,
body.sunny .card:hover, body.weather-sunny .card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(255, 196, 120, 0.3);
}
html.sunny .card::before, html.weather-sunny .card::before,
body.sunny .card::before, body.weather-sunny .card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0.25) 50%, rgba(255, 255, 255, 0) 80%);
  transform: translateX(-100%) rotate(15deg);
  transition: transform 0.8s ease;
  pointer-events: none;
}
html.sunny .card:hover::before, html.weather-sunny .card:hover::before,
body.sunny .card:hover::before, body.weather-sunny .card:hover::before {
  transform: translateX(80%) rotate(15deg);
}
html.sunny, html.weather-sunny,
body.sunny, body.weather-sunny {
  /* Buttons — richer and more “sunlit” */
}
html.sunny .btn-primary, html.weather-sunny .btn-primary,
body.sunny .btn-primary, body.weather-sunny .btn-primary {
  background: linear-gradient(135deg, #facc15 0%, #f59e0b 100%) !important;
  border: 2px solid rgba(245, 158, 11, 0.85) !important;
  color: #3a2a12 !important;
  box-shadow: 0 6px 18px rgba(245, 158, 11, 0.3);
  border-radius: 12px;
  transition: all 0.25s ease;
}
html.sunny .btn-primary:hover, html.weather-sunny .btn-primary:hover,
body.sunny .btn-primary:hover, body.weather-sunny .btn-primary:hover {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%) !important;
  box-shadow: 0 8px 22px rgba(245, 158, 11, 0.4);
  transform: translateY(-2px);
}
html.sunny .btn-secondary, html.weather-sunny .btn-secondary,
body.sunny .btn-secondary, body.weather-sunny .btn-secondary {
  background: linear-gradient(135deg, #fff1bf 0%, #ffd48a 100%) !important;
  border: 2px solid rgba(255, 196, 120, 0.9) !important;
  color: #2b2b2b !important;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(255, 196, 120, 0.25);
  transition: all 0.25s ease;
}
html.sunny .btn-secondary:hover, html.weather-sunny .btn-secondary:hover,
body.sunny .btn-secondary:hover, body.weather-sunny .btn-secondary:hover {
  background: linear-gradient(135deg, #ffecb3 0%, #ffcf70 100%) !important;
  box-shadow: 0 8px 20px rgba(255, 196, 120, 0.35);
  transform: translateY(-2px);
}
html.sunny, html.weather-sunny,
body.sunny, body.weather-sunny {
  /* Inputs — softer + clearer */
}
html.sunny input, html.sunny textarea, html.sunny select, html.weather-sunny input, html.weather-sunny textarea, html.weather-sunny select,
body.sunny input,
body.sunny textarea,
body.sunny select, body.weather-sunny input, body.weather-sunny textarea, body.weather-sunny select {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid var(--dg-border);
  border-radius: 12px;
  color: var(--dg-text-primary);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) inset;
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}
html.sunny input:focus, html.sunny textarea:focus, html.sunny select:focus, html.weather-sunny input:focus, html.weather-sunny textarea:focus, html.weather-sunny select:focus,
body.sunny input:focus,
body.sunny textarea:focus,
body.sunny select:focus, body.weather-sunny input:focus, body.weather-sunny textarea:focus, body.weather-sunny select:focus {
  border-color: #fbbf24;
  box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.2);
  outline: none;
}
html.sunny, html.weather-sunny,
body.sunny, body.weather-sunny {
  /* Text hierarchy */
}
html.sunny h1, html.sunny h2, html.sunny h3, html.sunny h4, html.sunny h5, html.sunny h6, html.weather-sunny h1, html.weather-sunny h2, html.weather-sunny h3, html.weather-sunny h4, html.weather-sunny h5, html.weather-sunny h6,
body.sunny h1,
body.sunny h2,
body.sunny h3,
body.sunny h4,
body.sunny h5,
body.sunny h6, body.weather-sunny h1, body.weather-sunny h2, body.weather-sunny h3, body.weather-sunny h4, body.weather-sunny h5, body.weather-sunny h6 {
  color: var(--dg-text-primary) !important;
}
html.sunny p, html.sunny span, html.sunny div, html.sunny a, html.weather-sunny p, html.weather-sunny span, html.weather-sunny div, html.weather-sunny a,
body.sunny p,
body.sunny span,
body.sunny div,
body.sunny a, body.weather-sunny p, body.weather-sunny span, body.weather-sunny div, body.weather-sunny a {
  color: var(--dg-text-secondary) !important;
}
html.sunny .text-muted, html.weather-sunny .text-muted,
body.sunny .text-muted, body.weather-sunny .text-muted {
  color: var(--dg-text-muted) !important;
}
html.sunny, html.weather-sunny,
body.sunny, body.weather-sunny {
  /* Chips & badges — clearer amber edge */
}
html.sunny .badge, html.sunny .chip, html.sunny .tag, html.weather-sunny .badge, html.weather-sunny .chip, html.weather-sunny .tag,
body.sunny .badge,
body.sunny .chip,
body.sunny .tag, body.weather-sunny .badge, body.weather-sunny .chip, body.weather-sunny .tag {
  background: linear-gradient(135deg, #fff6d4 0%, #ffd68a 100%);
  color: #7a4b0a;
  border: 1px solid rgba(255, 196, 120, 0.8);
  border-radius: 9999px;
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(255, 196, 120, 0.25);
}
html.sunny, html.weather-sunny,
body.sunny, body.weather-sunny {
  /* Tabs — cleaner underline + hover */
}
html.sunny .tabs, html.sunny .nav-tabs, html.weather-sunny .tabs, html.weather-sunny .nav-tabs,
body.sunny .tabs,
body.sunny .nav-tabs, body.weather-sunny .tabs, body.weather-sunny .nav-tabs {
  border-bottom: 1px solid rgba(255, 196, 120, 0.4);
  gap: 10px;
}
html.sunny .tab, html.sunny .nav-tab, html.weather-sunny .tab, html.weather-sunny .nav-tab,
body.sunny .tab,
body.sunny .nav-tab, body.weather-sunny .tab, body.weather-sunny .nav-tab {
  color: var(--dg-text-secondary);
  padding: 10px 14px;
  border-bottom: 2px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
html.sunny .tab:hover, html.sunny .nav-tab:hover, html.weather-sunny .tab:hover, html.weather-sunny .nav-tab:hover,
body.sunny .tab:hover,
body.sunny .nav-tab:hover, body.weather-sunny .tab:hover, body.weather-sunny .nav-tab:hover {
  color: #92400e;
}
html.sunny .tab.active, html.sunny .nav-tab.active, html.weather-sunny .tab.active, html.weather-sunny .nav-tab.active,
body.sunny .tab.active,
body.sunny .nav-tab.active, body.weather-sunny .tab.active, body.weather-sunny .nav-tab.active {
  color: #92400e;
  border-color: rgba(245, 158, 11, 0.9);
  font-weight: 700;
}
html.sunny, html.weather-sunny,
body.sunny, body.weather-sunny {
  /* Links */
}
html.sunny a:hover, html.weather-sunny a:hover,
body.sunny a:hover, body.weather-sunny a:hover {
  color: #b45309 !important;
  text-decoration-color: #f59e0b !important;
}

/* Prevent the effects wrapper from painting a background */
.weather-effects.sunny,
.weather-effects.weather-sunny {
  background: none !important;
}

/* ✨ Subtle glowing motion */
@keyframes sunnyGlow {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 0.5;
  }
  100% {
    transform: translate(20px, 10px) scale(1.05);
    opacity: 0.8;
  }
}
/*!*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[13].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[13].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[14].oneOf[13].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[14].oneOf[13].use[5]!./app/components/styles/cloudy.scss ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* Cloudy theme - Animated clouds with sky background */
.cloudy, body.cloudy, .weather-cloudy, body.weather-cloudy {
  position: relative;
  overflow: hidden;
  /* Sky background gradient */
  background: #c9dbe9;
  background: linear-gradient(to bottom, #c9dbe9 0%, #fff 100%);
  background-color: #c9dbe9;
  /* Cloudy theme colors */
  --dg-bg: #c9dbe9;
  --dg-ink: #2c3e50;
  --dg-accent: #7f8c8d;
  --dg-primary: #34495e;
  --dg-secondary: #95a5a6;
  --dg-success: #27ae60;
  --dg-warning: #f39c12;
  --dg-error: #e74c3c;
  --dg-card-bg: rgba(255, 255, 255, 0.9);
  --dg-border: rgba(52, 73, 94, 0.2);
  --dg-hover: rgba(52, 73, 94, 0.1);
  --dg-text-primary: #2c3e50;
  --dg-text-secondary: #34495e;
  --dg-text-muted: #7f8c8d;
  --dg-sidebar-bg: rgba(255, 255, 255, 0.85);
  --dg-header-bg: rgba(255, 255, 255, 0.9);
  /* Sidebar styling */
}
.cloudy .sidebar, body.cloudy .sidebar, .weather-cloudy .sidebar, body.weather-cloudy .sidebar {
  background: var(--dg-sidebar-bg) !important;
  border: 1px solid var(--dg-border) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
  backdrop-filter: blur(10px) !important;
}
.cloudy, body.cloudy, .weather-cloudy, body.weather-cloudy {
  /* Header styling */
}
.cloudy .header, body.cloudy .header, .weather-cloudy .header, body.weather-cloudy .header {
  background: var(--dg-header-bg) !important;
  border: 1px solid var(--dg-border) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
  backdrop-filter: blur(10px) !important;
}
.cloudy, body.cloudy, .weather-cloudy, body.weather-cloudy {
  /* Card styling */
}
.cloudy .card, body.cloudy .card, .weather-cloudy .card, body.weather-cloudy .card {
  background: var(--dg-card-bg) !important;
  border: 1px solid var(--dg-border) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;
  backdrop-filter: blur(10px) !important;
  border-radius: 12px !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
.cloudy .card:hover, body.cloudy .card:hover, .weather-cloudy .card:hover, body.weather-cloudy .card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
}
.cloudy, body.cloudy, .weather-cloudy, body.weather-cloudy {
  /* Button styling */
}
.cloudy .btn-primary, body.cloudy .btn-primary, .weather-cloudy .btn-primary, body.weather-cloudy .btn-primary {
  background: linear-gradient(135deg, #34495e 0%, #2c3e50 100%) !important;
  border: 1px solid #2c3e50 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(52, 73, 94, 0.3) !important;
  border-radius: 8px !important;
}
.cloudy .btn-primary:hover, body.cloudy .btn-primary:hover, .weather-cloudy .btn-primary:hover, body.weather-cloudy .btn-primary:hover {
  background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 16px rgba(52, 73, 94, 0.4) !important;
}
.cloudy .btn-secondary, body.cloudy .btn-secondary, .weather-cloudy .btn-secondary, body.weather-cloudy .btn-secondary {
  background: rgba(255, 255, 255, 0.8) !important;
  border: 1px solid var(--dg-border) !important;
  color: var(--dg-text-primary) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
  border-radius: 8px !important;
}
.cloudy .btn-secondary:hover, body.cloudy .btn-secondary:hover, .weather-cloudy .btn-secondary:hover, body.weather-cloudy .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.95) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}
.cloudy, body.cloudy, .weather-cloudy, body.weather-cloudy {
  /* Text styling */
}
.cloudy h1, .cloudy h2, .cloudy h3, .cloudy h4, .cloudy h5, .cloudy h6, body.cloudy h1, body.cloudy h2, body.cloudy h3, body.cloudy h4, body.cloudy h5, body.cloudy h6, .weather-cloudy h1, .weather-cloudy h2, .weather-cloudy h3, .weather-cloudy h4, .weather-cloudy h5, .weather-cloudy h6, body.weather-cloudy h1, body.weather-cloudy h2, body.weather-cloudy h3, body.weather-cloudy h4, body.weather-cloudy h5, body.weather-cloudy h6 {
  color: var(--dg-text-primary) !important;
}
.cloudy p, .cloudy span, .cloudy div, .cloudy a, body.cloudy p, body.cloudy span, body.cloudy div, body.cloudy a, .weather-cloudy p, .weather-cloudy span, .weather-cloudy div, .weather-cloudy a, body.weather-cloudy p, body.weather-cloudy span, body.weather-cloudy div, body.weather-cloudy a {
  color: var(--dg-text-secondary) !important;
}
.cloudy .text-muted, body.cloudy .text-muted, .weather-cloudy .text-muted, body.weather-cloudy .text-muted {
  color: var(--dg-text-muted) !important;
}
.cloudy, body.cloudy, .weather-cloudy, body.weather-cloudy {
  /* Reaction buttons styling */
}
.cloudy .card button, .cloudy .card a, body.cloudy .card button, body.cloudy .card a, .weather-cloudy .card button, .weather-cloudy .card a, body.weather-cloudy .card button, body.weather-cloudy .card a {
  background: rgba(52, 73, 94, 0.1) !important;
  border: 1px solid rgba(52, 73, 94, 0.3) !important;
  color: var(--dg-text-primary) !important;
  border-radius: 6px !important;
  padding: 6px 12px !important;
  transition: all 0.2s ease !important;
}
.cloudy .card button:hover, .cloudy .card a:hover, body.cloudy .card button:hover, body.cloudy .card a:hover, .weather-cloudy .card button:hover, .weather-cloudy .card a:hover, body.weather-cloudy .card button:hover, body.weather-cloudy .card a:hover {
  background: rgba(52, 73, 94, 0.2) !important;
  transform: translateY(-1px) !important;
}
.cloudy, body.cloudy, .weather-cloudy, body.weather-cloudy {
  /* Override Tailwind classes */
}
.cloudy [class*=bg-white], .cloudy [class*=bg-gray], .cloudy [class*=bg-slate], .cloudy [class*=bg-zinc], .cloudy [class*=bg-neutral], body.cloudy [class*=bg-white], body.cloudy [class*=bg-gray], body.cloudy [class*=bg-slate], body.cloudy [class*=bg-zinc], body.cloudy [class*=bg-neutral], .weather-cloudy [class*=bg-white], .weather-cloudy [class*=bg-gray], .weather-cloudy [class*=bg-slate], .weather-cloudy [class*=bg-zinc], .weather-cloudy [class*=bg-neutral], body.weather-cloudy [class*=bg-white], body.weather-cloudy [class*=bg-gray], body.weather-cloudy [class*=bg-slate], body.weather-cloudy [class*=bg-zinc], body.weather-cloudy [class*=bg-neutral] {
  background: transparent !important;
}
.cloudy [class*=text-gray], .cloudy [class*=text-slate], .cloudy [class*=text-zinc], .cloudy [class*=text-neutral], body.cloudy [class*=text-gray], body.cloudy [class*=text-slate], body.cloudy [class*=text-zinc], body.cloudy [class*=text-neutral], .weather-cloudy [class*=text-gray], .weather-cloudy [class*=text-slate], .weather-cloudy [class*=text-zinc], .weather-cloudy [class*=text-neutral], body.weather-cloudy [class*=text-gray], body.weather-cloudy [class*=text-slate], body.weather-cloudy [class*=text-zinc], body.weather-cloudy [class*=text-neutral] {
  color: var(--dg-text-secondary) !important;
}
.cloudy [class*=border-gray], .cloudy [class*=border-slate], .cloudy [class*=border-zinc], .cloudy [class*=border-neutral], body.cloudy [class*=border-gray], body.cloudy [class*=border-slate], body.cloudy [class*=border-zinc], body.cloudy [class*=border-neutral], .weather-cloudy [class*=border-gray], .weather-cloudy [class*=border-slate], .weather-cloudy [class*=border-zinc], .weather-cloudy [class*=border-neutral], body.weather-cloudy [class*=border-gray], body.weather-cloudy [class*=border-slate], body.weather-cloudy [class*=border-zinc], body.weather-cloudy [class*=border-neutral] {
  border-color: var(--dg-border) !important;
}

/* Cloud container - serves as the sky */
.cloudy #clouds, .weather-cloudy #clouds {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  padding: 100px 0;
  background: #c9dbe9;
  background: linear-gradient(to bottom, #c9dbe9 0%, #fff 100%);
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

/* Cloud shape */
.cloudy .cloud, .weather-cloudy .cloud {
  width: 200px;
  height: 60px;
  background: #fff;
  border-radius: 200px;
  position: absolute;
  top: 20%;
}

.cloudy .cloud:before, .weather-cloudy .cloud:before,
.cloudy .cloud:after, .weather-cloudy .cloud:after {
  content: "";
  position: absolute;
  background: #fff;
  border-radius: 100px;
}

.cloudy .cloud:before, .weather-cloudy .cloud:before {
  width: 100px;
  height: 80px;
  top: -15px;
  left: 10px;
  transform: rotate(30deg);
}

.cloudy .cloud:after, .weather-cloudy .cloud:after {
  width: 120px;
  height: 120px;
  top: -55px;
  right: 15px;
  left: auto;
}

/* Cloud animations with different speeds and sizes */
.cloudy .x1, .weather-cloudy .x1 {
  animation: moveclouds 15s linear infinite;
}

.cloudy .x2, .weather-cloudy .x2 {
  left: 200px;
  transform: scale(0.6);
  opacity: 0.6;
  animation: moveclouds 25s linear infinite;
}

.cloudy .x3, .weather-cloudy .x3 {
  left: -250px;
  top: -200px;
  transform: scale(0.8);
  opacity: 0.8;
  animation: moveclouds 20s linear infinite;
}

.cloudy .x4, .weather-cloudy .x4 {
  left: 470px;
  top: -250px;
  transform: scale(0.75);
  opacity: 0.75;
  animation: moveclouds 18s linear infinite;
}

.cloudy .x5, .weather-cloudy .x5 {
  left: -150px;
  top: -150px;
  transform: scale(0.8);
  opacity: 0.8;
  animation: moveclouds 20s linear infinite;
}

.cloudy .x6, .weather-cloudy .x6 {
  left: 300px;
  top: 10%;
  transform: scale(0.5);
  opacity: 0.5;
  animation: moveclouds 30s linear infinite;
}

.cloudy .x7, .weather-cloudy .x7 {
  left: -300px;
  top: 60%;
  transform: scale(0.7);
  opacity: 0.7;
  animation: moveclouds 22s linear infinite;
}

.cloudy .x8, .weather-cloudy .x8 {
  left: 600px;
  top: 40%;
  transform: scale(0.9);
  opacity: 0.9;
  animation: moveclouds 16s linear infinite;
}

.cloudy .x9, .weather-cloudy .x9 {
  left: -400px;
  top: 80%;
  transform: scale(0.6);
  opacity: 0.6;
  animation: moveclouds 28s linear infinite;
}

.cloudy .x10, .weather-cloudy .x10 {
  left: 800px;
  top: 15%;
  transform: scale(0.4);
  opacity: 0.4;
  animation: moveclouds 35s linear infinite;
}

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