diff --git a/README.md b/README.md index c805a0e..04422d2 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,7 @@ # [Animadio CSS Library](https://animadio.org) [![NPM Version](https://badgen.net/npm/v/animadio)](https://www.npmjs.com/package/animadio) -[![NPM Downloads](https://badgen.net/npm/dt/animadio)](https://www.npmjs.com/package/animadio) +[![NPM Downloads](https://badgen.net/npm/dy/animadio)](https://www.npmjs.com/package/animadio) [![jsDelivr Yearly Downloads](https://img.shields.io/jsdelivr/npm/hy/animadio)](https://www.jsdelivr.com/package/npm/animadio) [![GitHub Last Commit](https://img.shields.io/github/last-commit/philippebeck/animadio.svg?label=Last+Commit)](https://github.com/philippebeck/animadio/commits/master) @@ -35,8 +35,8 @@ ## CDN -- Development : [https://cdn.jsdelivr.net/npm/animadio@5.3.0/dist/animadio.css](https://cdn.jsdelivr.net/npm/animadio@5.3.0/dist/animadio.css) -- Production : [https://cdn.jsdelivr.net/npm/animadio@5.3.0/dist/animadio.min.css](https://cdn.jsdelivr.net/npm/animadio@5.3.0/dist/animadio.min.css) +- Development : [https://cdn.jsdelivr.net/npm/animadio@5.4.0/dist/animadio.css](https://cdn.jsdelivr.net/npm/animadio@5.4.0/dist/animadio.css) +- Production : [https://cdn.jsdelivr.net/npm/animadio@5.4.0/dist/animadio.min.css](https://cdn.jsdelivr.net/npm/animadio@5.4.0/dist/animadio.min.css) --- diff --git a/dist/animadio.css b/dist/animadio.css index f42735d..a0638d7 100644 --- a/dist/animadio.css +++ b/dist/animadio.css @@ -1,4 +1,4 @@ -/*! animadio v5.3.0 | https://animadio.org | MIT License */ +/*! animadio v5.4.0 | https://animadio.org | MIT License */ /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ @@ -357,57 +357,57 @@ template { /* Summary -- Colors -- Fonts -- Tags -- Flex -- Grid -- Gap -- Place -- Margin -- Border -- Padding -- Height -- Width -- Transform -- Keyframes -- Animation +base { + colors + fonts +} +tags { + tags +} +display { + flex + grid + gap + place +} +boxes { + margin + border + padding + height + width +} +anima { + transform + keyframes + animation +} */ /********** COLORS **********/ :root { /* hsl values */ - --red-hsl: 0, 100%, 50%; - --orange-hsl: 30, 100%, 50%; - --yellow-hsl: 60, 100%, 50%; - --lime-hsl: 90, 100%, 50%; - --green-hsl: 120, 100%, 50%; - --aqua-hsl: 150, 100%, 50%; - --cyan-hsl: 180, 100%, 50%; - --sky-hsl: 210, 100%, 50%; - --blue-hsl: 240, 100%, 50%; - --indigo-hsl: 270, 100%, 50%; - --magenta-hsl: 300, 100%, 50%; - --pink-hsl: 330, 100%, 50%; + --red-hsl: 348, 83%, 47%; + --orange-hsl: 33, 100%, 50%; + --yellow-hsl: 51, 100%, 50%; + --green-hsl: 120, 61%, 50%; + --sky-hsl: 195, 100%, 50%; + --blue-hsl: 210, 100%, 56%; + --violet-hsl: 271, 76%, 53%; + --pink-hsl: 328, 100%, 54%; --black-hsl: 0, 0%, 0%; - --slate-hsl: 0, 0%, 25%; - --gray-hsl: 0, 0%, 50%; - --silver-hsl: 0, 0%, 75%; + --gray-hsl: 0, 0%, 33%; + --silver-hsl: 0, 0%, 67%; --white-hsl: 0, 0%, 100%; /* opaque colors */ --red: hsl(var(--red-hsl)); --orange: hsl(var(--orange-hsl)); --yellow: hsl(var(--yellow-hsl)); - --lime: hsl(var(--lime-hsl)); --green: hsl(var(--green-hsl)); - --aqua: hsl(var(--aqua-hsl)); - --cyan: hsl(var(--cyan-hsl)); --sky: hsl(var(--sky-hsl)); --blue: hsl(var(--blue-hsl)); - --indigo: hsl(var(--indigo-hsl)); - --magenta: hsl(var(--magenta-hsl)); + --violet: hsl(var(--violet-hsl)); --pink: hsl(var(--pink-hsl)); --black: hsl(var(--black-hsl)); - --slate: hsl(var(--slate-hsl)); --gray: hsl(var(--gray-hsl)); --silver: hsl(var(--silver-hsl)); --white: hsl(var(--white-hsl)); @@ -421,28 +421,18 @@ Summary --orange-light: hsla(var(--orange-hsl), var(--light)); --yellow-dark: hsla(var(--yellow-hsl), var(--dark)); --yellow-light: hsla(var(--yellow-hsl), var(--light)); - --lime-dark: hsla(var(--lime-hsl), var(--dark)); - --lime-light: hsla(var(--lime-hsl), var(--light)); --green-dark: hsla(var(--green-hsl), var(--dark)); --green-light: hsla(var(--green-hsl), var(--light)); - --aqua-dark: hsla(var(--aqua-hsl), var(--dark)); - --aqua-light: hsla(var(--aqua-hsl), var(--light)); - --cyan-dark: hsla(var(--cyan-hsl), var(--dark)); - --cyan-light: hsla(var(--cyan-hsl), var(--light)); --sky-dark: hsla(var(--sky-hsl), var(--dark)); --sky-light: hsla(var(--sky-hsl), var(--light)); --blue-dark: hsla(var(--blue-hsl), var(--dark)); --blue-light: hsla(var(--blue-hsl), var(--light)); - --indigo-dark: hsla(var(--indigo-hsl), var(--dark)); - --indigo-light: hsla(var(--indigo-hsl), var(--light)); - --magenta-dark: hsla(var(--magenta-hsl), var(--dark)); - --magenta-light: hsla(var(--magenta-hsl), var(--light)); + --violet-dark: hsla(var(--violet-hsl), var(--dark)); + --violet-light: hsla(var(--violet-hsl), var(--light)); --pink-dark: hsla(var(--pink-hsl), var(--dark)); --pink-light: hsla(var(--pink-hsl), var(--light)); --black-dark: hsla(var(--black-hsl), var(--dark)); --black-light: hsla(var(--black-hsl), var(--light)); - --slate-dark: hsla(var(--slate-hsl), var(--dark)); - --slate-light: hsla(var(--slate-hsl), var(--light)); --gray-dark: hsla(var(--gray-hsl), var(--dark)); --gray-light: hsla(var(--gray-hsl), var(--light)); --silver-dark: hsla(var(--silver-hsl), var(--dark)); @@ -491,19 +481,6 @@ Summary color: var(--yellow); } -.lime, -.lime-all > *, -.lime-on:hover, -.lime-on:focus, -*:hover > .lime-in, -*:focus > .lime-in, -.lime-one > *:hover, -.lime-one > *:focus, -.lime-many:hover > *, -.lime-many:focus > * { - color: var(--lime); -} - .green, .green-all > *, .green-on:hover, @@ -517,32 +494,6 @@ Summary color: var(--green); } -.aqua, -.aqua-all > *, -.aqua-on:hover, -.aqua-on:focus, -*:hover > .aqua-in, -*:focus > .aqua-in, -.aqua-one > *:hover, -.aqua-one > *:focus, -.aqua-many:hover > *, -.aqua-many:focus > * { - color: var(--aqua); -} - -.cyan, -.cyan-all > *, -.cyan-on:hover, -.cyan-on:focus, -*:hover > .cyan-in, -*:focus > .cyan-in, -.cyan-one > *:hover, -.cyan-one > *:focus, -.cyan-many:hover > *, -.cyan-many:focus > * { - color: var(--cyan); -} - .sky, .sky-all > *, .sky-on:hover, @@ -569,30 +520,17 @@ Summary color: var(--blue); } -.indigo, -.indigo-all > *, -.indigo-on:hover, -.indigo-on:focus, -*:hover > .indigo-in, -*:focus > .indigo-in, -.indigo-one > *:hover, -.indigo-one > *:focus, -.indigo-many:hover > *, -.indigo-many:focus > * { - color: var(--indigo); -} - -.magenta, -.magenta-all > *, -.magenta-on:hover, -.magenta-on:focus, -*:hover > .magenta-in, -*:focus > .magenta-in, -.magenta-one > *:hover, -.magenta-one > *:focus, -.magenta-many:hover > *, -.magenta-many:focus > * { - color: var(--magenta); +.violet, +.violet-all > *, +.violet-on:hover, +.violet-on:focus, +*:hover > .violet-in, +*:focus > .violet-in, +.violet-one > *:hover, +.violet-one > *:focus, +.violet-many:hover > *, +.violet-many:focus > * { + color: var(--violet); } .pink, @@ -621,19 +559,6 @@ Summary color: var(--black); } -.slate, -.slate-all > *, -.slate-on:hover, -.slate-on:focus, -*:hover > .slate-in, -*:focus > .slate-in, -.slate-one > *:hover, -.slate-one > *:focus, -.slate-many:hover > *, -.slate-many:focus > * { - color: var(--slate); -} - .gray, .gray-all > *, .gray-on:hover, @@ -791,45 +716,6 @@ Summary background-color: var(--yellow-light); } -.bg-lime, -.bg-lime-all > *, -.bg-lime-on:hover, -.bg-lime-on:focus, -*:hover > .bg-lime-in, -*:focus > .bg-lime-in, -.bg-lime-one > *:hover, -.bg-lime-one > *:focus, -.bg-lime-many:hover > *, -.bg-lime-many:focus > * { - background-color: var(--lime); -} - -.bg-lime-dark, -.bg-lime-dark-all > *, -.bg-lime-dark-on:hover, -.bg-lime-dark-on:focus, -*:hover > .bg-lime-dark-in, -*:focus > .bg-lime-dark-in, -.bg-lime-dark-one > *:hover, -.bg-lime-dark-one > *:focus, -.bg-lime-dark-many:hover > *, -.bg-lime-dark-many:focus > * { - background-color: var(--lime-dark); -} - -.bg-lime-light, -.bg-lime-light-all > *, -.bg-lime-light-on:hover, -.bg-lime-light-on:focus, -*:hover > .bg-lime-light-in, -*:focus > .bg-lime-light-in, -.bg-lime-light-one > *:hover, -.bg-lime-light-one > *:focus, -.bg-lime-light-many:hover > *, -.bg-lime-light-many:focus > * { - background-color: var(--lime-light); -} - .bg-green, .bg-green-all > *, .bg-green-on:hover, @@ -869,84 +755,6 @@ Summary background-color: var(--green-light); } -.bg-aqua, -.bg-aqua-all > *, -.bg-aqua-on:hover, -.bg-aqua-on:focus, -*:hover > .bg-aqua-in, -*:focus > .bg-aqua-in, -.bg-aqua-one > *:hover, -.bg-aqua-one > *:focus, -.bg-aqua-many:hover > *, -.bg-aqua-many:focus > * { - background-color: var(--aqua); -} - -.bg-aqua-dark, -.bg-aqua-dark-all > *, -.bg-aqua-dark-on:hover, -.bg-aqua-dark-on:focus, -*:hover > .bg-aqua-dark-in, -*:focus > .bg-aqua-dark-in, -.bg-aqua-dark-one > *:hover, -.bg-aqua-dark-one > *:focus, -.bg-aqua-dark-many:hover > *, -.bg-aqua-dark-many:focus > * { - background-color: var(--aqua-dark); -} - -.bg-aqua-light, -.bg-aqua-light-all > *, -.bg-aqua-light-on:hover, -.bg-aqua-light-on:focus, -*:hover > .bg-aqua-light-in, -*:focus > .bg-aqua-light-in, -.bg-aqua-light-one > *:hover, -.bg-aqua-light-one > *:focus, -.bg-aqua-light-many:hover > *, -.bg-aqua-light-many:focus > * { - background-color: var(--aqua-light); -} - -.bg-cyan, -.bg-cyan-all > *, -.bg-cyan-on:hover, -.bg-cyan-on:focus, -*:hover > .bg-cyan-in, -*:focus > .bg-cyan-in, -.bg-cyan-one > *:hover, -.bg-cyan-one > *:focus, -.bg-cyan-many:hover > *, -.bg-cyan-many:focus > * { - background-color: var(--cyan); -} - -.bg-cyan-dark, -.bg-cyan-dark-all > *, -.bg-cyan-dark-on:hover, -.bg-cyan-dark-on:focus, -*:hover > .bg-cyan-dark-in, -*:focus > .bg-cyan-dark-in, -.bg-cyan-dark-one > *:hover, -.bg-cyan-dark-one > *:focus, -.bg-cyan-dark-many:hover > *, -.bg-cyan-dark-many:focus > * { - background-color: var(--cyan-dark); -} - -.bg-cyan-light, -.bg-cyan-light-all > *, -.bg-cyan-light-on:hover, -.bg-cyan-light-on:focus, -*:hover > .bg-cyan-light-in, -*:focus > .bg-cyan-light-in, -.bg-cyan-light-one > *:hover, -.bg-cyan-light-one > *:focus, -.bg-cyan-light-many:hover > *, -.bg-cyan-light-many:focus > * { - background-color: var(--cyan-light); -} - .bg-sky, .bg-sky-all > *, .bg-sky-on:hover, @@ -1025,82 +833,43 @@ Summary background-color: var(--blue-light); } -.bg-indigo, -.bg-indigo-all > *, -.bg-indigo-on:hover, -.bg-indigo-on:focus, -*:hover > .bg-indigo-in, -*:focus > .bg-indigo-in, -.bg-indigo-one > *:hover, -.bg-indigo-one > *:focus, -.bg-indigo-many:hover > *, -.bg-indigo-many:focus > * { - background-color: var(--indigo); -} - -.bg-indigo-dark, -.bg-indigo-dark-all > *, -.bg-indigo-dark-on:hover, -.bg-indigo-dark-on:focus, -*:hover > .bg-indigo-dark-in, -*:focus > .bg-indigo-dark-in, -.bg-indigo-dark-one > *:hover, -.bg-indigo-dark-one > *:focus, -.bg-indigo-dark-many:hover > *, -.bg-indigo-dark-many:focus > * { - background-color: var(--indigo-dark); -} - -.bg-indigo-light, -.bg-indigo-light-all > *, -.bg-indigo-light-on:hover, -.bg-indigo-light-on:focus, -*:hover > .bg-indigo-light-in, -*:focus > .bg-indigo-light-in, -.bg-indigo-light-one > *:hover, -.bg-indigo-light-one > *:focus, -.bg-indigo-light-many:hover > *, -.bg-indigo-light-many:focus > * { - background-color: var(--indigo-light); -} - -.bg-magenta, -.bg-magenta-all > *, -.bg-magenta-on:hover, -.bg-magenta-on:focus, -*:hover > .bg-magenta-in, -*:focus > .bg-magenta-in, -.bg-magenta-one > *:hover, -.bg-magenta-one > *:focus, -.bg-magenta-many:hover > *, -.bg-magenta-many:focus > * { - background-color: var(--magenta); -} - -.bg-magenta-dark, -.bg-magenta-dark-all > *, -.bg-magenta-dark-on:hover, -.bg-magenta-dark-on:focus, -*:hover > .bg-magenta-dark-in, -*:focus > .bg-magenta-dark-in, -.bg-magenta-dark-one > *:hover, -.bg-magenta-dark-one > *:focus, -.bg-magenta-dark-many:hover > *, -.bg-magenta-dark-many:focus > * { - background-color: var(--magenta-dark); -} - -.bg-magenta-light, -.bg-magenta-light-all > *, -.bg-magenta-light-on:hover, -.bg-magenta-light-on:focus, -*:hover > .bg-magenta-light-in, -*:focus > .bg-magenta-light-in, -.bg-magenta-light-one > *:hover, -.bg-magenta-light-one > *:focus, -.bg-magenta-light-many:hover > *, -.bg-magenta-light-many:focus > * { - background-color: var(--magenta-light); +.bg-violet, +.bg-violet-all > *, +.bg-violet-on:hover, +.bg-violet-on:focus, +*:hover > .bg-violet-in, +*:focus > .bg-violet-in, +.bg-violet-one > *:hover, +.bg-violet-one > *:focus, +.bg-violet-many:hover > *, +.bg-violet-many:focus > * { + background-color: var(--violet); +} + +.bg-violet-dark, +.bg-violet-dark-all > *, +.bg-violet-dark-on:hover, +.bg-violet-dark-on:focus, +*:hover > .bg-violet-dark-in, +*:focus > .bg-violet-dark-in, +.bg-violet-dark-one > *:hover, +.bg-violet-dark-one > *:focus, +.bg-violet-dark-many:hover > *, +.bg-violet-dark-many:focus > * { + background-color: var(--violet-dark); +} + +.bg-violet-light, +.bg-violet-light-all > *, +.bg-violet-light-on:hover, +.bg-violet-light-on:focus, +*:hover > .bg-violet-light-in, +*:focus > .bg-violet-light-in, +.bg-violet-light-one > *:hover, +.bg-violet-light-one > *:focus, +.bg-violet-light-many:hover > *, +.bg-violet-light-many:focus > * { + background-color: var(--violet-light); } .bg-pink, @@ -1181,45 +950,6 @@ Summary background-color: var(--black-light); } -.bg-slate, -.bg-slate-all > *, -.bg-slate-on:hover, -.bg-slate-on:focus, -*:hover > .bg-slate-in, -*:focus > .bg-slate-in, -.bg-slate-one > *:hover, -.bg-slate-one > *:focus, -.bg-slate-many:hover > *, -.bg-slate-many:focus > * { - background-color: var(--slate); -} - -.bg-slate-dark, -.bg-slate-dark-all > *, -.bg-slate-dark-on:hover, -.bg-slate-dark-on:focus, -*:hover > .bg-slate-dark-in, -*:focus > .bg-slate-dark-in, -.bg-slate-dark-one > *:hover, -.bg-slate-dark-one > *:focus, -.bg-slate-dark-many:hover > *, -.bg-slate-dark-many:focus > * { - background-color: var(--slate-dark); -} - -.bg-slate-light, -.bg-slate-light-all > *, -.bg-slate-light-on:hover, -.bg-slate-light-on:focus, -*:hover > .bg-slate-light-in, -*:focus > .bg-slate-light-in, -.bg-slate-light-one > *:hover, -.bg-slate-light-one > *:focus, -.bg-slate-light-many:hover > *, -.bg-slate-light-many:focus > * { - background-color: var(--slate-light); -} - .bg-gray, .bg-gray-all > *, .bg-gray-on:hover, @@ -1343,7 +1073,7 @@ Summary --serif: Times, serif; --monospace: Courier, monospace; --cursive: Mistral, cursive; - --fantasy: Blackletter, fantasy; + --fantasy: Impact, fantasy; } .sans-serif, @@ -1412,94 +1142,99 @@ Summary } /********** FONT **********/ -.font-bold, -.font-bold-all > *, -.font-bold-on:hover, -.font-bold-on:focus, -*:hover > .font-bold-in, -*:focus > .font-bold-in, -.font-bold-one > *:hover, -.font-bold-one > *:focus, -.font-bold-many:hover > *, -.font-bold-many:focus > * { +.bold, +.bold-all > *, +.bold-on:hover, +.bold-on:focus, +*:hover > .bold-in, +*:focus > .bold-in, +.bold-one > *:hover, +.bold-one > *:focus, +.bold-many:hover > *, +.bold-many:focus > * { font-weight: bold; } -.font-italic, -.font-italic-all > *, -.font-italic-on:hover, -.font-italic-on:focus, -*:hover > .font-italic-in, -*:focus > .font-italic-in, -.font-italic-one > *:hover, -.font-italic-one > *:focus, -.font-italic-many:hover > *, -.font-italic-many:focus > * { +.italic, +.italic-all > *, +.italic-on:hover, +.italic-on:focus, +*:hover > .italic-in, +*:focus > .italic-in, +.italic-one > *:hover, +.italic-one > *:focus, +.italic-many:hover > *, +.italic-many:focus > * { font-style: italic; } /********** TEXT ALIGN **********/ -.align-center, -.align-center-all > * { +.center, +.center-all > * { text-align: center; } -.align-justify, -.align-justify-all > * { +.justify, +.justify-all > * { text-align: justify; } -.align-right, -.align-right-all > * { - text-align: right; +.left, +.left-all > * { + text-align: left; } -.align-left, -.align-left-all > * { - text-align: left; +.right, +.right-all > * { + text-align: right; } /********** TEXT TRANSFORM **********/ -.trans-cap, -.trans-cap-all > *, -.trans-cap-on:hover, -.trans-cap-on:focus, -*:hover > .trans-cap-in, -*:focus > .trans-cap-in, -.trans-cap-one > *:hover, -.trans-cap-one > *:focus, -.trans-cap-many:hover > *, -.trans-cap-many:focus > * { +.cap, +.cap-all > *, +.cap-on:hover, +.cap-on:focus, +*:hover > .cap-in, +*:focus > .cap-in, +.cap-one > *:hover, +.cap-one > *:focus, +.cap-many:hover > *, +.cap-many:focus > * { text-transform: capitalize; } -.trans-up, -.trans-up-all > *, -.trans-up-on:hover, -.trans-up-on:focus, -*:hover > .trans-up-in, -*:focus > .trans-up-in, -.trans-up-one > *:hover, -.trans-up-one > *:focus, -.trans-up-many:hover > *, -.trans-up-many:focus > * { +.up, +.up-all > *, +.up-on:hover, +.up-on:focus, +*:hover > .up-in, +*:focus > .up-in, +.up-one > *:hover, +.up-one > *:focus, +.up-many:hover > *, +.up-many:focus > * { text-transform: uppercase; } -.trans-low, -.trans-low-all > *, -.trans-low-on:hover, -.trans-low-on:focus, -*:hover > .trans-low-in, -*:focus > .trans-low-in, -.trans-low-one > *:hover, -.trans-low-one > *:focus, -.trans-low-many:hover > *, -.trans-low-many:focus > * { +.low, +.low-all > *, +.low-on:hover, +.low-on:focus, +*:hover > .low-in, +*:focus > .low-in, +.low-one > *:hover, +.low-one > *:focus, +.low-many:hover > *, +.low-many:focus > * { text-transform: lowercase; } /********** TEXT DECORATION LINE **********/ +[class*=deco] { + -webkit-text-decoration-line: underline; + text-decoration-line: underline; +} + .deco-none, .deco-none-all > *, .deco-none-on:hover, @@ -1514,20 +1249,6 @@ Summary text-decoration-line: none; } -.deco-under, -.deco-under-all > *, -.deco-under-on:hover, -.deco-under-on:focus, -*:hover > .deco-under-in, -*:focus > .deco-under-in, -.deco-under-one > *:hover, -.deco-under-one > *:focus, -.deco-under-many:hover > *, -.deco-under-many:focus > * { - -webkit-text-decoration-line: underline; - text-decoration-line: underline; -} - .deco-over, .deco-over-all > *, .deco-over-on:hover, @@ -1599,20 +1320,6 @@ Summary text-decoration-style: double; } -.deco-solid, -.deco-solid-all > *, -.deco-solid-on:hover, -.deco-solid-on:focus, -*:hover > .deco-solid-in, -*:focus > .deco-solid-in, -.deco-solid-one > *:hover, -.deco-solid-one > *:focus, -.deco-solid-many:hover > *, -.deco-solid-many:focus > * { - -webkit-text-decoration-style: solid; - text-decoration-style: solid; -} - .deco-wavy, .deco-wavy-all > *, .deco-wavy-on:hover, @@ -1670,20 +1377,6 @@ Summary text-decoration-color: var(--yellow); } -.deco-lime, -.deco-lime-all > *, -.deco-lime-on:hover, -.deco-lime-on:focus, -*:hover > .deco-lime-in, -*:focus > .deco-lime-in, -.deco-lime-one > *:hover, -.deco-lime-one > *:focus, -.deco-lime-many:hover > *, -.deco-lime-many:focus > * { - -webkit-text-decoration-color: var(--lime); - text-decoration-color: var(--lime); -} - .deco-green, .deco-green-all > *, .deco-green-on:hover, @@ -1698,34 +1391,6 @@ Summary text-decoration-color: var(--green); } -.deco-aqua, -.deco-aqua-all > *, -.deco-aqua-on:hover, -.deco-aqua-on:focus, -*:hover > .deco-aqua-in, -*:focus > .deco-aqua-in, -.deco-aqua-one > *:hover, -.deco-aqua-one > *:focus, -.deco-aqua-many:hover > *, -.deco-aqua-many:focus > * { - -webkit-text-decoration-color: var(--aqua); - text-decoration-color: var(--aqua); -} - -.deco-cyan, -.deco-cyan-all > *, -.deco-cyan-on:hover, -.deco-cyan-on:focus, -*:hover > .deco-cyan-in, -*:focus > .deco-cyan-in, -.deco-cyan-one > *:hover, -.deco-cyan-one > *:focus, -.deco-cyan-many:hover > *, -.deco-cyan-many:focus > * { - -webkit-text-decoration-color: var(--cyan); - text-decoration-color: var(--cyan); -} - .deco-sky, .deco-sky-all > *, .deco-sky-on:hover, @@ -1754,32 +1419,18 @@ Summary text-decoration-color: var(--blue); } -.deco-indigo, -.deco-indigo-all > *, -.deco-indigo-on:hover, -.deco-indigo-on:focus, -*:hover > .deco-indigo-in, -*:focus > .deco-indigo-in, -.deco-indigo-one > *:hover, -.deco-indigo-one > *:focus, -.deco-indigo-many:hover > *, -.deco-indigo-many:focus > * { - -webkit-text-decoration-color: var(--indigo); - text-decoration-color: var(--indigo); -} - -.deco-magenta, -.deco-magenta-all > *, -.deco-magenta-on:hover, -.deco-magenta-on:focus, -*:hover > .deco-magenta-in, -*:focus > .deco-magenta-in, -.deco-magenta-one > *:hover, -.deco-magenta-one > *:focus, -.deco-magenta-many:hover > *, -.deco-magenta-many:focus > * { - -webkit-text-decoration-color: var(--magenta); - text-decoration-color: var(--magenta); +.deco-violet, +.deco-violet-all > *, +.deco-violet-on:hover, +.deco-violet-on:focus, +*:hover > .deco-violet-in, +*:focus > .deco-violet-in, +.deco-violet-one > *:hover, +.deco-violet-one > *:focus, +.deco-violet-many:hover > *, +.deco-violet-many:focus > * { + -webkit-text-decoration-color: var(--violet); + text-decoration-color: var(--violet); } .deco-pink, @@ -1796,76 +1447,6 @@ Summary text-decoration-color: var(--pink); } -.deco-black, -.deco-black-all > *, -.deco-black-on:hover, -.deco-black-on:focus, -*:hover > .deco-black-in, -*:focus > .deco-black-in, -.deco-black-one > *:hover, -.deco-black-one > *:focus, -.deco-black-many:hover > *, -.deco-black-many:focus > * { - -webkit-text-decoration-color: var(--black); - text-decoration-color: var(--black); -} - -.deco-slate, -.deco-slate-all > *, -.deco-slate-on:hover, -.deco-slate-on:focus, -*:hover > .deco-slate-in, -*:focus > .deco-slate-in, -.deco-slate-one > *:hover, -.deco-slate-one > *:focus, -.deco-slate-many:hover > *, -.deco-slate-many:focus > * { - -webkit-text-decoration-color: var(--slate); - text-decoration-color: var(--slate); -} - -.deco-gray, -.deco-gray-all > *, -.deco-gray-on:hover, -.deco-gray-on:focus, -*:hover > .deco-gray-in, -*:focus > .deco-gray-in, -.deco-gray-one > *:hover, -.deco-gray-one > *:focus, -.deco-gray-many:hover > *, -.deco-gray-many:focus > * { - -webkit-text-decoration-color: var(--gray); - text-decoration-color: var(--gray); -} - -.deco-silver, -.deco-silver-all > *, -.deco-silver-on:hover, -.deco-silver-on:focus, -*:hover > .deco-silver-in, -*:focus > .deco-silver-in, -.deco-silver-one > *:hover, -.deco-silver-one > *:focus, -.deco-silver-many:hover > *, -.deco-silver-many:focus > * { - -webkit-text-decoration-color: var(--silver); - text-decoration-color: var(--silver); -} - -.deco-white, -.deco-white-all > *, -.deco-white-on:hover, -.deco-white-on:focus, -*:hover > .deco-white-in, -*:focus > .deco-white-in, -.deco-white-one > *:hover, -.deco-white-one > *:focus, -.deco-white-many:hover > *, -.deco-white-many:focus > * { - -webkit-text-decoration-color: var(--white); - text-decoration-color: var(--white); -} - /********** TAGS **********/ * { --target-margins: 7rem; @@ -2018,9 +1599,7 @@ button, cursor: var(--button-cursor); } -/********** DISPLAY **********/ -/*****************************/ -/********** FLEX CONTAINER **********/ +/********** FLEX **********/ [class*=flex] { display: flex; } @@ -2102,14 +1681,12 @@ button, [class*=grid] { --grid-max-width: 100vw; --grid-margin: auto; -} - -[class*=grid] { display: grid; max-width: var(--grid-max-width); margin: var(--grid-margin); } +/********** GRID TEMPLATE **********/ [class*=grid-][class*="-2tn"] { grid-template: auto/repeat(2, auto); } @@ -2986,14 +2563,9 @@ button, place-self: flex-end; } } -/********** BOXES **********/ -/***************************/ /********** CONTAINER **********/ [class*=container] { --container-max-width: 100%; -} - -[class*=container] { margin: auto; max-width: var(--container-max-width); } @@ -3248,10 +2820,10 @@ button, --border-width-sm: 1px; --border-width-md: 2px; --border-width-lg: 5px; - --border-radius-square: unset; - --border-radius-curve: 5px; - --border-radius-round: 10px; + --border-radius-curve: 20px; + --border-radius-round: 50px; --border-radius-circle: 50%; + border-style: solid; } /********** BORDER STYLE **********/ @@ -3281,19 +2853,6 @@ button, border-style: dotted; } -.bord-solid, -.bord-solid-all > *, -.bord-solid-on:hover, -.bord-solid-on:focus, -*:hover > .bord-solid-in, -*:focus > .bord-solid-in, -.bord-solid-one > *:hover, -.bord-solid-one > *:focus, -.bord-solid-many:hover > *, -.bord-solid-many:focus > * { - border-style: solid; -} - .bord-double, .bord-double-all > *, .bord-double-on:hover, @@ -3439,19 +2998,6 @@ button, border-color: var(--yellow); } -.bord-lime, -.bord-lime-all > *, -.bord-lime-on:hover, -.bord-lime-on:focus, -*:hover > .bord-lime-in, -*:focus > .bord-lime-in, -.bord-lime-one > *:hover, -.bord-lime-one > *:focus, -.bord-lime-many:hover > *, -.bord-lime-many:focus > * { - border-color: var(--lime); -} - .bord-green, .bord-green-all > *, .bord-green-on:hover, @@ -3465,32 +3011,6 @@ button, border-color: var(--green); } -.bord-aqua, -.bord-aqua-all > *, -.bord-aqua-on:hover, -.bord-aqua-on:focus, -*:hover > .bord-aqua-in, -*:focus > .bord-aqua-in, -.bord-aqua-one > *:hover, -.bord-aqua-one > *:focus, -.bord-aqua-many:hover > *, -.bord-aqua-many:focus > * { - border-color: var(--aqua); -} - -.bord-cyan, -.bord-cyan-all > *, -.bord-cyan-on:hover, -.bord-cyan-on:focus, -*:hover > .bord-cyan-in, -*:focus > .bord-cyan-in, -.bord-cyan-one > *:hover, -.bord-cyan-one > *:focus, -.bord-cyan-many:hover > *, -.bord-cyan-many:focus > * { - border-color: var(--cyan); -} - .bord-sky, .bord-sky-all > *, .bord-sky-on:hover, @@ -3517,30 +3037,17 @@ button, border-color: var(--blue); } -.bord-indigo, -.bord-indigo-all > *, -.bord-indigo-on:hover, -.bord-indigo-on:focus, -*:hover > .bord-indigo-in, -*:focus > .bord-indigo-in, -.bord-indigo-one > *:hover, -.bord-indigo-one > *:focus, -.bord-indigo-many:hover > *, -.bord-indigo-many:focus > * { - border-color: var(--indigo); -} - -.bord-magenta, -.bord-magenta-all > *, -.bord-magenta-on:hover, -.bord-magenta-on:focus, -*:hover > .bord-magenta-in, -*:focus > .bord-magenta-in, -.bord-magenta-one > *:hover, -.bord-magenta-one > *:focus, -.bord-magenta-many:hover > *, -.bord-magenta-many:focus > * { - border-color: var(--magenta); +.bord-violet, +.bord-violet-all > *, +.bord-violet-on:hover, +.bord-violet-on:focus, +*:hover > .bord-violet-in, +*:focus > .bord-violet-in, +.bord-violet-one > *:hover, +.bord-violet-one > *:focus, +.bord-violet-many:hover > *, +.bord-violet-many:focus > * { + border-color: var(--violet); } .bord-pink, @@ -3556,85 +3063,7 @@ button, border-color: var(--pink); } -.bord-black, -.bord-black-all > *, -.bord-black-on:hover, -.bord-black-on:focus, -*:hover > .bord-black-in, -*:focus > .bord-black-in, -.bord-black-one > *:hover, -.bord-black-one > *:focus, -.bord-black-many:hover > *, -.bord-black-many:focus > * { - border-color: var(--black); -} - -.bord-slate, -.bord-slate-all > *, -.bord-slate-on:hover, -.bord-slate-on:focus, -*:hover > .bord-slate-in, -*:focus > .bord-slate-in, -.bord-slate-one > *:hover, -.bord-slate-one > *:focus, -.bord-slate-many:hover > *, -.bord-slate-many:focus > * { - border-color: var(--slate); -} - -.bord-gray, -.bord-gray-all > *, -.bord-gray-on:hover, -.bord-gray-on:focus, -*:hover > .bord-gray-in, -*:focus > .bord-gray-in, -.bord-gray-one > *:hover, -.bord-gray-one > *:focus, -.bord-gray-many:hover > *, -.bord-gray-many:focus > * { - border-color: var(--gray); -} - -.bord-silver, -.bord-silver-all > *, -.bord-silver-on:hover, -.bord-silver-on:focus, -*:hover > .bord-silver-in, -*:focus > .bord-silver-in, -.bord-silver-one > *:hover, -.bord-silver-one > *:focus, -.bord-silver-many:hover > *, -.bord-silver-many:focus > * { - border-color: var(--silver); -} - -.bord-white, -.bord-white-all > *, -.bord-white-on:hover, -.bord-white-on:focus, -*:hover > .bord-white-in, -*:focus > .bord-white-in, -.bord-white-one > *:hover, -.bord-white-one > *:focus, -.bord-white-many:hover > *, -.bord-white-many:focus > * { - border-color: var(--white); -} - /********** BORDER RADIUS **********/ -.bord-square, -.bord-square-all > *, -.bord-square-on:hover, -.bord-square-on:focus, -*:hover > .bord-square-in, -*:focus > .bord-square-in, -.bord-square-one > *:hover, -.bord-square-one > *:focus, -.bord-square-many:hover > *, -.bord-square-many:focus > * { - border-radius: unset; -} - .bord-curve, .bord-curve-all > *, .bord-curve-on:hover, @@ -3645,7 +3074,7 @@ button, .bord-curve-one > *:focus, .bord-curve-many:hover > *, .bord-curve-many:focus > * { - border-radius: 5px; + border-radius: 20px; } .bord-round, @@ -3658,7 +3087,7 @@ button, .bord-round-one > *:focus, .bord-round-many:hover > *, .bord-round-many:focus > * { - border-radius: 10px; + border-radius: 50px; } .bord-circle, @@ -3796,9 +3225,9 @@ button, /********** HEIGHT **********/ [class*=height-] { - --height-sm: 10vh; - --height-md: 20vh; - --height-lg: 50vh; + --height-sm: 20%; + --height-md: 50%; + --height-lg: 100%; } .height-sm, @@ -3818,9 +3247,9 @@ button, /********** MAX HEIGHT **********/ [class*=max-h-] { - --max-height-sm: 10vh; - --max-height-md: 20vh; - --max-height-lg: 50vh; + --max-height-sm: 20%; + --max-height-md: 50%; + --max-height-lg: 100%; } .max-h-sm, @@ -3840,9 +3269,9 @@ button, /********** MIN HEIGHT **********/ [class*=min-h-] { - --min-height-sm: 10vh; - --min-height-md: 20vh; - --min-height-lg: 50vh; + --min-height-sm: 20%; + --min-height-md: 50%; + --min-height-lg: 100%; } .min-h-sm, @@ -3862,9 +3291,9 @@ button, /********** WIDTH **********/ [class*=width-] { - --width-sm: 10vw; - --width-md: 20vw; - --width-lg: 50vw; + --width-sm: 20%; + --width-md: 50%; + --width-lg: 100%; } .width-sm, @@ -3884,9 +3313,9 @@ button, /********** MAX WIDTH **********/ [class*=max-w-] { - --max-width-sm: 10vw; - --max-width-md: 20vw; - --max-width-lg: 50vw; + --max-width-sm: 20%; + --max-width-md: 50%; + --max-width-lg: 100%; } .max-w-sm, @@ -3906,9 +3335,9 @@ button, /********** MIN WIDTH **********/ [class*=min-w-] { - --min-width-sm: 10vw; - --min-width-md: 20vw; - --min-width-lg: 50vw; + --min-width-sm: 20%; + --min-width-md: 50%; + --min-width-lg: 100%; } .min-w-sm, @@ -4195,7 +3624,6 @@ button, transform: var(--twistL); } } -/********** ANIMATIONS **********/ /********** ANIMATION **********/ [class*=anima-] { --animation-duration: 2s; @@ -4213,14 +3641,11 @@ button, --animation-iteration-count-loop: infinite; --animation-delay-min: 500ms; --animation-delay-max: 1s; -} - -/********** ANIMATION **********/ -[class*=anima] { -webkit-animation-duration: var(--animation-duration); animation-duration: var(--animation-duration); } +/********** ANIMATION NAME **********/ .anima-slideT, .anima-slideT-all > *, .anima-slideT-on:hover, @@ -4557,6 +3982,7 @@ button, animation-name: twistL; } +/********** ANIMATION OPTIONS **********/ .anima-sm { -webkit-animation-duration: var(--animation-duration-sm); animation-duration: var(--animation-duration-sm); @@ -4641,4 +4067,4 @@ button, } /* Author: Philippe Beck - Updated: 3rd Dec 2022 @ 8:54:02 PM */ \ No newline at end of file + Updated: 7th Dec 2022 @ 9:12:48 PM */ \ No newline at end of file diff --git a/dist/animadio.min.css b/dist/animadio.min.css index afc0884..9f8b30d 100644 --- a/dist/animadio.min.css +++ b/dist/animadio.min.css @@ -1 +1 @@ -/*! animadio v5.3.0 | https://animadio.org | MIT License *//*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}:root{--red-hsl:0,100%,50%;--orange-hsl:30,100%,50%;--yellow-hsl:60,100%,50%;--lime-hsl:90,100%,50%;--green-hsl:120,100%,50%;--aqua-hsl:150,100%,50%;--cyan-hsl:180,100%,50%;--sky-hsl:210,100%,50%;--blue-hsl:240,100%,50%;--indigo-hsl:270,100%,50%;--magenta-hsl:300,100%,50%;--pink-hsl:330,100%,50%;--black-hsl:0,0%,0%;--slate-hsl:0,0%,25%;--gray-hsl:0,0%,50%;--silver-hsl:0,0%,75%;--white-hsl:0,0%,100%;--red:hsl(var(--red-hsl));--orange:hsl(var(--orange-hsl));--yellow:hsl(var(--yellow-hsl));--lime:hsl(var(--lime-hsl));--green:hsl(var(--green-hsl));--aqua:hsl(var(--aqua-hsl));--cyan:hsl(var(--cyan-hsl));--sky:hsl(var(--sky-hsl));--blue:hsl(var(--blue-hsl));--indigo:hsl(var(--indigo-hsl));--magenta:hsl(var(--magenta-hsl));--pink:hsl(var(--pink-hsl));--black:hsl(var(--black-hsl));--slate:hsl(var(--slate-hsl));--gray:hsl(var(--gray-hsl));--silver:hsl(var(--silver-hsl));--white:hsl(var(--white-hsl));--dark:0.8;--light:0.2;--red-dark:hsla(var(--red-hsl), var(--dark));--red-light:hsla(var(--red-hsl), var(--light));--orange-dark:hsla(var(--orange-hsl), var(--dark));--orange-light:hsla(var(--orange-hsl), var(--light));--yellow-dark:hsla(var(--yellow-hsl), var(--dark));--yellow-light:hsla(var(--yellow-hsl), var(--light));--lime-dark:hsla(var(--lime-hsl), var(--dark));--lime-light:hsla(var(--lime-hsl), var(--light));--green-dark:hsla(var(--green-hsl), var(--dark));--green-light:hsla(var(--green-hsl), var(--light));--aqua-dark:hsla(var(--aqua-hsl), var(--dark));--aqua-light:hsla(var(--aqua-hsl), var(--light));--cyan-dark:hsla(var(--cyan-hsl), var(--dark));--cyan-light:hsla(var(--cyan-hsl), var(--light));--sky-dark:hsla(var(--sky-hsl), var(--dark));--sky-light:hsla(var(--sky-hsl), var(--light));--blue-dark:hsla(var(--blue-hsl), var(--dark));--blue-light:hsla(var(--blue-hsl), var(--light));--indigo-dark:hsla(var(--indigo-hsl), var(--dark));--indigo-light:hsla(var(--indigo-hsl), var(--light));--magenta-dark:hsla(var(--magenta-hsl), var(--dark));--magenta-light:hsla(var(--magenta-hsl), var(--light));--pink-dark:hsla(var(--pink-hsl), var(--dark));--pink-light:hsla(var(--pink-hsl), var(--light));--black-dark:hsla(var(--black-hsl), var(--dark));--black-light:hsla(var(--black-hsl), var(--light));--slate-dark:hsla(var(--slate-hsl), var(--dark));--slate-light:hsla(var(--slate-hsl), var(--light));--gray-dark:hsla(var(--gray-hsl), var(--dark));--gray-light:hsla(var(--gray-hsl), var(--light));--silver-dark:hsla(var(--silver-hsl), var(--dark));--silver-light:hsla(var(--silver-hsl), var(--light));--white-dark:hsla(var(--white-hsl), var(--dark));--white-light:hsla(var(--white-hsl), var(--light))}.red,.red-all>*,.red-many:focus>*,.red-many:hover>*,.red-on:focus,.red-on:hover,.red-one>:focus,.red-one>:hover,:focus>.red-in,:hover>.red-in{color:var(--red)}.orange,.orange-all>*,.orange-many:focus>*,.orange-many:hover>*,.orange-on:focus,.orange-on:hover,.orange-one>:focus,.orange-one>:hover,:focus>.orange-in,:hover>.orange-in{color:var(--orange)}.yellow,.yellow-all>*,.yellow-many:focus>*,.yellow-many:hover>*,.yellow-on:focus,.yellow-on:hover,.yellow-one>:focus,.yellow-one>:hover,:focus>.yellow-in,:hover>.yellow-in{color:var(--yellow)}.lime,.lime-all>*,.lime-many:focus>*,.lime-many:hover>*,.lime-on:focus,.lime-on:hover,.lime-one>:focus,.lime-one>:hover,:focus>.lime-in,:hover>.lime-in{color:var(--lime)}.green,.green-all>*,.green-many:focus>*,.green-many:hover>*,.green-on:focus,.green-on:hover,.green-one>:focus,.green-one>:hover,:focus>.green-in,:hover>.green-in{color:var(--green)}.aqua,.aqua-all>*,.aqua-many:focus>*,.aqua-many:hover>*,.aqua-on:focus,.aqua-on:hover,.aqua-one>:focus,.aqua-one>:hover,:focus>.aqua-in,:hover>.aqua-in{color:var(--aqua)}.cyan,.cyan-all>*,.cyan-many:focus>*,.cyan-many:hover>*,.cyan-on:focus,.cyan-on:hover,.cyan-one>:focus,.cyan-one>:hover,:focus>.cyan-in,:hover>.cyan-in{color:var(--cyan)}.sky,.sky-all>*,.sky-many:focus>*,.sky-many:hover>*,.sky-on:focus,.sky-on:hover,.sky-one>:focus,.sky-one>:hover,:focus>.sky-in,:hover>.sky-in{color:var(--sky)}.blue,.blue-all>*,.blue-many:focus>*,.blue-many:hover>*,.blue-on:focus,.blue-on:hover,.blue-one>:focus,.blue-one>:hover,:focus>.blue-in,:hover>.blue-in{color:var(--blue)}.indigo,.indigo-all>*,.indigo-many:focus>*,.indigo-many:hover>*,.indigo-on:focus,.indigo-on:hover,.indigo-one>:focus,.indigo-one>:hover,:focus>.indigo-in,:hover>.indigo-in{color:var(--indigo)}.magenta,.magenta-all>*,.magenta-many:focus>*,.magenta-many:hover>*,.magenta-on:focus,.magenta-on:hover,.magenta-one>:focus,.magenta-one>:hover,:focus>.magenta-in,:hover>.magenta-in{color:var(--magenta)}.pink,.pink-all>*,.pink-many:focus>*,.pink-many:hover>*,.pink-on:focus,.pink-on:hover,.pink-one>:focus,.pink-one>:hover,:focus>.pink-in,:hover>.pink-in{color:var(--pink)}.black,.black-all>*,.black-many:focus>*,.black-many:hover>*,.black-on:focus,.black-on:hover,.black-one>:focus,.black-one>:hover,:focus>.black-in,:hover>.black-in{color:var(--black)}.slate,.slate-all>*,.slate-many:focus>*,.slate-many:hover>*,.slate-on:focus,.slate-on:hover,.slate-one>:focus,.slate-one>:hover,:focus>.slate-in,:hover>.slate-in{color:var(--slate)}.gray,.gray-all>*,.gray-many:focus>*,.gray-many:hover>*,.gray-on:focus,.gray-on:hover,.gray-one>:focus,.gray-one>:hover,:focus>.gray-in,:hover>.gray-in{color:var(--gray)}.silver,.silver-all>*,.silver-many:focus>*,.silver-many:hover>*,.silver-on:focus,.silver-on:hover,.silver-one>:focus,.silver-one>:hover,:focus>.silver-in,:hover>.silver-in{color:var(--silver)}.white,.white-all>*,.white-many:focus>*,.white-many:hover>*,.white-on:focus,.white-on:hover,.white-one>:focus,.white-one>:hover,:focus>.white-in,:hover>.white-in{color:var(--white)}.bg-red,.bg-red-all>*,.bg-red-many:focus>*,.bg-red-many:hover>*,.bg-red-on:focus,.bg-red-on:hover,.bg-red-one>:focus,.bg-red-one>:hover,:focus>.bg-red-in,:hover>.bg-red-in{background-color:var(--red)}.bg-red-dark,.bg-red-dark-all>*,.bg-red-dark-many:focus>*,.bg-red-dark-many:hover>*,.bg-red-dark-on:focus,.bg-red-dark-on:hover,.bg-red-dark-one>:focus,.bg-red-dark-one>:hover,:focus>.bg-red-dark-in,:hover>.bg-red-dark-in{background-color:var(--red-dark)}.bg-red-light,.bg-red-light-all>*,.bg-red-light-many:focus>*,.bg-red-light-many:hover>*,.bg-red-light-on:focus,.bg-red-light-on:hover,.bg-red-light-one>:focus,.bg-red-light-one>:hover,:focus>.bg-red-light-in,:hover>.bg-red-light-in{background-color:var(--red-light)}.bg-orange,.bg-orange-all>*,.bg-orange-many:focus>*,.bg-orange-many:hover>*,.bg-orange-on:focus,.bg-orange-on:hover,.bg-orange-one>:focus,.bg-orange-one>:hover,:focus>.bg-orange-in,:hover>.bg-orange-in{background-color:var(--orange)}.bg-orange-dark,.bg-orange-dark-all>*,.bg-orange-dark-many:focus>*,.bg-orange-dark-many:hover>*,.bg-orange-dark-on:focus,.bg-orange-dark-on:hover,.bg-orange-dark-one>:focus,.bg-orange-dark-one>:hover,:focus>.bg-orange-dark-in,:hover>.bg-orange-dark-in{background-color:var(--orange-dark)}.bg-orange-light,.bg-orange-light-all>*,.bg-orange-light-many:focus>*,.bg-orange-light-many:hover>*,.bg-orange-light-on:focus,.bg-orange-light-on:hover,.bg-orange-light-one>:focus,.bg-orange-light-one>:hover,:focus>.bg-orange-light-in,:hover>.bg-orange-light-in{background-color:var(--orange-light)}.bg-yellow,.bg-yellow-all>*,.bg-yellow-many:focus>*,.bg-yellow-many:hover>*,.bg-yellow-on:focus,.bg-yellow-on:hover,.bg-yellow-one>:focus,.bg-yellow-one>:hover,:focus>.bg-yellow-in,:hover>.bg-yellow-in{background-color:var(--yellow)}.bg-yellow-dark,.bg-yellow-dark-all>*,.bg-yellow-dark-many:focus>*,.bg-yellow-dark-many:hover>*,.bg-yellow-dark-on:focus,.bg-yellow-dark-on:hover,.bg-yellow-dark-one>:focus,.bg-yellow-dark-one>:hover,:focus>.bg-yellow-dark-in,:hover>.bg-yellow-dark-in{background-color:var(--yellow-dark)}.bg-yellow-light,.bg-yellow-light-all>*,.bg-yellow-light-many:focus>*,.bg-yellow-light-many:hover>*,.bg-yellow-light-on:focus,.bg-yellow-light-on:hover,.bg-yellow-light-one>:focus,.bg-yellow-light-one>:hover,:focus>.bg-yellow-light-in,:hover>.bg-yellow-light-in{background-color:var(--yellow-light)}.bg-lime,.bg-lime-all>*,.bg-lime-many:focus>*,.bg-lime-many:hover>*,.bg-lime-on:focus,.bg-lime-on:hover,.bg-lime-one>:focus,.bg-lime-one>:hover,:focus>.bg-lime-in,:hover>.bg-lime-in{background-color:var(--lime)}.bg-lime-dark,.bg-lime-dark-all>*,.bg-lime-dark-many:focus>*,.bg-lime-dark-many:hover>*,.bg-lime-dark-on:focus,.bg-lime-dark-on:hover,.bg-lime-dark-one>:focus,.bg-lime-dark-one>:hover,:focus>.bg-lime-dark-in,:hover>.bg-lime-dark-in{background-color:var(--lime-dark)}.bg-lime-light,.bg-lime-light-all>*,.bg-lime-light-many:focus>*,.bg-lime-light-many:hover>*,.bg-lime-light-on:focus,.bg-lime-light-on:hover,.bg-lime-light-one>:focus,.bg-lime-light-one>:hover,:focus>.bg-lime-light-in,:hover>.bg-lime-light-in{background-color:var(--lime-light)}.bg-green,.bg-green-all>*,.bg-green-many:focus>*,.bg-green-many:hover>*,.bg-green-on:focus,.bg-green-on:hover,.bg-green-one>:focus,.bg-green-one>:hover,:focus>.bg-green-in,:hover>.bg-green-in{background-color:var(--green)}.bg-green-dark,.bg-green-dark-all>*,.bg-green-dark-many:focus>*,.bg-green-dark-many:hover>*,.bg-green-dark-on:focus,.bg-green-dark-on:hover,.bg-green-dark-one>:focus,.bg-green-dark-one>:hover,:focus>.bg-green-dark-in,:hover>.bg-green-dark-in{background-color:var(--green-dark)}.bg-green-light,.bg-green-light-all>*,.bg-green-light-many:focus>*,.bg-green-light-many:hover>*,.bg-green-light-on:focus,.bg-green-light-on:hover,.bg-green-light-one>:focus,.bg-green-light-one>:hover,:focus>.bg-green-light-in,:hover>.bg-green-light-in{background-color:var(--green-light)}.bg-aqua,.bg-aqua-all>*,.bg-aqua-many:focus>*,.bg-aqua-many:hover>*,.bg-aqua-on:focus,.bg-aqua-on:hover,.bg-aqua-one>:focus,.bg-aqua-one>:hover,:focus>.bg-aqua-in,:hover>.bg-aqua-in{background-color:var(--aqua)}.bg-aqua-dark,.bg-aqua-dark-all>*,.bg-aqua-dark-many:focus>*,.bg-aqua-dark-many:hover>*,.bg-aqua-dark-on:focus,.bg-aqua-dark-on:hover,.bg-aqua-dark-one>:focus,.bg-aqua-dark-one>:hover,:focus>.bg-aqua-dark-in,:hover>.bg-aqua-dark-in{background-color:var(--aqua-dark)}.bg-aqua-light,.bg-aqua-light-all>*,.bg-aqua-light-many:focus>*,.bg-aqua-light-many:hover>*,.bg-aqua-light-on:focus,.bg-aqua-light-on:hover,.bg-aqua-light-one>:focus,.bg-aqua-light-one>:hover,:focus>.bg-aqua-light-in,:hover>.bg-aqua-light-in{background-color:var(--aqua-light)}.bg-cyan,.bg-cyan-all>*,.bg-cyan-many:focus>*,.bg-cyan-many:hover>*,.bg-cyan-on:focus,.bg-cyan-on:hover,.bg-cyan-one>:focus,.bg-cyan-one>:hover,:focus>.bg-cyan-in,:hover>.bg-cyan-in{background-color:var(--cyan)}.bg-cyan-dark,.bg-cyan-dark-all>*,.bg-cyan-dark-many:focus>*,.bg-cyan-dark-many:hover>*,.bg-cyan-dark-on:focus,.bg-cyan-dark-on:hover,.bg-cyan-dark-one>:focus,.bg-cyan-dark-one>:hover,:focus>.bg-cyan-dark-in,:hover>.bg-cyan-dark-in{background-color:var(--cyan-dark)}.bg-cyan-light,.bg-cyan-light-all>*,.bg-cyan-light-many:focus>*,.bg-cyan-light-many:hover>*,.bg-cyan-light-on:focus,.bg-cyan-light-on:hover,.bg-cyan-light-one>:focus,.bg-cyan-light-one>:hover,:focus>.bg-cyan-light-in,:hover>.bg-cyan-light-in{background-color:var(--cyan-light)}.bg-sky,.bg-sky-all>*,.bg-sky-many:focus>*,.bg-sky-many:hover>*,.bg-sky-on:focus,.bg-sky-on:hover,.bg-sky-one>:focus,.bg-sky-one>:hover,:focus>.bg-sky-in,:hover>.bg-sky-in{background-color:var(--sky)}.bg-sky-dark,.bg-sky-dark-all>*,.bg-sky-dark-many:focus>*,.bg-sky-dark-many:hover>*,.bg-sky-dark-on:focus,.bg-sky-dark-on:hover,.bg-sky-dark-one>:focus,.bg-sky-dark-one>:hover,:focus>.bg-sky-dark-in,:hover>.bg-sky-dark-in{background-color:var(--sky-dark)}.bg-sky-light,.bg-sky-light-all>*,.bg-sky-light-many:focus>*,.bg-sky-light-many:hover>*,.bg-sky-light-on:focus,.bg-sky-light-on:hover,.bg-sky-light-one>:focus,.bg-sky-light-one>:hover,:focus>.bg-sky-light-in,:hover>.bg-sky-light-in{background-color:var(--sky-light)}.bg-blue,.bg-blue-all>*,.bg-blue-many:focus>*,.bg-blue-many:hover>*,.bg-blue-on:focus,.bg-blue-on:hover,.bg-blue-one>:focus,.bg-blue-one>:hover,:focus>.bg-blue-in,:hover>.bg-blue-in{background-color:var(--blue)}.bg-blue-dark,.bg-blue-dark-all>*,.bg-blue-dark-many:focus>*,.bg-blue-dark-many:hover>*,.bg-blue-dark-on:focus,.bg-blue-dark-on:hover,.bg-blue-dark-one>:focus,.bg-blue-dark-one>:hover,:focus>.bg-blue-dark-in,:hover>.bg-blue-dark-in{background-color:var(--blue-dark)}.bg-blue-light,.bg-blue-light-all>*,.bg-blue-light-many:focus>*,.bg-blue-light-many:hover>*,.bg-blue-light-on:focus,.bg-blue-light-on:hover,.bg-blue-light-one>:focus,.bg-blue-light-one>:hover,:focus>.bg-blue-light-in,:hover>.bg-blue-light-in{background-color:var(--blue-light)}.bg-indigo,.bg-indigo-all>*,.bg-indigo-many:focus>*,.bg-indigo-many:hover>*,.bg-indigo-on:focus,.bg-indigo-on:hover,.bg-indigo-one>:focus,.bg-indigo-one>:hover,:focus>.bg-indigo-in,:hover>.bg-indigo-in{background-color:var(--indigo)}.bg-indigo-dark,.bg-indigo-dark-all>*,.bg-indigo-dark-many:focus>*,.bg-indigo-dark-many:hover>*,.bg-indigo-dark-on:focus,.bg-indigo-dark-on:hover,.bg-indigo-dark-one>:focus,.bg-indigo-dark-one>:hover,:focus>.bg-indigo-dark-in,:hover>.bg-indigo-dark-in{background-color:var(--indigo-dark)}.bg-indigo-light,.bg-indigo-light-all>*,.bg-indigo-light-many:focus>*,.bg-indigo-light-many:hover>*,.bg-indigo-light-on:focus,.bg-indigo-light-on:hover,.bg-indigo-light-one>:focus,.bg-indigo-light-one>:hover,:focus>.bg-indigo-light-in,:hover>.bg-indigo-light-in{background-color:var(--indigo-light)}.bg-magenta,.bg-magenta-all>*,.bg-magenta-many:focus>*,.bg-magenta-many:hover>*,.bg-magenta-on:focus,.bg-magenta-on:hover,.bg-magenta-one>:focus,.bg-magenta-one>:hover,:focus>.bg-magenta-in,:hover>.bg-magenta-in{background-color:var(--magenta)}.bg-magenta-dark,.bg-magenta-dark-all>*,.bg-magenta-dark-many:focus>*,.bg-magenta-dark-many:hover>*,.bg-magenta-dark-on:focus,.bg-magenta-dark-on:hover,.bg-magenta-dark-one>:focus,.bg-magenta-dark-one>:hover,:focus>.bg-magenta-dark-in,:hover>.bg-magenta-dark-in{background-color:var(--magenta-dark)}.bg-magenta-light,.bg-magenta-light-all>*,.bg-magenta-light-many:focus>*,.bg-magenta-light-many:hover>*,.bg-magenta-light-on:focus,.bg-magenta-light-on:hover,.bg-magenta-light-one>:focus,.bg-magenta-light-one>:hover,:focus>.bg-magenta-light-in,:hover>.bg-magenta-light-in{background-color:var(--magenta-light)}.bg-pink,.bg-pink-all>*,.bg-pink-many:focus>*,.bg-pink-many:hover>*,.bg-pink-on:focus,.bg-pink-on:hover,.bg-pink-one>:focus,.bg-pink-one>:hover,:focus>.bg-pink-in,:hover>.bg-pink-in{background-color:var(--pink)}.bg-pink-dark,.bg-pink-dark-all>*,.bg-pink-dark-many:focus>*,.bg-pink-dark-many:hover>*,.bg-pink-dark-on:focus,.bg-pink-dark-on:hover,.bg-pink-dark-one>:focus,.bg-pink-dark-one>:hover,:focus>.bg-pink-dark-in,:hover>.bg-pink-dark-in{background-color:var(--pink-dark)}.bg-pink-light,.bg-pink-light-all>*,.bg-pink-light-many:focus>*,.bg-pink-light-many:hover>*,.bg-pink-light-on:focus,.bg-pink-light-on:hover,.bg-pink-light-one>:focus,.bg-pink-light-one>:hover,:focus>.bg-pink-light-in,:hover>.bg-pink-light-in{background-color:var(--pink-light)}.bg-black,.bg-black-all>*,.bg-black-many:focus>*,.bg-black-many:hover>*,.bg-black-on:focus,.bg-black-on:hover,.bg-black-one>:focus,.bg-black-one>:hover,:focus>.bg-black-in,:hover>.bg-black-in{background-color:var(--black)}.bg-black-dark,.bg-black-dark-all>*,.bg-black-dark-many:focus>*,.bg-black-dark-many:hover>*,.bg-black-dark-on:focus,.bg-black-dark-on:hover,.bg-black-dark-one>:focus,.bg-black-dark-one>:hover,:focus>.bg-black-dark-in,:hover>.bg-black-dark-in{background-color:var(--black-dark)}.bg-black-light,.bg-black-light-all>*,.bg-black-light-many:focus>*,.bg-black-light-many:hover>*,.bg-black-light-on:focus,.bg-black-light-on:hover,.bg-black-light-one>:focus,.bg-black-light-one>:hover,:focus>.bg-black-light-in,:hover>.bg-black-light-in{background-color:var(--black-light)}.bg-slate,.bg-slate-all>*,.bg-slate-many:focus>*,.bg-slate-many:hover>*,.bg-slate-on:focus,.bg-slate-on:hover,.bg-slate-one>:focus,.bg-slate-one>:hover,:focus>.bg-slate-in,:hover>.bg-slate-in{background-color:var(--slate)}.bg-slate-dark,.bg-slate-dark-all>*,.bg-slate-dark-many:focus>*,.bg-slate-dark-many:hover>*,.bg-slate-dark-on:focus,.bg-slate-dark-on:hover,.bg-slate-dark-one>:focus,.bg-slate-dark-one>:hover,:focus>.bg-slate-dark-in,:hover>.bg-slate-dark-in{background-color:var(--slate-dark)}.bg-slate-light,.bg-slate-light-all>*,.bg-slate-light-many:focus>*,.bg-slate-light-many:hover>*,.bg-slate-light-on:focus,.bg-slate-light-on:hover,.bg-slate-light-one>:focus,.bg-slate-light-one>:hover,:focus>.bg-slate-light-in,:hover>.bg-slate-light-in{background-color:var(--slate-light)}.bg-gray,.bg-gray-all>*,.bg-gray-many:focus>*,.bg-gray-many:hover>*,.bg-gray-on:focus,.bg-gray-on:hover,.bg-gray-one>:focus,.bg-gray-one>:hover,:focus>.bg-gray-in,:hover>.bg-gray-in{background-color:var(--gray)}.bg-gray-dark,.bg-gray-dark-all>*,.bg-gray-dark-many:focus>*,.bg-gray-dark-many:hover>*,.bg-gray-dark-on:focus,.bg-gray-dark-on:hover,.bg-gray-dark-one>:focus,.bg-gray-dark-one>:hover,:focus>.bg-gray-dark-in,:hover>.bg-gray-dark-in{background-color:var(--gray-dark)}.bg-gray-light,.bg-gray-light-all>*,.bg-gray-light-many:focus>*,.bg-gray-light-many:hover>*,.bg-gray-light-on:focus,.bg-gray-light-on:hover,.bg-gray-light-one>:focus,.bg-gray-light-one>:hover,:focus>.bg-gray-light-in,:hover>.bg-gray-light-in{background-color:var(--gray-light)}.bg-silver,.bg-silver-all>*,.bg-silver-many:focus>*,.bg-silver-many:hover>*,.bg-silver-on:focus,.bg-silver-on:hover,.bg-silver-one>:focus,.bg-silver-one>:hover,:focus>.bg-silver-in,:hover>.bg-silver-in{background-color:var(--silver)}.bg-silver-dark,.bg-silver-dark-all>*,.bg-silver-dark-many:focus>*,.bg-silver-dark-many:hover>*,.bg-silver-dark-on:focus,.bg-silver-dark-on:hover,.bg-silver-dark-one>:focus,.bg-silver-dark-one>:hover,:focus>.bg-silver-dark-in,:hover>.bg-silver-dark-in{background-color:var(--silver-dark)}.bg-silver-light,.bg-silver-light-all>*,.bg-silver-light-many:focus>*,.bg-silver-light-many:hover>*,.bg-silver-light-on:focus,.bg-silver-light-on:hover,.bg-silver-light-one>:focus,.bg-silver-light-one>:hover,:focus>.bg-silver-light-in,:hover>.bg-silver-light-in{background-color:var(--silver-light)}.bg-white,.bg-white-all>*,.bg-white-many:focus>*,.bg-white-many:hover>*,.bg-white-on:focus,.bg-white-on:hover,.bg-white-one>:focus,.bg-white-one>:hover,:focus>.bg-white-in,:hover>.bg-white-in{background-color:var(--white)}.bg-white-dark,.bg-white-dark-all>*,.bg-white-dark-many:focus>*,.bg-white-dark-many:hover>*,.bg-white-dark-on:focus,.bg-white-dark-on:hover,.bg-white-dark-one>:focus,.bg-white-dark-one>:hover,:focus>.bg-white-dark-in,:hover>.bg-white-dark-in{background-color:var(--white-dark)}.bg-white-light,.bg-white-light-all>*,.bg-white-light-many:focus>*,.bg-white-light-many:hover>*,.bg-white-light-on:focus,.bg-white-light-on:hover,.bg-white-light-one>:focus,.bg-white-light-one>:hover,:focus>.bg-white-light-in,:hover>.bg-white-light-in{background-color:var(--white-light)}:root{--sans-serif:Helvetica,sans-serif;--serif:Times,serif;--monospace:Courier,monospace;--cursive:Mistral,cursive;--fantasy:Blackletter,fantasy}.sans-serif,.sans-serif-all>*,.sans-serif-many:focus>*,.sans-serif-many:hover>*,.sans-serif-on:focus,.sans-serif-on:hover,.sans-serif-one>:focus,.sans-serif-one>:hover,:focus>.sans-serif-in,:hover>.sans-serif-in{font-family:var(--sans-serif)}.serif,.serif-all>*,.serif-many:focus>*,.serif-many:hover>*,.serif-on:focus,.serif-on:hover,.serif-one>:focus,.serif-one>:hover,:focus>.serif-in,:hover>.serif-in{font-family:var(--serif)}.monospace,.monospace-all>*,.monospace-many:focus>*,.monospace-many:hover>*,.monospace-on:focus,.monospace-on:hover,.monospace-one>:focus,.monospace-one>:hover,:focus>.monospace-in,:hover>.monospace-in{font-family:var(--monospace)}.cursive,.cursive-all>*,.cursive-many:focus>*,.cursive-many:hover>*,.cursive-on:focus,.cursive-on:hover,.cursive-one>:focus,.cursive-one>:hover,:focus>.cursive-in,:hover>.cursive-in{font-family:var(--cursive)}.fantasy,.fantasy-all>*,.fantasy-many:focus>*,.fantasy-many:hover>*,.fantasy-on:focus,.fantasy-on:hover,.fantasy-one>:focus,.fantasy-one>:hover,:focus>.fantasy-in,:hover>.fantasy-in{font-family:var(--fantasy)}.font-bold,.font-bold-all>*,.font-bold-many:focus>*,.font-bold-many:hover>*,.font-bold-on:focus,.font-bold-on:hover,.font-bold-one>:focus,.font-bold-one>:hover,:focus>.font-bold-in,:hover>.font-bold-in{font-weight:700}.font-italic,.font-italic-all>*,.font-italic-many:focus>*,.font-italic-many:hover>*,.font-italic-on:focus,.font-italic-on:hover,.font-italic-one>:focus,.font-italic-one>:hover,:focus>.font-italic-in,:hover>.font-italic-in{font-style:italic}.align-center,.align-center-all>*{text-align:center}.align-justify,.align-justify-all>*{text-align:justify}.align-right,.align-right-all>*{text-align:right}.align-left,.align-left-all>*{text-align:left}.trans-cap,.trans-cap-all>*,.trans-cap-many:focus>*,.trans-cap-many:hover>*,.trans-cap-on:focus,.trans-cap-on:hover,.trans-cap-one>:focus,.trans-cap-one>:hover,:focus>.trans-cap-in,:hover>.trans-cap-in{text-transform:capitalize}.trans-up,.trans-up-all>*,.trans-up-many:focus>*,.trans-up-many:hover>*,.trans-up-on:focus,.trans-up-on:hover,.trans-up-one>:focus,.trans-up-one>:hover,:focus>.trans-up-in,:hover>.trans-up-in{text-transform:uppercase}.trans-low,.trans-low-all>*,.trans-low-many:focus>*,.trans-low-many:hover>*,.trans-low-on:focus,.trans-low-on:hover,.trans-low-one>:focus,.trans-low-one>:hover,:focus>.trans-low-in,:hover>.trans-low-in{text-transform:lowercase}.deco-none,.deco-none-all>*,.deco-none-many:focus>*,.deco-none-many:hover>*,.deco-none-on:focus,.deco-none-on:hover,.deco-none-one>:focus,.deco-none-one>:hover,:focus>.deco-none-in,:hover>.deco-none-in{-webkit-text-decoration-line:none;text-decoration-line:none}.deco-under,.deco-under-all>*,.deco-under-many:focus>*,.deco-under-many:hover>*,.deco-under-on:focus,.deco-under-on:hover,.deco-under-one>:focus,.deco-under-one>:hover,:focus>.deco-under-in,:hover>.deco-under-in{-webkit-text-decoration-line:underline;text-decoration-line:underline}.deco-over,.deco-over-all>*,.deco-over-many:focus>*,.deco-over-many:hover>*,.deco-over-on:focus,.deco-over-on:hover,.deco-over-one>:focus,.deco-over-one>:hover,:focus>.deco-over-in,:hover>.deco-over-in{-webkit-text-decoration-line:overline;text-decoration-line:overline}.deco-through,.deco-through-all>*,.deco-through-many:focus>*,.deco-through-many:hover>*,.deco-through-on:focus,.deco-through-on:hover,.deco-through-one>:focus,.deco-through-one>:hover,:focus>.deco-through-in,:hover>.deco-through-in{-webkit-text-decoration-line:line-through;text-decoration-line:line-through}.deco-dash,.deco-dash-all>*,.deco-dash-many:focus>*,.deco-dash-many:hover>*,.deco-dash-on:focus,.deco-dash-on:hover,.deco-dash-one>:focus,.deco-dash-one>:hover,:focus>.deco-dash-in,:hover>.deco-dash-in{-webkit-text-decoration-style:dashed;text-decoration-style:dashed}.deco-dot,.deco-dot-all>*,.deco-dot-many:focus>*,.deco-dot-many:hover>*,.deco-dot-on:focus,.deco-dot-on:hover,.deco-dot-one>:focus,.deco-dot-one>:hover,:focus>.deco-dot-in,:hover>.deco-dot-in{-webkit-text-decoration-style:dotted;text-decoration-style:dotted}.deco-double,.deco-double-all>*,.deco-double-many:focus>*,.deco-double-many:hover>*,.deco-double-on:focus,.deco-double-on:hover,.deco-double-one>:focus,.deco-double-one>:hover,:focus>.deco-double-in,:hover>.deco-double-in{-webkit-text-decoration-style:double;text-decoration-style:double}.deco-solid,.deco-solid-all>*,.deco-solid-many:focus>*,.deco-solid-many:hover>*,.deco-solid-on:focus,.deco-solid-on:hover,.deco-solid-one>:focus,.deco-solid-one>:hover,:focus>.deco-solid-in,:hover>.deco-solid-in{-webkit-text-decoration-style:solid;text-decoration-style:solid}.deco-wavy,.deco-wavy-all>*,.deco-wavy-many:focus>*,.deco-wavy-many:hover>*,.deco-wavy-on:focus,.deco-wavy-on:hover,.deco-wavy-one>:focus,.deco-wavy-one>:hover,:focus>.deco-wavy-in,:hover>.deco-wavy-in{-webkit-text-decoration-style:wavy;text-decoration-style:wavy}.deco-red,.deco-red-all>*,.deco-red-many:focus>*,.deco-red-many:hover>*,.deco-red-on:focus,.deco-red-on:hover,.deco-red-one>:focus,.deco-red-one>:hover,:focus>.deco-red-in,:hover>.deco-red-in{-webkit-text-decoration-color:var(--red);text-decoration-color:var(--red)}.deco-orange,.deco-orange-all>*,.deco-orange-many:focus>*,.deco-orange-many:hover>*,.deco-orange-on:focus,.deco-orange-on:hover,.deco-orange-one>:focus,.deco-orange-one>:hover,:focus>.deco-orange-in,:hover>.deco-orange-in{-webkit-text-decoration-color:var(--orange);text-decoration-color:var(--orange)}.deco-yellow,.deco-yellow-all>*,.deco-yellow-many:focus>*,.deco-yellow-many:hover>*,.deco-yellow-on:focus,.deco-yellow-on:hover,.deco-yellow-one>:focus,.deco-yellow-one>:hover,:focus>.deco-yellow-in,:hover>.deco-yellow-in{-webkit-text-decoration-color:var(--yellow);text-decoration-color:var(--yellow)}.deco-lime,.deco-lime-all>*,.deco-lime-many:focus>*,.deco-lime-many:hover>*,.deco-lime-on:focus,.deco-lime-on:hover,.deco-lime-one>:focus,.deco-lime-one>:hover,:focus>.deco-lime-in,:hover>.deco-lime-in{-webkit-text-decoration-color:var(--lime);text-decoration-color:var(--lime)}.deco-green,.deco-green-all>*,.deco-green-many:focus>*,.deco-green-many:hover>*,.deco-green-on:focus,.deco-green-on:hover,.deco-green-one>:focus,.deco-green-one>:hover,:focus>.deco-green-in,:hover>.deco-green-in{-webkit-text-decoration-color:var(--green);text-decoration-color:var(--green)}.deco-aqua,.deco-aqua-all>*,.deco-aqua-many:focus>*,.deco-aqua-many:hover>*,.deco-aqua-on:focus,.deco-aqua-on:hover,.deco-aqua-one>:focus,.deco-aqua-one>:hover,:focus>.deco-aqua-in,:hover>.deco-aqua-in{-webkit-text-decoration-color:var(--aqua);text-decoration-color:var(--aqua)}.deco-cyan,.deco-cyan-all>*,.deco-cyan-many:focus>*,.deco-cyan-many:hover>*,.deco-cyan-on:focus,.deco-cyan-on:hover,.deco-cyan-one>:focus,.deco-cyan-one>:hover,:focus>.deco-cyan-in,:hover>.deco-cyan-in{-webkit-text-decoration-color:var(--cyan);text-decoration-color:var(--cyan)}.deco-sky,.deco-sky-all>*,.deco-sky-many:focus>*,.deco-sky-many:hover>*,.deco-sky-on:focus,.deco-sky-on:hover,.deco-sky-one>:focus,.deco-sky-one>:hover,:focus>.deco-sky-in,:hover>.deco-sky-in{-webkit-text-decoration-color:var(--sky);text-decoration-color:var(--sky)}.deco-blue,.deco-blue-all>*,.deco-blue-many:focus>*,.deco-blue-many:hover>*,.deco-blue-on:focus,.deco-blue-on:hover,.deco-blue-one>:focus,.deco-blue-one>:hover,:focus>.deco-blue-in,:hover>.deco-blue-in{-webkit-text-decoration-color:var(--blue);text-decoration-color:var(--blue)}.deco-indigo,.deco-indigo-all>*,.deco-indigo-many:focus>*,.deco-indigo-many:hover>*,.deco-indigo-on:focus,.deco-indigo-on:hover,.deco-indigo-one>:focus,.deco-indigo-one>:hover,:focus>.deco-indigo-in,:hover>.deco-indigo-in{-webkit-text-decoration-color:var(--indigo);text-decoration-color:var(--indigo)}.deco-magenta,.deco-magenta-all>*,.deco-magenta-many:focus>*,.deco-magenta-many:hover>*,.deco-magenta-on:focus,.deco-magenta-on:hover,.deco-magenta-one>:focus,.deco-magenta-one>:hover,:focus>.deco-magenta-in,:hover>.deco-magenta-in{-webkit-text-decoration-color:var(--magenta);text-decoration-color:var(--magenta)}.deco-pink,.deco-pink-all>*,.deco-pink-many:focus>*,.deco-pink-many:hover>*,.deco-pink-on:focus,.deco-pink-on:hover,.deco-pink-one>:focus,.deco-pink-one>:hover,:focus>.deco-pink-in,:hover>.deco-pink-in{-webkit-text-decoration-color:var(--pink);text-decoration-color:var(--pink)}.deco-black,.deco-black-all>*,.deco-black-many:focus>*,.deco-black-many:hover>*,.deco-black-on:focus,.deco-black-on:hover,.deco-black-one>:focus,.deco-black-one>:hover,:focus>.deco-black-in,:hover>.deco-black-in{-webkit-text-decoration-color:var(--black);text-decoration-color:var(--black)}.deco-slate,.deco-slate-all>*,.deco-slate-many:focus>*,.deco-slate-many:hover>*,.deco-slate-on:focus,.deco-slate-on:hover,.deco-slate-one>:focus,.deco-slate-one>:hover,:focus>.deco-slate-in,:hover>.deco-slate-in{-webkit-text-decoration-color:var(--slate);text-decoration-color:var(--slate)}.deco-gray,.deco-gray-all>*,.deco-gray-many:focus>*,.deco-gray-many:hover>*,.deco-gray-on:focus,.deco-gray-on:hover,.deco-gray-one>:focus,.deco-gray-one>:hover,:focus>.deco-gray-in,:hover>.deco-gray-in{-webkit-text-decoration-color:var(--gray);text-decoration-color:var(--gray)}.deco-silver,.deco-silver-all>*,.deco-silver-many:focus>*,.deco-silver-many:hover>*,.deco-silver-on:focus,.deco-silver-on:hover,.deco-silver-one>:focus,.deco-silver-one>:hover,:focus>.deco-silver-in,:hover>.deco-silver-in{-webkit-text-decoration-color:var(--silver);text-decoration-color:var(--silver)}.deco-white,.deco-white-all>*,.deco-white-many:focus>*,.deco-white-many:hover>*,.deco-white-on:focus,.deco-white-on:hover,.deco-white-one>:focus,.deco-white-one>:hover,:focus>.deco-white-in,:hover>.deco-white-in{-webkit-text-decoration-color:var(--white);text-decoration-color:var(--white)}*{--target-margins:7rem;box-sizing:border-box}:target{padding-top:var(--target-margins);margin-top:-var(--target-margins)}html{--html-font-size:62.5%;font-size:var(--html-font-size);scroll-behavior:smooth}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}body{--body-font-size:2rem;--body-line-height:1.6;--body-margin:auto;--body-max-width:2000px;--body-padding:0;margin:var(--body-margin);padding:var(--body-padding);max-width:var(--body-max-width);line-height:var(--body-line-height);font-size:var(--body-font-size);font-family:var(--sans-serif)}main{--main-text-align:center;text-align:var(--main-text-align)}article{--article-margin-bottom:20px;margin-bottom:var(--article-margin-bottom)}h1{--title-font-size:calc(var(--body-font-size) * 2)}h2{--title-font-size:calc(var(--body-font-size) * 1.8)}h3{--title-font-size:calc(var(--body-font-size) * 1.6)}h4{--title-font-size:calc(var(--body-font-size) * 1.4)}h5{--title-font-size:calc(var(--body-font-size) * 1.2)}h6{--title-font-size:var(--body-font-size)}h1,h2,h3,h4,h5,h6{--title-text-align:center;--title-text-transform:capitalize;font-family:var(--serif);text-align:var(--title-text-align);text-transform:var(--title-text-transform);font-size:var(--title-font-size)}a{--link-outline:0;--link-text-decoration:none;-webkit-text-decoration:var(--link-text-decoration);text-decoration:var(--link-text-decoration);outline:var(--link-outline)}ul{--list-margin:0 0 10px;--list-padding:0;--list-style:none;margin:var(--list-margin);padding:var(--list-padding);list-style:var(--list-style)}table{--table-border-collapse:collapse;--table-margin:auto;--table-text-align:center;--table-vertical-align:middle;margin:var(--table-margin);border-collapse:var(--table-border-collapse);text-align:var(--table-text-align);vertical-align:var(--table-vertical-align);font-family:var(--monospace)}code,pre{--code-margin:auto;--code-overflow:scroll;--code-padding:10px;--code-text-align:initial;--code-width:100%;font-size:1em;overflow:var(--code-overflow);margin:var(--code-margin);padding:var(--code-padding);width:var(--code-width);font-family:var(--monospace);text-align:var(--code-text-align)}figure{--figure-margin:0;margin:var(--figure-margin)}img,video{--img-max-width:100%;--img-height:auto;--img-object-fit:contain;max-width:var(--img-max-width);height:var(--img-height);-o-object-fit:var(--img-object-fit);object-fit:var(--img-object-fit)}[type=button],[type=reset],[type=submit],button{--button-cursor:pointer;cursor:var(--button-cursor)}[class*=flex]{display:flex}[class*=flex-][class*=-col]{flex-direction:column}[class*=flex-][class*=-col-rev]{flex-direction:column-reverse}[class*=flex-][class*=-row]{flex-direction:row}[class*=flex-][class*=-row-rev]{flex-direction:row-reverse}[class*=flex-][class*=-wrap]{flex-wrap:wrap}[class*=flex-][class*=-wrap-rev]{flex-wrap:wrap-reverse}[class*=flex-][class*=-order1]{order:1}[class*=flex-][class*=-order2]{order:2}[class*=flex-][class*=-order3]{order:3}[class*=flex-][class*=-order4]{order:4}[class*=flex-][class*=-grow1]{flex-grow:1}[class*=flex-][class*=-grow2]{flex-grow:2}[class*=flex-][class*=-grow3]{flex-grow:3}[class*=flex-][class*=-grow4]{flex-grow:4}[class*=flex-][class*=-shrink1]{flex-shrink:1}[class*=flex-][class*=-shrink2]{flex-shrink:2}[class*=flex-][class*=-shrink3]{flex-shrink:3}[class*=flex-][class*=-shrink4]{flex-shrink:4}[class*=grid]{--grid-max-width:100vw;--grid-margin:auto}[class*=grid]{display:grid;max-width:var(--grid-max-width);margin:var(--grid-margin)}[class*=grid-][class*="-2tn"]{grid-template:auto/repeat(2,auto)}[class*=grid-][class*="-3tn"]{grid-template:auto/repeat(3,auto)}[class*=grid-][class*="-4tn"]{grid-template:auto/repeat(4,auto)}[class*=grid-][class*="-5tn"]{grid-template:auto/repeat(5,auto)}[class*=grid-][class*="-6tn"]{grid-template:auto/repeat(6,auto)}[class*=grid-][class*="-7tn"]{grid-template:auto/repeat(7,auto)}[class*=grid-][class*="-8tn"]{grid-template:auto/repeat(8,auto)}[class*=grid-][class*="-9tn"]{grid-template:auto/repeat(9,auto)}[class*=grid-][class*="-10tn"]{grid-template:auto/repeat(10,auto)}[class*=grid-][class*="-11tn"]{grid-template:auto/repeat(11,auto)}[class*=grid-][class*="-12tn"]{grid-template:auto/repeat(12,auto)}@media (min-width:576px){[class*=grid-][class*="-2sm"]{grid-template:auto/repeat(2,auto)}[class*=grid-][class*="-3sm"]{grid-template:auto/repeat(3,auto)}[class*=grid-][class*="-4sm"]{grid-template:auto/repeat(4,auto)}[class*=grid-][class*="-5sm"]{grid-template:auto/repeat(5,auto)}[class*=grid-][class*="-6sm"]{grid-template:auto/repeat(6,auto)}[class*=grid-][class*="-7sm"]{grid-template:auto/repeat(7,auto)}[class*=grid-][class*="-8sm"]{grid-template:auto/repeat(8,auto)}[class*=grid-][class*="-9sm"]{grid-template:auto/repeat(9,auto)}[class*=grid-][class*="-10sm"]{grid-template:auto/repeat(10,auto)}[class*=grid-][class*="-11sm"]{grid-template:auto/repeat(11,auto)}[class*=grid-][class*="-12sm"]{grid-template:auto/repeat(12,auto)}}@media (min-width:768px){[class*=grid-][class*="-2md"]{grid-template:auto/repeat(2,auto)}[class*=grid-][class*="-3md"]{grid-template:auto/repeat(3,auto)}[class*=grid-][class*="-4md"]{grid-template:auto/repeat(4,auto)}[class*=grid-][class*="-5md"]{grid-template:auto/repeat(5,auto)}[class*=grid-][class*="-6md"]{grid-template:auto/repeat(6,auto)}[class*=grid-][class*="-7md"]{grid-template:auto/repeat(7,auto)}[class*=grid-][class*="-8md"]{grid-template:auto/repeat(8,auto)}[class*=grid-][class*="-9md"]{grid-template:auto/repeat(9,auto)}[class*=grid-][class*="-10md"]{grid-template:auto/repeat(10,auto)}[class*=grid-][class*="-11md"]{grid-template:auto/repeat(11,auto)}[class*=grid-][class*="-12md"]{grid-template:auto/repeat(12,auto)}}@media (min-width:992px){[class*=grid-][class*="-2lg"]{grid-template:auto/repeat(2,auto)}[class*=grid-][class*="-3lg"]{grid-template:auto/repeat(3,auto)}[class*=grid-][class*="-4lg"]{grid-template:auto/repeat(4,auto)}[class*=grid-][class*="-5lg"]{grid-template:auto/repeat(5,auto)}[class*=grid-][class*="-6lg"]{grid-template:auto/repeat(6,auto)}[class*=grid-][class*="-7lg"]{grid-template:auto/repeat(7,auto)}[class*=grid-][class*="-8lg"]{grid-template:auto/repeat(8,auto)}[class*=grid-][class*="-9lg"]{grid-template:auto/repeat(9,auto)}[class*=grid-][class*="-10lg"]{grid-template:auto/repeat(10,auto)}[class*=grid-][class*="-11lg"]{grid-template:auto/repeat(11,auto)}[class*=grid-][class*="-12lg"]{grid-template:auto/repeat(12,auto)}}@media (min-width:1200px){[class*=grid-][class*="-2xl"]{grid-template:auto/repeat(2,auto)}[class*=grid-][class*="-3xl"]{grid-template:auto/repeat(3,auto)}[class*=grid-][class*="-4xl"]{grid-template:auto/repeat(4,auto)}[class*=grid-][class*="-5xl"]{grid-template:auto/repeat(5,auto)}[class*=grid-][class*="-6xl"]{grid-template:auto/repeat(6,auto)}[class*=grid-][class*="-7xl"]{grid-template:auto/repeat(7,auto)}[class*=grid-][class*="-8xl"]{grid-template:auto/repeat(8,auto)}[class*=grid-][class*="-9xl"]{grid-template:auto/repeat(9,auto)}[class*=grid-][class*="-10xl"]{grid-template:auto/repeat(10,auto)}[class*=grid-][class*="-11xl"]{grid-template:auto/repeat(11,auto)}[class*=grid-][class*="-12xl"]{grid-template:auto/repeat(12,auto)}}@media (min-width:1600px){[class*=grid-][class*="-2wd"]{grid-template:auto/repeat(2,auto)}[class*=grid-][class*="-3wd"]{grid-template:auto/repeat(3,auto)}[class*=grid-][class*="-4wd"]{grid-template:auto/repeat(4,auto)}[class*=grid-][class*="-5wd"]{grid-template:auto/repeat(5,auto)}[class*=grid-][class*="-6wd"]{grid-template:auto/repeat(6,auto)}[class*=grid-][class*="-7wd"]{grid-template:auto/repeat(7,auto)}[class*=grid-][class*="-8wd"]{grid-template:auto/repeat(8,auto)}[class*=grid-][class*="-9wd"]{grid-template:auto/repeat(9,auto)}[class*=grid-][class*="-10wd"]{grid-template:auto/repeat(10,auto)}[class*=grid-][class*="-11wd"]{grid-template:auto/repeat(11,auto)}[class*=grid-][class*="-12wd"]{grid-template:auto/repeat(12,auto)}}[class*=gap-]{--gap1:5px;--gap2:10px;--gap3:20px;--gap4:50px}[class*=gap-][class*="-1tn"]{gap:var(--gap1)}[class*=gap-][class*="-2tn"]{gap:var(--gap2)}[class*=gap-][class*="-3tn"]{gap:var(--gap3)}[class*=gap-][class*="-4tn"]{gap:var(--gap4)}@media (min-width:576px){[class*=gap-][class*="-1sm"]{gap:var(--gap1)}[class*=gap-][class*="-2sm"]{gap:var(--gap2)}[class*=gap-][class*="-3sm"]{gap:var(--gap3)}[class*=gap-][class*="-4sm"]{gap:var(--gap4)}}@media (min-width:768px){[class*=gap-][class*="-1md"]{gap:var(--gap1)}[class*=gap-][class*="-2md"]{gap:var(--gap2)}[class*=gap-][class*="-3md"]{gap:var(--gap3)}[class*=gap-][class*="-4md"]{gap:var(--gap4)}}@media (min-width:992px){[class*=gap-][class*="-1lg"]{gap:var(--gap1)}[class*=gap-][class*="-2lg"]{gap:var(--gap2)}[class*=gap-][class*="-3lg"]{gap:var(--gap3)}[class*=gap-][class*="-4lg"]{gap:var(--gap4)}}@media (min-width:1200px){[class*=gap-][class*="-1xl"]{gap:var(--gap1)}[class*=gap-][class*="-2xl"]{gap:var(--gap2)}[class*=gap-][class*="-3xl"]{gap:var(--gap3)}[class*=gap-][class*="-4xl"]{gap:var(--gap4)}}@media (min-width:1600px){[class*=gap-][class*="-1wd"]{gap:var(--gap1)}[class*=gap-][class*="-2wd"]{gap:var(--gap2)}[class*=gap-][class*="-3wd"]{gap:var(--gap3)}[class*=gap-][class*="-4wd"]{gap:var(--gap4)}}.content-around{place-content:space-around}.content-between{place-content:space-between}.content-evenly{place-content:space-evenly}.content-center{place-content:center}.content-stretch{place-content:stretch}.content-start{place-content:flex-start}.content-end{place-content:flex-end}@media (min-width:576px){.content-around-sm{place-content:space-around}.content-between-sm{place-content:space-between}.content-evenly-sm{place-content:space-evenly}.content-center-sm{place-content:center}.content-stretch-sm{place-content:stretch}.content-start-sm{place-content:flex-start}.content-end-sm{place-content:flex-end}}@media (min-width:768px){.content-around-md{place-content:space-around}.content-between-md{place-content:space-between}.content-evenly-md{place-content:space-evenly}.content-center-md{place-content:center}.content-stretch-md{place-content:stretch}.content-start-md{place-content:flex-start}.content-end-md{place-content:flex-end}}@media (min-width:992px){.content-around-lg{place-content:space-around}.content-between-lg{place-content:space-between}.content-evenly-lg{place-content:space-evenly}.content-center-lg{place-content:center}.content-stretch-lg{place-content:stretch}.content-start-lg{place-content:flex-start}.content-end-lg{place-content:flex-end}}@media (min-width:1200px){.content-around-xl{place-content:space-around}.content-between-xl{place-content:space-between}.content-evenly-xl{place-content:space-evenly}.content-center-xl{place-content:center}.content-stretch-xl{place-content:stretch}.content-start-xl{place-content:flex-start}.content-end-xl{place-content:flex-end}}@media (min-width:1600px){.content-around-wd{place-content:space-around}.content-between-wd{place-content:space-between}.content-evenly-wd{place-content:space-evenly}.content-center-wd{place-content:center}.content-stretch-wd{place-content:stretch}.content-start-wd{place-content:flex-start}.content-end-wd{place-content:flex-end}}.items-normal{place-items:normal}.items-base{place-items:baseline}.items-center{place-items:center}.items-stretch{place-items:stretch}.items-start{place-items:flex-start}.items-end{place-items:flex-end}@media (min-width:576px){.items-normal-sm{place-items:normal}.items-base-sm{place-items:baseline}.items-center-sm{place-items:center}.items-stretch-sm{place-items:stretch}.items-start-sm{place-items:flex-start}.items-end-sm{place-items:flex-end}}@media (min-width:768px){.items-normal-md{place-items:normal}.items-base-md{place-items:baseline}.items-center-md{place-items:center}.items-stretch-md{place-items:stretch}.items-start-md{place-items:flex-start}.items-end-md{place-items:flex-end}}@media (min-width:992px){.items-normal-lg{place-items:normal}.items-base-lg{place-items:baseline}.items-center-lg{place-items:center}.items-stretch-lg{place-items:stretch}.items-start-lg{place-items:flex-start}.items-end-lg{place-items:flex-end}}@media (min-width:1200px){.items-normal-xl{place-items:normal}.items-base-xl{place-items:baseline}.items-center-xl{place-items:center}.items-stretch-xl{place-items:stretch}.items-start-xl{place-items:flex-start}.items-end-xl{place-items:flex-end}}@media (min-width:1600px){.items-normal-wd{place-items:normal}.items-base-wd{place-items:baseline}.items-center-wd{place-items:center}.items-stretch-wd{place-items:stretch}.items-start-wd{place-items:flex-start}.items-end-wd{place-items:flex-end}}.self-auto{place-self:auto}.self-normal{place-self:normal}.self-base{place-self:baseline}.self-center{place-self:center}.self-stretch{place-self:stretch}.self-start{place-self:flex-start}.self-end{place-self:flex-end}@media (min-width:576px){.self-auto-sm{place-self:auto}.self-normal-sm{place-self:normal}.self-base-sm{place-self:baseline}.self-center-sm{place-self:center}.self-stretch-sm{place-self:stretch}.self-start-sm{place-self:flex-start}.self-end-sm{place-self:flex-end}}@media (min-width:768px){.self-auto-md{place-self:auto}.self-normal-md{place-self:normal}.self-base-md{place-self:baseline}.self-center-md{place-self:center}.self-stretch-md{place-self:stretch}.self-start-md{place-self:flex-start}.self-end-md{place-self:flex-end}}@media (min-width:992px){.self-auto-lg{place-self:auto}.self-normal-lg{place-self:normal}.self-base-lg{place-self:baseline}.self-center-lg{place-self:center}.self-stretch-lg{place-self:stretch}.self-start-lg{place-self:flex-start}.self-end-lg{place-self:flex-end}}@media (min-width:1200px){.self-auto-xl{place-self:auto}.self-normal-xl{place-self:normal}.self-base-xl{place-self:baseline}.self-center-xl{place-self:center}.self-stretch-xl{place-self:stretch}.self-start-xl{place-self:flex-start}.self-end-xl{place-self:flex-end}}@media (min-width:1600px){.self-auto-wd{place-self:auto}.self-normal-wd{place-self:normal}.self-base-wd{place-self:baseline}.self-center-wd{place-self:center}.self-stretch-wd{place-self:stretch}.self-start-wd{place-self:flex-start}.self-end-wd{place-self:flex-end}}[class*=container]{--container-max-width:100%}[class*=container]{margin:auto;max-width:var(--container-max-width)}[class*=container-][class*="-50tn"]{max-width:50%}[class*=container-][class*="-60tn"]{max-width:60%}[class*=container-][class*="-70tn"]{max-width:70%}[class*=container-][class*="-80tn"]{max-width:80%}[class*=container-][class*="-90tn"]{max-width:90%}@media (min-width:576px){[class*=container-][class*="-50sm"]{max-width:50%}[class*=container-][class*="-60sm"]{max-width:60%}[class*=container-][class*="-70sm"]{max-width:70%}[class*=container-][class*="-80sm"]{max-width:80%}[class*=container-][class*="-90sm"]{max-width:90%}}@media (min-width:768px){[class*=container-][class*="-50md"]{max-width:50%}[class*=container-][class*="-60md"]{max-width:60%}[class*=container-][class*="-70md"]{max-width:70%}[class*=container-][class*="-80md"]{max-width:80%}[class*=container-][class*="-90md"]{max-width:90%}}@media (min-width:992px){[class*=container-][class*="-50lg"]{max-width:50%}[class*=container-][class*="-60lg"]{max-width:60%}[class*=container-][class*="-70lg"]{max-width:70%}[class*=container-][class*="-80lg"]{max-width:80%}[class*=container-][class*="-90lg"]{max-width:90%}}@media (min-width:1200px){[class*=container-][class*="-50xl"]{max-width:50%}[class*=container-][class*="-60xl"]{max-width:60%}[class*=container-][class*="-70xl"]{max-width:70%}[class*=container-][class*="-80xl"]{max-width:80%}[class*=container-][class*="-90xl"]{max-width:90%}}@media (min-width:1600px){[class*=container-][class*="-50wd"]{max-width:50%}[class*=container-][class*="-60wd"]{max-width:60%}[class*=container-][class*="-70wd"]{max-width:70%}[class*=container-][class*="-80wd"]{max-width:80%}[class*=container-][class*="-90wd"]{max-width:90%}}[class*=mar-]{--margin-none:0;--margin-sm:5px;--margin-md:10px;--margin-lg:20px;--margin-top-sm:5px;--margin-top-md:10px;--margin-top-lg:20px;--margin-right-sm:5px;--margin-right-md:10px;--margin-right-lg:20px;--margin-bot-sm:5px;--margin-bot-md:10px;--margin-bot-lg:20px;--margin-left-sm:5px;--margin-left-md:10px;--margin-left-lg:20px}.mar-none,.mar-none-all>*{margin:var(--margin-none)}.mar-top-none,.mar-top-none-all>*{margin-top:var(--margin-none)}.mar-right-none,.mar-right-none-all>*{margin-right:var(--margin-none)}.mar-bottom-none,.mar-bottom-none-all>*{margin-bottom:var(--margin-none)}.mar-left-none,.mar-left-none-all>*{margin-left:var(--margin-none)}.mar-sm,.mar-sm-all>*{margin:var(--margin-sm)}.mar-md,.mar-md-all>*{margin:var(--margin-md)}.mar-lg,.mar-lg-all>*{margin:var(--margin-lg)}.mar-top-sm,.mar-top-sm-all>*{margin-top:var(--margin-top-sm)}.mar-top-md,.mar-top-md-all>*{margin-top:var(--margin-top-md)}.mar-top-lg,.mar-top-lg-all>*{margin-top:var(--margin-top-lg)}.mar-right-sm,.mar-right-sm-all>*{margin-right:var(--margin-right-sm)}.mar-right-md,.mar-right-md-all>*{margin-right:var(--margin-right-md)}.mar-right-lg,.mar-right-lg-all>*{margin-right:var(--margin-right-lg)}.mar-bot-sm,.mar-bot-sm-all>*{margin-bottom:var(--margin-bot-sm)}.mar-bot-md,.mar-bot-md-all>*{margin-bottom:var(--margin-bot-md)}.mar-bot-lg,.mar-bot-lg-all>*{margin-bottom:var(--margin-bot-lg)}.mar-left-sm,.mar-left-sm-all>*{margin-left:var(--margin-left-sm)}.mar-left-md,.mar-left-md-all>*{margin-left:var(--margin-left-md)}.mar-left-lg,.mar-left-lg-all>*{margin-left:var(--margin-left-lg)}[class*=bord]{--border-width-sm:1px;--border-width-md:2px;--border-width-lg:5px;--border-radius-square:unset;--border-radius-curve:5px;--border-radius-round:10px;--border-radius-circle:50%}.bord-dash,.bord-dash-all>*,.bord-dash-many:focus>*,.bord-dash-many:hover>*,.bord-dash-on:focus,.bord-dash-on:hover,.bord-dash-one>:focus,.bord-dash-one>:hover,:focus>.bord-dash-in,:hover>.bord-dash-in{border-style:dashed}.bord-dot,.bord-dot-all>*,.bord-dot-many:focus>*,.bord-dot-many:hover>*,.bord-dot-on:focus,.bord-dot-on:hover,.bord-dot-one>:focus,.bord-dot-one>:hover,:focus>.bord-dot-in,:hover>.bord-dot-in{border-style:dotted}.bord-solid,.bord-solid-all>*,.bord-solid-many:focus>*,.bord-solid-many:hover>*,.bord-solid-on:focus,.bord-solid-on:hover,.bord-solid-one>:focus,.bord-solid-one>:hover,:focus>.bord-solid-in,:hover>.bord-solid-in{border-style:solid}.bord-double,.bord-double-all>*,.bord-double-many:focus>*,.bord-double-many:hover>*,.bord-double-on:focus,.bord-double-on:hover,.bord-double-one>:focus,.bord-double-one>:hover,:focus>.bord-double-in,:hover>.bord-double-in{border-style:double}.bord-groove,.bord-groove-all>*,.bord-groove-many:focus>*,.bord-groove-many:hover>*,.bord-groove-on:focus,.bord-groove-on:hover,.bord-groove-one>:focus,.bord-groove-one>:hover,:focus>.bord-groove-in,:hover>.bord-groove-in{border-style:groove}.bord-ridge,.bord-ridge-all>*,.bord-ridge-many:focus>*,.bord-ridge-many:hover>*,.bord-ridge-on:focus,.bord-ridge-on:hover,.bord-ridge-one>:focus,.bord-ridge-one>:hover,:focus>.bord-ridge-in,:hover>.bord-ridge-in{border-style:ridge}.bord-in,.bord-in-all>*,.bord-in-many:focus>*,.bord-in-many:hover>*,.bord-in-on:focus,.bord-in-on:hover,.bord-in-one>:focus,.bord-in-one>:hover,:focus>.bord-in-in,:hover>.bord-in-in{border-style:inset}.bord-out,.bord-out-all>*,.bord-out-many:focus>*,.bord-out-many:hover>*,.bord-out-on:focus,.bord-out-on:hover,.bord-out-one>:focus,.bord-out-one>:hover,:focus>.bord-out-in,:hover>.bord-out-in{border-style:outset}.bord-sm,.bord-sm-all>*,.bord-sm-many:focus>*,.bord-sm-many:hover>*,.bord-sm-on:focus,.bord-sm-on:hover,.bord-sm-one>:focus,.bord-sm-one>:hover,:focus>.bord-sm-in,:hover>.bord-sm-in{border-width:1px}.bord-md,.bord-md-all>*,.bord-md-many:focus>*,.bord-md-many:hover>*,.bord-md-on:focus,.bord-md-on:hover,.bord-md-one>:focus,.bord-md-one>:hover,:focus>.bord-md-in,:hover>.bord-md-in{border-width:2px}.bord-lg,.bord-lg-all>*,.bord-lg-many:focus>*,.bord-lg-many:hover>*,.bord-lg-on:focus,.bord-lg-on:hover,.bord-lg-one>:focus,.bord-lg-one>:hover,:focus>.bord-lg-in,:hover>.bord-lg-in{border-width:5px}.bord-red,.bord-red-all>*,.bord-red-many:focus>*,.bord-red-many:hover>*,.bord-red-on:focus,.bord-red-on:hover,.bord-red-one>:focus,.bord-red-one>:hover,:focus>.bord-red-in,:hover>.bord-red-in{border-color:var(--red)}.bord-orange,.bord-orange-all>*,.bord-orange-many:focus>*,.bord-orange-many:hover>*,.bord-orange-on:focus,.bord-orange-on:hover,.bord-orange-one>:focus,.bord-orange-one>:hover,:focus>.bord-orange-in,:hover>.bord-orange-in{border-color:var(--orange)}.bord-yellow,.bord-yellow-all>*,.bord-yellow-many:focus>*,.bord-yellow-many:hover>*,.bord-yellow-on:focus,.bord-yellow-on:hover,.bord-yellow-one>:focus,.bord-yellow-one>:hover,:focus>.bord-yellow-in,:hover>.bord-yellow-in{border-color:var(--yellow)}.bord-lime,.bord-lime-all>*,.bord-lime-many:focus>*,.bord-lime-many:hover>*,.bord-lime-on:focus,.bord-lime-on:hover,.bord-lime-one>:focus,.bord-lime-one>:hover,:focus>.bord-lime-in,:hover>.bord-lime-in{border-color:var(--lime)}.bord-green,.bord-green-all>*,.bord-green-many:focus>*,.bord-green-many:hover>*,.bord-green-on:focus,.bord-green-on:hover,.bord-green-one>:focus,.bord-green-one>:hover,:focus>.bord-green-in,:hover>.bord-green-in{border-color:var(--green)}.bord-aqua,.bord-aqua-all>*,.bord-aqua-many:focus>*,.bord-aqua-many:hover>*,.bord-aqua-on:focus,.bord-aqua-on:hover,.bord-aqua-one>:focus,.bord-aqua-one>:hover,:focus>.bord-aqua-in,:hover>.bord-aqua-in{border-color:var(--aqua)}.bord-cyan,.bord-cyan-all>*,.bord-cyan-many:focus>*,.bord-cyan-many:hover>*,.bord-cyan-on:focus,.bord-cyan-on:hover,.bord-cyan-one>:focus,.bord-cyan-one>:hover,:focus>.bord-cyan-in,:hover>.bord-cyan-in{border-color:var(--cyan)}.bord-sky,.bord-sky-all>*,.bord-sky-many:focus>*,.bord-sky-many:hover>*,.bord-sky-on:focus,.bord-sky-on:hover,.bord-sky-one>:focus,.bord-sky-one>:hover,:focus>.bord-sky-in,:hover>.bord-sky-in{border-color:var(--sky)}.bord-blue,.bord-blue-all>*,.bord-blue-many:focus>*,.bord-blue-many:hover>*,.bord-blue-on:focus,.bord-blue-on:hover,.bord-blue-one>:focus,.bord-blue-one>:hover,:focus>.bord-blue-in,:hover>.bord-blue-in{border-color:var(--blue)}.bord-indigo,.bord-indigo-all>*,.bord-indigo-many:focus>*,.bord-indigo-many:hover>*,.bord-indigo-on:focus,.bord-indigo-on:hover,.bord-indigo-one>:focus,.bord-indigo-one>:hover,:focus>.bord-indigo-in,:hover>.bord-indigo-in{border-color:var(--indigo)}.bord-magenta,.bord-magenta-all>*,.bord-magenta-many:focus>*,.bord-magenta-many:hover>*,.bord-magenta-on:focus,.bord-magenta-on:hover,.bord-magenta-one>:focus,.bord-magenta-one>:hover,:focus>.bord-magenta-in,:hover>.bord-magenta-in{border-color:var(--magenta)}.bord-pink,.bord-pink-all>*,.bord-pink-many:focus>*,.bord-pink-many:hover>*,.bord-pink-on:focus,.bord-pink-on:hover,.bord-pink-one>:focus,.bord-pink-one>:hover,:focus>.bord-pink-in,:hover>.bord-pink-in{border-color:var(--pink)}.bord-black,.bord-black-all>*,.bord-black-many:focus>*,.bord-black-many:hover>*,.bord-black-on:focus,.bord-black-on:hover,.bord-black-one>:focus,.bord-black-one>:hover,:focus>.bord-black-in,:hover>.bord-black-in{border-color:var(--black)}.bord-slate,.bord-slate-all>*,.bord-slate-many:focus>*,.bord-slate-many:hover>*,.bord-slate-on:focus,.bord-slate-on:hover,.bord-slate-one>:focus,.bord-slate-one>:hover,:focus>.bord-slate-in,:hover>.bord-slate-in{border-color:var(--slate)}.bord-gray,.bord-gray-all>*,.bord-gray-many:focus>*,.bord-gray-many:hover>*,.bord-gray-on:focus,.bord-gray-on:hover,.bord-gray-one>:focus,.bord-gray-one>:hover,:focus>.bord-gray-in,:hover>.bord-gray-in{border-color:var(--gray)}.bord-silver,.bord-silver-all>*,.bord-silver-many:focus>*,.bord-silver-many:hover>*,.bord-silver-on:focus,.bord-silver-on:hover,.bord-silver-one>:focus,.bord-silver-one>:hover,:focus>.bord-silver-in,:hover>.bord-silver-in{border-color:var(--silver)}.bord-white,.bord-white-all>*,.bord-white-many:focus>*,.bord-white-many:hover>*,.bord-white-on:focus,.bord-white-on:hover,.bord-white-one>:focus,.bord-white-one>:hover,:focus>.bord-white-in,:hover>.bord-white-in{border-color:var(--white)}.bord-square,.bord-square-all>*,.bord-square-many:focus>*,.bord-square-many:hover>*,.bord-square-on:focus,.bord-square-on:hover,.bord-square-one>:focus,.bord-square-one>:hover,:focus>.bord-square-in,:hover>.bord-square-in{border-radius:unset}.bord-curve,.bord-curve-all>*,.bord-curve-many:focus>*,.bord-curve-many:hover>*,.bord-curve-on:focus,.bord-curve-on:hover,.bord-curve-one>:focus,.bord-curve-one>:hover,:focus>.bord-curve-in,:hover>.bord-curve-in{border-radius:5px}.bord-round,.bord-round-all>*,.bord-round-many:focus>*,.bord-round-many:hover>*,.bord-round-on:focus,.bord-round-on:hover,.bord-round-one>:focus,.bord-round-one>:hover,:focus>.bord-round-in,:hover>.bord-round-in{border-radius:10px}.bord-circle,.bord-circle-all>*,.bord-circle-many:focus>*,.bord-circle-many:hover>*,.bord-circle-on:focus,.bord-circle-on:hover,.bord-circle-one>:focus,.bord-circle-one>:hover,:focus>.bord-circle-in,:hover>.bord-circle-in{border-radius:50%}[class*=pad-]{--padding-none:0;--padding-sm:5px;--padding-md:10px;--padding-lg:20px;--padding-top-sm:5px;--padding-top-md:10px;--padding-top-lg:20px;--padding-right-sm:5px;--padding-right-md:10px;--padding-right-lg:20px;--padding-bot-sm:5px;--padding-bot-md:10px;--padding-bot-lg:20px;--padding-left-sm:5px;--padding-left-md:10px;--padding-left-lg:20px}.pad-none,.pad-none-all>*{padding:var(--padding-none)}.pad-top-none,.pad-top-none-all>*{padding-top:var(--padding-none)}.pad-right-none,.pad-right-none-all>*{padding-right:var(--padding-none)}.pad-bottom-none,.pad-bottom-none-all>*{padding-bottom:var(--padding-none)}.pad-left-none,.pad-left-none-all>*{padding-left:var(--padding-none)}.pad-sm,.pad-sm-all>*{padding:var(--padding-sm)}.pad-md,.pad-md-all>*{padding:var(--padding-md)}.pad-lg,.pad-lg-all>*{padding:var(--padding-lg)}.pad-top-sm,.pad-top-sm-all>*{padding-top:var(--padding-top-sm)}.pad-top-md,.pad-top-md-all>*{padding-top:var(--padding-top-md)}.pad-top-lg,.pad-top-lg-all>*{padding-top:var(--padding-top-lg)}.pad-right-sm,.pad-right-sm-all>*{padding-right:var(--padding-right-sm)}.pad-right-md,.pad-right-md-all>*{padding-right:var(--padding-right-md)}.pad-right-lg,.pad-right-lg-all>*{padding-right:var(--padding-right-lg)}.pad-bot-sm,.pad-bot-sm-all>*{padding-bottom:var(--padding-bot-sm)}.pad-bot-md,.pad-bot-md-all>*{padding-bottom:var(--padding-bot-md)}.pad-bot-lg,.pad-bot-lg-all>*{padding-bottom:var(--padding-bot-lg)}.pad-left-sm,.pad-left-sm-all>*{padding-left:var(--padding-left-sm)}.pad-left-md,.pad-left-md-all>*{padding-left:var(--padding-left-md)}.pad-left-lg,.pad-left-lg-all>*{padding-left:var(--padding-left-lg)}[class*=height-]{--height-sm:10vh;--height-md:20vh;--height-lg:50vh}.height-sm,.height-sm-all>*{height:var(--height-sm)}.height-md,.height-md-all>*{height:var(--height-md)}.height-lg,.height-lg-all>*{height:var(--height-lg)}[class*=max-h-]{--max-height-sm:10vh;--max-height-md:20vh;--max-height-lg:50vh}.max-h-sm,.max-h-sm-all>*{max-height:var(--max-height-sm)}.max-h-md,.max-h-md-all>*{max-height:var(--max-height-md)}.max-h-lg,.max-h-lg-all>*{max-height:var(--max-height-lg)}[class*=min-h-]{--min-height-sm:10vh;--min-height-md:20vh;--min-height-lg:50vh}.min-h-sm,.min-h-sm-all>*{min-height:var(--min-height-sm)}.min-h-md,.min-h-md-all>*{min-height:var(--min-height-md)}.min-h-lg,.min-h-lg-all>*{min-height:var(--min-height-lg)}[class*=width-]{--width-sm:10vw;--width-md:20vw;--width-lg:50vw}.width-sm,.width-sm-all>*{width:var(--width-sm)}.width-md,.width-md-all>*{width:var(--width-md)}.width-lg,.width-lg-all>*{width:var(--width-lg)}[class*=max-w-]{--max-width-sm:10vw;--max-width-md:20vw;--max-width-lg:50vw}.max-w-sm,.max-w-sm-all>*{max-width:var(--max-width-sm)}.max-w-md,.max-w-md-all>*{max-width:var(--max-width-md)}.max-w-lg,.max-w-lg-all>*{max-width:var(--max-width-lg)}[class*=min-w-]{--min-width-sm:10vw;--min-width-md:20vw;--min-width-lg:50vw}.min-w-sm,.min-w-sm-all>*{min-width:var(--min-width-sm)}.min-w-md,.min-w-md-all>*{min-width:var(--min-width-md)}.min-w-lg,.min-w-lg-all>*{min-width:var(--min-width-lg)}:root{--slideT:translate(0, 10vh);--slideR:translate(-10vw, 0);--slideB:translate(0, -10vh);--slideL:translate(10vw, 0);--turn:rotate3d(0, 0, 1, 360deg);--turnX:rotate3d(1, 0, 0, 360deg);--turnY:rotate3d(0, 1, 0, 360deg);--turnXY:rotate3d(1, 1, 0, 360deg);--turnXZ:rotate3d(1, 0, 1, 360deg);--turnYZ:rotate3d(0, 1, 1, 360deg);--turn3D:rotate3d(1, 1, 1, 360deg);--bounce:scale(-1, -1);--grow:scale(0.5, 0.5);--shrink:scale(1.5, 1.5);--flipX:scale(1, -1);--flipY:scale(-1, 1);--openX:scale(1, 0);--openY:scale(0, 1);--flipperX:scale(0, -1);--flipperY:scale(-1, 0);--twistT:skew(-90deg, -90deg);--twistR:skew(90deg, -90deg);--twistB:skew(90deg, 90deg);--twistL:skew(-90deg, 90deg)}@-webkit-keyframes slideT{from{transform:var(--slideT)}}@keyframes slideT{from{transform:var(--slideT)}}@-webkit-keyframes slideR{from{transform:var(--slideR)}}@keyframes slideR{from{transform:var(--slideR)}}@-webkit-keyframes slideB{from{transform:var(--slideB)}}@keyframes slideB{from{transform:var(--slideB)}}@-webkit-keyframes slideL{from{transform:var(--slideL)}}@keyframes slideL{from{transform:var(--slideL)}}@-webkit-keyframes turn{from{transform:var(--turn)}}@keyframes turn{from{transform:var(--turn)}}@-webkit-keyframes turnX{from{transform:var(--turnX)}}@keyframes turnX{from{transform:var(--turnX)}}@-webkit-keyframes turnY{from{transform:var(--turnY)}}@keyframes turnY{from{transform:var(--turnY)}}@-webkit-keyframes turnXY{from{transform:var(--turnXY)}}@keyframes turnXY{from{transform:var(--turnXY)}}@-webkit-keyframes turnXZ{from{transform:var(--turnXZ)}}@keyframes turnXZ{from{transform:var(--turnXZ)}}@-webkit-keyframes turnYZ{from{transform:var(--turnYZ)}}@keyframes turnYZ{from{transform:var(--turnYZ)}}@-webkit-keyframes turn3D{from{transform:var(--turn3D)}}@keyframes turn3D{from{transform:var(--turn3D)}}@-webkit-keyframes bounce{from{transform:var(--bounce)}}@keyframes bounce{from{transform:var(--bounce)}}@-webkit-keyframes grow{from{transform:var(--grow)}}@keyframes grow{from{transform:var(--grow)}}@-webkit-keyframes shrink{from{transform:var(--shrink)}}@keyframes shrink{from{transform:var(--shrink)}}@-webkit-keyframes flipX{from{transform:var(--flipX)}}@keyframes flipX{from{transform:var(--flipX)}}@-webkit-keyframes flipY{from{transform:var(--flipY)}}@keyframes flipY{from{transform:var(--flipY)}}@-webkit-keyframes openX{from{transform:var(--openX)}}@keyframes openX{from{transform:var(--openX)}}@-webkit-keyframes openY{from{transform:var(--openY)}}@keyframes openY{from{transform:var(--openY)}}@-webkit-keyframes flipperX{from{transform:var(--flipperX)}}@keyframes flipperX{from{transform:var(--flipperX)}}@-webkit-keyframes flipperY{from{transform:var(--flipperY)}}@keyframes flipperY{from{transform:var(--flipperY)}}@-webkit-keyframes twistT{from{transform:var(--twistT)}}@keyframes twistT{from{transform:var(--twistT)}}@-webkit-keyframes twistR{from{transform:var(--twistR)}}@keyframes twistR{from{transform:var(--twistR)}}@-webkit-keyframes twistB{from{transform:var(--twistB)}}@keyframes twistB{from{transform:var(--twistB)}}@-webkit-keyframes twistL{from{transform:var(--twistL)}}@keyframes twistL{from{transform:var(--twistL)}}[class*=anima-]{--animation-duration:2s;--animation-duration-sm:500ms;--animation-duration-md:1s;--animation-duration-lg:2s;--animation-timing-function-linear:linear;--animation-timing-function-in:ease-in;--animation-timing-function-out:ease-out;--animation-timing-function-inout:ease-in-out;--animation-timing-function-start:step-start;--animation-timing-function-end:step-end;--animation-iteration-count-few:2;--animation-iteration-count-many:5;--animation-iteration-count-loop:infinite;--animation-delay-min:500ms;--animation-delay-max:1s}[class*=anima]{-webkit-animation-duration:var(--animation-duration);animation-duration:var(--animation-duration)}.anima-slideT,.anima-slideT-all>*,.anima-slideT-many:focus>*,.anima-slideT-many:hover>*,.anima-slideT-on:focus,.anima-slideT-on:hover,.anima-slideT-one>:focus,.anima-slideT-one>:hover,:focus>.anima-slideT-in,:hover>.anima-slideT-in{-webkit-animation-name:slideT;animation-name:slideT}.anima-slideR,.anima-slideR-all>*,.anima-slideR-many:focus>*,.anima-slideR-many:hover>*,.anima-slideR-on:focus,.anima-slideR-on:hover,.anima-slideR-one>:focus,.anima-slideR-one>:hover,:focus>.anima-slideR-in,:hover>.anima-slideR-in{-webkit-animation-name:slideR;animation-name:slideR}.anima-slideB,.anima-slideB-all>*,.anima-slideB-many:focus>*,.anima-slideB-many:hover>*,.anima-slideB-on:focus,.anima-slideB-on:hover,.anima-slideB-one>:focus,.anima-slideB-one>:hover,:focus>.anima-slideB-in,:hover>.anima-slideB-in{-webkit-animation-name:slideB;animation-name:slideB}.anima-slideL,.anima-slideL-all>*,.anima-slideL-many:focus>*,.anima-slideL-many:hover>*,.anima-slideL-on:focus,.anima-slideL-on:hover,.anima-slideL-one>:focus,.anima-slideL-one>:hover,:focus>.anima-slideL-in,:hover>.anima-slideL-in{-webkit-animation-name:slideL;animation-name:slideL}.anima-turn,.anima-turn-all>*,.anima-turn-many:focus>*,.anima-turn-many:hover>*,.anima-turn-on:focus,.anima-turn-on:hover,.anima-turn-one>:focus,.anima-turn-one>:hover,:focus>.anima-turn-in,:hover>.anima-turn-in{-webkit-animation-name:turn;animation-name:turn}.anima-turnX,.anima-turnX-all>*,.anima-turnX-many:focus>*,.anima-turnX-many:hover>*,.anima-turnX-on:focus,.anima-turnX-on:hover,.anima-turnX-one>:focus,.anima-turnX-one>:hover,:focus>.anima-turnX-in,:hover>.anima-turnX-in{-webkit-animation-name:turnX;animation-name:turnX}.anima-turnY,.anima-turnY-all>*,.anima-turnY-many:focus>*,.anima-turnY-many:hover>*,.anima-turnY-on:focus,.anima-turnY-on:hover,.anima-turnY-one>:focus,.anima-turnY-one>:hover,:focus>.anima-turnY-in,:hover>.anima-turnY-in{-webkit-animation-name:turnY;animation-name:turnY}.anima-turnXY,.anima-turnXY-all>*,.anima-turnXY-many:focus>*,.anima-turnXY-many:hover>*,.anima-turnXY-on:focus,.anima-turnXY-on:hover,.anima-turnXY-one>:focus,.anima-turnXY-one>:hover,:focus>.anima-turnXY-in,:hover>.anima-turnXY-in{-webkit-animation-name:turnXY;animation-name:turnXY}.anima-turnXZ,.anima-turnXZ-all>*,.anima-turnXZ-many:focus>*,.anima-turnXZ-many:hover>*,.anima-turnXZ-on:focus,.anima-turnXZ-on:hover,.anima-turnXZ-one>:focus,.anima-turnXZ-one>:hover,:focus>.anima-turnXZ-in,:hover>.anima-turnXZ-in{-webkit-animation-name:turnXZ;animation-name:turnXZ}.anima-turnYZ,.anima-turnYZ-all>*,.anima-turnYZ-many:focus>*,.anima-turnYZ-many:hover>*,.anima-turnYZ-on:focus,.anima-turnYZ-on:hover,.anima-turnYZ-one>:focus,.anima-turnYZ-one>:hover,:focus>.anima-turnYZ-in,:hover>.anima-turnYZ-in{-webkit-animation-name:turnYZ;animation-name:turnYZ}.anima-turn3D,.anima-turn3D-all>*,.anima-turn3D-many:focus>*,.anima-turn3D-many:hover>*,.anima-turn3D-on:focus,.anima-turn3D-on:hover,.anima-turn3D-one>:focus,.anima-turn3D-one>:hover,:focus>.anima-turn3D-in,:hover>.anima-turn3D-in{-webkit-animation-name:turn3D;animation-name:turn3D}.anima-bounce,.anima-bounce-all>*,.anima-bounce-many:focus>*,.anima-bounce-many:hover>*,.anima-bounce-on:focus,.anima-bounce-on:hover,.anima-bounce-one>:focus,.anima-bounce-one>:hover,:focus>.anima-bounce-in,:hover>.anima-bounce-in{-webkit-animation-name:bounce;animation-name:bounce}.anima-grow,.anima-grow-all>*,.anima-grow-many:focus>*,.anima-grow-many:hover>*,.anima-grow-on:focus,.anima-grow-on:hover,.anima-grow-one>:focus,.anima-grow-one>:hover,:focus>.anima-grow-in,:hover>.anima-grow-in{-webkit-animation-name:grow;animation-name:grow}.anima-shrink,.anima-shrink-all>*,.anima-shrink-many:focus>*,.anima-shrink-many:hover>*,.anima-shrink-on:focus,.anima-shrink-on:hover,.anima-shrink-one>:focus,.anima-shrink-one>:hover,:focus>.anima-shrink-in,:hover>.anima-shrink-in{-webkit-animation-name:shrink;animation-name:shrink}.anima-flipX,.anima-flipX-all>*,.anima-flipX-many:focus>*,.anima-flipX-many:hover>*,.anima-flipX-on:focus,.anima-flipX-on:hover,.anima-flipX-one>:focus,.anima-flipX-one>:hover,:focus>.anima-flipX-in,:hover>.anima-flipX-in{-webkit-animation-name:flipX;animation-name:flipX}.anima-flipY,.anima-flipY-all>*,.anima-flipY-many:focus>*,.anima-flipY-many:hover>*,.anima-flipY-on:focus,.anima-flipY-on:hover,.anima-flipY-one>:focus,.anima-flipY-one>:hover,:focus>.anima-flipY-in,:hover>.anima-flipY-in{-webkit-animation-name:flipY;animation-name:flipY}.anima-openX,.anima-openX-all>*,.anima-openX-many:focus>*,.anima-openX-many:hover>*,.anima-openX-on:focus,.anima-openX-on:hover,.anima-openX-one>:focus,.anima-openX-one>:hover,:focus>.anima-openX-in,:hover>.anima-openX-in{-webkit-animation-name:openX;animation-name:openX}.anima-openY,.anima-openY-all>*,.anima-openY-many:focus>*,.anima-openY-many:hover>*,.anima-openY-on:focus,.anima-openY-on:hover,.anima-openY-one>:focus,.anima-openY-one>:hover,:focus>.anima-openY-in,:hover>.anima-openY-in{-webkit-animation-name:openY;animation-name:openY}.anima-flipperX,.anima-flipperX-all>*,.anima-flipperX-many:focus>*,.anima-flipperX-many:hover>*,.anima-flipperX-on:focus,.anima-flipperX-on:hover,.anima-flipperX-one>:focus,.anima-flipperX-one>:hover,:focus>.anima-flipperX-in,:hover>.anima-flipperX-in{-webkit-animation-name:flipperX;animation-name:flipperX}.anima-flipperY,.anima-flipperY-all>*,.anima-flipperY-many:focus>*,.anima-flipperY-many:hover>*,.anima-flipperY-on:focus,.anima-flipperY-on:hover,.anima-flipperY-one>:focus,.anima-flipperY-one>:hover,:focus>.anima-flipperY-in,:hover>.anima-flipperY-in{-webkit-animation-name:flipperY;animation-name:flipperY}.anima-twistT,.anima-twistT-all>*,.anima-twistT-many:focus>*,.anima-twistT-many:hover>*,.anima-twistT-on:focus,.anima-twistT-on:hover,.anima-twistT-one>:focus,.anima-twistT-one>:hover,:focus>.anima-twistT-in,:hover>.anima-twistT-in{-webkit-animation-name:twistT;animation-name:twistT}.anima-twistR,.anima-twistR-all>*,.anima-twistR-many:focus>*,.anima-twistR-many:hover>*,.anima-twistR-on:focus,.anima-twistR-on:hover,.anima-twistR-one>:focus,.anima-twistR-one>:hover,:focus>.anima-twistR-in,:hover>.anima-twistR-in{-webkit-animation-name:twistR;animation-name:twistR}.anima-twistB,.anima-twistB-all>*,.anima-twistB-many:focus>*,.anima-twistB-many:hover>*,.anima-twistB-on:focus,.anima-twistB-on:hover,.anima-twistB-one>:focus,.anima-twistB-one>:hover,:focus>.anima-twistB-in,:hover>.anima-twistB-in{-webkit-animation-name:twistB;animation-name:twistB}.anima-twistL,.anima-twistL-all>*,.anima-twistL-many:focus>*,.anima-twistL-many:hover>*,.anima-twistL-on:focus,.anima-twistL-on:hover,.anima-twistL-one>:focus,.anima-twistL-one>:hover,:focus>.anima-twistL-in,:hover>.anima-twistL-in{-webkit-animation-name:twistL;animation-name:twistL}.anima-sm{-webkit-animation-duration:var(--animation-duration-sm);animation-duration:var(--animation-duration-sm)}.anima-md{-webkit-animation-duration:var(--animation-duration-md);animation-duration:var(--animation-duration-md)}.anima-lg{-webkit-animation-duration:var(--animation-duration-lg);animation-duration:var(--animation-duration-lg)}.anima-linear{-webkit-animation-timing-function:var(--animation-timing-function-linear);animation-timing-function:var(--animation-timing-function-linear)}.anima-in{-webkit-animation-timing-function:var(--animation-timing-function-in);animation-timing-function:var(--animation-timing-function-in)}.anima-out{-webkit-animation-timing-function:var(--animation-timing-function-out);animation-timing-function:var(--animation-timing-function-out)}.anima-inout{-webkit-animation-timing-function:var(--animation-timing-function-inout);animation-timing-function:var(--animation-timing-function-inout)}.anima-start{-webkit-animation-timing-function:var(--animation-timing-function-start);animation-timing-function:var(--animation-timing-function-start)}.anima-end{-webkit-animation-timing-function:var(--animation-timing-function-end);animation-timing-function:var(--animation-timing-function-end)}.anima-few{-webkit-animation-iteration-count:var(--animation-iteration-count-few);animation-iteration-count:var(--animation-iteration-count-few)}.anima-many{-webkit-animation-iteration-count:var(--animation-iteration-count-many);animation-iteration-count:var(--animation-iteration-count-many)}.anima-loop{-webkit-animation-iteration-count:var(--animation-iteration-count-loop);animation-iteration-count:var(--animation-iteration-count-loop)}.anima-min{-webkit-animation-delay:var(--animation-delay-min);animation-delay:var(--animation-delay-min)}.anima-max{-webkit-animation-delay:var(--animation-delay-max);animation-delay:var(--animation-delay-max)}.anima-alt{-webkit-animation-direction:alternate;animation-direction:alternate}.anima-rev{animation-direction:reverse}.anima-altrev{animation-direction:alternate-reverse} \ No newline at end of file +/*! animadio v5.4.0 | https://animadio.org | MIT License *//*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}:root{--red-hsl:348,83%,47%;--orange-hsl:33,100%,50%;--yellow-hsl:51,100%,50%;--green-hsl:120,61%,50%;--sky-hsl:195,100%,50%;--blue-hsl:210,100%,56%;--violet-hsl:271,76%,53%;--pink-hsl:328,100%,54%;--black-hsl:0,0%,0%;--gray-hsl:0,0%,33%;--silver-hsl:0,0%,67%;--white-hsl:0,0%,100%;--red:hsl(var(--red-hsl));--orange:hsl(var(--orange-hsl));--yellow:hsl(var(--yellow-hsl));--green:hsl(var(--green-hsl));--sky:hsl(var(--sky-hsl));--blue:hsl(var(--blue-hsl));--violet:hsl(var(--violet-hsl));--pink:hsl(var(--pink-hsl));--black:hsl(var(--black-hsl));--gray:hsl(var(--gray-hsl));--silver:hsl(var(--silver-hsl));--white:hsl(var(--white-hsl));--dark:0.8;--light:0.2;--red-dark:hsla(var(--red-hsl), var(--dark));--red-light:hsla(var(--red-hsl), var(--light));--orange-dark:hsla(var(--orange-hsl), var(--dark));--orange-light:hsla(var(--orange-hsl), var(--light));--yellow-dark:hsla(var(--yellow-hsl), var(--dark));--yellow-light:hsla(var(--yellow-hsl), var(--light));--green-dark:hsla(var(--green-hsl), var(--dark));--green-light:hsla(var(--green-hsl), var(--light));--sky-dark:hsla(var(--sky-hsl), var(--dark));--sky-light:hsla(var(--sky-hsl), var(--light));--blue-dark:hsla(var(--blue-hsl), var(--dark));--blue-light:hsla(var(--blue-hsl), var(--light));--violet-dark:hsla(var(--violet-hsl), var(--dark));--violet-light:hsla(var(--violet-hsl), var(--light));--pink-dark:hsla(var(--pink-hsl), var(--dark));--pink-light:hsla(var(--pink-hsl), var(--light));--black-dark:hsla(var(--black-hsl), var(--dark));--black-light:hsla(var(--black-hsl), var(--light));--gray-dark:hsla(var(--gray-hsl), var(--dark));--gray-light:hsla(var(--gray-hsl), var(--light));--silver-dark:hsla(var(--silver-hsl), var(--dark));--silver-light:hsla(var(--silver-hsl), var(--light));--white-dark:hsla(var(--white-hsl), var(--dark));--white-light:hsla(var(--white-hsl), var(--light))}.red,.red-all>*,.red-many:focus>*,.red-many:hover>*,.red-on:focus,.red-on:hover,.red-one>:focus,.red-one>:hover,:focus>.red-in,:hover>.red-in{color:var(--red)}.orange,.orange-all>*,.orange-many:focus>*,.orange-many:hover>*,.orange-on:focus,.orange-on:hover,.orange-one>:focus,.orange-one>:hover,:focus>.orange-in,:hover>.orange-in{color:var(--orange)}.yellow,.yellow-all>*,.yellow-many:focus>*,.yellow-many:hover>*,.yellow-on:focus,.yellow-on:hover,.yellow-one>:focus,.yellow-one>:hover,:focus>.yellow-in,:hover>.yellow-in{color:var(--yellow)}.green,.green-all>*,.green-many:focus>*,.green-many:hover>*,.green-on:focus,.green-on:hover,.green-one>:focus,.green-one>:hover,:focus>.green-in,:hover>.green-in{color:var(--green)}.sky,.sky-all>*,.sky-many:focus>*,.sky-many:hover>*,.sky-on:focus,.sky-on:hover,.sky-one>:focus,.sky-one>:hover,:focus>.sky-in,:hover>.sky-in{color:var(--sky)}.blue,.blue-all>*,.blue-many:focus>*,.blue-many:hover>*,.blue-on:focus,.blue-on:hover,.blue-one>:focus,.blue-one>:hover,:focus>.blue-in,:hover>.blue-in{color:var(--blue)}.violet,.violet-all>*,.violet-many:focus>*,.violet-many:hover>*,.violet-on:focus,.violet-on:hover,.violet-one>:focus,.violet-one>:hover,:focus>.violet-in,:hover>.violet-in{color:var(--violet)}.pink,.pink-all>*,.pink-many:focus>*,.pink-many:hover>*,.pink-on:focus,.pink-on:hover,.pink-one>:focus,.pink-one>:hover,:focus>.pink-in,:hover>.pink-in{color:var(--pink)}.black,.black-all>*,.black-many:focus>*,.black-many:hover>*,.black-on:focus,.black-on:hover,.black-one>:focus,.black-one>:hover,:focus>.black-in,:hover>.black-in{color:var(--black)}.gray,.gray-all>*,.gray-many:focus>*,.gray-many:hover>*,.gray-on:focus,.gray-on:hover,.gray-one>:focus,.gray-one>:hover,:focus>.gray-in,:hover>.gray-in{color:var(--gray)}.silver,.silver-all>*,.silver-many:focus>*,.silver-many:hover>*,.silver-on:focus,.silver-on:hover,.silver-one>:focus,.silver-one>:hover,:focus>.silver-in,:hover>.silver-in{color:var(--silver)}.white,.white-all>*,.white-many:focus>*,.white-many:hover>*,.white-on:focus,.white-on:hover,.white-one>:focus,.white-one>:hover,:focus>.white-in,:hover>.white-in{color:var(--white)}.bg-red,.bg-red-all>*,.bg-red-many:focus>*,.bg-red-many:hover>*,.bg-red-on:focus,.bg-red-on:hover,.bg-red-one>:focus,.bg-red-one>:hover,:focus>.bg-red-in,:hover>.bg-red-in{background-color:var(--red)}.bg-red-dark,.bg-red-dark-all>*,.bg-red-dark-many:focus>*,.bg-red-dark-many:hover>*,.bg-red-dark-on:focus,.bg-red-dark-on:hover,.bg-red-dark-one>:focus,.bg-red-dark-one>:hover,:focus>.bg-red-dark-in,:hover>.bg-red-dark-in{background-color:var(--red-dark)}.bg-red-light,.bg-red-light-all>*,.bg-red-light-many:focus>*,.bg-red-light-many:hover>*,.bg-red-light-on:focus,.bg-red-light-on:hover,.bg-red-light-one>:focus,.bg-red-light-one>:hover,:focus>.bg-red-light-in,:hover>.bg-red-light-in{background-color:var(--red-light)}.bg-orange,.bg-orange-all>*,.bg-orange-many:focus>*,.bg-orange-many:hover>*,.bg-orange-on:focus,.bg-orange-on:hover,.bg-orange-one>:focus,.bg-orange-one>:hover,:focus>.bg-orange-in,:hover>.bg-orange-in{background-color:var(--orange)}.bg-orange-dark,.bg-orange-dark-all>*,.bg-orange-dark-many:focus>*,.bg-orange-dark-many:hover>*,.bg-orange-dark-on:focus,.bg-orange-dark-on:hover,.bg-orange-dark-one>:focus,.bg-orange-dark-one>:hover,:focus>.bg-orange-dark-in,:hover>.bg-orange-dark-in{background-color:var(--orange-dark)}.bg-orange-light,.bg-orange-light-all>*,.bg-orange-light-many:focus>*,.bg-orange-light-many:hover>*,.bg-orange-light-on:focus,.bg-orange-light-on:hover,.bg-orange-light-one>:focus,.bg-orange-light-one>:hover,:focus>.bg-orange-light-in,:hover>.bg-orange-light-in{background-color:var(--orange-light)}.bg-yellow,.bg-yellow-all>*,.bg-yellow-many:focus>*,.bg-yellow-many:hover>*,.bg-yellow-on:focus,.bg-yellow-on:hover,.bg-yellow-one>:focus,.bg-yellow-one>:hover,:focus>.bg-yellow-in,:hover>.bg-yellow-in{background-color:var(--yellow)}.bg-yellow-dark,.bg-yellow-dark-all>*,.bg-yellow-dark-many:focus>*,.bg-yellow-dark-many:hover>*,.bg-yellow-dark-on:focus,.bg-yellow-dark-on:hover,.bg-yellow-dark-one>:focus,.bg-yellow-dark-one>:hover,:focus>.bg-yellow-dark-in,:hover>.bg-yellow-dark-in{background-color:var(--yellow-dark)}.bg-yellow-light,.bg-yellow-light-all>*,.bg-yellow-light-many:focus>*,.bg-yellow-light-many:hover>*,.bg-yellow-light-on:focus,.bg-yellow-light-on:hover,.bg-yellow-light-one>:focus,.bg-yellow-light-one>:hover,:focus>.bg-yellow-light-in,:hover>.bg-yellow-light-in{background-color:var(--yellow-light)}.bg-green,.bg-green-all>*,.bg-green-many:focus>*,.bg-green-many:hover>*,.bg-green-on:focus,.bg-green-on:hover,.bg-green-one>:focus,.bg-green-one>:hover,:focus>.bg-green-in,:hover>.bg-green-in{background-color:var(--green)}.bg-green-dark,.bg-green-dark-all>*,.bg-green-dark-many:focus>*,.bg-green-dark-many:hover>*,.bg-green-dark-on:focus,.bg-green-dark-on:hover,.bg-green-dark-one>:focus,.bg-green-dark-one>:hover,:focus>.bg-green-dark-in,:hover>.bg-green-dark-in{background-color:var(--green-dark)}.bg-green-light,.bg-green-light-all>*,.bg-green-light-many:focus>*,.bg-green-light-many:hover>*,.bg-green-light-on:focus,.bg-green-light-on:hover,.bg-green-light-one>:focus,.bg-green-light-one>:hover,:focus>.bg-green-light-in,:hover>.bg-green-light-in{background-color:var(--green-light)}.bg-sky,.bg-sky-all>*,.bg-sky-many:focus>*,.bg-sky-many:hover>*,.bg-sky-on:focus,.bg-sky-on:hover,.bg-sky-one>:focus,.bg-sky-one>:hover,:focus>.bg-sky-in,:hover>.bg-sky-in{background-color:var(--sky)}.bg-sky-dark,.bg-sky-dark-all>*,.bg-sky-dark-many:focus>*,.bg-sky-dark-many:hover>*,.bg-sky-dark-on:focus,.bg-sky-dark-on:hover,.bg-sky-dark-one>:focus,.bg-sky-dark-one>:hover,:focus>.bg-sky-dark-in,:hover>.bg-sky-dark-in{background-color:var(--sky-dark)}.bg-sky-light,.bg-sky-light-all>*,.bg-sky-light-many:focus>*,.bg-sky-light-many:hover>*,.bg-sky-light-on:focus,.bg-sky-light-on:hover,.bg-sky-light-one>:focus,.bg-sky-light-one>:hover,:focus>.bg-sky-light-in,:hover>.bg-sky-light-in{background-color:var(--sky-light)}.bg-blue,.bg-blue-all>*,.bg-blue-many:focus>*,.bg-blue-many:hover>*,.bg-blue-on:focus,.bg-blue-on:hover,.bg-blue-one>:focus,.bg-blue-one>:hover,:focus>.bg-blue-in,:hover>.bg-blue-in{background-color:var(--blue)}.bg-blue-dark,.bg-blue-dark-all>*,.bg-blue-dark-many:focus>*,.bg-blue-dark-many:hover>*,.bg-blue-dark-on:focus,.bg-blue-dark-on:hover,.bg-blue-dark-one>:focus,.bg-blue-dark-one>:hover,:focus>.bg-blue-dark-in,:hover>.bg-blue-dark-in{background-color:var(--blue-dark)}.bg-blue-light,.bg-blue-light-all>*,.bg-blue-light-many:focus>*,.bg-blue-light-many:hover>*,.bg-blue-light-on:focus,.bg-blue-light-on:hover,.bg-blue-light-one>:focus,.bg-blue-light-one>:hover,:focus>.bg-blue-light-in,:hover>.bg-blue-light-in{background-color:var(--blue-light)}.bg-violet,.bg-violet-all>*,.bg-violet-many:focus>*,.bg-violet-many:hover>*,.bg-violet-on:focus,.bg-violet-on:hover,.bg-violet-one>:focus,.bg-violet-one>:hover,:focus>.bg-violet-in,:hover>.bg-violet-in{background-color:var(--violet)}.bg-violet-dark,.bg-violet-dark-all>*,.bg-violet-dark-many:focus>*,.bg-violet-dark-many:hover>*,.bg-violet-dark-on:focus,.bg-violet-dark-on:hover,.bg-violet-dark-one>:focus,.bg-violet-dark-one>:hover,:focus>.bg-violet-dark-in,:hover>.bg-violet-dark-in{background-color:var(--violet-dark)}.bg-violet-light,.bg-violet-light-all>*,.bg-violet-light-many:focus>*,.bg-violet-light-many:hover>*,.bg-violet-light-on:focus,.bg-violet-light-on:hover,.bg-violet-light-one>:focus,.bg-violet-light-one>:hover,:focus>.bg-violet-light-in,:hover>.bg-violet-light-in{background-color:var(--violet-light)}.bg-pink,.bg-pink-all>*,.bg-pink-many:focus>*,.bg-pink-many:hover>*,.bg-pink-on:focus,.bg-pink-on:hover,.bg-pink-one>:focus,.bg-pink-one>:hover,:focus>.bg-pink-in,:hover>.bg-pink-in{background-color:var(--pink)}.bg-pink-dark,.bg-pink-dark-all>*,.bg-pink-dark-many:focus>*,.bg-pink-dark-many:hover>*,.bg-pink-dark-on:focus,.bg-pink-dark-on:hover,.bg-pink-dark-one>:focus,.bg-pink-dark-one>:hover,:focus>.bg-pink-dark-in,:hover>.bg-pink-dark-in{background-color:var(--pink-dark)}.bg-pink-light,.bg-pink-light-all>*,.bg-pink-light-many:focus>*,.bg-pink-light-many:hover>*,.bg-pink-light-on:focus,.bg-pink-light-on:hover,.bg-pink-light-one>:focus,.bg-pink-light-one>:hover,:focus>.bg-pink-light-in,:hover>.bg-pink-light-in{background-color:var(--pink-light)}.bg-black,.bg-black-all>*,.bg-black-many:focus>*,.bg-black-many:hover>*,.bg-black-on:focus,.bg-black-on:hover,.bg-black-one>:focus,.bg-black-one>:hover,:focus>.bg-black-in,:hover>.bg-black-in{background-color:var(--black)}.bg-black-dark,.bg-black-dark-all>*,.bg-black-dark-many:focus>*,.bg-black-dark-many:hover>*,.bg-black-dark-on:focus,.bg-black-dark-on:hover,.bg-black-dark-one>:focus,.bg-black-dark-one>:hover,:focus>.bg-black-dark-in,:hover>.bg-black-dark-in{background-color:var(--black-dark)}.bg-black-light,.bg-black-light-all>*,.bg-black-light-many:focus>*,.bg-black-light-many:hover>*,.bg-black-light-on:focus,.bg-black-light-on:hover,.bg-black-light-one>:focus,.bg-black-light-one>:hover,:focus>.bg-black-light-in,:hover>.bg-black-light-in{background-color:var(--black-light)}.bg-gray,.bg-gray-all>*,.bg-gray-many:focus>*,.bg-gray-many:hover>*,.bg-gray-on:focus,.bg-gray-on:hover,.bg-gray-one>:focus,.bg-gray-one>:hover,:focus>.bg-gray-in,:hover>.bg-gray-in{background-color:var(--gray)}.bg-gray-dark,.bg-gray-dark-all>*,.bg-gray-dark-many:focus>*,.bg-gray-dark-many:hover>*,.bg-gray-dark-on:focus,.bg-gray-dark-on:hover,.bg-gray-dark-one>:focus,.bg-gray-dark-one>:hover,:focus>.bg-gray-dark-in,:hover>.bg-gray-dark-in{background-color:var(--gray-dark)}.bg-gray-light,.bg-gray-light-all>*,.bg-gray-light-many:focus>*,.bg-gray-light-many:hover>*,.bg-gray-light-on:focus,.bg-gray-light-on:hover,.bg-gray-light-one>:focus,.bg-gray-light-one>:hover,:focus>.bg-gray-light-in,:hover>.bg-gray-light-in{background-color:var(--gray-light)}.bg-silver,.bg-silver-all>*,.bg-silver-many:focus>*,.bg-silver-many:hover>*,.bg-silver-on:focus,.bg-silver-on:hover,.bg-silver-one>:focus,.bg-silver-one>:hover,:focus>.bg-silver-in,:hover>.bg-silver-in{background-color:var(--silver)}.bg-silver-dark,.bg-silver-dark-all>*,.bg-silver-dark-many:focus>*,.bg-silver-dark-many:hover>*,.bg-silver-dark-on:focus,.bg-silver-dark-on:hover,.bg-silver-dark-one>:focus,.bg-silver-dark-one>:hover,:focus>.bg-silver-dark-in,:hover>.bg-silver-dark-in{background-color:var(--silver-dark)}.bg-silver-light,.bg-silver-light-all>*,.bg-silver-light-many:focus>*,.bg-silver-light-many:hover>*,.bg-silver-light-on:focus,.bg-silver-light-on:hover,.bg-silver-light-one>:focus,.bg-silver-light-one>:hover,:focus>.bg-silver-light-in,:hover>.bg-silver-light-in{background-color:var(--silver-light)}.bg-white,.bg-white-all>*,.bg-white-many:focus>*,.bg-white-many:hover>*,.bg-white-on:focus,.bg-white-on:hover,.bg-white-one>:focus,.bg-white-one>:hover,:focus>.bg-white-in,:hover>.bg-white-in{background-color:var(--white)}.bg-white-dark,.bg-white-dark-all>*,.bg-white-dark-many:focus>*,.bg-white-dark-many:hover>*,.bg-white-dark-on:focus,.bg-white-dark-on:hover,.bg-white-dark-one>:focus,.bg-white-dark-one>:hover,:focus>.bg-white-dark-in,:hover>.bg-white-dark-in{background-color:var(--white-dark)}.bg-white-light,.bg-white-light-all>*,.bg-white-light-many:focus>*,.bg-white-light-many:hover>*,.bg-white-light-on:focus,.bg-white-light-on:hover,.bg-white-light-one>:focus,.bg-white-light-one>:hover,:focus>.bg-white-light-in,:hover>.bg-white-light-in{background-color:var(--white-light)}:root{--sans-serif:Helvetica,sans-serif;--serif:Times,serif;--monospace:Courier,monospace;--cursive:Mistral,cursive;--fantasy:Impact,fantasy}.sans-serif,.sans-serif-all>*,.sans-serif-many:focus>*,.sans-serif-many:hover>*,.sans-serif-on:focus,.sans-serif-on:hover,.sans-serif-one>:focus,.sans-serif-one>:hover,:focus>.sans-serif-in,:hover>.sans-serif-in{font-family:var(--sans-serif)}.serif,.serif-all>*,.serif-many:focus>*,.serif-many:hover>*,.serif-on:focus,.serif-on:hover,.serif-one>:focus,.serif-one>:hover,:focus>.serif-in,:hover>.serif-in{font-family:var(--serif)}.monospace,.monospace-all>*,.monospace-many:focus>*,.monospace-many:hover>*,.monospace-on:focus,.monospace-on:hover,.monospace-one>:focus,.monospace-one>:hover,:focus>.monospace-in,:hover>.monospace-in{font-family:var(--monospace)}.cursive,.cursive-all>*,.cursive-many:focus>*,.cursive-many:hover>*,.cursive-on:focus,.cursive-on:hover,.cursive-one>:focus,.cursive-one>:hover,:focus>.cursive-in,:hover>.cursive-in{font-family:var(--cursive)}.fantasy,.fantasy-all>*,.fantasy-many:focus>*,.fantasy-many:hover>*,.fantasy-on:focus,.fantasy-on:hover,.fantasy-one>:focus,.fantasy-one>:hover,:focus>.fantasy-in,:hover>.fantasy-in{font-family:var(--fantasy)}.bold,.bold-all>*,.bold-many:focus>*,.bold-many:hover>*,.bold-on:focus,.bold-on:hover,.bold-one>:focus,.bold-one>:hover,:focus>.bold-in,:hover>.bold-in{font-weight:700}.italic,.italic-all>*,.italic-many:focus>*,.italic-many:hover>*,.italic-on:focus,.italic-on:hover,.italic-one>:focus,.italic-one>:hover,:focus>.italic-in,:hover>.italic-in{font-style:italic}.center,.center-all>*{text-align:center}.justify,.justify-all>*{text-align:justify}.left,.left-all>*{text-align:left}.right,.right-all>*{text-align:right}.cap,.cap-all>*,.cap-many:focus>*,.cap-many:hover>*,.cap-on:focus,.cap-on:hover,.cap-one>:focus,.cap-one>:hover,:focus>.cap-in,:hover>.cap-in{text-transform:capitalize}.up,.up-all>*,.up-many:focus>*,.up-many:hover>*,.up-on:focus,.up-on:hover,.up-one>:focus,.up-one>:hover,:focus>.up-in,:hover>.up-in{text-transform:uppercase}.low,.low-all>*,.low-many:focus>*,.low-many:hover>*,.low-on:focus,.low-on:hover,.low-one>:focus,.low-one>:hover,:focus>.low-in,:hover>.low-in{text-transform:lowercase}[class*=deco]{-webkit-text-decoration-line:underline;text-decoration-line:underline}.deco-none,.deco-none-all>*,.deco-none-many:focus>*,.deco-none-many:hover>*,.deco-none-on:focus,.deco-none-on:hover,.deco-none-one>:focus,.deco-none-one>:hover,:focus>.deco-none-in,:hover>.deco-none-in{-webkit-text-decoration-line:none;text-decoration-line:none}.deco-over,.deco-over-all>*,.deco-over-many:focus>*,.deco-over-many:hover>*,.deco-over-on:focus,.deco-over-on:hover,.deco-over-one>:focus,.deco-over-one>:hover,:focus>.deco-over-in,:hover>.deco-over-in{-webkit-text-decoration-line:overline;text-decoration-line:overline}.deco-through,.deco-through-all>*,.deco-through-many:focus>*,.deco-through-many:hover>*,.deco-through-on:focus,.deco-through-on:hover,.deco-through-one>:focus,.deco-through-one>:hover,:focus>.deco-through-in,:hover>.deco-through-in{-webkit-text-decoration-line:line-through;text-decoration-line:line-through}.deco-dash,.deco-dash-all>*,.deco-dash-many:focus>*,.deco-dash-many:hover>*,.deco-dash-on:focus,.deco-dash-on:hover,.deco-dash-one>:focus,.deco-dash-one>:hover,:focus>.deco-dash-in,:hover>.deco-dash-in{-webkit-text-decoration-style:dashed;text-decoration-style:dashed}.deco-dot,.deco-dot-all>*,.deco-dot-many:focus>*,.deco-dot-many:hover>*,.deco-dot-on:focus,.deco-dot-on:hover,.deco-dot-one>:focus,.deco-dot-one>:hover,:focus>.deco-dot-in,:hover>.deco-dot-in{-webkit-text-decoration-style:dotted;text-decoration-style:dotted}.deco-double,.deco-double-all>*,.deco-double-many:focus>*,.deco-double-many:hover>*,.deco-double-on:focus,.deco-double-on:hover,.deco-double-one>:focus,.deco-double-one>:hover,:focus>.deco-double-in,:hover>.deco-double-in{-webkit-text-decoration-style:double;text-decoration-style:double}.deco-wavy,.deco-wavy-all>*,.deco-wavy-many:focus>*,.deco-wavy-many:hover>*,.deco-wavy-on:focus,.deco-wavy-on:hover,.deco-wavy-one>:focus,.deco-wavy-one>:hover,:focus>.deco-wavy-in,:hover>.deco-wavy-in{-webkit-text-decoration-style:wavy;text-decoration-style:wavy}.deco-red,.deco-red-all>*,.deco-red-many:focus>*,.deco-red-many:hover>*,.deco-red-on:focus,.deco-red-on:hover,.deco-red-one>:focus,.deco-red-one>:hover,:focus>.deco-red-in,:hover>.deco-red-in{-webkit-text-decoration-color:var(--red);text-decoration-color:var(--red)}.deco-orange,.deco-orange-all>*,.deco-orange-many:focus>*,.deco-orange-many:hover>*,.deco-orange-on:focus,.deco-orange-on:hover,.deco-orange-one>:focus,.deco-orange-one>:hover,:focus>.deco-orange-in,:hover>.deco-orange-in{-webkit-text-decoration-color:var(--orange);text-decoration-color:var(--orange)}.deco-yellow,.deco-yellow-all>*,.deco-yellow-many:focus>*,.deco-yellow-many:hover>*,.deco-yellow-on:focus,.deco-yellow-on:hover,.deco-yellow-one>:focus,.deco-yellow-one>:hover,:focus>.deco-yellow-in,:hover>.deco-yellow-in{-webkit-text-decoration-color:var(--yellow);text-decoration-color:var(--yellow)}.deco-green,.deco-green-all>*,.deco-green-many:focus>*,.deco-green-many:hover>*,.deco-green-on:focus,.deco-green-on:hover,.deco-green-one>:focus,.deco-green-one>:hover,:focus>.deco-green-in,:hover>.deco-green-in{-webkit-text-decoration-color:var(--green);text-decoration-color:var(--green)}.deco-sky,.deco-sky-all>*,.deco-sky-many:focus>*,.deco-sky-many:hover>*,.deco-sky-on:focus,.deco-sky-on:hover,.deco-sky-one>:focus,.deco-sky-one>:hover,:focus>.deco-sky-in,:hover>.deco-sky-in{-webkit-text-decoration-color:var(--sky);text-decoration-color:var(--sky)}.deco-blue,.deco-blue-all>*,.deco-blue-many:focus>*,.deco-blue-many:hover>*,.deco-blue-on:focus,.deco-blue-on:hover,.deco-blue-one>:focus,.deco-blue-one>:hover,:focus>.deco-blue-in,:hover>.deco-blue-in{-webkit-text-decoration-color:var(--blue);text-decoration-color:var(--blue)}.deco-violet,.deco-violet-all>*,.deco-violet-many:focus>*,.deco-violet-many:hover>*,.deco-violet-on:focus,.deco-violet-on:hover,.deco-violet-one>:focus,.deco-violet-one>:hover,:focus>.deco-violet-in,:hover>.deco-violet-in{-webkit-text-decoration-color:var(--violet);text-decoration-color:var(--violet)}.deco-pink,.deco-pink-all>*,.deco-pink-many:focus>*,.deco-pink-many:hover>*,.deco-pink-on:focus,.deco-pink-on:hover,.deco-pink-one>:focus,.deco-pink-one>:hover,:focus>.deco-pink-in,:hover>.deco-pink-in{-webkit-text-decoration-color:var(--pink);text-decoration-color:var(--pink)}*{--target-margins:7rem;box-sizing:border-box}:target{padding-top:var(--target-margins);margin-top:-var(--target-margins)}html{--html-font-size:62.5%;font-size:var(--html-font-size);scroll-behavior:smooth}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}body{--body-font-size:2rem;--body-line-height:1.6;--body-margin:auto;--body-max-width:2000px;--body-padding:0;margin:var(--body-margin);padding:var(--body-padding);max-width:var(--body-max-width);line-height:var(--body-line-height);font-size:var(--body-font-size);font-family:var(--sans-serif)}main{--main-text-align:center;text-align:var(--main-text-align)}article{--article-margin-bottom:20px;margin-bottom:var(--article-margin-bottom)}h1{--title-font-size:calc(var(--body-font-size) * 2)}h2{--title-font-size:calc(var(--body-font-size) * 1.8)}h3{--title-font-size:calc(var(--body-font-size) * 1.6)}h4{--title-font-size:calc(var(--body-font-size) * 1.4)}h5{--title-font-size:calc(var(--body-font-size) * 1.2)}h6{--title-font-size:var(--body-font-size)}h1,h2,h3,h4,h5,h6{--title-text-align:center;--title-text-transform:capitalize;font-family:var(--serif);text-align:var(--title-text-align);text-transform:var(--title-text-transform);font-size:var(--title-font-size)}a{--link-outline:0;--link-text-decoration:none;-webkit-text-decoration:var(--link-text-decoration);text-decoration:var(--link-text-decoration);outline:var(--link-outline)}ul{--list-margin:0 0 10px;--list-padding:0;--list-style:none;margin:var(--list-margin);padding:var(--list-padding);list-style:var(--list-style)}table{--table-border-collapse:collapse;--table-margin:auto;--table-text-align:center;--table-vertical-align:middle;margin:var(--table-margin);border-collapse:var(--table-border-collapse);text-align:var(--table-text-align);vertical-align:var(--table-vertical-align);font-family:var(--monospace)}code,pre{--code-margin:auto;--code-overflow:scroll;--code-padding:10px;--code-text-align:initial;--code-width:100%;font-size:1em;overflow:var(--code-overflow);margin:var(--code-margin);padding:var(--code-padding);width:var(--code-width);font-family:var(--monospace);text-align:var(--code-text-align)}figure{--figure-margin:0;margin:var(--figure-margin)}img,video{--img-max-width:100%;--img-height:auto;--img-object-fit:contain;max-width:var(--img-max-width);height:var(--img-height);-o-object-fit:var(--img-object-fit);object-fit:var(--img-object-fit)}[type=button],[type=reset],[type=submit],button{--button-cursor:pointer;cursor:var(--button-cursor)}[class*=flex]{display:flex}[class*=flex-][class*=-col]{flex-direction:column}[class*=flex-][class*=-col-rev]{flex-direction:column-reverse}[class*=flex-][class*=-row]{flex-direction:row}[class*=flex-][class*=-row-rev]{flex-direction:row-reverse}[class*=flex-][class*=-wrap]{flex-wrap:wrap}[class*=flex-][class*=-wrap-rev]{flex-wrap:wrap-reverse}[class*=flex-][class*=-order1]{order:1}[class*=flex-][class*=-order2]{order:2}[class*=flex-][class*=-order3]{order:3}[class*=flex-][class*=-order4]{order:4}[class*=flex-][class*=-grow1]{flex-grow:1}[class*=flex-][class*=-grow2]{flex-grow:2}[class*=flex-][class*=-grow3]{flex-grow:3}[class*=flex-][class*=-grow4]{flex-grow:4}[class*=flex-][class*=-shrink1]{flex-shrink:1}[class*=flex-][class*=-shrink2]{flex-shrink:2}[class*=flex-][class*=-shrink3]{flex-shrink:3}[class*=flex-][class*=-shrink4]{flex-shrink:4}[class*=grid]{--grid-max-width:100vw;--grid-margin:auto;display:grid;max-width:var(--grid-max-width);margin:var(--grid-margin)}[class*=grid-][class*="-2tn"]{grid-template:auto/repeat(2,auto)}[class*=grid-][class*="-3tn"]{grid-template:auto/repeat(3,auto)}[class*=grid-][class*="-4tn"]{grid-template:auto/repeat(4,auto)}[class*=grid-][class*="-5tn"]{grid-template:auto/repeat(5,auto)}[class*=grid-][class*="-6tn"]{grid-template:auto/repeat(6,auto)}[class*=grid-][class*="-7tn"]{grid-template:auto/repeat(7,auto)}[class*=grid-][class*="-8tn"]{grid-template:auto/repeat(8,auto)}[class*=grid-][class*="-9tn"]{grid-template:auto/repeat(9,auto)}[class*=grid-][class*="-10tn"]{grid-template:auto/repeat(10,auto)}[class*=grid-][class*="-11tn"]{grid-template:auto/repeat(11,auto)}[class*=grid-][class*="-12tn"]{grid-template:auto/repeat(12,auto)}@media (min-width:576px){[class*=grid-][class*="-2sm"]{grid-template:auto/repeat(2,auto)}[class*=grid-][class*="-3sm"]{grid-template:auto/repeat(3,auto)}[class*=grid-][class*="-4sm"]{grid-template:auto/repeat(4,auto)}[class*=grid-][class*="-5sm"]{grid-template:auto/repeat(5,auto)}[class*=grid-][class*="-6sm"]{grid-template:auto/repeat(6,auto)}[class*=grid-][class*="-7sm"]{grid-template:auto/repeat(7,auto)}[class*=grid-][class*="-8sm"]{grid-template:auto/repeat(8,auto)}[class*=grid-][class*="-9sm"]{grid-template:auto/repeat(9,auto)}[class*=grid-][class*="-10sm"]{grid-template:auto/repeat(10,auto)}[class*=grid-][class*="-11sm"]{grid-template:auto/repeat(11,auto)}[class*=grid-][class*="-12sm"]{grid-template:auto/repeat(12,auto)}}@media (min-width:768px){[class*=grid-][class*="-2md"]{grid-template:auto/repeat(2,auto)}[class*=grid-][class*="-3md"]{grid-template:auto/repeat(3,auto)}[class*=grid-][class*="-4md"]{grid-template:auto/repeat(4,auto)}[class*=grid-][class*="-5md"]{grid-template:auto/repeat(5,auto)}[class*=grid-][class*="-6md"]{grid-template:auto/repeat(6,auto)}[class*=grid-][class*="-7md"]{grid-template:auto/repeat(7,auto)}[class*=grid-][class*="-8md"]{grid-template:auto/repeat(8,auto)}[class*=grid-][class*="-9md"]{grid-template:auto/repeat(9,auto)}[class*=grid-][class*="-10md"]{grid-template:auto/repeat(10,auto)}[class*=grid-][class*="-11md"]{grid-template:auto/repeat(11,auto)}[class*=grid-][class*="-12md"]{grid-template:auto/repeat(12,auto)}}@media (min-width:992px){[class*=grid-][class*="-2lg"]{grid-template:auto/repeat(2,auto)}[class*=grid-][class*="-3lg"]{grid-template:auto/repeat(3,auto)}[class*=grid-][class*="-4lg"]{grid-template:auto/repeat(4,auto)}[class*=grid-][class*="-5lg"]{grid-template:auto/repeat(5,auto)}[class*=grid-][class*="-6lg"]{grid-template:auto/repeat(6,auto)}[class*=grid-][class*="-7lg"]{grid-template:auto/repeat(7,auto)}[class*=grid-][class*="-8lg"]{grid-template:auto/repeat(8,auto)}[class*=grid-][class*="-9lg"]{grid-template:auto/repeat(9,auto)}[class*=grid-][class*="-10lg"]{grid-template:auto/repeat(10,auto)}[class*=grid-][class*="-11lg"]{grid-template:auto/repeat(11,auto)}[class*=grid-][class*="-12lg"]{grid-template:auto/repeat(12,auto)}}@media (min-width:1200px){[class*=grid-][class*="-2xl"]{grid-template:auto/repeat(2,auto)}[class*=grid-][class*="-3xl"]{grid-template:auto/repeat(3,auto)}[class*=grid-][class*="-4xl"]{grid-template:auto/repeat(4,auto)}[class*=grid-][class*="-5xl"]{grid-template:auto/repeat(5,auto)}[class*=grid-][class*="-6xl"]{grid-template:auto/repeat(6,auto)}[class*=grid-][class*="-7xl"]{grid-template:auto/repeat(7,auto)}[class*=grid-][class*="-8xl"]{grid-template:auto/repeat(8,auto)}[class*=grid-][class*="-9xl"]{grid-template:auto/repeat(9,auto)}[class*=grid-][class*="-10xl"]{grid-template:auto/repeat(10,auto)}[class*=grid-][class*="-11xl"]{grid-template:auto/repeat(11,auto)}[class*=grid-][class*="-12xl"]{grid-template:auto/repeat(12,auto)}}@media (min-width:1600px){[class*=grid-][class*="-2wd"]{grid-template:auto/repeat(2,auto)}[class*=grid-][class*="-3wd"]{grid-template:auto/repeat(3,auto)}[class*=grid-][class*="-4wd"]{grid-template:auto/repeat(4,auto)}[class*=grid-][class*="-5wd"]{grid-template:auto/repeat(5,auto)}[class*=grid-][class*="-6wd"]{grid-template:auto/repeat(6,auto)}[class*=grid-][class*="-7wd"]{grid-template:auto/repeat(7,auto)}[class*=grid-][class*="-8wd"]{grid-template:auto/repeat(8,auto)}[class*=grid-][class*="-9wd"]{grid-template:auto/repeat(9,auto)}[class*=grid-][class*="-10wd"]{grid-template:auto/repeat(10,auto)}[class*=grid-][class*="-11wd"]{grid-template:auto/repeat(11,auto)}[class*=grid-][class*="-12wd"]{grid-template:auto/repeat(12,auto)}}[class*=gap-]{--gap1:5px;--gap2:10px;--gap3:20px;--gap4:50px}[class*=gap-][class*="-1tn"]{gap:var(--gap1)}[class*=gap-][class*="-2tn"]{gap:var(--gap2)}[class*=gap-][class*="-3tn"]{gap:var(--gap3)}[class*=gap-][class*="-4tn"]{gap:var(--gap4)}@media (min-width:576px){[class*=gap-][class*="-1sm"]{gap:var(--gap1)}[class*=gap-][class*="-2sm"]{gap:var(--gap2)}[class*=gap-][class*="-3sm"]{gap:var(--gap3)}[class*=gap-][class*="-4sm"]{gap:var(--gap4)}}@media (min-width:768px){[class*=gap-][class*="-1md"]{gap:var(--gap1)}[class*=gap-][class*="-2md"]{gap:var(--gap2)}[class*=gap-][class*="-3md"]{gap:var(--gap3)}[class*=gap-][class*="-4md"]{gap:var(--gap4)}}@media (min-width:992px){[class*=gap-][class*="-1lg"]{gap:var(--gap1)}[class*=gap-][class*="-2lg"]{gap:var(--gap2)}[class*=gap-][class*="-3lg"]{gap:var(--gap3)}[class*=gap-][class*="-4lg"]{gap:var(--gap4)}}@media (min-width:1200px){[class*=gap-][class*="-1xl"]{gap:var(--gap1)}[class*=gap-][class*="-2xl"]{gap:var(--gap2)}[class*=gap-][class*="-3xl"]{gap:var(--gap3)}[class*=gap-][class*="-4xl"]{gap:var(--gap4)}}@media (min-width:1600px){[class*=gap-][class*="-1wd"]{gap:var(--gap1)}[class*=gap-][class*="-2wd"]{gap:var(--gap2)}[class*=gap-][class*="-3wd"]{gap:var(--gap3)}[class*=gap-][class*="-4wd"]{gap:var(--gap4)}}.content-around{place-content:space-around}.content-between{place-content:space-between}.content-evenly{place-content:space-evenly}.content-center{place-content:center}.content-stretch{place-content:stretch}.content-start{place-content:flex-start}.content-end{place-content:flex-end}@media (min-width:576px){.content-around-sm{place-content:space-around}.content-between-sm{place-content:space-between}.content-evenly-sm{place-content:space-evenly}.content-center-sm{place-content:center}.content-stretch-sm{place-content:stretch}.content-start-sm{place-content:flex-start}.content-end-sm{place-content:flex-end}}@media (min-width:768px){.content-around-md{place-content:space-around}.content-between-md{place-content:space-between}.content-evenly-md{place-content:space-evenly}.content-center-md{place-content:center}.content-stretch-md{place-content:stretch}.content-start-md{place-content:flex-start}.content-end-md{place-content:flex-end}}@media (min-width:992px){.content-around-lg{place-content:space-around}.content-between-lg{place-content:space-between}.content-evenly-lg{place-content:space-evenly}.content-center-lg{place-content:center}.content-stretch-lg{place-content:stretch}.content-start-lg{place-content:flex-start}.content-end-lg{place-content:flex-end}}@media (min-width:1200px){.content-around-xl{place-content:space-around}.content-between-xl{place-content:space-between}.content-evenly-xl{place-content:space-evenly}.content-center-xl{place-content:center}.content-stretch-xl{place-content:stretch}.content-start-xl{place-content:flex-start}.content-end-xl{place-content:flex-end}}@media (min-width:1600px){.content-around-wd{place-content:space-around}.content-between-wd{place-content:space-between}.content-evenly-wd{place-content:space-evenly}.content-center-wd{place-content:center}.content-stretch-wd{place-content:stretch}.content-start-wd{place-content:flex-start}.content-end-wd{place-content:flex-end}}.items-normal{place-items:normal}.items-base{place-items:baseline}.items-center{place-items:center}.items-stretch{place-items:stretch}.items-start{place-items:flex-start}.items-end{place-items:flex-end}@media (min-width:576px){.items-normal-sm{place-items:normal}.items-base-sm{place-items:baseline}.items-center-sm{place-items:center}.items-stretch-sm{place-items:stretch}.items-start-sm{place-items:flex-start}.items-end-sm{place-items:flex-end}}@media (min-width:768px){.items-normal-md{place-items:normal}.items-base-md{place-items:baseline}.items-center-md{place-items:center}.items-stretch-md{place-items:stretch}.items-start-md{place-items:flex-start}.items-end-md{place-items:flex-end}}@media (min-width:992px){.items-normal-lg{place-items:normal}.items-base-lg{place-items:baseline}.items-center-lg{place-items:center}.items-stretch-lg{place-items:stretch}.items-start-lg{place-items:flex-start}.items-end-lg{place-items:flex-end}}@media (min-width:1200px){.items-normal-xl{place-items:normal}.items-base-xl{place-items:baseline}.items-center-xl{place-items:center}.items-stretch-xl{place-items:stretch}.items-start-xl{place-items:flex-start}.items-end-xl{place-items:flex-end}}@media (min-width:1600px){.items-normal-wd{place-items:normal}.items-base-wd{place-items:baseline}.items-center-wd{place-items:center}.items-stretch-wd{place-items:stretch}.items-start-wd{place-items:flex-start}.items-end-wd{place-items:flex-end}}.self-auto{place-self:auto}.self-normal{place-self:normal}.self-base{place-self:baseline}.self-center{place-self:center}.self-stretch{place-self:stretch}.self-start{place-self:flex-start}.self-end{place-self:flex-end}@media (min-width:576px){.self-auto-sm{place-self:auto}.self-normal-sm{place-self:normal}.self-base-sm{place-self:baseline}.self-center-sm{place-self:center}.self-stretch-sm{place-self:stretch}.self-start-sm{place-self:flex-start}.self-end-sm{place-self:flex-end}}@media (min-width:768px){.self-auto-md{place-self:auto}.self-normal-md{place-self:normal}.self-base-md{place-self:baseline}.self-center-md{place-self:center}.self-stretch-md{place-self:stretch}.self-start-md{place-self:flex-start}.self-end-md{place-self:flex-end}}@media (min-width:992px){.self-auto-lg{place-self:auto}.self-normal-lg{place-self:normal}.self-base-lg{place-self:baseline}.self-center-lg{place-self:center}.self-stretch-lg{place-self:stretch}.self-start-lg{place-self:flex-start}.self-end-lg{place-self:flex-end}}@media (min-width:1200px){.self-auto-xl{place-self:auto}.self-normal-xl{place-self:normal}.self-base-xl{place-self:baseline}.self-center-xl{place-self:center}.self-stretch-xl{place-self:stretch}.self-start-xl{place-self:flex-start}.self-end-xl{place-self:flex-end}}@media (min-width:1600px){.self-auto-wd{place-self:auto}.self-normal-wd{place-self:normal}.self-base-wd{place-self:baseline}.self-center-wd{place-self:center}.self-stretch-wd{place-self:stretch}.self-start-wd{place-self:flex-start}.self-end-wd{place-self:flex-end}}[class*=container]{--container-max-width:100%;margin:auto;max-width:var(--container-max-width)}[class*=container-][class*="-50tn"]{max-width:50%}[class*=container-][class*="-60tn"]{max-width:60%}[class*=container-][class*="-70tn"]{max-width:70%}[class*=container-][class*="-80tn"]{max-width:80%}[class*=container-][class*="-90tn"]{max-width:90%}@media (min-width:576px){[class*=container-][class*="-50sm"]{max-width:50%}[class*=container-][class*="-60sm"]{max-width:60%}[class*=container-][class*="-70sm"]{max-width:70%}[class*=container-][class*="-80sm"]{max-width:80%}[class*=container-][class*="-90sm"]{max-width:90%}}@media (min-width:768px){[class*=container-][class*="-50md"]{max-width:50%}[class*=container-][class*="-60md"]{max-width:60%}[class*=container-][class*="-70md"]{max-width:70%}[class*=container-][class*="-80md"]{max-width:80%}[class*=container-][class*="-90md"]{max-width:90%}}@media (min-width:992px){[class*=container-][class*="-50lg"]{max-width:50%}[class*=container-][class*="-60lg"]{max-width:60%}[class*=container-][class*="-70lg"]{max-width:70%}[class*=container-][class*="-80lg"]{max-width:80%}[class*=container-][class*="-90lg"]{max-width:90%}}@media (min-width:1200px){[class*=container-][class*="-50xl"]{max-width:50%}[class*=container-][class*="-60xl"]{max-width:60%}[class*=container-][class*="-70xl"]{max-width:70%}[class*=container-][class*="-80xl"]{max-width:80%}[class*=container-][class*="-90xl"]{max-width:90%}}@media (min-width:1600px){[class*=container-][class*="-50wd"]{max-width:50%}[class*=container-][class*="-60wd"]{max-width:60%}[class*=container-][class*="-70wd"]{max-width:70%}[class*=container-][class*="-80wd"]{max-width:80%}[class*=container-][class*="-90wd"]{max-width:90%}}[class*=mar-]{--margin-none:0;--margin-sm:5px;--margin-md:10px;--margin-lg:20px;--margin-top-sm:5px;--margin-top-md:10px;--margin-top-lg:20px;--margin-right-sm:5px;--margin-right-md:10px;--margin-right-lg:20px;--margin-bot-sm:5px;--margin-bot-md:10px;--margin-bot-lg:20px;--margin-left-sm:5px;--margin-left-md:10px;--margin-left-lg:20px}.mar-none,.mar-none-all>*{margin:var(--margin-none)}.mar-top-none,.mar-top-none-all>*{margin-top:var(--margin-none)}.mar-right-none,.mar-right-none-all>*{margin-right:var(--margin-none)}.mar-bottom-none,.mar-bottom-none-all>*{margin-bottom:var(--margin-none)}.mar-left-none,.mar-left-none-all>*{margin-left:var(--margin-none)}.mar-sm,.mar-sm-all>*{margin:var(--margin-sm)}.mar-md,.mar-md-all>*{margin:var(--margin-md)}.mar-lg,.mar-lg-all>*{margin:var(--margin-lg)}.mar-top-sm,.mar-top-sm-all>*{margin-top:var(--margin-top-sm)}.mar-top-md,.mar-top-md-all>*{margin-top:var(--margin-top-md)}.mar-top-lg,.mar-top-lg-all>*{margin-top:var(--margin-top-lg)}.mar-right-sm,.mar-right-sm-all>*{margin-right:var(--margin-right-sm)}.mar-right-md,.mar-right-md-all>*{margin-right:var(--margin-right-md)}.mar-right-lg,.mar-right-lg-all>*{margin-right:var(--margin-right-lg)}.mar-bot-sm,.mar-bot-sm-all>*{margin-bottom:var(--margin-bot-sm)}.mar-bot-md,.mar-bot-md-all>*{margin-bottom:var(--margin-bot-md)}.mar-bot-lg,.mar-bot-lg-all>*{margin-bottom:var(--margin-bot-lg)}.mar-left-sm,.mar-left-sm-all>*{margin-left:var(--margin-left-sm)}.mar-left-md,.mar-left-md-all>*{margin-left:var(--margin-left-md)}.mar-left-lg,.mar-left-lg-all>*{margin-left:var(--margin-left-lg)}[class*=bord]{--border-width-sm:1px;--border-width-md:2px;--border-width-lg:5px;--border-radius-curve:20px;--border-radius-round:50px;--border-radius-circle:50%;border-style:solid}.bord-dash,.bord-dash-all>*,.bord-dash-many:focus>*,.bord-dash-many:hover>*,.bord-dash-on:focus,.bord-dash-on:hover,.bord-dash-one>:focus,.bord-dash-one>:hover,:focus>.bord-dash-in,:hover>.bord-dash-in{border-style:dashed}.bord-dot,.bord-dot-all>*,.bord-dot-many:focus>*,.bord-dot-many:hover>*,.bord-dot-on:focus,.bord-dot-on:hover,.bord-dot-one>:focus,.bord-dot-one>:hover,:focus>.bord-dot-in,:hover>.bord-dot-in{border-style:dotted}.bord-double,.bord-double-all>*,.bord-double-many:focus>*,.bord-double-many:hover>*,.bord-double-on:focus,.bord-double-on:hover,.bord-double-one>:focus,.bord-double-one>:hover,:focus>.bord-double-in,:hover>.bord-double-in{border-style:double}.bord-groove,.bord-groove-all>*,.bord-groove-many:focus>*,.bord-groove-many:hover>*,.bord-groove-on:focus,.bord-groove-on:hover,.bord-groove-one>:focus,.bord-groove-one>:hover,:focus>.bord-groove-in,:hover>.bord-groove-in{border-style:groove}.bord-ridge,.bord-ridge-all>*,.bord-ridge-many:focus>*,.bord-ridge-many:hover>*,.bord-ridge-on:focus,.bord-ridge-on:hover,.bord-ridge-one>:focus,.bord-ridge-one>:hover,:focus>.bord-ridge-in,:hover>.bord-ridge-in{border-style:ridge}.bord-in,.bord-in-all>*,.bord-in-many:focus>*,.bord-in-many:hover>*,.bord-in-on:focus,.bord-in-on:hover,.bord-in-one>:focus,.bord-in-one>:hover,:focus>.bord-in-in,:hover>.bord-in-in{border-style:inset}.bord-out,.bord-out-all>*,.bord-out-many:focus>*,.bord-out-many:hover>*,.bord-out-on:focus,.bord-out-on:hover,.bord-out-one>:focus,.bord-out-one>:hover,:focus>.bord-out-in,:hover>.bord-out-in{border-style:outset}.bord-sm,.bord-sm-all>*,.bord-sm-many:focus>*,.bord-sm-many:hover>*,.bord-sm-on:focus,.bord-sm-on:hover,.bord-sm-one>:focus,.bord-sm-one>:hover,:focus>.bord-sm-in,:hover>.bord-sm-in{border-width:1px}.bord-md,.bord-md-all>*,.bord-md-many:focus>*,.bord-md-many:hover>*,.bord-md-on:focus,.bord-md-on:hover,.bord-md-one>:focus,.bord-md-one>:hover,:focus>.bord-md-in,:hover>.bord-md-in{border-width:2px}.bord-lg,.bord-lg-all>*,.bord-lg-many:focus>*,.bord-lg-many:hover>*,.bord-lg-on:focus,.bord-lg-on:hover,.bord-lg-one>:focus,.bord-lg-one>:hover,:focus>.bord-lg-in,:hover>.bord-lg-in{border-width:5px}.bord-red,.bord-red-all>*,.bord-red-many:focus>*,.bord-red-many:hover>*,.bord-red-on:focus,.bord-red-on:hover,.bord-red-one>:focus,.bord-red-one>:hover,:focus>.bord-red-in,:hover>.bord-red-in{border-color:var(--red)}.bord-orange,.bord-orange-all>*,.bord-orange-many:focus>*,.bord-orange-many:hover>*,.bord-orange-on:focus,.bord-orange-on:hover,.bord-orange-one>:focus,.bord-orange-one>:hover,:focus>.bord-orange-in,:hover>.bord-orange-in{border-color:var(--orange)}.bord-yellow,.bord-yellow-all>*,.bord-yellow-many:focus>*,.bord-yellow-many:hover>*,.bord-yellow-on:focus,.bord-yellow-on:hover,.bord-yellow-one>:focus,.bord-yellow-one>:hover,:focus>.bord-yellow-in,:hover>.bord-yellow-in{border-color:var(--yellow)}.bord-green,.bord-green-all>*,.bord-green-many:focus>*,.bord-green-many:hover>*,.bord-green-on:focus,.bord-green-on:hover,.bord-green-one>:focus,.bord-green-one>:hover,:focus>.bord-green-in,:hover>.bord-green-in{border-color:var(--green)}.bord-sky,.bord-sky-all>*,.bord-sky-many:focus>*,.bord-sky-many:hover>*,.bord-sky-on:focus,.bord-sky-on:hover,.bord-sky-one>:focus,.bord-sky-one>:hover,:focus>.bord-sky-in,:hover>.bord-sky-in{border-color:var(--sky)}.bord-blue,.bord-blue-all>*,.bord-blue-many:focus>*,.bord-blue-many:hover>*,.bord-blue-on:focus,.bord-blue-on:hover,.bord-blue-one>:focus,.bord-blue-one>:hover,:focus>.bord-blue-in,:hover>.bord-blue-in{border-color:var(--blue)}.bord-violet,.bord-violet-all>*,.bord-violet-many:focus>*,.bord-violet-many:hover>*,.bord-violet-on:focus,.bord-violet-on:hover,.bord-violet-one>:focus,.bord-violet-one>:hover,:focus>.bord-violet-in,:hover>.bord-violet-in{border-color:var(--violet)}.bord-pink,.bord-pink-all>*,.bord-pink-many:focus>*,.bord-pink-many:hover>*,.bord-pink-on:focus,.bord-pink-on:hover,.bord-pink-one>:focus,.bord-pink-one>:hover,:focus>.bord-pink-in,:hover>.bord-pink-in{border-color:var(--pink)}.bord-curve,.bord-curve-all>*,.bord-curve-many:focus>*,.bord-curve-many:hover>*,.bord-curve-on:focus,.bord-curve-on:hover,.bord-curve-one>:focus,.bord-curve-one>:hover,:focus>.bord-curve-in,:hover>.bord-curve-in{border-radius:20px}.bord-round,.bord-round-all>*,.bord-round-many:focus>*,.bord-round-many:hover>*,.bord-round-on:focus,.bord-round-on:hover,.bord-round-one>:focus,.bord-round-one>:hover,:focus>.bord-round-in,:hover>.bord-round-in{border-radius:50px}.bord-circle,.bord-circle-all>*,.bord-circle-many:focus>*,.bord-circle-many:hover>*,.bord-circle-on:focus,.bord-circle-on:hover,.bord-circle-one>:focus,.bord-circle-one>:hover,:focus>.bord-circle-in,:hover>.bord-circle-in{border-radius:50%}[class*=pad-]{--padding-none:0;--padding-sm:5px;--padding-md:10px;--padding-lg:20px;--padding-top-sm:5px;--padding-top-md:10px;--padding-top-lg:20px;--padding-right-sm:5px;--padding-right-md:10px;--padding-right-lg:20px;--padding-bot-sm:5px;--padding-bot-md:10px;--padding-bot-lg:20px;--padding-left-sm:5px;--padding-left-md:10px;--padding-left-lg:20px}.pad-none,.pad-none-all>*{padding:var(--padding-none)}.pad-top-none,.pad-top-none-all>*{padding-top:var(--padding-none)}.pad-right-none,.pad-right-none-all>*{padding-right:var(--padding-none)}.pad-bottom-none,.pad-bottom-none-all>*{padding-bottom:var(--padding-none)}.pad-left-none,.pad-left-none-all>*{padding-left:var(--padding-none)}.pad-sm,.pad-sm-all>*{padding:var(--padding-sm)}.pad-md,.pad-md-all>*{padding:var(--padding-md)}.pad-lg,.pad-lg-all>*{padding:var(--padding-lg)}.pad-top-sm,.pad-top-sm-all>*{padding-top:var(--padding-top-sm)}.pad-top-md,.pad-top-md-all>*{padding-top:var(--padding-top-md)}.pad-top-lg,.pad-top-lg-all>*{padding-top:var(--padding-top-lg)}.pad-right-sm,.pad-right-sm-all>*{padding-right:var(--padding-right-sm)}.pad-right-md,.pad-right-md-all>*{padding-right:var(--padding-right-md)}.pad-right-lg,.pad-right-lg-all>*{padding-right:var(--padding-right-lg)}.pad-bot-sm,.pad-bot-sm-all>*{padding-bottom:var(--padding-bot-sm)}.pad-bot-md,.pad-bot-md-all>*{padding-bottom:var(--padding-bot-md)}.pad-bot-lg,.pad-bot-lg-all>*{padding-bottom:var(--padding-bot-lg)}.pad-left-sm,.pad-left-sm-all>*{padding-left:var(--padding-left-sm)}.pad-left-md,.pad-left-md-all>*{padding-left:var(--padding-left-md)}.pad-left-lg,.pad-left-lg-all>*{padding-left:var(--padding-left-lg)}[class*=height-]{--height-sm:20%;--height-md:50%;--height-lg:100%}.height-sm,.height-sm-all>*{height:var(--height-sm)}.height-md,.height-md-all>*{height:var(--height-md)}.height-lg,.height-lg-all>*{height:var(--height-lg)}[class*=max-h-]{--max-height-sm:20%;--max-height-md:50%;--max-height-lg:100%}.max-h-sm,.max-h-sm-all>*{max-height:var(--max-height-sm)}.max-h-md,.max-h-md-all>*{max-height:var(--max-height-md)}.max-h-lg,.max-h-lg-all>*{max-height:var(--max-height-lg)}[class*=min-h-]{--min-height-sm:20%;--min-height-md:50%;--min-height-lg:100%}.min-h-sm,.min-h-sm-all>*{min-height:var(--min-height-sm)}.min-h-md,.min-h-md-all>*{min-height:var(--min-height-md)}.min-h-lg,.min-h-lg-all>*{min-height:var(--min-height-lg)}[class*=width-]{--width-sm:20%;--width-md:50%;--width-lg:100%}.width-sm,.width-sm-all>*{width:var(--width-sm)}.width-md,.width-md-all>*{width:var(--width-md)}.width-lg,.width-lg-all>*{width:var(--width-lg)}[class*=max-w-]{--max-width-sm:20%;--max-width-md:50%;--max-width-lg:100%}.max-w-sm,.max-w-sm-all>*{max-width:var(--max-width-sm)}.max-w-md,.max-w-md-all>*{max-width:var(--max-width-md)}.max-w-lg,.max-w-lg-all>*{max-width:var(--max-width-lg)}[class*=min-w-]{--min-width-sm:20%;--min-width-md:50%;--min-width-lg:100%}.min-w-sm,.min-w-sm-all>*{min-width:var(--min-width-sm)}.min-w-md,.min-w-md-all>*{min-width:var(--min-width-md)}.min-w-lg,.min-w-lg-all>*{min-width:var(--min-width-lg)}:root{--slideT:translate(0, 10vh);--slideR:translate(-10vw, 0);--slideB:translate(0, -10vh);--slideL:translate(10vw, 0);--turn:rotate3d(0, 0, 1, 360deg);--turnX:rotate3d(1, 0, 0, 360deg);--turnY:rotate3d(0, 1, 0, 360deg);--turnXY:rotate3d(1, 1, 0, 360deg);--turnXZ:rotate3d(1, 0, 1, 360deg);--turnYZ:rotate3d(0, 1, 1, 360deg);--turn3D:rotate3d(1, 1, 1, 360deg);--bounce:scale(-1, -1);--grow:scale(0.5, 0.5);--shrink:scale(1.5, 1.5);--flipX:scale(1, -1);--flipY:scale(-1, 1);--openX:scale(1, 0);--openY:scale(0, 1);--flipperX:scale(0, -1);--flipperY:scale(-1, 0);--twistT:skew(-90deg, -90deg);--twistR:skew(90deg, -90deg);--twistB:skew(90deg, 90deg);--twistL:skew(-90deg, 90deg)}@-webkit-keyframes slideT{from{transform:var(--slideT)}}@keyframes slideT{from{transform:var(--slideT)}}@-webkit-keyframes slideR{from{transform:var(--slideR)}}@keyframes slideR{from{transform:var(--slideR)}}@-webkit-keyframes slideB{from{transform:var(--slideB)}}@keyframes slideB{from{transform:var(--slideB)}}@-webkit-keyframes slideL{from{transform:var(--slideL)}}@keyframes slideL{from{transform:var(--slideL)}}@-webkit-keyframes turn{from{transform:var(--turn)}}@keyframes turn{from{transform:var(--turn)}}@-webkit-keyframes turnX{from{transform:var(--turnX)}}@keyframes turnX{from{transform:var(--turnX)}}@-webkit-keyframes turnY{from{transform:var(--turnY)}}@keyframes turnY{from{transform:var(--turnY)}}@-webkit-keyframes turnXY{from{transform:var(--turnXY)}}@keyframes turnXY{from{transform:var(--turnXY)}}@-webkit-keyframes turnXZ{from{transform:var(--turnXZ)}}@keyframes turnXZ{from{transform:var(--turnXZ)}}@-webkit-keyframes turnYZ{from{transform:var(--turnYZ)}}@keyframes turnYZ{from{transform:var(--turnYZ)}}@-webkit-keyframes turn3D{from{transform:var(--turn3D)}}@keyframes turn3D{from{transform:var(--turn3D)}}@-webkit-keyframes bounce{from{transform:var(--bounce)}}@keyframes bounce{from{transform:var(--bounce)}}@-webkit-keyframes grow{from{transform:var(--grow)}}@keyframes grow{from{transform:var(--grow)}}@-webkit-keyframes shrink{from{transform:var(--shrink)}}@keyframes shrink{from{transform:var(--shrink)}}@-webkit-keyframes flipX{from{transform:var(--flipX)}}@keyframes flipX{from{transform:var(--flipX)}}@-webkit-keyframes flipY{from{transform:var(--flipY)}}@keyframes flipY{from{transform:var(--flipY)}}@-webkit-keyframes openX{from{transform:var(--openX)}}@keyframes openX{from{transform:var(--openX)}}@-webkit-keyframes openY{from{transform:var(--openY)}}@keyframes openY{from{transform:var(--openY)}}@-webkit-keyframes flipperX{from{transform:var(--flipperX)}}@keyframes flipperX{from{transform:var(--flipperX)}}@-webkit-keyframes flipperY{from{transform:var(--flipperY)}}@keyframes flipperY{from{transform:var(--flipperY)}}@-webkit-keyframes twistT{from{transform:var(--twistT)}}@keyframes twistT{from{transform:var(--twistT)}}@-webkit-keyframes twistR{from{transform:var(--twistR)}}@keyframes twistR{from{transform:var(--twistR)}}@-webkit-keyframes twistB{from{transform:var(--twistB)}}@keyframes twistB{from{transform:var(--twistB)}}@-webkit-keyframes twistL{from{transform:var(--twistL)}}@keyframes twistL{from{transform:var(--twistL)}}[class*=anima-]{--animation-duration:2s;--animation-duration-sm:500ms;--animation-duration-md:1s;--animation-duration-lg:2s;--animation-timing-function-linear:linear;--animation-timing-function-in:ease-in;--animation-timing-function-out:ease-out;--animation-timing-function-inout:ease-in-out;--animation-timing-function-start:step-start;--animation-timing-function-end:step-end;--animation-iteration-count-few:2;--animation-iteration-count-many:5;--animation-iteration-count-loop:infinite;--animation-delay-min:500ms;--animation-delay-max:1s;-webkit-animation-duration:var(--animation-duration);animation-duration:var(--animation-duration)}.anima-slideT,.anima-slideT-all>*,.anima-slideT-many:focus>*,.anima-slideT-many:hover>*,.anima-slideT-on:focus,.anima-slideT-on:hover,.anima-slideT-one>:focus,.anima-slideT-one>:hover,:focus>.anima-slideT-in,:hover>.anima-slideT-in{-webkit-animation-name:slideT;animation-name:slideT}.anima-slideR,.anima-slideR-all>*,.anima-slideR-many:focus>*,.anima-slideR-many:hover>*,.anima-slideR-on:focus,.anima-slideR-on:hover,.anima-slideR-one>:focus,.anima-slideR-one>:hover,:focus>.anima-slideR-in,:hover>.anima-slideR-in{-webkit-animation-name:slideR;animation-name:slideR}.anima-slideB,.anima-slideB-all>*,.anima-slideB-many:focus>*,.anima-slideB-many:hover>*,.anima-slideB-on:focus,.anima-slideB-on:hover,.anima-slideB-one>:focus,.anima-slideB-one>:hover,:focus>.anima-slideB-in,:hover>.anima-slideB-in{-webkit-animation-name:slideB;animation-name:slideB}.anima-slideL,.anima-slideL-all>*,.anima-slideL-many:focus>*,.anima-slideL-many:hover>*,.anima-slideL-on:focus,.anima-slideL-on:hover,.anima-slideL-one>:focus,.anima-slideL-one>:hover,:focus>.anima-slideL-in,:hover>.anima-slideL-in{-webkit-animation-name:slideL;animation-name:slideL}.anima-turn,.anima-turn-all>*,.anima-turn-many:focus>*,.anima-turn-many:hover>*,.anima-turn-on:focus,.anima-turn-on:hover,.anima-turn-one>:focus,.anima-turn-one>:hover,:focus>.anima-turn-in,:hover>.anima-turn-in{-webkit-animation-name:turn;animation-name:turn}.anima-turnX,.anima-turnX-all>*,.anima-turnX-many:focus>*,.anima-turnX-many:hover>*,.anima-turnX-on:focus,.anima-turnX-on:hover,.anima-turnX-one>:focus,.anima-turnX-one>:hover,:focus>.anima-turnX-in,:hover>.anima-turnX-in{-webkit-animation-name:turnX;animation-name:turnX}.anima-turnY,.anima-turnY-all>*,.anima-turnY-many:focus>*,.anima-turnY-many:hover>*,.anima-turnY-on:focus,.anima-turnY-on:hover,.anima-turnY-one>:focus,.anima-turnY-one>:hover,:focus>.anima-turnY-in,:hover>.anima-turnY-in{-webkit-animation-name:turnY;animation-name:turnY}.anima-turnXY,.anima-turnXY-all>*,.anima-turnXY-many:focus>*,.anima-turnXY-many:hover>*,.anima-turnXY-on:focus,.anima-turnXY-on:hover,.anima-turnXY-one>:focus,.anima-turnXY-one>:hover,:focus>.anima-turnXY-in,:hover>.anima-turnXY-in{-webkit-animation-name:turnXY;animation-name:turnXY}.anima-turnXZ,.anima-turnXZ-all>*,.anima-turnXZ-many:focus>*,.anima-turnXZ-many:hover>*,.anima-turnXZ-on:focus,.anima-turnXZ-on:hover,.anima-turnXZ-one>:focus,.anima-turnXZ-one>:hover,:focus>.anima-turnXZ-in,:hover>.anima-turnXZ-in{-webkit-animation-name:turnXZ;animation-name:turnXZ}.anima-turnYZ,.anima-turnYZ-all>*,.anima-turnYZ-many:focus>*,.anima-turnYZ-many:hover>*,.anima-turnYZ-on:focus,.anima-turnYZ-on:hover,.anima-turnYZ-one>:focus,.anima-turnYZ-one>:hover,:focus>.anima-turnYZ-in,:hover>.anima-turnYZ-in{-webkit-animation-name:turnYZ;animation-name:turnYZ}.anima-turn3D,.anima-turn3D-all>*,.anima-turn3D-many:focus>*,.anima-turn3D-many:hover>*,.anima-turn3D-on:focus,.anima-turn3D-on:hover,.anima-turn3D-one>:focus,.anima-turn3D-one>:hover,:focus>.anima-turn3D-in,:hover>.anima-turn3D-in{-webkit-animation-name:turn3D;animation-name:turn3D}.anima-bounce,.anima-bounce-all>*,.anima-bounce-many:focus>*,.anima-bounce-many:hover>*,.anima-bounce-on:focus,.anima-bounce-on:hover,.anima-bounce-one>:focus,.anima-bounce-one>:hover,:focus>.anima-bounce-in,:hover>.anima-bounce-in{-webkit-animation-name:bounce;animation-name:bounce}.anima-grow,.anima-grow-all>*,.anima-grow-many:focus>*,.anima-grow-many:hover>*,.anima-grow-on:focus,.anima-grow-on:hover,.anima-grow-one>:focus,.anima-grow-one>:hover,:focus>.anima-grow-in,:hover>.anima-grow-in{-webkit-animation-name:grow;animation-name:grow}.anima-shrink,.anima-shrink-all>*,.anima-shrink-many:focus>*,.anima-shrink-many:hover>*,.anima-shrink-on:focus,.anima-shrink-on:hover,.anima-shrink-one>:focus,.anima-shrink-one>:hover,:focus>.anima-shrink-in,:hover>.anima-shrink-in{-webkit-animation-name:shrink;animation-name:shrink}.anima-flipX,.anima-flipX-all>*,.anima-flipX-many:focus>*,.anima-flipX-many:hover>*,.anima-flipX-on:focus,.anima-flipX-on:hover,.anima-flipX-one>:focus,.anima-flipX-one>:hover,:focus>.anima-flipX-in,:hover>.anima-flipX-in{-webkit-animation-name:flipX;animation-name:flipX}.anima-flipY,.anima-flipY-all>*,.anima-flipY-many:focus>*,.anima-flipY-many:hover>*,.anima-flipY-on:focus,.anima-flipY-on:hover,.anima-flipY-one>:focus,.anima-flipY-one>:hover,:focus>.anima-flipY-in,:hover>.anima-flipY-in{-webkit-animation-name:flipY;animation-name:flipY}.anima-openX,.anima-openX-all>*,.anima-openX-many:focus>*,.anima-openX-many:hover>*,.anima-openX-on:focus,.anima-openX-on:hover,.anima-openX-one>:focus,.anima-openX-one>:hover,:focus>.anima-openX-in,:hover>.anima-openX-in{-webkit-animation-name:openX;animation-name:openX}.anima-openY,.anima-openY-all>*,.anima-openY-many:focus>*,.anima-openY-many:hover>*,.anima-openY-on:focus,.anima-openY-on:hover,.anima-openY-one>:focus,.anima-openY-one>:hover,:focus>.anima-openY-in,:hover>.anima-openY-in{-webkit-animation-name:openY;animation-name:openY}.anima-flipperX,.anima-flipperX-all>*,.anima-flipperX-many:focus>*,.anima-flipperX-many:hover>*,.anima-flipperX-on:focus,.anima-flipperX-on:hover,.anima-flipperX-one>:focus,.anima-flipperX-one>:hover,:focus>.anima-flipperX-in,:hover>.anima-flipperX-in{-webkit-animation-name:flipperX;animation-name:flipperX}.anima-flipperY,.anima-flipperY-all>*,.anima-flipperY-many:focus>*,.anima-flipperY-many:hover>*,.anima-flipperY-on:focus,.anima-flipperY-on:hover,.anima-flipperY-one>:focus,.anima-flipperY-one>:hover,:focus>.anima-flipperY-in,:hover>.anima-flipperY-in{-webkit-animation-name:flipperY;animation-name:flipperY}.anima-twistT,.anima-twistT-all>*,.anima-twistT-many:focus>*,.anima-twistT-many:hover>*,.anima-twistT-on:focus,.anima-twistT-on:hover,.anima-twistT-one>:focus,.anima-twistT-one>:hover,:focus>.anima-twistT-in,:hover>.anima-twistT-in{-webkit-animation-name:twistT;animation-name:twistT}.anima-twistR,.anima-twistR-all>*,.anima-twistR-many:focus>*,.anima-twistR-many:hover>*,.anima-twistR-on:focus,.anima-twistR-on:hover,.anima-twistR-one>:focus,.anima-twistR-one>:hover,:focus>.anima-twistR-in,:hover>.anima-twistR-in{-webkit-animation-name:twistR;animation-name:twistR}.anima-twistB,.anima-twistB-all>*,.anima-twistB-many:focus>*,.anima-twistB-many:hover>*,.anima-twistB-on:focus,.anima-twistB-on:hover,.anima-twistB-one>:focus,.anima-twistB-one>:hover,:focus>.anima-twistB-in,:hover>.anima-twistB-in{-webkit-animation-name:twistB;animation-name:twistB}.anima-twistL,.anima-twistL-all>*,.anima-twistL-many:focus>*,.anima-twistL-many:hover>*,.anima-twistL-on:focus,.anima-twistL-on:hover,.anima-twistL-one>:focus,.anima-twistL-one>:hover,:focus>.anima-twistL-in,:hover>.anima-twistL-in{-webkit-animation-name:twistL;animation-name:twistL}.anima-sm{-webkit-animation-duration:var(--animation-duration-sm);animation-duration:var(--animation-duration-sm)}.anima-md{-webkit-animation-duration:var(--animation-duration-md);animation-duration:var(--animation-duration-md)}.anima-lg{-webkit-animation-duration:var(--animation-duration-lg);animation-duration:var(--animation-duration-lg)}.anima-linear{-webkit-animation-timing-function:var(--animation-timing-function-linear);animation-timing-function:var(--animation-timing-function-linear)}.anima-in{-webkit-animation-timing-function:var(--animation-timing-function-in);animation-timing-function:var(--animation-timing-function-in)}.anima-out{-webkit-animation-timing-function:var(--animation-timing-function-out);animation-timing-function:var(--animation-timing-function-out)}.anima-inout{-webkit-animation-timing-function:var(--animation-timing-function-inout);animation-timing-function:var(--animation-timing-function-inout)}.anima-start{-webkit-animation-timing-function:var(--animation-timing-function-start);animation-timing-function:var(--animation-timing-function-start)}.anima-end{-webkit-animation-timing-function:var(--animation-timing-function-end);animation-timing-function:var(--animation-timing-function-end)}.anima-few{-webkit-animation-iteration-count:var(--animation-iteration-count-few);animation-iteration-count:var(--animation-iteration-count-few)}.anima-many{-webkit-animation-iteration-count:var(--animation-iteration-count-many);animation-iteration-count:var(--animation-iteration-count-many)}.anima-loop{-webkit-animation-iteration-count:var(--animation-iteration-count-loop);animation-iteration-count:var(--animation-iteration-count-loop)}.anima-min{-webkit-animation-delay:var(--animation-delay-min);animation-delay:var(--animation-delay-min)}.anima-max{-webkit-animation-delay:var(--animation-delay-max);animation-delay:var(--animation-delay-max)}.anima-alt{-webkit-animation-direction:alternate;animation-direction:alternate}.anima-rev{animation-direction:reverse}.anima-altrev{animation-direction:alternate-reverse} \ No newline at end of file diff --git a/package.json b/package.json index 2e7f7f9..ddec8b1 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "animadio", - "version": "5.3.0", + "version": "5.4.0", "description":"Animadio Framework - Grid & Flexbox Layouts - Reusable & Customizable Elements - Perform Complex Animations - Controls by Radio Buttons", "keywords": [ "css library", diff --git a/src/index.html b/src/index.html new file mode 100644 index 0000000..aa8a572 --- /dev/null +++ b/src/index.html @@ -0,0 +1,199 @@ + + + + + + + Animadio Lab + + + + + + + +

Animadio Lab

+ +
+

Colors

+ +
+

Hues

+
    +
  • Red
    • +
  • Orange
    • +
  • Yellow
    • +
  • Green
    • +
  • Sky
    • +
  • Blue
    • +
  • Violet
    • +
  • Pink
    • +
+
+ +
+

Grayscale

+
    +
  • Black
    • +
  • Gray
    • +
  • Silver
    • +
  • White
    • +
+
+
+ +
+

Background Colors

+ +
+

Hues

+
    +
  • Red
    • +
  • Orange
    • +
  • Yellow
    • +
  • Green
    • +
  • Sky
    • +
  • Blue
    • +
  • Violet
    • +
  • Pink
    • +
+
+ +
+

Grayscale

+
    +
  • Black
    • +
  • Gray
    • +
  • Silver
    • +
  • White
    • +
+
+
+ +
+

Fonts

+ +
+

Font Families

+
    +
  • Times, Serif
    • +
  • Helvetica, Sans-Serif
    • +
  • Courier, Monospace
    • +
  • Mistral, Cursive
    • +
  • Impact, Fantasy
    • +
+
+ +
+

Fonts

+
    +
  • Bold
    • +
  • Italic
    • +
+
+
+ +
+

Text

+ +
+

Text Align

+
    +
  • Center
    • +
  • Justify
    • +
  • Left
    • +
  • Right
    • +
+
+ +
+

Text Transform

+
    +
  • Capitalize
    • +
  • Uppercase
    • +
  • Lowercase
    • +
+
+ +
+

Text Decoration Line

+
    +
  • None
    • +
  • Underline
    • +
  • Overline
    • +
  • Line-Through
    • +
+
+ +
+

Text Decoration Style

+
    +
  • Dashed
    • +
  • Dotted
    • +
  • Double
    • +
  • Solid
    • +
  • Wavy
    • +
+
+ +
+

Text Decoration Color

+
    +
  • Red
    • +
  • Orange
    • +
  • Yellow
    • +
  • Green
    • +
  • Sky
    • +
  • Blue
    • +
  • Violet
    • +
  • Pink
    • +
+
+
+ +
+

Display

+ +
+

Flex

+ +
+ +
+

Grid

+ +
+ +
+

Gap

+ +
+ +
+

Place Content

+ +
+ +
+

Place Items

+ +
+ +
+

Place Self

+ +
+
+ + diff --git a/src/main.scss b/src/main.scss index c90d29f..ca278a9 100644 --- a/src/main.scss +++ b/src/main.scss @@ -5,21 +5,31 @@ /* Summary -- Colors -- Fonts -- Tags -- Flex -- Grid -- Gap -- Place -- Margin -- Border -- Padding -- Height -- Width -- Transform -- Keyframes -- Animation +base { + colors + fonts +} +tags { + tags +} +display { + flex + grid + gap + place +} +boxes { + margin + border + padding + height + width +} +anima { + transform + keyframes + animation +} */ @import "scss/base"; diff --git a/src/scss/_anima.scss b/src/scss/_anima.scss index 3d6d824..4ab95d4 100644 --- a/src/scss/_anima.scss +++ b/src/scss/_anima.scss @@ -48,7 +48,7 @@ $transforms: ( @include keyframes($key); } -/********** ANIMATIONS **********/ +/********** ANIMATION **********/ $animation-duration: ( "sm": 500ms, "md": 1s, @@ -88,7 +88,6 @@ $animation-direction: ( "altrev": alternate-reverse ) !default; -/********** ANIMATION **********/ [class*="anima-"] { --animation-duration: 2s; @@ -97,6 +96,8 @@ $animation-direction: ( --animation-#{$type}-#{$key}: #{$value}; } } + + animation-duration: var(--animation-duration); } // ********** OPTIONS MIXIN ********** @@ -106,15 +107,12 @@ $animation-direction: ( } } -/********** ANIMATION **********/ -[class*="anima"] { - animation-duration: var(--animation-duration); -} - +/********** ANIMATION NAME **********/ @each $key, $value in $transforms { @include states("anima-#{$key}", "animation-name", $key); } +/********** ANIMATION OPTIONS **********/ @each $type, $option in $animation-options { @each $key, $value in $option { @include anima($key, "animation-#{$type}", "var(--animation-#{$type}-#{$key})"); diff --git a/src/scss/_base.scss b/src/scss/_base.scss index 8a764ea..a70383b 100644 --- a/src/scss/_base.scss +++ b/src/scss/_base.scss @@ -32,25 +32,20 @@ $breakpoints: ( /********** COLORS **********/ $hues: ( - "red": ( 0, 100%, 50%), - "orange": ( 30, 100%, 50%), - "yellow": ( 60, 100%, 50%), - "lime": ( 90, 100%, 50%), - "green": (120, 100%, 50%), - "aqua": (150, 100%, 50%), - "cyan": (180, 100%, 50%), - "sky": (210, 100%, 50%), - "blue": (240, 100%, 50%), - "indigo": (270, 100%, 50%), - "magenta": (300, 100%, 50%), - "pink": (330, 100%, 50%) + "red": (348, 83%, 47%), // Crimson + "orange": ( 33, 100%, 50%), // DarkOrange + "yellow": ( 51, 100%, 50%), // Gold + "green": (120, 61%, 50%), // LimeGreen + "sky": (195, 100%, 50%), // DeepSkyBlue + "blue": (210, 100%, 56%), // DodgerBlue + "violet": (271, 76%, 53%), // BlueViolet + "pink": (328, 100%, 54%) // DeepPink ) !default; $grayscale: ( "black": (0, 0%, 0%), - "slate": (0, 0%, 25%), - "gray": (0, 0%, 50%), - "silver": (0, 0%, 75%), + "gray": (0, 0%, 33%), + "silver": (0, 0%, 67%), "white": (0, 0%, 100%) ) !default; @@ -106,7 +101,7 @@ $font-family: ( "serif": (Times, serif), "monospace": (Courier, monospace), "cursive": (Mistral, cursive), - "fantasy": (Blackletter, fantasy) + "fantasy": (Impact, fantasy) ) !default; :root { @@ -126,19 +121,19 @@ $font: ( ) !default; @each $key, $value in $font { - @include states("font-#{$key}", "font-#{$value}", $key); + @include states("#{$key}", "font-#{$value}", $key); } /********** TEXT ALIGN **********/ $text-align: ( "center": center, "justify": justify, - "right": right, - "left": left + "left": left, + "right": right ) !default; @each $key, $value in $text-align { - @include global("align-#{$key}", "text-align", $value); + @include global("#{$key}", "text-align", $value); } /********** TEXT TRANSFORM **********/ @@ -149,17 +144,20 @@ $trans: ( ) !default; @each $key, $value in $trans { - @include states("trans-#{$key}", "text-transform", $value); + @include states("#{$key}", "text-transform", $value); } /********** TEXT DECORATION LINE **********/ $text-decoration-line: ( "none": none, - "under": underline, "over": overline, "through": line-through ) !default; +[class*="deco"] { + text-decoration-line: underline; +} + @each $key, $value in $text-decoration-line { @include states("deco-#{$key}", "text-decoration-line", $value); } @@ -169,7 +167,6 @@ $text-decoration-style: ( "dash": dashed, "dot": dotted, "double": double, - "solid": solid, "wavy": wavy ) !default; @@ -178,8 +175,6 @@ $text-decoration-style: ( } /********** TEXT DECORATION COLOR **********/ -@each $color in $colors { - @each $key, $value in $color { - @include states("deco-#{$key}", "text-decoration-color", "var(--#{$key})"); - } +@each $key, $value in $hues { + @include states("deco-#{$key}", "text-decoration-color", "var(--#{$key})"); } diff --git a/src/scss/_boxes.scss b/src/scss/_boxes.scss index 6e4b98b..aa0a660 100644 --- a/src/scss/_boxes.scss +++ b/src/scss/_boxes.scss @@ -1,6 +1,4 @@ -/********** BOXES **********/ -/***************************/ - +// ********** BOXES ********** $box-none: ( "none": "", "top-none": "-top", @@ -38,6 +36,9 @@ $containers: ( [class*="container"] { --container-max-width: 100%; + + margin: auto; + max-width: var(--container-max-width); } @mixin container($key, $type, $value) { @@ -46,11 +47,6 @@ $containers: ( } } -[class*="container"] { - margin: auto; - max-width: var(--container-max-width); -} - @each $key, $value in $containers { @include container($key, "tn", $value); } @@ -105,7 +101,6 @@ $margins: ( $border-style: ( "dash": dashed, "dot": dotted, - "solid": solid, "double": double, "groove": groove, "ridge": ridge, @@ -120,9 +115,8 @@ $border-width: ( ) !default; $border-radius: ( - "square": unset, - "curve": 5px, - "round": 10px, + "curve": 20px, + "round": 50px, "circle": 50% ) !default; @@ -133,6 +127,7 @@ $border-radius: ( @each $key, $value in $border-radius { --border-radius-#{$key}: #{$value}; } + border-style: solid; } /********** BORDER STYLE **********/ @@ -146,10 +141,8 @@ $border-radius: ( } /********** BORDER COLOR **********/ -@each $color in $colors { - @each $key, $value in $color { - @include states("bord-#{$key}", "border-color", "var(--#{$key})"); - } +@each $key, $value in $hues { + @include states("bord-#{$key}", "border-color", "var(--#{$key})"); } /********** BORDER RADIUS **********/ @@ -197,9 +190,9 @@ $paddings: ( /********** HEIGHT **********/ $height: ( - "sm": 10vh, - "md": 20vh, - "lg": 50vh + "sm": 20%, + "md": 50%, + "lg": 100% ) !default; [class*="height-"] { @@ -236,9 +229,9 @@ $height: ( /********** WIDTH **********/ $width: ( - "sm": 10vw, - "md": 20vw, - "lg": 50vw + "sm": 20%, + "md": 50%, + "lg": 100% ) !default; [class*="width-"] { diff --git a/src/scss/_display.scss b/src/scss/_display.scss index 943725d..325077a 100644 --- a/src/scss/_display.scss +++ b/src/scss/_display.scss @@ -1,7 +1,4 @@ -/********** DISPLAY **********/ -/*****************************/ - -/********** FLEX CONTAINER **********/ +/********** FLEX **********/ [class*="flex"] { display: flex; } @@ -54,20 +51,19 @@ [class*="grid"] { --grid-max-width: 100vw; --grid-margin: auto; + + display: grid; + max-width: var(--grid-max-width); + margin: var(--grid-margin); } +/********** GRID TEMPLATE **********/ @mixin grid($column, $key) { [class*="grid-"][class*="-#{$column}#{$key}"] { grid-template: auto/repeat(#{$column}, auto); } } -[class*="grid"] { - display: grid; - max-width: var(--grid-max-width); - margin: var(--grid-margin); -} - @for $i from 2 to 13 { @include grid($i, "tn"); }