From f3d2d2a7b3143048d01dec647d9a99b791abc5b7 Mon Sep 17 00:00:00 2001 From: Philippe Beck Date: Fri, 27 Jan 2023 00:39:29 +0400 Subject: [PATCH 01/14] Add the index to Pages for demo --- README.md | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/README.md b/README.md index 833bf5a..2bc31a8 100644 --- a/README.md +++ b/README.md @@ -23,6 +23,7 @@ - [CDN](#cdn) - [Download](#download) - [Content](#content) + - [Documentation](#documentation) --- @@ -50,3 +51,9 @@ - For development : `/dist/animadio.css` - For production : `/dist/animadio.min.css` + +--- + +## Documentation + +[Animadio Lab !](https://philippebeck.github.io/animadio) From 0188005bd02263b26f6ddbfde01528057f7d6f31 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Wed, 1 Feb 2023 10:12:01 +0000 Subject: [PATCH 02/14] Bump grunt from 1.5.3 to 1.6.1 Bumps [grunt](https://github.com/gruntjs/grunt) from 1.5.3 to 1.6.1. - [Release notes](https://github.com/gruntjs/grunt/releases) - [Changelog](https://github.com/gruntjs/grunt/blob/main/CHANGELOG) - [Commits](https://github.com/gruntjs/grunt/compare/v1.5.3...v1.6.1) --- updated-dependencies: - dependency-name: grunt dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] --- package-lock.json | 142 ++++++++++++++-------------------------------- 1 file changed, 44 insertions(+), 98 deletions(-) diff --git a/package-lock.json b/package-lock.json index f9da88d..0594aaa 100644 --- a/package-lock.json +++ b/package-lock.json @@ -636,9 +636,9 @@ } }, "node_modules/dateformat": { - "version": "3.0.3", - "resolved": "https://registry.npmjs.org/dateformat/-/dateformat-3.0.3.tgz", - "integrity": "sha512-jyCETtSl3VMZMWeRo7iY1FL19ges1t55hMo5yaam4Jrsm5EPL89UQkoQRyiI+Yf4k8r2ZpdngkV8hr1lIdjb3Q==", + "version": "4.6.3", + "resolved": "https://registry.npmjs.org/dateformat/-/dateformat-4.6.3.tgz", + "integrity": "sha512-2P0p0pFGzHS5EMnhdxQi7aJN+iMheud0UhG4dlE1DLAlvL8JHjJJTX/CSm4JXwV0Ka5nGk3zC5mcb5bUQUxxMA==", "dev": true, "engines": { "node": "*" @@ -756,19 +756,6 @@ "iconv-lite": "^0.6.2" } }, - "node_modules/encoding/node_modules/iconv-lite": { - "version": "0.6.3", - "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz", - "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==", - "dev": true, - "optional": true, - "dependencies": { - "safer-buffer": ">= 2.1.2 < 3.0.0" - }, - "engines": { - "node": ">=0.10.0" - } - }, "node_modules/env-paths": { "version": "2.2.1", "resolved": "https://registry.npmjs.org/env-paths/-/env-paths-2.2.1.tgz", @@ -898,31 +885,18 @@ } }, "node_modules/findup-sync": { - "version": "0.3.0", - "resolved": "https://registry.npmjs.org/findup-sync/-/findup-sync-0.3.0.tgz", - "integrity": "sha512-z8Nrwhi6wzxNMIbxlrTzuUW6KWuKkogZ/7OdDVq+0+kxn77KUH1nipx8iU6suqkHqc4y6n7a9A8IpmxY/pTjWg==", - "dev": true, - "dependencies": { - "glob": "~5.0.0" - }, - "engines": { - "node": ">= 0.6.0" - } - }, - "node_modules/findup-sync/node_modules/glob": { - "version": "5.0.15", - "resolved": "https://registry.npmjs.org/glob/-/glob-5.0.15.tgz", - "integrity": "sha512-c9IPMazfRITpmAAKi22dK1VKxGDX9ehhqfABDriL/lzO92xcUKEJPQHrVA/2YHSNFB4iFlykVmWvwo48nr3OxA==", + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/findup-sync/-/findup-sync-5.0.0.tgz", + "integrity": "sha512-MzwXju70AuyflbgeOhzvQWAvvQdo1XL0A9bVvlXsYcFEBM87WR4OakL4OfZq+QRmr+duJubio+UtNQCPsVESzQ==", "dev": true, "dependencies": { - "inflight": "^1.0.4", - "inherits": "2", - "minimatch": "2 || 3", - "once": "^1.3.0", - "path-is-absolute": "^1.0.0" + "detect-file": "^1.0.0", + "is-glob": "^4.0.3", + "micromatch": "^4.0.4", + "resolve-dir": "^1.0.1" }, "engines": { - "node": "*" + "node": ">= 10.13.0" } }, "node_modules/fined": { @@ -1136,32 +1110,30 @@ "dev": true }, "node_modules/grunt": { - "version": "1.5.3", - "resolved": "https://registry.npmjs.org/grunt/-/grunt-1.5.3.tgz", - "integrity": "sha512-mKwmo4X2d8/4c/BmcOETHek675uOqw0RuA/zy12jaspWqvTp4+ZeQF1W+OTpcbncnaBsfbQJ6l0l4j+Sn/GmaQ==", + "version": "1.6.1", + "resolved": "https://registry.npmjs.org/grunt/-/grunt-1.6.1.tgz", + "integrity": "sha512-/ABUy3gYWu5iBmrUSRBP97JLpQUm0GgVveDCp6t3yRNIoltIYw7rEj3g5y1o2PGPR2vfTRGa7WC/LZHLTXnEzA==", "dev": true, "dependencies": { - "dateformat": "~3.0.3", + "dateformat": "~4.6.2", "eventemitter2": "~0.4.13", "exit": "~0.1.2", - "findup-sync": "~0.3.0", + "findup-sync": "~5.0.0", "glob": "~7.1.6", "grunt-cli": "~1.4.3", "grunt-known-options": "~2.0.0", "grunt-legacy-log": "~3.0.0", "grunt-legacy-util": "~2.0.1", - "iconv-lite": "~0.4.13", + "iconv-lite": "~0.6.3", "js-yaml": "~3.14.0", "minimatch": "~3.0.4", - "mkdirp": "~1.0.4", - "nopt": "~3.0.6", - "rimraf": "~3.0.2" + "nopt": "~3.0.6" }, "bin": { "grunt": "bin/grunt" }, "engines": { - "node": ">=8" + "node": ">=16" } }, "node_modules/grunt-cli": { @@ -1532,12 +1504,12 @@ } }, "node_modules/iconv-lite": { - "version": "0.4.24", - "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz", - "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==", + "version": "0.6.3", + "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz", + "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==", "dev": true, "dependencies": { - "safer-buffer": ">= 2.1.2 < 3" + "safer-buffer": ">= 2.1.2 < 3.0.0" }, "engines": { "node": ">=0.10.0" @@ -4033,9 +4005,9 @@ } }, "dateformat": { - "version": "3.0.3", - "resolved": "https://registry.npmjs.org/dateformat/-/dateformat-3.0.3.tgz", - "integrity": "sha512-jyCETtSl3VMZMWeRo7iY1FL19ges1t55hMo5yaam4Jrsm5EPL89UQkoQRyiI+Yf4k8r2ZpdngkV8hr1lIdjb3Q==", + "version": "4.6.3", + "resolved": "https://registry.npmjs.org/dateformat/-/dateformat-4.6.3.tgz", + "integrity": "sha512-2P0p0pFGzHS5EMnhdxQi7aJN+iMheud0UhG4dlE1DLAlvL8JHjJJTX/CSm4JXwV0Ka5nGk3zC5mcb5bUQUxxMA==", "dev": true }, "debug": { @@ -4121,18 +4093,6 @@ "optional": true, "requires": { "iconv-lite": "^0.6.2" - }, - "dependencies": { - "iconv-lite": { - "version": "0.6.3", - "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz", - "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==", - "dev": true, - "optional": true, - "requires": { - "safer-buffer": ">= 2.1.2 < 3.0.0" - } - } } }, "env-paths": { @@ -4230,27 +4190,15 @@ } }, "findup-sync": { - "version": "0.3.0", - "resolved": "https://registry.npmjs.org/findup-sync/-/findup-sync-0.3.0.tgz", - "integrity": "sha512-z8Nrwhi6wzxNMIbxlrTzuUW6KWuKkogZ/7OdDVq+0+kxn77KUH1nipx8iU6suqkHqc4y6n7a9A8IpmxY/pTjWg==", + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/findup-sync/-/findup-sync-5.0.0.tgz", + "integrity": "sha512-MzwXju70AuyflbgeOhzvQWAvvQdo1XL0A9bVvlXsYcFEBM87WR4OakL4OfZq+QRmr+duJubio+UtNQCPsVESzQ==", "dev": true, "requires": { - "glob": "~5.0.0" - }, - "dependencies": { - "glob": { - "version": "5.0.15", - "resolved": "https://registry.npmjs.org/glob/-/glob-5.0.15.tgz", - "integrity": "sha512-c9IPMazfRITpmAAKi22dK1VKxGDX9ehhqfABDriL/lzO92xcUKEJPQHrVA/2YHSNFB4iFlykVmWvwo48nr3OxA==", - "dev": true, - "requires": { - "inflight": "^1.0.4", - "inherits": "2", - "minimatch": "2 || 3", - "once": "^1.3.0", - "path-is-absolute": "^1.0.0" - } - } + "detect-file": "^1.0.0", + "is-glob": "^4.0.3", + "micromatch": "^4.0.4", + "resolve-dir": "^1.0.1" } }, "fined": { @@ -4418,26 +4366,24 @@ "dev": true }, "grunt": { - "version": "1.5.3", - "resolved": "https://registry.npmjs.org/grunt/-/grunt-1.5.3.tgz", - "integrity": "sha512-mKwmo4X2d8/4c/BmcOETHek675uOqw0RuA/zy12jaspWqvTp4+ZeQF1W+OTpcbncnaBsfbQJ6l0l4j+Sn/GmaQ==", + "version": "1.6.1", + "resolved": "https://registry.npmjs.org/grunt/-/grunt-1.6.1.tgz", + "integrity": "sha512-/ABUy3gYWu5iBmrUSRBP97JLpQUm0GgVveDCp6t3yRNIoltIYw7rEj3g5y1o2PGPR2vfTRGa7WC/LZHLTXnEzA==", "dev": true, "requires": { - "dateformat": "~3.0.3", + "dateformat": "~4.6.2", "eventemitter2": "~0.4.13", "exit": "~0.1.2", - "findup-sync": "~0.3.0", + "findup-sync": "~5.0.0", "glob": "~7.1.6", "grunt-cli": "~1.4.3", "grunt-known-options": "~2.0.0", "grunt-legacy-log": "~3.0.0", "grunt-legacy-util": "~2.0.1", - "iconv-lite": "~0.4.13", + "iconv-lite": "~0.6.3", "js-yaml": "~3.14.0", "minimatch": "~3.0.4", - "mkdirp": "~1.0.4", - "nopt": "~3.0.6", - "rimraf": "~3.0.2" + "nopt": "~3.0.6" } }, "grunt-cli": { @@ -4725,12 +4671,12 @@ } }, "iconv-lite": { - "version": "0.4.24", - "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz", - "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==", + "version": "0.6.3", + "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz", + "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==", "dev": true, "requires": { - "safer-buffer": ">= 2.1.2 < 3" + "safer-buffer": ">= 2.1.2 < 3.0.0" } }, "imurmurhash": { From e9db2d6ba833e077a1d8dbb99054c279112d23a4 Mon Sep 17 00:00:00 2001 From: Philippe Beck Date: Sun, 19 Feb 2023 00:14:30 +0400 Subject: [PATCH 03/14] Create maps.scss --- src/scss/_maps.scss | 251 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 251 insertions(+) create mode 100644 src/scss/_maps.scss diff --git a/src/scss/_maps.scss b/src/scss/_maps.scss new file mode 100644 index 0000000..d1f6dd6 --- /dev/null +++ b/src/scss/_maps.scss @@ -0,0 +1,251 @@ +//********** MAPS **********// + +//********** BREAKPOINTS **********// +$breakpoints: ( + "sm": 576px, + "md": 768px, + "lg": 992px, + "xl": 1200px, + "wd": 1600px +) !default; + +//********** FONT FAMILY **********// +$font-family: ( + "sans-serif": (Helvetica, sans-serif), + "serif": (Times, serif), + "monospace": (Courier, monospace), + "cursive": (Mistral, cursive), + "fantasy": (Impact, fantasy) +) !default; + +//********** COLORS **********// +$hues: ( + "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%), + "gray": (0, 0%, 33%), + "silver": (0, 0%, 67%), + "white": (0, 0%, 100%) +) !default; + +$colors: $hues, $grayscale; + +//********** TRANSFORM **********// +$transforms: ( + "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) +) !default; + +//********** GAP **********// +$gap: ( + "1": 5px, + "2": 10px, + "3": 20px, + "4": 50px +) !default; + +//********** PLACE **********// +$place-content: ( + "around": space-around, + "between": space-between, + "evenly": space-evenly, + "center": center, + "stretch": stretch, + "start": flex-start, + "end": flex-end +) !default; + +$place-items: ( + "normal": normal, + "base": baseline, + "center": center, + "stretch": stretch, + "start": flex-start, + "end": flex-end +) !default; + +$place-self: ( + "auto": auto, + "normal": normal, + "base": baseline, + "center": center, + "stretch": stretch, + "start": flex-start, + "end": flex-end +) !default; + +//********** MARGIN **********// +$margins: ( + "auto": auto, + "none": 0, + "tn": 2px, + "sm": 5px, + "md": 10px, + "lg": 20px, + "xl": 50px, + "wd": 100px +) !default; + +//********** BORDER **********// +$border-style: ( + "dash": dashed, + "dot": dotted, + "double": double, + "groove": groove, + "ridge": ridge, + "in": inset, + "out": outset +) !default; + +$border-width: ( + "sm": 1px, + "md": 2px, + "lg": 5px +) !default; + +$border-radius: ( + "curve": 10px, + "round": 20px, + "circle": 50% +) !default; + +//********** PADDING **********// +$paddings: ( + "auto": auto, + "none": 0, + "tn": 2px, + "sm": 5px, + "md": 10px, + "lg": 20px, + "xl": 50px, + "wd": 100px +) !default; + +//********** CONTAINER **********// +$containers: ( + "50": 50%, + "60": 60%, + "70": 70%, + "80": 80%, + "90": 90% +) !default; + +//********** HEIGHT **********// +$height: ( + "sm": 20%, + "md": 50%, + "lg": 100% +) !default; + +//********** WIDTH **********// +$width: ( + "sm": 20%, + "md": 50%, + "lg": 100% +) !default; + +//********** FONT **********// +$font: ( + "bold": "weight", + "italic": "style" +) !default; + +//********** TEXT **********// +$text-align: ( + "center": center, + "justify": justify, + "left": left, + "right": right +) !default; + +$trans: ( + "cap": "capitalize", + "up": "uppercase", + "low": "lowercase" +) !default; + +$text-decoration-line: ( + "over": overline, + "through": line-through +) !default; + +$text-decoration-style: ( + "dash": dashed, + "dot": dotted, + "double": double, + "wavy": wavy +) !default; + +//********** ANIMATION **********// +$animation-duration: ( + "sm": 500ms, + "md": 1s, + "lg": 2s +) !default; + +$animation-timing-function: ( + "linear": linear, + "in": ease-in, + "out": ease-out, + "inout": ease-in-out, + "start": step-start, + "end": step-end +) !default; + +$animation-iteration-count: ( + "few": 2, + "many": 5, + "loop": infinite +) !default; + +$animation-delay: ( + "min": 500ms, + "max": 1s +) !default; + +$animation-options: ( + "duration": $animation-duration, + "timing-function": $animation-timing-function, + "iteration-count": $animation-iteration-count, + "delay": $animation-delay +) !default; + +$animation-direction: ( + "alt": alternate, + "rev": reverse, + "altrev": alternate-reverse +) !default; From 04189695ac8a3a426dc1ccc8cdaf759277f385b3 Mon Sep 17 00:00:00 2001 From: Philippe Beck Date: Sun, 19 Feb 2023 00:14:47 +0400 Subject: [PATCH 04/14] Create vars.scss --- src/scss/_vars.scss | 238 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 238 insertions(+) create mode 100644 src/scss/_vars.scss diff --git a/src/scss/_vars.scss b/src/scss/_vars.scss new file mode 100644 index 0000000..ecb2c7a --- /dev/null +++ b/src/scss/_vars.scss @@ -0,0 +1,238 @@ +/********** VARS **********/ + +:root { + /********** FONT FAMILY **********/ + @each $key, $value in $font-family { + --ani-#{$key}: #{$value}; + } + + /********** COLORS **********/ + /* hsl values */ + @each $color in $colors { + @each $key, $value in $color { + --ani-#{$key}-hsl: #{$value}; + } + } + + /* opaque colors */ + @each $color in $colors { + @each $key, $value in $color { + --ani-#{$key}: hsl(var(--ani-#{$key}-hsl)); + } + } + + /* opacity */ + --ani-dark: 0.8; + --ani-light: 0.2; + + /* transparent colors */ + @each $color in $colors { + @each $key, $value in $color { + --ani-#{$key}-dark: hsla(var(--ani-#{$key}-hsl), var(--ani-dark)); + --ani-#{$key}-light: hsla(var(--ani-#{$key}-hsl), var(--ani-light)); + } + } + + /********** TRANSFORM **********/ + @each $key, $value in $transforms { + --ani-#{$key}: #{$value}; + } +} + +/********** TAGS **********/ +* { + --ani-target-margins: 7rem; +} + +html { + --ani-html-font-size: 62.5%; +} + +body { + --ani-body-font-size: 2rem; + --ani-body-line-height: 1.6; + --ani-body-margin: auto; + --ani-body-max-width: 2000px; + --ani-body-overflow: break-word; + --ani-body-padding: 0; +} + +main { + --ani-main-text-align: center; +} + +article { + --ani-article-margin-bottom: 20px; +} + +h1 { + --ani-title-font-size: calc(var(--ani-body-font-size) * 2); +} + +h2 { + --ani-title-font-size: calc(var(--ani-body-font-size) * 1.8); +} + +h3 { + --ani-title-font-size: calc(var(--ani-body-font-size) * 1.6); +} + +h4 { + --ani-title-font-size: calc(var(--ani-body-font-size) * 1.4); +} + +h5 { + --ani-title-font-size: calc(var(--ani-body-font-size) * 1.2); +} + +h6 { + --ani-title-font-size: var(--ani-body-font-size); +} + +h1, +h2, +h3, +h4, +h5, +h6 { + --ani-title-text-align: center; + --ani-title-text-transform: capitalize; +} + +a { + --ani-link-outline: 0; + --ani-link-text-decoration: none; +} + +ul { + --ani-list-margin: 0 0 10px; + --ani-list-padding: 0; + --ani-list-style: none; +} + +table { + --ani-table-border-collapse: collapse; + --ani-table-margin: auto; + --ani-table-text-align: center; + --ani-table-vertical-align: middle; +} + +code, +pre { + --ani-code-margin: auto; + --ani-code-overflow: scroll; + --ani-code-padding: 10px; + --ani-code-text-align: initial; + --ani-code-width: 100%; +} + +figure { + --ani-figure-margin: 0; +} + +img, +video { + --ani-img-max-width: 100%; + --ani-img-height: auto; + --ani-img-object-fit: contain; +} + +button, +[type="button"], +[type="reset"], +[type="submit"] { + --ani-button-cursor: pointer; +} + +/********** GRID **********/ +[class*="grid"] { + --ani-grid-max-width: 100vw; + --ani-grid-margin: auto; +} + +[class*="gap-"] { + @each $key, $value in $gap { + --ani-gap#{$key}: #{$value}; + } +} + +/********** MARGIN **********/ +[class*="mar-"] { + @each $key, $value in $margins { + --ani-margin-#{$key}: #{$value}; + } +} + +/********** BORDER **********/ +[class*="bord"] { + @each $key, $value in $border-width { + --ani-border-width-#{$key}: #{$value}; + } + @each $key, $value in $border-radius { + --ani-border-radius-#{$key}: #{$value}; + } +} + +/********** PADDING **********/ +[class*="pad-"] { + @each $key, $value in $paddings { + --ani-padding-#{$key}: #{$value}; + } +} + +/********** CONTAINER **********/ +[class*="container"] { + --ani-container-max-width: 100%; +} + +/********** HEIGHT **********/ +[class*="height-"] { + @each $key, $value in $height { + --ani-height-#{$key}: #{$value}; + } +} + +/********** MAX HEIGHT **********/ +[class*="max-h-"] { + @each $key, $value in $height { + --ani-max-height-#{$key}: #{$value}; + } +} + +/********** MIN HEIGHT **********/ +[class*="min-h-"] { + @each $key, $value in $height { + --ani-min-height-#{$key}: #{$value}; + } +} + +/********** WIDTH **********/ +[class*="width-"] { + @each $key, $value in $width { + --ani-width-#{$key}: #{$value}; + } +} + +/********** MAX WIDTH **********/ +[class*="max-w-"] { + @each $key, $value in $width { + --ani-max-width-#{$key}: #{$value}; + } +} + +[class*="min-w-"] { + @each $key, $value in $width { + --ani-min-width-#{$key}: #{$value}; + } +} + +/********** ANIMATION **********/ +[class*="anima-"] { + --ani-animation-duration: 2s; + + @each $type, $option in $animation-options { + @each $key, $value in $option { + --ani-animation-#{$type}-#{$key}: #{$value}; + } + } +} From 6e23e08976a930fb11ab0feff951cf22874a0877 Mon Sep 17 00:00:00 2001 From: Philippe Beck Date: Sun, 19 Feb 2023 00:15:02 +0400 Subject: [PATCH 05/14] Create mixins.scss --- src/scss/_mixins.scss | 81 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 81 insertions(+) create mode 100644 src/scss/_mixins.scss diff --git a/src/scss/_mixins.scss b/src/scss/_mixins.scss new file mode 100644 index 0000000..1c77848 --- /dev/null +++ b/src/scss/_mixins.scss @@ -0,0 +1,81 @@ +//********** MIXINS **********// +@mixin default($class, $property, $value) { + .#{$class} { + #{$property}: #{$value}; + } +} + +@mixin global($class, $property, $value) { + .#{$class}, + .#{$class}-all > * { + #{$property}: #{$value}; + } +} + +@mixin states($class, $property, $value) { + .#{$class}, + .#{$class}-all > *, + .#{$class}-on:hover, + .#{$class}-on:focus, + *:hover > .#{$class}-in, + *:focus > .#{$class}-in, + .#{$class}-one > *:hover, + .#{$class}-one > *:focus, + .#{$class}-many:hover > *, + .#{$class}-many:focus > * { + #{$property}: #{$value}; + } +} + +//********** KEYFRAMES **********// +@mixin keyframes($key) { + @keyframes #{$key} { + from { + transform: var(--ani-#{$key}); + } + } +} + +@each $key, $value in $transforms { + @include keyframes($key); +} + +//********** GRID **********// +@mixin grid($column, $key) { + [class*="grid-"][class*="-#{$column}#{$key}"] { + grid-template: auto/repeat(#{$column}, auto); + } +} + +//********** GAP **********// +@mixin gap($size, $type) { + [class*="gap-"][class*="-#{$type}#{$size}"] { + gap: var(--ani-gap#{$size}); + } +} + +//********** PLACE **********// +@mixin place-content($key, $type, $value) { + .content-#{$key}#{$type} { + place-content: #{$value}; + } +} + +@mixin place-items($key, $type, $value) { + .items-#{$key}#{$type} { + place-items: #{$value}; + } +} + +@mixin place-self($key, $type, $value) { + .self-#{$key}#{$type} { + place-self: #{$value}; + } +} + +//********** CONTAINER **********// +@mixin container($key, $type, $value) { + [class*="container-"][class*="-#{$key}#{$type}"] { + max-width: #{$value}; + } +} From c27c42540d711f57262c06de74d2676840dd7cff Mon Sep 17 00:00:00 2001 From: Philippe Beck Date: Sun, 19 Feb 2023 00:15:38 +0400 Subject: [PATCH 06/14] Remove vars from tags --- src/scss/_tags.scss | 129 +++++++++++++------------------------------- 1 file changed, 37 insertions(+), 92 deletions(-) diff --git a/src/scss/_tags.scss b/src/scss/_tags.scss index 971af74..445971c 100644 --- a/src/scss/_tags.scss +++ b/src/scss/_tags.scss @@ -1,17 +1,15 @@ /********** TAGS **********/ * { - --target-margins: 7rem; box-sizing: border-box; &:target { - padding-top: var(--target-margins); - margin-top: -var(--target-margins); + padding-top: var(--ani-target-margins); + margin-top: -var(--ani-target-margins); } } html { - --html-font-size: 62.5%; - font-size: var(--html-font-size); + font-size: var(--ani-html-font-size); scroll-behavior: smooth; } @@ -22,53 +20,21 @@ html { } body { - --body-font-size: 2rem; - --body-line-height: 1.6; - --body-margin: auto; - --body-max-width: 2000px; - --body-overflow: break-word; - --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); - overflow-wrap: var(--body-overflow); + margin: var(--ani-body-margin); + padding: var(--ani-body-padding); + max-width: var(--ani-body-max-width); + line-height: var(--ani-body-line-height); + font-size: var(--ani-body-font-size); + font-family: var(--ani-sans-serif); + overflow-wrap: var(--ani-body-overflow); } main { - --main-text-align: center; - text-align: var(--main-text-align); + text-align: var(--ani-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); + margin-bottom: var(--ani-article-margin-bottom); } h1, @@ -77,77 +43,56 @@ 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); + font-family: var(--ani-serif); + text-align: var(--ani-title-text-align); + text-transform: var(--ani-title-text-transform); + font-size: var(--ani-title-font-size); } a { - --link-outline: 0; - --link-text-decoration: none; - text-decoration: var(--link-text-decoration); - outline: var(--link-outline); + text-decoration: var(--ani-link-text-decoration); + outline: var(--ani-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); + margin: var(--ani-list-margin); + padding: var(--ani-list-padding); + list-style: var(--ani-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); + margin: var(--ani-table-margin); + border-collapse: var(--ani-table-border-collapse); + text-align: var(--ani-table-text-align); + vertical-align: var(--ani-table-vertical-align); + font-family: var(--ani-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); + overflow: var(--ani-code-overflow); + margin: var(--ani-code-margin); + padding: var(--ani-code-padding); + width: var(--ani-code-width); + font-family: var(--ani-monospace); + text-align: var(--ani-code-text-align); } figure { - --figure-margin: 0; - margin: var(--figure-margin); + margin: var(--ani-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); - object-fit: var(--img-object-fit); + max-width: var(--ani-img-max-width); + height: var(--ani-img-height); + object-fit: var(--ani-img-object-fit); } button, [type="button"], [type="reset"], [type="submit"] { - --button-cursor: pointer; - cursor: var(--button-cursor); + cursor: var(--ani-button-cursor); } From 6524c6cac2f0b7f7c9b76b7a8d5e81769d6e0bfe Mon Sep 17 00:00:00 2001 From: Philippe Beck Date: Sun, 19 Feb 2023 00:16:00 +0400 Subject: [PATCH 07/14] Move all classes in classes.scss --- src/scss/_classes.scss | 283 +++++++++++++++++++++++++++++++++++++++++ src/scss/_display.scss | 195 ---------------------------- 2 files changed, 283 insertions(+), 195 deletions(-) create mode 100644 src/scss/_classes.scss delete mode 100644 src/scss/_display.scss diff --git a/src/scss/_classes.scss b/src/scss/_classes.scss new file mode 100644 index 0000000..d208cc5 --- /dev/null +++ b/src/scss/_classes.scss @@ -0,0 +1,283 @@ +/********** FLEX **********/ +[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; +} + +/********** FLEX ITEM **********/ +@for $i from 1 through 4 { + [class*="flex-"][class*="-order#{$i}"] { + order: #{$i}; + } +} + +@for $i from 1 through 4 { + [class*="flex-"][class*="-grow#{$i}"] { + flex-grow: #{$i}; + } +} + +@for $i from 1 through 4 { + [class*="flex-"][class*="-shrink#{$i}"] { + flex-shrink: #{$i}; + } +} + +/********** GRID **********/ +[class*="grid"] { + display: grid; + max-width: var(--ani-grid-max-width); + margin: var(--ani-grid-margin); +} + +/********** GRID TEMPLATE **********/ +@for $i from 2 to 13 { + @include grid($i, "tn"); +} + +@each $key, $value in $breakpoints { + @media (min-width: $value) { + @for $i from 2 to 13 { + @include grid($i, $key); + } + } +} + +/********** GAP **********/ +@each $key, $value in $gap { + @include gap($key, "tn"); +} + +@each $type, $breakpoint in $breakpoints { + @media (min-width: $breakpoint) { + @each $key, $value in $gap { + @include gap($key, $type); + } + } +} + +/********** PLACE CONTENT **********/ +@each $key, $value in $place-content { + @include place-content($key, "", $value); +} + +@each $type, $breakpoint in $breakpoints { + @media (min-width: $breakpoint) { + @each $key, $value in $place-content { + @include place-content($key, "-#{$type}", $value); + } + } +} + +/********** PLACE ITEMS **********/ +@each $key, $value in $place-items { + @include place-items($key, "", $value); +} + +@each $type, $breakpoint in $breakpoints { + @media (min-width: $breakpoint) { + @each $key, $value in $place-items { + @include place-items($key, "-#{$type}", $value); + } + } +} + +/********** PLACE-SELF **********/ +@each $key, $value in $place-self { + @include place-self($key, "", $value); +} + +@each $type, $breakpoint in $breakpoints { + @media (min-width: $breakpoint) { + @each $key, $value in $place-self { + @include place-self($key, "-#{$type}", $value); + } + } +} + +/********** MARGIN **********/ +@each $key, $value in $margins { + @include global("mar-#{$key}", "margin", "var(--ani-margin-#{$key})"); +} + +/********** BORDER **********/ +.bord { + border-style: solid; +} + +/********** BORDER STYLE **********/ +@each $key, $value in $border-style { + @include states("bord-#{$key}", "border-style", $value); +} + +/********** BORDER WIDTH **********/ +@each $key, $value in $border-width { + @include states("bord-#{$key}", "border-width", $value); +} + +/********** BORDER COLOR **********/ +@each $key, $value in $hues { + @include states("bord-#{$key}", "border-color", "var(--ani-#{$key})"); +} + +/********** BORDER RADIUS **********/ +@each $key, $value in $border-radius { + @include states("bord-#{$key}", "border-radius", $value); +} + +/********** PADDING **********/ +@each $key, $value in $paddings { + @include global("pad-#{$key}", "padding", "var(--ani-padding-#{$key})"); +} + +/********** CONTAINER **********/ +[class*="container"] { + margin: auto; + max-width: var(--ani-container-max-width); +} + +@each $key, $value in $containers { + @include container($key, "tn", $value); +} + +@each $type, $breakpoint in $breakpoints { + @media (min-width: $breakpoint) { + @each $key, $value in $containers { + @include container($key, $type, $value); + } + } +} + +/********** HEIGHT **********/ +@each $key, $value in $height { + @include global("height-#{$key}", "height", "var(--ani-height-#{$key})"); +} + +/********** MAX HEIGHT **********/ +@each $key, $value in $height { + @include global("max-h-#{$key}", "max-height", "var(--ani-max-height-#{$key})"); +} + +/********** MIN HEIGHT **********/ +@each $key, $value in $height { + @include global("min-h-#{$key}", "min-height", "var(--ani-min-height-#{$key})"); +} + +/********** WIDTH **********/ +@each $key, $value in $width { + @include global("width-#{$key}", "width", "var(--ani-width-#{$key})"); +} + +/********** MAX WIDTH **********/ +@each $key, $value in $width { + @include global("max-w-#{$key}", "max-width", "var(--ani-max-width-#{$key})"); +} + +/********** MIN WIDTH **********/ +@each $key, $value in $width { + @include global("min-w-#{$key}", "min-width", "var(--ani-min-width-#{$key})"); +} + +/********** FONT FAMILY **********/ +@each $key, $value in $font-family { + @include states("#{$key}", "font-family", "var(--ani-#{$key})"); +} + +/********** FONT **********/ + +@each $key, $value in $font { + @include states("#{$key}", "font-#{$value}", $key); +} + +/********** TEXT ALIGN **********/ + +@each $key, $value in $text-align { + @include default("#{$key}", "text-align", $value); +} + +/********** TEXT TRANSFORM **********/ + +@each $key, $value in $trans { + @include states("#{$key}", "text-transform", $value); +} + +/********** TEXT DECORATION LINE **********/ + +.deco { + text-decoration-line: underline; +} + +@each $key, $value in $text-decoration-line { + @include states("deco-#{$key}", "text-decoration-line", $value); +} + +/********** TEXT DECORATION STYLE **********/ + +@each $key, $value in $text-decoration-style { + @include states("deco-#{$key}", "text-decoration-style", $value); +} + +/********** TEXT DECORATION COLOR **********/ +@each $key, $value in $hues { + @include states("deco-#{$key}", "text-decoration-color", "var(--ani-#{$key})"); +} + +/********** COLOR **********/ +@each $color in $colors { + @each $key, $value in $color { + @include states(#{$key}, "color", "var(--ani-#{$key})"); + } +} + +/********** BACKGROUND COLOR **********/ +@each $color in $colors { + @each $key, $value in $color { + @include states("bg-#{$key}", "background-color", "var(--ani-#{$key})"); + @include states("bg-#{$key}-dark", "background-color", "var(--ani-#{$key}-dark)"); + @include states("bg-#{$key}-light", "background-color", "var(--ani-#{$key}-light)"); + } +} + +/********** ANIMATION **********/ +[class*="anima-"] { + animation-duration: var(--ani-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 default("anima-#{$key}", "animation-#{$type}", "var(--ani-animation-#{$type}-#{$key})"); + } +} + +@each $key, $value in $animation-direction { + @include default("anima-#{$key}", "animation-direction", $value); +} diff --git a/src/scss/_display.scss b/src/scss/_display.scss deleted file mode 100644 index 282c85c..0000000 --- a/src/scss/_display.scss +++ /dev/null @@ -1,195 +0,0 @@ -/********** FLEX **********/ -[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; -} - -/********** FLEX ITEM **********/ -@for $i from 1 through 4 { - [class*="flex-"][class*="-order#{$i}"] { - order: #{$i}; - } -} - -@for $i from 1 through 4 { - [class*="flex-"][class*="-grow#{$i}"] { - flex-grow: #{$i}; - } -} - -@for $i from 1 through 4 { - [class*="flex-"][class*="-shrink#{$i}"] { - flex-shrink: #{$i}; - } -} - - -/********** GRID **********/ -[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); - } -} - -@for $i from 2 to 13 { - @include grid($i, "tn"); -} - -@each $key, $value in $breakpoints { - @media (min-width: $value) { - @for $i from 2 to 13 { - @include grid($i, $key); - } - } -} - -/********** GAP **********/ -$gap: ( - "1": 5px, - "2": 10px, - "3": 20px, - "4": 50px -) !default; - -[class*="gap-"] { - @each $key, $value in $gap { - --gap#{$key}: #{$value}; - } -} - -@mixin gap($size, $type) { - [class*="gap-"][class*="-#{$type}#{$size}"] { - gap: var(--gap#{$size}); - } -} - -@each $key, $value in $gap { - @include gap($key, "tn"); -} - -@each $type, $breakpoint in $breakpoints { - @media (min-width: $breakpoint) { - @each $key, $value in $gap { - @include gap($key, $type); - } - } -} - -/********** PLACE CONTENT **********/ -$place-content: ( - "around": space-around, - "between": space-between, - "evenly": space-evenly, - "center": center, - "stretch": stretch, - "start": flex-start, - "end": flex-end -) !default; - -@mixin place-content($key, $type, $value) { - .content-#{$key}#{$type} { - place-content: #{$value}; - } -} - -@each $key, $value in $place-content { - @include place-content($key, "", $value); -} - -@each $type, $breakpoint in $breakpoints { - @media (min-width: $breakpoint) { - @each $key, $value in $place-content { - @include place-content($key, "-#{$type}", $value); - } - } -} - -/********** PLACE ITEMS **********/ -$place-items: ( - "normal": normal, - "base": baseline, - "center": center, - "stretch": stretch, - "start": flex-start, - "end": flex-end -) !default; - -@mixin place-items($key, $type, $value) { - .items-#{$key}#{$type} { - place-items: #{$value}; - } -} - -@each $key, $value in $place-items { - @include place-items($key, "", $value); -} - -@each $type, $breakpoint in $breakpoints { - @media (min-width: $breakpoint) { - @each $key, $value in $place-items { - @include place-items($key, "-#{$type}", $value); - } - } -} - -/********** PLACE-SELF **********/ -$place-self: ( - "auto": auto, - "normal": normal, - "base": baseline, - "center": center, - "stretch": stretch, - "start": flex-start, - "end": flex-end -) !default; - -@mixin place-self($key, $type, $value) { - .self-#{$key}#{$type} { - place-self: #{$value}; - } -} - -@each $key, $value in $place-self { - @include place-self($key, "", $value); -} - -@each $type, $breakpoint in $breakpoints { - @media (min-width: $breakpoint) { - @each $key, $value in $place-self { - @include place-self($key, "-#{$type}", $value); - } - } -} From 6f0f57a280c3d90fe0699bd4965352993f8a8e19 Mon Sep 17 00:00:00 2001 From: Philippe Beck Date: Sun, 19 Feb 2023 00:16:26 +0400 Subject: [PATCH 08/14] Remove useless source files --- src/scss/_anima.scss | 67 -------------- src/scss/_box.scss | 209 ------------------------------------------- src/scss/_font.scss | 84 ----------------- src/scss/_root.scss | 150 ------------------------------- 4 files changed, 510 deletions(-) delete mode 100644 src/scss/_anima.scss delete mode 100644 src/scss/_box.scss delete mode 100644 src/scss/_font.scss delete mode 100644 src/scss/_root.scss diff --git a/src/scss/_anima.scss b/src/scss/_anima.scss deleted file mode 100644 index b8b5bdb..0000000 --- a/src/scss/_anima.scss +++ /dev/null @@ -1,67 +0,0 @@ -/********** ANIMATION **********/ -$animation-duration: ( - "sm": 500ms, - "md": 1s, - "lg": 2s -) !default; - -$animation-timing-function: ( - "linear": linear, - "in": ease-in, - "out": ease-out, - "inout": ease-in-out, - "start": step-start, - "end": step-end -) !default; - -$animation-iteration-count: ( - "few": 2, - "many": 5, - "loop": infinite -) !default; - -$animation-delay: ( - "min": 500ms, - "max": 1s -) !default; - -$animation-options: ( - "duration": $animation-duration, - "timing-function": $animation-timing-function, - "iteration-count": $animation-iteration-count, - "delay": $animation-delay -) !default; - -$animation-direction: ( - "alt": alternate, - "rev": reverse, - "altrev": alternate-reverse -) !default; - -[class*="anima-"] { - --animation-duration: 2s; - - @each $type, $option in $animation-options { - @each $key, $value in $option { - --animation-#{$type}-#{$key}: #{$value}; - } - } - - 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 default("anima-#{$key}", "animation-#{$type}", "var(--animation-#{$type}-#{$key})"); - } -} - -@each $key, $value in $animation-direction { - @include default("anima-#{$key}", "animation-direction", $value); -} diff --git a/src/scss/_box.scss b/src/scss/_box.scss deleted file mode 100644 index 997f6a9..0000000 --- a/src/scss/_box.scss +++ /dev/null @@ -1,209 +0,0 @@ -/********** MARGIN **********/ -$margins: ( - "none": 0, - "tn": 2px, - "sm": 5px, - "md": 10px, - "lg": 20px, - "xl": 50px, - "wd": 100px -) !default; - -[class*="mar-"] { - @each $key, $value in $margins { - --margin-#{$key}: #{$value}; - } -} - -@each $key, $value in $margins { - @include global("mar-#{$key}", "margin", "var(--margin-#{$key})"); -} - -/********** BORDER **********/ -$border-style: ( - "dash": dashed, - "dot": dotted, - "double": double, - "groove": groove, - "ridge": ridge, - "in": inset, - "out": outset -) !default; - -$border-width: ( - "sm": 1px, - "md": 2px, - "lg": 5px -) !default; - -$border-radius: ( - "curve": 10px, - "round": 20px, - "circle": 50% -) !default; - -[class*="bord"] { - @each $key, $value in $border-width { - --border-width-#{$key}: #{$value}; - } - @each $key, $value in $border-radius { - --border-radius-#{$key}: #{$value}; - } -} - -.bord { - border-style: solid; -} - -/********** BORDER STYLE **********/ -@each $key, $value in $border-style { - @include states("bord-#{$key}", "border-style", $value); -} - -/********** BORDER WIDTH **********/ -@each $key, $value in $border-width { - @include states("bord-#{$key}", "border-width", $value); -} - -/********** BORDER COLOR **********/ -@each $key, $value in $hues { - @include states("bord-#{$key}", "border-color", "var(--#{$key})"); -} - -/********** BORDER RADIUS **********/ -@each $key, $value in $border-radius { - @include states("bord-#{$key}", "border-radius", $value); -} - -/********** PADDING **********/ -$paddings: ( - "none": 0, - "tn": 2px, - "sm": 5px, - "md": 10px, - "lg": 20px, - "xl": 50px, - "wd": 100px -) !default; - -[class*="pad-"] { - @each $key, $value in $paddings { - --padding-#{$key}: #{$value}; - } -} - -@each $key, $value in $paddings { - @include global("pad-#{$key}", "padding", "var(--padding-#{$key})"); -} - -/********** CONTAINER **********/ -$containers: ( - "50": 50%, - "60": 60%, - "70": 70%, - "80": 80%, - "90": 90% -) !default; - -[class*="container"] { - --container-max-width: 100%; - - margin: auto; - max-width: var(--container-max-width); -} - -@mixin container($key, $type, $value) { - [class*="container-"][class*="-#{$key}#{$type}"] { - max-width: #{$value}; - } -} - -@each $key, $value in $containers { - @include container($key, "tn", $value); -} - -@each $type, $breakpoint in $breakpoints { - @media (min-width: $breakpoint) { - @each $key, $value in $containers { - @include container($key, $type, $value); - } - } -} - -/********** HEIGHT **********/ -$height: ( - "sm": 20%, - "md": 50%, - "lg": 100% -) !default; - -[class*="height-"] { - @each $key, $value in $height { - --height-#{$key}: #{$value}; - } -} - -@each $key, $value in $height { - @include global("height-#{$key}", "height", "var(--height-#{$key})"); -} - -/********** MAX HEIGHT **********/ -[class*="max-h-"] { - @each $key, $value in $height { - --max-height-#{$key}: #{$value}; - } -} - -@each $key, $value in $height { - @include global("max-h-#{$key}", "max-height", "var(--max-height-#{$key})"); -} - -/********** MIN HEIGHT **********/ -[class*="min-h-"] { - @each $key, $value in $height { - --min-height-#{$key}: #{$value}; - } -} - -@each $key, $value in $height { - @include global("min-h-#{$key}", "min-height", "var(--min-height-#{$key})"); -} - -/********** WIDTH **********/ -$width: ( - "sm": 20%, - "md": 50%, - "lg": 100% -) !default; - -[class*="width-"] { - @each $key, $value in $width { - --width-#{$key}: #{$value}; - } -} - -@each $key, $value in $width { - @include global("width-#{$key}", "width", "var(--width-#{$key})"); -} - -/********** MAX WIDTH **********/ -[class*="max-w-"] { - @each $key, $value in $width { - --max-width-#{$key}: #{$value}; - } -} - -@each $key, $value in $width { - @include global("max-w-#{$key}", "max-width", "var(--max-width-#{$key})"); -} - -/********** MIN WIDTH **********/ -[class*="min-w-"] { - @each $key, $value in $width { - --min-width-#{$key}: #{$value}; - } -} - -@each $key, $value in $width { - @include global("min-w-#{$key}", "min-width", "var(--min-width-#{$key})"); -} diff --git a/src/scss/_font.scss b/src/scss/_font.scss deleted file mode 100644 index 2518e9b..0000000 --- a/src/scss/_font.scss +++ /dev/null @@ -1,84 +0,0 @@ -/********** FONT FAMILY **********/ -@each $key, $value in $font-family { - @include states("#{$key}", "font-family", "var(--#{$key})"); -} - -/********** FONT **********/ -$font: ( - "bold": "weight", - "italic": "style" -) !default; - -@each $key, $value in $font { - @include states("#{$key}", "font-#{$value}", $key); -} - -/********** TEXT ALIGN **********/ -$text-align: ( - "center": center, - "justify": justify, - "left": left, - "right": right -) !default; - -@each $key, $value in $text-align { - @include default("#{$key}", "text-align", $value); -} - -/********** TEXT TRANSFORM **********/ -$trans: ( - "cap": "capitalize", - "up": "uppercase", - "low": "lowercase" -) !default; - -@each $key, $value in $trans { - @include states("#{$key}", "text-transform", $value); -} - -/********** TEXT DECORATION LINE **********/ -$text-decoration-line: ( - "over": overline, - "through": line-through -) !default; - -.deco { - text-decoration-line: underline; -} - -@each $key, $value in $text-decoration-line { - @include states("deco-#{$key}", "text-decoration-line", $value); -} - -/********** TEXT DECORATION STYLE **********/ -$text-decoration-style: ( - "dash": dashed, - "dot": dotted, - "double": double, - "wavy": wavy -) !default; - -@each $key, $value in $text-decoration-style { - @include states("deco-#{$key}", "text-decoration-style", $value); -} - -/********** TEXT DECORATION COLOR **********/ -@each $key, $value in $hues { - @include states("deco-#{$key}", "text-decoration-color", "var(--#{$key})"); -} - -/********** COLOR **********/ -@each $color in $colors { - @each $key, $value in $color { - @include states(#{$key}, "color", "var(--#{$key})"); - } -} - -/********** BACKGROUND COLOR **********/ -@each $color in $colors { - @each $key, $value in $color { - @include states("bg-#{$key}", "background-color", "var(--#{$key})"); - @include states("bg-#{$key}-dark", "background-color", "var(--#{$key}-dark)"); - @include states("bg-#{$key}-light", "background-color", "var(--#{$key}-light)"); - } -} diff --git a/src/scss/_root.scss b/src/scss/_root.scss deleted file mode 100644 index 5d4f3af..0000000 --- a/src/scss/_root.scss +++ /dev/null @@ -1,150 +0,0 @@ -// ********** BREAKPOINTS **********// -$breakpoints: ( - "sm": 576px, - "md": 768px, - "lg": 992px, - "xl": 1200px, - "wd": 1600px -) !default; - -// ********** MAIN MIXINS **********// -@mixin default($class, $property, $value) { - .#{$class} { - #{$property}: #{$value}; - } -} - -@mixin global($class, $property, $value) { - .#{$class}, - .#{$class}-all > * { - #{$property}: #{$value}; - } -} - -@mixin states($class, $property, $value) { - .#{$class}, - .#{$class}-all > *, - .#{$class}-on:hover, - .#{$class}-on:focus, - *:hover > .#{$class}-in, - *:focus > .#{$class}-in, - .#{$class}-one > *:hover, - .#{$class}-one > *:focus, - .#{$class}-many:hover > *, - .#{$class}-many:focus > * { - #{$property}: #{$value}; - } -} - -//********** FONT FAMILY **********// -$font-family: ( - "sans-serif": (Helvetica, sans-serif), - "serif": (Times, serif), - "monospace": (Courier, monospace), - "cursive": (Mistral, cursive), - "fantasy": (Impact, fantasy) -) !default; - -//********** COLORS **********// -$hues: ( - "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%), - "gray": (0, 0%, 33%), - "silver": (0, 0%, 67%), - "white": (0, 0%, 100%) -) !default; - -$colors: $hues, $grayscale; - -//********** TRANSFORM **********// -$transforms: ( - "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) -) !default; - -:root { - /********** FONT FAMILY **********/ - @each $key, $value in $font-family { - --#{$key}: #{$value}; - } - - /********** COLORS **********/ - /* hsl values */ - @each $color in $colors { - @each $key, $value in $color { - --#{$key}-hsl: #{$value}; - } - } - - /* opaque colors */ - @each $color in $colors { - @each $key, $value in $color { - --#{$key}: hsl(var(--#{$key}-hsl)); - } - } - - /* opacity */ - --dark: 0.8; - --light: 0.2; - - /* transparent colors */ - @each $color in $colors { - @each $key, $value in $color { - --#{$key}-dark: hsla(var(--#{$key}-hsl), var(--dark)); - --#{$key}-light: hsla(var(--#{$key}-hsl), var(--light)); - } - } - - /********** TRANSFORM **********/ - @each $key, $value in $transforms { - --#{$key}: #{$value}; - } -} - -/********** KEYFRAMES **********/ -@mixin keyframes($key) { - @keyframes #{$key} { - from { - transform: var(--#{$key}); - } - } -} - -@each $key, $value in $transforms { - @include keyframes($key); -} From a9d8ae664bc46be4c9963d494e73c88c91adc0e3 Mon Sep 17 00:00:00 2001 From: Philippe Beck Date: Sun, 19 Feb 2023 00:17:00 +0400 Subject: [PATCH 09/14] Update main.scss import with new files --- src/main.scss | 47 ++++------------------------------------------- 1 file changed, 4 insertions(+), 43 deletions(-) diff --git a/src/main.scss b/src/main.scss index 74942b1..a1e02f4 100644 --- a/src/main.scss +++ b/src/main.scss @@ -1,44 +1,5 @@ -/******************************/ -/********** ANIMADIO **********/ -/******************************/ - -/* -Summary - -root (vars & rules) { - fonts - colors - transform - keyframes -} -tags { - tags -} -display { - flex - grid - gap - place -} -boxes { - margin - border - padding - height - width -} -font { - fonts - colors -} -anima { - animation -} -*/ - -@import "scss/root"; +@import "scss/maps"; +@import "scss/vars"; +@import "scss/mixins"; @import "scss/tags"; -@import "scss/display"; -@import "scss/box"; -@import "scss/font"; -@import "scss/anima"; +@import "scss/classes"; From 86b0fdaca70e0e96758ed9657439d99769b05e75 Mon Sep 17 00:00:00 2001 From: Philippe Beck Date: Sun, 19 Feb 2023 00:17:32 +0400 Subject: [PATCH 10/14] Create style.scss to create an overloading file --- src/style.scss | 2 ++ 1 file changed, 2 insertions(+) create mode 100644 src/style.scss diff --git a/src/style.scss b/src/style.scss new file mode 100644 index 0000000..480a991 --- /dev/null +++ b/src/style.scss @@ -0,0 +1,2 @@ +@import "scss/maps"; +@import "scss/vars"; \ No newline at end of file From 9aa5c7951df865484c2b129b26ce68535570bdc8 Mon Sep 17 00:00:00 2001 From: Philippe Beck Date: Sun, 19 Feb 2023 00:18:19 +0400 Subject: [PATCH 11/14] Update grunt to get the new overloading file --- Gruntfile.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/Gruntfile.js b/Gruntfile.js index 927dac9..f0e0079 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -6,11 +6,12 @@ module.exports = function(grunt) { sass: { options: { implementation: sass, - sourceMap: true + sourceMap: false }, dist: { files: { - 'src/css/source.css': 'src/main.scss' + 'src/css/main.css': 'src/main.scss', + 'dist/style.css': 'src/style.scss' } } }, @@ -20,7 +21,7 @@ module.exports = function(grunt) { footer: "\n/* Author: <%= pkg.author.name %> <<%= pkg.author.email %>>\n Updated: <%= grunt.template.today('dS mmm yyyy @ h:MM:ss TT') %> */" }, css: { - src: ["node_modules/normalize.css/normalize.css", "src/css/source.css"], + src: ["node_modules/normalize.css/normalize.css", "src/css/main.css"], dest: "dist/animadio.css" } }, From 14f5878bf9438bfac1bfa379be1076b19b657d70 Mon Sep 17 00:00:00 2001 From: Philippe Beck Date: Sun, 19 Feb 2023 00:18:53 +0400 Subject: [PATCH 12/14] Release 5.7.0 --- README.md | 4 +- dist/animadio.css | 949 ++++++++++++++++++++++-------------------- dist/animadio.min.css | 2 +- dist/style.css | 273 ++++++++++++ package.json | 2 +- 5 files changed, 766 insertions(+), 464 deletions(-) create mode 100644 dist/style.css diff --git a/README.md b/README.md index 2bc31a8..2e6496f 100644 --- a/README.md +++ b/README.md @@ -35,8 +35,8 @@ ## CDN -- Development : [https://cdn.jsdelivr.net/npm/animadio@5.6.0/dist/animadio.css](https://cdn.jsdelivr.net/npm/animadio@5.6.0/dist/animadio.css) -- Production : [https://cdn.jsdelivr.net/npm/animadio@5.6.0/dist/animadio.min.css](https://cdn.jsdelivr.net/npm/animadio@5.6.0/dist/animadio.min.css) +- Development : [https://cdn.jsdelivr.net/npm/animadio@5.7.0/dist/animadio.css](https://cdn.jsdelivr.net/npm/animadio@5.7.0/dist/animadio.css) +- Production : [https://cdn.jsdelivr.net/npm/animadio@5.7.0/dist/animadio.min.css](https://cdn.jsdelivr.net/npm/animadio@5.7.0/dist/animadio.min.css) --- diff --git a/dist/animadio.css b/dist/animadio.css index 2d5a6ba..b741d89 100644 --- a/dist/animadio.css +++ b/dist/animadio.css @@ -1,4 +1,4 @@ -/*! animadio v5.6.0 | https://animadio.org | MIT License */ +/*! animadio v5.7.0 | https://animadio.org | MIT License */ /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ @@ -351,238 +351,385 @@ template { display: none; } -/******************************/ -/********** ANIMADIO **********/ -/******************************/ -/* -Summary - -root (vars & rules) { - fonts - colors - transform - keyframes -} -tags { - tags -} -display { - flex - grid - gap - place -} -boxes { - margin - border - padding - height - width -} -font { - fonts - colors -} -anima { - animation -} -*/ +/********** VARS **********/ :root { /********** FONT FAMILY **********/ - --sans-serif: Helvetica, sans-serif; - --serif: Times, serif; - --monospace: Courier, monospace; - --cursive: Mistral, cursive; - --fantasy: Impact, fantasy; + --ani-sans-serif: Helvetica, sans-serif; + --ani-serif: Times, serif; + --ani-monospace: Courier, monospace; + --ani-cursive: Mistral, cursive; + --ani-fantasy: Impact, fantasy; /********** COLORS **********/ /* hsl values */ - --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%; + --ani-red-hsl: 348, 83%, 47%; + --ani-orange-hsl: 33, 100%, 50%; + --ani-yellow-hsl: 51, 100%, 50%; + --ani-green-hsl: 120, 61%, 50%; + --ani-sky-hsl: 195, 100%, 50%; + --ani-blue-hsl: 210, 100%, 56%; + --ani-violet-hsl: 271, 76%, 53%; + --ani-pink-hsl: 328, 100%, 54%; + --ani-black-hsl: 0, 0%, 0%; + --ani-gray-hsl: 0, 0%, 33%; + --ani-silver-hsl: 0, 0%, 67%; + --ani-white-hsl: 0, 0%, 100%; /* opaque colors */ - --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)); + --ani-red: hsl(var(--ani-red-hsl)); + --ani-orange: hsl(var(--ani-orange-hsl)); + --ani-yellow: hsl(var(--ani-yellow-hsl)); + --ani-green: hsl(var(--ani-green-hsl)); + --ani-sky: hsl(var(--ani-sky-hsl)); + --ani-blue: hsl(var(--ani-blue-hsl)); + --ani-violet: hsl(var(--ani-violet-hsl)); + --ani-pink: hsl(var(--ani-pink-hsl)); + --ani-black: hsl(var(--ani-black-hsl)); + --ani-gray: hsl(var(--ani-gray-hsl)); + --ani-silver: hsl(var(--ani-silver-hsl)); + --ani-white: hsl(var(--ani-white-hsl)); /* opacity */ - --dark: 0.8; - --light: 0.2; + --ani-dark: 0.8; + --ani-light: 0.2; /* transparent colors */ - --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)); + --ani-red-dark: hsla(var(--ani-red-hsl), var(--ani-dark)); + --ani-red-light: hsla(var(--ani-red-hsl), var(--ani-light)); + --ani-orange-dark: hsla(var(--ani-orange-hsl), var(--ani-dark)); + --ani-orange-light: hsla(var(--ani-orange-hsl), var(--ani-light)); + --ani-yellow-dark: hsla(var(--ani-yellow-hsl), var(--ani-dark)); + --ani-yellow-light: hsla(var(--ani-yellow-hsl), var(--ani-light)); + --ani-green-dark: hsla(var(--ani-green-hsl), var(--ani-dark)); + --ani-green-light: hsla(var(--ani-green-hsl), var(--ani-light)); + --ani-sky-dark: hsla(var(--ani-sky-hsl), var(--ani-dark)); + --ani-sky-light: hsla(var(--ani-sky-hsl), var(--ani-light)); + --ani-blue-dark: hsla(var(--ani-blue-hsl), var(--ani-dark)); + --ani-blue-light: hsla(var(--ani-blue-hsl), var(--ani-light)); + --ani-violet-dark: hsla(var(--ani-violet-hsl), var(--ani-dark)); + --ani-violet-light: hsla(var(--ani-violet-hsl), var(--ani-light)); + --ani-pink-dark: hsla(var(--ani-pink-hsl), var(--ani-dark)); + --ani-pink-light: hsla(var(--ani-pink-hsl), var(--ani-light)); + --ani-black-dark: hsla(var(--ani-black-hsl), var(--ani-dark)); + --ani-black-light: hsla(var(--ani-black-hsl), var(--ani-light)); + --ani-gray-dark: hsla(var(--ani-gray-hsl), var(--ani-dark)); + --ani-gray-light: hsla(var(--ani-gray-hsl), var(--ani-light)); + --ani-silver-dark: hsla(var(--ani-silver-hsl), var(--ani-dark)); + --ani-silver-light: hsla(var(--ani-silver-hsl), var(--ani-light)); + --ani-white-dark: hsla(var(--ani-white-hsl), var(--ani-dark)); + --ani-white-light: hsla(var(--ani-white-hsl), var(--ani-light)); /********** TRANSFORM **********/ - --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); } - -/********** KEYFRAMES **********/ + --ani-slideT: translate(0, 10vh); + --ani-slideR: translate(-10vw, 0); + --ani-slideB: translate(0, -10vh); + --ani-slideL: translate(10vw, 0); + --ani-turn: rotate3d(0, 0, 1, 360deg); + --ani-turnX: rotate3d(1, 0, 0, 360deg); + --ani-turnY: rotate3d(0, 1, 0, 360deg); + --ani-turnXY: rotate3d(1, 1, 0, 360deg); + --ani-turnXZ: rotate3d(1, 0, 1, 360deg); + --ani-turnYZ: rotate3d(0, 1, 1, 360deg); + --ani-turn3D: rotate3d(1, 1, 1, 360deg); + --ani-bounce: scale(-1, -1); + --ani-grow: scale(0.5, 0.5); + --ani-shrink: scale(1.5, 1.5); + --ani-flipX: scale(1, -1); + --ani-flipY: scale(-1, 1); + --ani-openX: scale(1, 0); + --ani-openY: scale(0, 1); + --ani-flipperX: scale(0, -1); + --ani-flipperY: scale(-1, 0); + --ani-twistT: skew(-90deg, -90deg); + --ani-twistR: skew(90deg, -90deg); + --ani-twistB: skew(90deg, 90deg); + --ani-twistL: skew(-90deg, 90deg); } + +/********** TAGS **********/ +* { + --ani-target-margins: 7rem; } + +html { + --ani-html-font-size: 62.5%; } + +body { + --ani-body-font-size: 2rem; + --ani-body-line-height: 1.6; + --ani-body-margin: auto; + --ani-body-max-width: 2000px; + --ani-body-overflow: break-word; + --ani-body-padding: 0; } + +main { + --ani-main-text-align: center; } + +article { + --ani-article-margin-bottom: 20px; } + +h1 { + --ani-title-font-size: calc(var(--ani-body-font-size) * 2); } + +h2 { + --ani-title-font-size: calc(var(--ani-body-font-size) * 1.8); } + +h3 { + --ani-title-font-size: calc(var(--ani-body-font-size) * 1.6); } + +h4 { + --ani-title-font-size: calc(var(--ani-body-font-size) * 1.4); } + +h5 { + --ani-title-font-size: calc(var(--ani-body-font-size) * 1.2); } + +h6 { + --ani-title-font-size: var(--ani-body-font-size); } + +h1, +h2, +h3, +h4, +h5, +h6 { + --ani-title-text-align: center; + --ani-title-text-transform: capitalize; } + +a { + --ani-link-outline: 0; + --ani-link-text-decoration: none; } + +ul { + --ani-list-margin: 0 0 10px; + --ani-list-padding: 0; + --ani-list-style: none; } + +table { + --ani-table-border-collapse: collapse; + --ani-table-margin: auto; + --ani-table-text-align: center; + --ani-table-vertical-align: middle; } + +code, +pre { + --ani-code-margin: auto; + --ani-code-overflow: scroll; + --ani-code-padding: 10px; + --ani-code-text-align: initial; + --ani-code-width: 100%; } + +figure { + --ani-figure-margin: 0; } + +img, +video { + --ani-img-max-width: 100%; + --ani-img-height: auto; + --ani-img-object-fit: contain; } + +button, +[type="button"], +[type="reset"], +[type="submit"] { + --ani-button-cursor: pointer; } + +/********** GRID **********/ +[class*="grid"] { + --ani-grid-max-width: 100vw; + --ani-grid-margin: auto; } + +[class*="gap-"] { + --ani-gap1: 5px; + --ani-gap2: 10px; + --ani-gap3: 20px; + --ani-gap4: 50px; } + +/********** MARGIN **********/ +[class*="mar-"] { + --ani-margin-auto: auto; + --ani-margin-none: 0; + --ani-margin-tn: 2px; + --ani-margin-sm: 5px; + --ani-margin-md: 10px; + --ani-margin-lg: 20px; + --ani-margin-xl: 50px; + --ani-margin-wd: 100px; } + +/********** BORDER **********/ +[class*="bord"] { + --ani-border-width-sm: 1px; + --ani-border-width-md: 2px; + --ani-border-width-lg: 5px; + --ani-border-radius-curve: 10px; + --ani-border-radius-round: 20px; + --ani-border-radius-circle: 50%; } + +/********** PADDING **********/ +[class*="pad-"] { + --ani-padding-auto: auto; + --ani-padding-none: 0; + --ani-padding-tn: 2px; + --ani-padding-sm: 5px; + --ani-padding-md: 10px; + --ani-padding-lg: 20px; + --ani-padding-xl: 50px; + --ani-padding-wd: 100px; } + +/********** CONTAINER **********/ +[class*="container"] { + --ani-container-max-width: 100%; } + +/********** HEIGHT **********/ +[class*="height-"] { + --ani-height-sm: 20%; + --ani-height-md: 50%; + --ani-height-lg: 100%; } + +/********** MAX HEIGHT **********/ +[class*="max-h-"] { + --ani-max-height-sm: 20%; + --ani-max-height-md: 50%; + --ani-max-height-lg: 100%; } + +/********** MIN HEIGHT **********/ +[class*="min-h-"] { + --ani-min-height-sm: 20%; + --ani-min-height-md: 50%; + --ani-min-height-lg: 100%; } + +/********** WIDTH **********/ +[class*="width-"] { + --ani-width-sm: 20%; + --ani-width-md: 50%; + --ani-width-lg: 100%; } + +/********** MAX WIDTH **********/ +[class*="max-w-"] { + --ani-max-width-sm: 20%; + --ani-max-width-md: 50%; + --ani-max-width-lg: 100%; } + +[class*="min-w-"] { + --ani-min-width-sm: 20%; + --ani-min-width-md: 50%; + --ani-min-width-lg: 100%; } + +/********** ANIMATION **********/ +[class*="anima-"] { + --ani-animation-duration: 2s; + --ani-animation-duration-sm: 500ms; + --ani-animation-duration-md: 1s; + --ani-animation-duration-lg: 2s; + --ani-animation-timing-function-linear: linear; + --ani-animation-timing-function-in: ease-in; + --ani-animation-timing-function-out: ease-out; + --ani-animation-timing-function-inout: ease-in-out; + --ani-animation-timing-function-start: step-start; + --ani-animation-timing-function-end: step-end; + --ani-animation-iteration-count-few: 2; + --ani-animation-iteration-count-many: 5; + --ani-animation-iteration-count-loop: infinite; + --ani-animation-delay-min: 500ms; + --ani-animation-delay-max: 1s; } + @keyframes slideT { from { - transform: var(--slideT); } } + transform: var(--ani-slideT); } } @keyframes slideR { from { - transform: var(--slideR); } } + transform: var(--ani-slideR); } } @keyframes slideB { from { - transform: var(--slideB); } } + transform: var(--ani-slideB); } } @keyframes slideL { from { - transform: var(--slideL); } } + transform: var(--ani-slideL); } } @keyframes turn { from { - transform: var(--turn); } } + transform: var(--ani-turn); } } @keyframes turnX { from { - transform: var(--turnX); } } + transform: var(--ani-turnX); } } @keyframes turnY { from { - transform: var(--turnY); } } + transform: var(--ani-turnY); } } @keyframes turnXY { from { - transform: var(--turnXY); } } + transform: var(--ani-turnXY); } } @keyframes turnXZ { from { - transform: var(--turnXZ); } } + transform: var(--ani-turnXZ); } } @keyframes turnYZ { from { - transform: var(--turnYZ); } } + transform: var(--ani-turnYZ); } } @keyframes turn3D { from { - transform: var(--turn3D); } } + transform: var(--ani-turn3D); } } @keyframes bounce { from { - transform: var(--bounce); } } + transform: var(--ani-bounce); } } @keyframes grow { from { - transform: var(--grow); } } + transform: var(--ani-grow); } } @keyframes shrink { from { - transform: var(--shrink); } } + transform: var(--ani-shrink); } } @keyframes flipX { from { - transform: var(--flipX); } } + transform: var(--ani-flipX); } } @keyframes flipY { from { - transform: var(--flipY); } } + transform: var(--ani-flipY); } } @keyframes openX { from { - transform: var(--openX); } } + transform: var(--ani-openX); } } @keyframes openY { from { - transform: var(--openY); } } + transform: var(--ani-openY); } } @keyframes flipperX { from { - transform: var(--flipperX); } } + transform: var(--ani-flipperX); } } @keyframes flipperY { from { - transform: var(--flipperY); } } + transform: var(--ani-flipperY); } } @keyframes twistT { from { - transform: var(--twistT); } } + transform: var(--ani-twistT); } } @keyframes twistR { from { - transform: var(--twistR); } } + transform: var(--ani-twistR); } } @keyframes twistB { from { - transform: var(--twistB); } } + transform: var(--ani-twistB); } } @keyframes twistL { from { - transform: var(--twistL); } } + transform: var(--ani-twistL); } } /********** TAGS **********/ * { - --target-margins: 7rem; box-sizing: border-box; } *:target { - padding-top: var(--target-margins); - margin-top: -var(--target-margins); } + padding-top: var(--ani-target-margins); + margin-top: -var(--ani-target-margins); } html { - --html-font-size: 62.5%; - font-size: var(--html-font-size); + font-size: var(--ani-html-font-size); scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { @@ -590,45 +737,19 @@ html { scroll-behavior: auto; } } body { - --body-font-size: 2rem; - --body-line-height: 1.6; - --body-margin: auto; - --body-max-width: 2000px; - --body-overflow: break-word; - --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); - overflow-wrap: var(--body-overflow); } + margin: var(--ani-body-margin); + padding: var(--ani-body-padding); + max-width: var(--ani-body-max-width); + line-height: var(--ani-body-line-height); + font-size: var(--ani-body-font-size); + font-family: var(--ani-sans-serif); + overflow-wrap: var(--ani-body-overflow); } main { - --main-text-align: center; - text-align: var(--main-text-align); } + text-align: var(--ani-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); } + margin-bottom: var(--ani-article-margin-bottom); } h1, h2, @@ -636,74 +757,53 @@ 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); } + font-family: var(--ani-serif); + text-align: var(--ani-title-text-align); + text-transform: var(--ani-title-text-transform); + font-size: var(--ani-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); } + -webkit-text-decoration: var(--ani-link-text-decoration); + text-decoration: var(--ani-link-text-decoration); + outline: var(--ani-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); } + margin: var(--ani-list-margin); + padding: var(--ani-list-padding); + list-style: var(--ani-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); } + margin: var(--ani-table-margin); + border-collapse: var(--ani-table-border-collapse); + text-align: var(--ani-table-text-align); + vertical-align: var(--ani-table-vertical-align); + font-family: var(--ani-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); } + overflow: var(--ani-code-overflow); + margin: var(--ani-code-margin); + padding: var(--ani-code-padding); + width: var(--ani-code-width); + font-family: var(--ani-monospace); + text-align: var(--ani-code-text-align); } figure { - --figure-margin: 0; - margin: var(--figure-margin); } + margin: var(--ani-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); } + max-width: var(--ani-img-max-width); + height: var(--ani-img-height); + -o-object-fit: var(--ani-img-object-fit); + object-fit: var(--ani-img-object-fit); } button, [type="button"], [type="reset"], [type="submit"] { - --button-cursor: pointer; - cursor: var(--button-cursor); } + cursor: var(--ani-button-cursor); } /********** FLEX **********/ [class*="flex"] { @@ -766,11 +866,9 @@ button, /********** GRID **********/ [class*="grid"] { - --grid-max-width: 100vw; - --grid-margin: auto; display: grid; - max-width: var(--grid-max-width); - margin: var(--grid-margin); } + max-width: var(--ani-grid-max-width); + margin: var(--ani-grid-margin); } /********** GRID TEMPLATE **********/ [class*="grid-"][class*="-2tn"] { @@ -927,73 +1025,67 @@ button, grid-template: auto/repeat(12, auto); } } /********** GAP **********/ -[class*="gap-"] { - --gap1: 5px; - --gap2: 10px; - --gap3: 20px; - --gap4: 50px; } - [class*="gap-"][class*="-tn1"] { - gap: var(--gap1); } + gap: var(--ani-gap1); } [class*="gap-"][class*="-tn2"] { - gap: var(--gap2); } + gap: var(--ani-gap2); } [class*="gap-"][class*="-tn3"] { - gap: var(--gap3); } + gap: var(--ani-gap3); } [class*="gap-"][class*="-tn4"] { - gap: var(--gap4); } + gap: var(--ani-gap4); } @media (min-width: 576px) { [class*="gap-"][class*="-sm1"] { - gap: var(--gap1); } + gap: var(--ani-gap1); } [class*="gap-"][class*="-sm2"] { - gap: var(--gap2); } + gap: var(--ani-gap2); } [class*="gap-"][class*="-sm3"] { - gap: var(--gap3); } + gap: var(--ani-gap3); } [class*="gap-"][class*="-sm4"] { - gap: var(--gap4); } } + gap: var(--ani-gap4); } } @media (min-width: 768px) { [class*="gap-"][class*="-md1"] { - gap: var(--gap1); } + gap: var(--ani-gap1); } [class*="gap-"][class*="-md2"] { - gap: var(--gap2); } + gap: var(--ani-gap2); } [class*="gap-"][class*="-md3"] { - gap: var(--gap3); } + gap: var(--ani-gap3); } [class*="gap-"][class*="-md4"] { - gap: var(--gap4); } } + gap: var(--ani-gap4); } } @media (min-width: 992px) { [class*="gap-"][class*="-lg1"] { - gap: var(--gap1); } + gap: var(--ani-gap1); } [class*="gap-"][class*="-lg2"] { - gap: var(--gap2); } + gap: var(--ani-gap2); } [class*="gap-"][class*="-lg3"] { - gap: var(--gap3); } + gap: var(--ani-gap3); } [class*="gap-"][class*="-lg4"] { - gap: var(--gap4); } } + gap: var(--ani-gap4); } } @media (min-width: 1200px) { [class*="gap-"][class*="-xl1"] { - gap: var(--gap1); } + gap: var(--ani-gap1); } [class*="gap-"][class*="-xl2"] { - gap: var(--gap2); } + gap: var(--ani-gap2); } [class*="gap-"][class*="-xl3"] { - gap: var(--gap3); } + gap: var(--ani-gap3); } [class*="gap-"][class*="-xl4"] { - gap: var(--gap4); } } + gap: var(--ani-gap4); } } @media (min-width: 1600px) { [class*="gap-"][class*="-wd1"] { - gap: var(--gap1); } + gap: var(--ani-gap1); } [class*="gap-"][class*="-wd2"] { - gap: var(--gap2); } + gap: var(--ani-gap2); } [class*="gap-"][class*="-wd3"] { - gap: var(--gap3); } + gap: var(--ani-gap3); } [class*="gap-"][class*="-wd4"] { - gap: var(--gap4); } } + gap: var(--ani-gap4); } } /********** PLACE CONTENT **********/ .content-around { @@ -1289,52 +1381,39 @@ button, place-self: flex-end; } } /********** MARGIN **********/ -[class*="mar-"] { - --margin-none: 0; - --margin-tn: 2px; - --margin-sm: 5px; - --margin-md: 10px; - --margin-lg: 20px; - --margin-xl: 50px; - --margin-wd: 100px; } +.mar-auto, +.mar-auto-all > * { + margin: var(--ani-margin-auto); } .mar-none, .mar-none-all > * { - margin: var(--margin-none); } + margin: var(--ani-margin-none); } .mar-tn, .mar-tn-all > * { - margin: var(--margin-tn); } + margin: var(--ani-margin-tn); } .mar-sm, .mar-sm-all > * { - margin: var(--margin-sm); } + margin: var(--ani-margin-sm); } .mar-md, .mar-md-all > * { - margin: var(--margin-md); } + margin: var(--ani-margin-md); } .mar-lg, .mar-lg-all > * { - margin: var(--margin-lg); } + margin: var(--ani-margin-lg); } .mar-xl, .mar-xl-all > * { - margin: var(--margin-xl); } + margin: var(--ani-margin-xl); } .mar-wd, .mar-wd-all > * { - margin: var(--margin-wd); } + margin: var(--ani-margin-wd); } /********** BORDER **********/ -[class*="bord"] { - --border-width-sm: 1px; - --border-width-md: 2px; - --border-width-lg: 5px; - --border-radius-curve: 10px; - --border-radius-round: 20px; - --border-radius-circle: 50%; } - .bord { border-style: solid; } @@ -1471,7 +1550,7 @@ button, .bord-red-one > *:focus, .bord-red-many:hover > *, .bord-red-many:focus > * { - border-color: var(--red); } + border-color: var(--ani-red); } .bord-orange, .bord-orange-all > *, @@ -1483,7 +1562,7 @@ button, .bord-orange-one > *:focus, .bord-orange-many:hover > *, .bord-orange-many:focus > * { - border-color: var(--orange); } + border-color: var(--ani-orange); } .bord-yellow, .bord-yellow-all > *, @@ -1495,7 +1574,7 @@ button, .bord-yellow-one > *:focus, .bord-yellow-many:hover > *, .bord-yellow-many:focus > * { - border-color: var(--yellow); } + border-color: var(--ani-yellow); } .bord-green, .bord-green-all > *, @@ -1507,7 +1586,7 @@ button, .bord-green-one > *:focus, .bord-green-many:hover > *, .bord-green-many:focus > * { - border-color: var(--green); } + border-color: var(--ani-green); } .bord-sky, .bord-sky-all > *, @@ -1519,7 +1598,7 @@ button, .bord-sky-one > *:focus, .bord-sky-many:hover > *, .bord-sky-many:focus > * { - border-color: var(--sky); } + border-color: var(--ani-sky); } .bord-blue, .bord-blue-all > *, @@ -1531,7 +1610,7 @@ button, .bord-blue-one > *:focus, .bord-blue-many:hover > *, .bord-blue-many:focus > * { - border-color: var(--blue); } + border-color: var(--ani-blue); } .bord-violet, .bord-violet-all > *, @@ -1543,7 +1622,7 @@ button, .bord-violet-one > *:focus, .bord-violet-many:hover > *, .bord-violet-many:focus > * { - border-color: var(--violet); } + border-color: var(--ani-violet); } .bord-pink, .bord-pink-all > *, @@ -1555,7 +1634,7 @@ button, .bord-pink-one > *:focus, .bord-pink-many:hover > *, .bord-pink-many:focus > * { - border-color: var(--pink); } + border-color: var(--ani-pink); } /********** BORDER RADIUS **********/ .bord-curve, @@ -1595,48 +1674,42 @@ button, border-radius: 50%; } /********** PADDING **********/ -[class*="pad-"] { - --padding-none: 0; - --padding-tn: 2px; - --padding-sm: 5px; - --padding-md: 10px; - --padding-lg: 20px; - --padding-xl: 50px; - --padding-wd: 100px; } +.pad-auto, +.pad-auto-all > * { + padding: var(--ani-padding-auto); } .pad-none, .pad-none-all > * { - padding: var(--padding-none); } + padding: var(--ani-padding-none); } .pad-tn, .pad-tn-all > * { - padding: var(--padding-tn); } + padding: var(--ani-padding-tn); } .pad-sm, .pad-sm-all > * { - padding: var(--padding-sm); } + padding: var(--ani-padding-sm); } .pad-md, .pad-md-all > * { - padding: var(--padding-md); } + padding: var(--ani-padding-md); } .pad-lg, .pad-lg-all > * { - padding: var(--padding-lg); } + padding: var(--ani-padding-lg); } .pad-xl, .pad-xl-all > * { - padding: var(--padding-xl); } + padding: var(--ani-padding-xl); } .pad-wd, .pad-wd-all > * { - padding: var(--padding-wd); } + padding: var(--ani-padding-wd); } /********** CONTAINER **********/ [class*="container"] { - --container-max-width: 100%; margin: auto; - max-width: var(--container-max-width); } + max-width: var(--ani-container-max-width); } [class*="container-"][class*="-50tn"] { max-width: 50%; } @@ -1714,112 +1787,82 @@ button, max-width: 90%; } } /********** HEIGHT **********/ -[class*="height-"] { - --height-sm: 20%; - --height-md: 50%; - --height-lg: 100%; } - .height-sm, .height-sm-all > * { - height: var(--height-sm); } + height: var(--ani-height-sm); } .height-md, .height-md-all > * { - height: var(--height-md); } + height: var(--ani-height-md); } .height-lg, .height-lg-all > * { - height: var(--height-lg); } + height: var(--ani-height-lg); } /********** MAX HEIGHT **********/ -[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-height: var(--ani-max-height-sm); } .max-h-md, .max-h-md-all > * { - max-height: var(--max-height-md); } + max-height: var(--ani-max-height-md); } .max-h-lg, .max-h-lg-all > * { - max-height: var(--max-height-lg); } + max-height: var(--ani-max-height-lg); } /********** MIN HEIGHT **********/ -[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-height: var(--ani-min-height-sm); } .min-h-md, .min-h-md-all > * { - min-height: var(--min-height-md); } + min-height: var(--ani-min-height-md); } .min-h-lg, .min-h-lg-all > * { - min-height: var(--min-height-lg); } + min-height: var(--ani-min-height-lg); } /********** WIDTH **********/ -[class*="width-"] { - --width-sm: 20%; - --width-md: 50%; - --width-lg: 100%; } - .width-sm, .width-sm-all > * { - width: var(--width-sm); } + width: var(--ani-width-sm); } .width-md, .width-md-all > * { - width: var(--width-md); } + width: var(--ani-width-md); } .width-lg, .width-lg-all > * { - width: var(--width-lg); } + width: var(--ani-width-lg); } /********** MAX WIDTH **********/ -[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-width: var(--ani-max-width-sm); } .max-w-md, .max-w-md-all > * { - max-width: var(--max-width-md); } + max-width: var(--ani-max-width-md); } .max-w-lg, .max-w-lg-all > * { - max-width: var(--max-width-lg); } + max-width: var(--ani-max-width-lg); } /********** MIN WIDTH **********/ -[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-width: var(--ani-min-width-sm); } .min-w-md, .min-w-md-all > * { - min-width: var(--min-width-md); } + min-width: var(--ani-min-width-md); } .min-w-lg, .min-w-lg-all > * { - min-width: var(--min-width-lg); } + min-width: var(--ani-min-width-lg); } /********** FONT FAMILY **********/ .sans-serif, @@ -1832,7 +1875,7 @@ button, .sans-serif-one > *:focus, .sans-serif-many:hover > *, .sans-serif-many:focus > * { - font-family: var(--sans-serif); } + font-family: var(--ani-sans-serif); } .serif, .serif-all > *, @@ -1844,7 +1887,7 @@ button, .serif-one > *:focus, .serif-many:hover > *, .serif-many:focus > * { - font-family: var(--serif); } + font-family: var(--ani-serif); } .monospace, .monospace-all > *, @@ -1856,7 +1899,7 @@ button, .monospace-one > *:focus, .monospace-many:hover > *, .monospace-many:focus > * { - font-family: var(--monospace); } + font-family: var(--ani-monospace); } .cursive, .cursive-all > *, @@ -1868,7 +1911,7 @@ button, .cursive-one > *:focus, .cursive-many:hover > *, .cursive-many:focus > * { - font-family: var(--cursive); } + font-family: var(--ani-cursive); } .fantasy, .fantasy-all > *, @@ -1880,7 +1923,7 @@ button, .fantasy-one > *:focus, .fantasy-many:hover > *, .fantasy-many:focus > * { - font-family: var(--fantasy); } + font-family: var(--ani-fantasy); } /********** FONT **********/ .bold, @@ -2052,8 +2095,8 @@ button, .deco-red-one > *:focus, .deco-red-many:hover > *, .deco-red-many:focus > * { - -webkit-text-decoration-color: var(--red); - text-decoration-color: var(--red); } + -webkit-text-decoration-color: var(--ani-red); + text-decoration-color: var(--ani-red); } .deco-orange, .deco-orange-all > *, @@ -2065,8 +2108,8 @@ button, .deco-orange-one > *:focus, .deco-orange-many:hover > *, .deco-orange-many:focus > * { - -webkit-text-decoration-color: var(--orange); - text-decoration-color: var(--orange); } + -webkit-text-decoration-color: var(--ani-orange); + text-decoration-color: var(--ani-orange); } .deco-yellow, .deco-yellow-all > *, @@ -2078,8 +2121,8 @@ button, .deco-yellow-one > *:focus, .deco-yellow-many:hover > *, .deco-yellow-many:focus > * { - -webkit-text-decoration-color: var(--yellow); - text-decoration-color: var(--yellow); } + -webkit-text-decoration-color: var(--ani-yellow); + text-decoration-color: var(--ani-yellow); } .deco-green, .deco-green-all > *, @@ -2091,8 +2134,8 @@ button, .deco-green-one > *:focus, .deco-green-many:hover > *, .deco-green-many:focus > * { - -webkit-text-decoration-color: var(--green); - text-decoration-color: var(--green); } + -webkit-text-decoration-color: var(--ani-green); + text-decoration-color: var(--ani-green); } .deco-sky, .deco-sky-all > *, @@ -2104,8 +2147,8 @@ button, .deco-sky-one > *:focus, .deco-sky-many:hover > *, .deco-sky-many:focus > * { - -webkit-text-decoration-color: var(--sky); - text-decoration-color: var(--sky); } + -webkit-text-decoration-color: var(--ani-sky); + text-decoration-color: var(--ani-sky); } .deco-blue, .deco-blue-all > *, @@ -2117,8 +2160,8 @@ button, .deco-blue-one > *:focus, .deco-blue-many:hover > *, .deco-blue-many:focus > * { - -webkit-text-decoration-color: var(--blue); - text-decoration-color: var(--blue); } + -webkit-text-decoration-color: var(--ani-blue); + text-decoration-color: var(--ani-blue); } .deco-violet, .deco-violet-all > *, @@ -2130,8 +2173,8 @@ button, .deco-violet-one > *:focus, .deco-violet-many:hover > *, .deco-violet-many:focus > * { - -webkit-text-decoration-color: var(--violet); - text-decoration-color: var(--violet); } + -webkit-text-decoration-color: var(--ani-violet); + text-decoration-color: var(--ani-violet); } .deco-pink, .deco-pink-all > *, @@ -2143,8 +2186,8 @@ button, .deco-pink-one > *:focus, .deco-pink-many:hover > *, .deco-pink-many:focus > * { - -webkit-text-decoration-color: var(--pink); - text-decoration-color: var(--pink); } + -webkit-text-decoration-color: var(--ani-pink); + text-decoration-color: var(--ani-pink); } /********** COLOR **********/ .red, @@ -2157,7 +2200,7 @@ button, .red-one > *:focus, .red-many:hover > *, .red-many:focus > * { - color: var(--red); } + color: var(--ani-red); } .orange, .orange-all > *, @@ -2169,7 +2212,7 @@ button, .orange-one > *:focus, .orange-many:hover > *, .orange-many:focus > * { - color: var(--orange); } + color: var(--ani-orange); } .yellow, .yellow-all > *, @@ -2181,7 +2224,7 @@ button, .yellow-one > *:focus, .yellow-many:hover > *, .yellow-many:focus > * { - color: var(--yellow); } + color: var(--ani-yellow); } .green, .green-all > *, @@ -2193,7 +2236,7 @@ button, .green-one > *:focus, .green-many:hover > *, .green-many:focus > * { - color: var(--green); } + color: var(--ani-green); } .sky, .sky-all > *, @@ -2205,7 +2248,7 @@ button, .sky-one > *:focus, .sky-many:hover > *, .sky-many:focus > * { - color: var(--sky); } + color: var(--ani-sky); } .blue, .blue-all > *, @@ -2217,7 +2260,7 @@ button, .blue-one > *:focus, .blue-many:hover > *, .blue-many:focus > * { - color: var(--blue); } + color: var(--ani-blue); } .violet, .violet-all > *, @@ -2229,7 +2272,7 @@ button, .violet-one > *:focus, .violet-many:hover > *, .violet-many:focus > * { - color: var(--violet); } + color: var(--ani-violet); } .pink, .pink-all > *, @@ -2241,7 +2284,7 @@ button, .pink-one > *:focus, .pink-many:hover > *, .pink-many:focus > * { - color: var(--pink); } + color: var(--ani-pink); } .black, .black-all > *, @@ -2253,7 +2296,7 @@ button, .black-one > *:focus, .black-many:hover > *, .black-many:focus > * { - color: var(--black); } + color: var(--ani-black); } .gray, .gray-all > *, @@ -2265,7 +2308,7 @@ button, .gray-one > *:focus, .gray-many:hover > *, .gray-many:focus > * { - color: var(--gray); } + color: var(--ani-gray); } .silver, .silver-all > *, @@ -2277,7 +2320,7 @@ button, .silver-one > *:focus, .silver-many:hover > *, .silver-many:focus > * { - color: var(--silver); } + color: var(--ani-silver); } .white, .white-all > *, @@ -2289,7 +2332,7 @@ button, .white-one > *:focus, .white-many:hover > *, .white-many:focus > * { - color: var(--white); } + color: var(--ani-white); } /********** BACKGROUND COLOR **********/ .bg-red, @@ -2302,7 +2345,7 @@ button, .bg-red-one > *:focus, .bg-red-many:hover > *, .bg-red-many:focus > * { - background-color: var(--red); } + background-color: var(--ani-red); } .bg-red-dark, .bg-red-dark-all > *, @@ -2314,7 +2357,7 @@ button, .bg-red-dark-one > *:focus, .bg-red-dark-many:hover > *, .bg-red-dark-many:focus > * { - background-color: var(--red-dark); } + background-color: var(--ani-red-dark); } .bg-red-light, .bg-red-light-all > *, @@ -2326,7 +2369,7 @@ button, .bg-red-light-one > *:focus, .bg-red-light-many:hover > *, .bg-red-light-many:focus > * { - background-color: var(--red-light); } + background-color: var(--ani-red-light); } .bg-orange, .bg-orange-all > *, @@ -2338,7 +2381,7 @@ button, .bg-orange-one > *:focus, .bg-orange-many:hover > *, .bg-orange-many:focus > * { - background-color: var(--orange); } + background-color: var(--ani-orange); } .bg-orange-dark, .bg-orange-dark-all > *, @@ -2350,7 +2393,7 @@ button, .bg-orange-dark-one > *:focus, .bg-orange-dark-many:hover > *, .bg-orange-dark-many:focus > * { - background-color: var(--orange-dark); } + background-color: var(--ani-orange-dark); } .bg-orange-light, .bg-orange-light-all > *, @@ -2362,7 +2405,7 @@ button, .bg-orange-light-one > *:focus, .bg-orange-light-many:hover > *, .bg-orange-light-many:focus > * { - background-color: var(--orange-light); } + background-color: var(--ani-orange-light); } .bg-yellow, .bg-yellow-all > *, @@ -2374,7 +2417,7 @@ button, .bg-yellow-one > *:focus, .bg-yellow-many:hover > *, .bg-yellow-many:focus > * { - background-color: var(--yellow); } + background-color: var(--ani-yellow); } .bg-yellow-dark, .bg-yellow-dark-all > *, @@ -2386,7 +2429,7 @@ button, .bg-yellow-dark-one > *:focus, .bg-yellow-dark-many:hover > *, .bg-yellow-dark-many:focus > * { - background-color: var(--yellow-dark); } + background-color: var(--ani-yellow-dark); } .bg-yellow-light, .bg-yellow-light-all > *, @@ -2398,7 +2441,7 @@ button, .bg-yellow-light-one > *:focus, .bg-yellow-light-many:hover > *, .bg-yellow-light-many:focus > * { - background-color: var(--yellow-light); } + background-color: var(--ani-yellow-light); } .bg-green, .bg-green-all > *, @@ -2410,7 +2453,7 @@ button, .bg-green-one > *:focus, .bg-green-many:hover > *, .bg-green-many:focus > * { - background-color: var(--green); } + background-color: var(--ani-green); } .bg-green-dark, .bg-green-dark-all > *, @@ -2422,7 +2465,7 @@ button, .bg-green-dark-one > *:focus, .bg-green-dark-many:hover > *, .bg-green-dark-many:focus > * { - background-color: var(--green-dark); } + background-color: var(--ani-green-dark); } .bg-green-light, .bg-green-light-all > *, @@ -2434,7 +2477,7 @@ button, .bg-green-light-one > *:focus, .bg-green-light-many:hover > *, .bg-green-light-many:focus > * { - background-color: var(--green-light); } + background-color: var(--ani-green-light); } .bg-sky, .bg-sky-all > *, @@ -2446,7 +2489,7 @@ button, .bg-sky-one > *:focus, .bg-sky-many:hover > *, .bg-sky-many:focus > * { - background-color: var(--sky); } + background-color: var(--ani-sky); } .bg-sky-dark, .bg-sky-dark-all > *, @@ -2458,7 +2501,7 @@ button, .bg-sky-dark-one > *:focus, .bg-sky-dark-many:hover > *, .bg-sky-dark-many:focus > * { - background-color: var(--sky-dark); } + background-color: var(--ani-sky-dark); } .bg-sky-light, .bg-sky-light-all > *, @@ -2470,7 +2513,7 @@ button, .bg-sky-light-one > *:focus, .bg-sky-light-many:hover > *, .bg-sky-light-many:focus > * { - background-color: var(--sky-light); } + background-color: var(--ani-sky-light); } .bg-blue, .bg-blue-all > *, @@ -2482,7 +2525,7 @@ button, .bg-blue-one > *:focus, .bg-blue-many:hover > *, .bg-blue-many:focus > * { - background-color: var(--blue); } + background-color: var(--ani-blue); } .bg-blue-dark, .bg-blue-dark-all > *, @@ -2494,7 +2537,7 @@ button, .bg-blue-dark-one > *:focus, .bg-blue-dark-many:hover > *, .bg-blue-dark-many:focus > * { - background-color: var(--blue-dark); } + background-color: var(--ani-blue-dark); } .bg-blue-light, .bg-blue-light-all > *, @@ -2506,7 +2549,7 @@ button, .bg-blue-light-one > *:focus, .bg-blue-light-many:hover > *, .bg-blue-light-many:focus > * { - background-color: var(--blue-light); } + background-color: var(--ani-blue-light); } .bg-violet, .bg-violet-all > *, @@ -2518,7 +2561,7 @@ button, .bg-violet-one > *:focus, .bg-violet-many:hover > *, .bg-violet-many:focus > * { - background-color: var(--violet); } + background-color: var(--ani-violet); } .bg-violet-dark, .bg-violet-dark-all > *, @@ -2530,7 +2573,7 @@ button, .bg-violet-dark-one > *:focus, .bg-violet-dark-many:hover > *, .bg-violet-dark-many:focus > * { - background-color: var(--violet-dark); } + background-color: var(--ani-violet-dark); } .bg-violet-light, .bg-violet-light-all > *, @@ -2542,7 +2585,7 @@ button, .bg-violet-light-one > *:focus, .bg-violet-light-many:hover > *, .bg-violet-light-many:focus > * { - background-color: var(--violet-light); } + background-color: var(--ani-violet-light); } .bg-pink, .bg-pink-all > *, @@ -2554,7 +2597,7 @@ button, .bg-pink-one > *:focus, .bg-pink-many:hover > *, .bg-pink-many:focus > * { - background-color: var(--pink); } + background-color: var(--ani-pink); } .bg-pink-dark, .bg-pink-dark-all > *, @@ -2566,7 +2609,7 @@ button, .bg-pink-dark-one > *:focus, .bg-pink-dark-many:hover > *, .bg-pink-dark-many:focus > * { - background-color: var(--pink-dark); } + background-color: var(--ani-pink-dark); } .bg-pink-light, .bg-pink-light-all > *, @@ -2578,7 +2621,7 @@ button, .bg-pink-light-one > *:focus, .bg-pink-light-many:hover > *, .bg-pink-light-many:focus > * { - background-color: var(--pink-light); } + background-color: var(--ani-pink-light); } .bg-black, .bg-black-all > *, @@ -2590,7 +2633,7 @@ button, .bg-black-one > *:focus, .bg-black-many:hover > *, .bg-black-many:focus > * { - background-color: var(--black); } + background-color: var(--ani-black); } .bg-black-dark, .bg-black-dark-all > *, @@ -2602,7 +2645,7 @@ button, .bg-black-dark-one > *:focus, .bg-black-dark-many:hover > *, .bg-black-dark-many:focus > * { - background-color: var(--black-dark); } + background-color: var(--ani-black-dark); } .bg-black-light, .bg-black-light-all > *, @@ -2614,7 +2657,7 @@ button, .bg-black-light-one > *:focus, .bg-black-light-many:hover > *, .bg-black-light-many:focus > * { - background-color: var(--black-light); } + background-color: var(--ani-black-light); } .bg-gray, .bg-gray-all > *, @@ -2626,7 +2669,7 @@ button, .bg-gray-one > *:focus, .bg-gray-many:hover > *, .bg-gray-many:focus > * { - background-color: var(--gray); } + background-color: var(--ani-gray); } .bg-gray-dark, .bg-gray-dark-all > *, @@ -2638,7 +2681,7 @@ button, .bg-gray-dark-one > *:focus, .bg-gray-dark-many:hover > *, .bg-gray-dark-many:focus > * { - background-color: var(--gray-dark); } + background-color: var(--ani-gray-dark); } .bg-gray-light, .bg-gray-light-all > *, @@ -2650,7 +2693,7 @@ button, .bg-gray-light-one > *:focus, .bg-gray-light-many:hover > *, .bg-gray-light-many:focus > * { - background-color: var(--gray-light); } + background-color: var(--ani-gray-light); } .bg-silver, .bg-silver-all > *, @@ -2662,7 +2705,7 @@ button, .bg-silver-one > *:focus, .bg-silver-many:hover > *, .bg-silver-many:focus > * { - background-color: var(--silver); } + background-color: var(--ani-silver); } .bg-silver-dark, .bg-silver-dark-all > *, @@ -2674,7 +2717,7 @@ button, .bg-silver-dark-one > *:focus, .bg-silver-dark-many:hover > *, .bg-silver-dark-many:focus > * { - background-color: var(--silver-dark); } + background-color: var(--ani-silver-dark); } .bg-silver-light, .bg-silver-light-all > *, @@ -2686,7 +2729,7 @@ button, .bg-silver-light-one > *:focus, .bg-silver-light-many:hover > *, .bg-silver-light-many:focus > * { - background-color: var(--silver-light); } + background-color: var(--ani-silver-light); } .bg-white, .bg-white-all > *, @@ -2698,7 +2741,7 @@ button, .bg-white-one > *:focus, .bg-white-many:hover > *, .bg-white-many:focus > * { - background-color: var(--white); } + background-color: var(--ani-white); } .bg-white-dark, .bg-white-dark-all > *, @@ -2710,7 +2753,7 @@ button, .bg-white-dark-one > *:focus, .bg-white-dark-many:hover > *, .bg-white-dark-many:focus > * { - background-color: var(--white-dark); } + background-color: var(--ani-white-dark); } .bg-white-light, .bg-white-light-all > *, @@ -2722,26 +2765,11 @@ button, .bg-white-light-one > *:focus, .bg-white-light-many:hover > *, .bg-white-light-many:focus > * { - background-color: var(--white-light); } + background-color: var(--ani-white-light); } /********** ANIMATION **********/ [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; - animation-duration: var(--animation-duration); } + animation-duration: var(--ani-animation-duration); } /********** ANIMATION NAME **********/ .anima-slideT, @@ -3034,46 +3062,46 @@ button, /********** ANIMATION OPTIONS **********/ .anima-sm { - animation-duration: var(--animation-duration-sm); } + animation-duration: var(--ani-animation-duration-sm); } .anima-md { - animation-duration: var(--animation-duration-md); } + animation-duration: var(--ani-animation-duration-md); } .anima-lg { - animation-duration: var(--animation-duration-lg); } + animation-duration: var(--ani-animation-duration-lg); } .anima-linear { - animation-timing-function: var(--animation-timing-function-linear); } + animation-timing-function: var(--ani-animation-timing-function-linear); } .anima-in { - animation-timing-function: var(--animation-timing-function-in); } + animation-timing-function: var(--ani-animation-timing-function-in); } .anima-out { - animation-timing-function: var(--animation-timing-function-out); } + animation-timing-function: var(--ani-animation-timing-function-out); } .anima-inout { - animation-timing-function: var(--animation-timing-function-inout); } + animation-timing-function: var(--ani-animation-timing-function-inout); } .anima-start { - animation-timing-function: var(--animation-timing-function-start); } + animation-timing-function: var(--ani-animation-timing-function-start); } .anima-end { - animation-timing-function: var(--animation-timing-function-end); } + animation-timing-function: var(--ani-animation-timing-function-end); } .anima-few { - animation-iteration-count: var(--animation-iteration-count-few); } + animation-iteration-count: var(--ani-animation-iteration-count-few); } .anima-many { - animation-iteration-count: var(--animation-iteration-count-many); } + animation-iteration-count: var(--ani-animation-iteration-count-many); } .anima-loop { - animation-iteration-count: var(--animation-iteration-count-loop); } + animation-iteration-count: var(--ani-animation-iteration-count-loop); } .anima-min { - animation-delay: var(--animation-delay-min); } + animation-delay: var(--ani-animation-delay-min); } .anima-max { - animation-delay: var(--animation-delay-max); } + animation-delay: var(--ani-animation-delay-max); } .anima-alt { animation-direction: alternate; } @@ -3083,5 +3111,6 @@ button, .anima-altrev { animation-direction: alternate-reverse; } + /* Author: Philippe Beck - Updated: 24th Jan 2023 @ 11:51:48 PM */ \ No newline at end of file + Updated: 19th Feb 2023 @ 12:12:05 AM */ \ No newline at end of file diff --git a/dist/animadio.min.css b/dist/animadio.min.css index cd547ca..9255f5e 100644 --- a/dist/animadio.min.css +++ b/dist/animadio.min.css @@ -1 +1 @@ -/*! animadio v5.6.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{--sans-serif:Helvetica,sans-serif;--serif:Times,serif;--monospace:Courier,monospace;--cursive:Mistral,cursive;--fantasy:Impact,fantasy;--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));--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)}@keyframes slideT{from{transform:var(--slideT)}}@keyframes slideR{from{transform:var(--slideR)}}@keyframes slideB{from{transform:var(--slideB)}}@keyframes slideL{from{transform:var(--slideL)}}@keyframes turn{from{transform:var(--turn)}}@keyframes turnX{from{transform:var(--turnX)}}@keyframes turnY{from{transform:var(--turnY)}}@keyframes turnXY{from{transform:var(--turnXY)}}@keyframes turnXZ{from{transform:var(--turnXZ)}}@keyframes turnYZ{from{transform:var(--turnYZ)}}@keyframes turn3D{from{transform:var(--turn3D)}}@keyframes bounce{from{transform:var(--bounce)}}@keyframes grow{from{transform:var(--grow)}}@keyframes shrink{from{transform:var(--shrink)}}@keyframes flipX{from{transform:var(--flipX)}}@keyframes flipY{from{transform:var(--flipY)}}@keyframes openX{from{transform:var(--openX)}}@keyframes openY{from{transform:var(--openY)}}@keyframes flipperX{from{transform:var(--flipperX)}}@keyframes flipperY{from{transform:var(--flipperY)}}@keyframes twistT{from{transform:var(--twistT)}}@keyframes twistR{from{transform:var(--twistR)}}@keyframes twistB{from{transform:var(--twistB)}}@keyframes twistL{from{transform:var(--twistL)}}*{--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-overflow:break-word;--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);overflow-wrap:var(--body-overflow)}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*="-tn1"]{gap:var(--gap1)}[class*=gap-][class*="-tn2"]{gap:var(--gap2)}[class*=gap-][class*="-tn3"]{gap:var(--gap3)}[class*=gap-][class*="-tn4"]{gap:var(--gap4)}@media (min-width:576px){[class*=gap-][class*="-sm1"]{gap:var(--gap1)}[class*=gap-][class*="-sm2"]{gap:var(--gap2)}[class*=gap-][class*="-sm3"]{gap:var(--gap3)}[class*=gap-][class*="-sm4"]{gap:var(--gap4)}}@media (min-width:768px){[class*=gap-][class*="-md1"]{gap:var(--gap1)}[class*=gap-][class*="-md2"]{gap:var(--gap2)}[class*=gap-][class*="-md3"]{gap:var(--gap3)}[class*=gap-][class*="-md4"]{gap:var(--gap4)}}@media (min-width:992px){[class*=gap-][class*="-lg1"]{gap:var(--gap1)}[class*=gap-][class*="-lg2"]{gap:var(--gap2)}[class*=gap-][class*="-lg3"]{gap:var(--gap3)}[class*=gap-][class*="-lg4"]{gap:var(--gap4)}}@media (min-width:1200px){[class*=gap-][class*="-xl1"]{gap:var(--gap1)}[class*=gap-][class*="-xl2"]{gap:var(--gap2)}[class*=gap-][class*="-xl3"]{gap:var(--gap3)}[class*=gap-][class*="-xl4"]{gap:var(--gap4)}}@media (min-width:1600px){[class*=gap-][class*="-wd1"]{gap:var(--gap1)}[class*=gap-][class*="-wd2"]{gap:var(--gap2)}[class*=gap-][class*="-wd3"]{gap:var(--gap3)}[class*=gap-][class*="-wd4"]{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*=mar-]{--margin-none:0;--margin-tn:2px;--margin-sm:5px;--margin-md:10px;--margin-lg:20px;--margin-xl:50px;--margin-wd:100px}.mar-none,.mar-none-all>*{margin:var(--margin-none)}.mar-tn,.mar-tn-all>*{margin:var(--margin-tn)}.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-xl,.mar-xl-all>*{margin:var(--margin-xl)}.mar-wd,.mar-wd-all>*{margin:var(--margin-wd)}[class*=bord]{--border-width-sm:1px;--border-width-md:2px;--border-width-lg:5px;--border-radius-curve:10px;--border-radius-round:20px;--border-radius-circle:50%}.bord{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:10px}.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:20px}.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-tn:2px;--padding-sm:5px;--padding-md:10px;--padding-lg:20px;--padding-xl:50px;--padding-wd:100px}.pad-none,.pad-none-all>*{padding:var(--padding-none)}.pad-tn,.pad-tn-all>*{padding:var(--padding-tn)}.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-xl,.pad-xl-all>*{padding:var(--padding-xl)}.pad-wd,.pad-wd-all>*{padding:var(--padding-wd)}[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*=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)}.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{text-align:center}.justify{text-align:justify}.left{text-align:left}.right{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}.deco{-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-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)}.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)}[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;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{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{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{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{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{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{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{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{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{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{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{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{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{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{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{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{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{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{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{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{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{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{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{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{animation-name:twistL}.anima-sm{animation-duration:var(--animation-duration-sm)}.anima-md{animation-duration:var(--animation-duration-md)}.anima-lg{animation-duration:var(--animation-duration-lg)}.anima-linear{animation-timing-function:var(--animation-timing-function-linear)}.anima-in{animation-timing-function:var(--animation-timing-function-in)}.anima-out{animation-timing-function:var(--animation-timing-function-out)}.anima-inout{animation-timing-function:var(--animation-timing-function-inout)}.anima-start{animation-timing-function:var(--animation-timing-function-start)}.anima-end{animation-timing-function:var(--animation-timing-function-end)}.anima-few{animation-iteration-count:var(--animation-iteration-count-few)}.anima-many{animation-iteration-count:var(--animation-iteration-count-many)}.anima-loop{animation-iteration-count:var(--animation-iteration-count-loop)}.anima-min{animation-delay:var(--animation-delay-min)}.anima-max{animation-delay:var(--animation-delay-max)}.anima-alt{animation-direction:alternate}.anima-rev{animation-direction:reverse}.anima-altrev{animation-direction:alternate-reverse} \ No newline at end of file +/*! animadio v5.7.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{--ani-sans-serif:Helvetica,sans-serif;--ani-serif:Times,serif;--ani-monospace:Courier,monospace;--ani-cursive:Mistral,cursive;--ani-fantasy:Impact,fantasy;--ani-red-hsl:348,83%,47%;--ani-orange-hsl:33,100%,50%;--ani-yellow-hsl:51,100%,50%;--ani-green-hsl:120,61%,50%;--ani-sky-hsl:195,100%,50%;--ani-blue-hsl:210,100%,56%;--ani-violet-hsl:271,76%,53%;--ani-pink-hsl:328,100%,54%;--ani-black-hsl:0,0%,0%;--ani-gray-hsl:0,0%,33%;--ani-silver-hsl:0,0%,67%;--ani-white-hsl:0,0%,100%;--ani-red:hsl(var(--ani-red-hsl));--ani-orange:hsl(var(--ani-orange-hsl));--ani-yellow:hsl(var(--ani-yellow-hsl));--ani-green:hsl(var(--ani-green-hsl));--ani-sky:hsl(var(--ani-sky-hsl));--ani-blue:hsl(var(--ani-blue-hsl));--ani-violet:hsl(var(--ani-violet-hsl));--ani-pink:hsl(var(--ani-pink-hsl));--ani-black:hsl(var(--ani-black-hsl));--ani-gray:hsl(var(--ani-gray-hsl));--ani-silver:hsl(var(--ani-silver-hsl));--ani-white:hsl(var(--ani-white-hsl));--ani-dark:0.8;--ani-light:0.2;--ani-red-dark:hsla(var(--ani-red-hsl), var(--ani-dark));--ani-red-light:hsla(var(--ani-red-hsl), var(--ani-light));--ani-orange-dark:hsla(var(--ani-orange-hsl), var(--ani-dark));--ani-orange-light:hsla(var(--ani-orange-hsl), var(--ani-light));--ani-yellow-dark:hsla(var(--ani-yellow-hsl), var(--ani-dark));--ani-yellow-light:hsla(var(--ani-yellow-hsl), var(--ani-light));--ani-green-dark:hsla(var(--ani-green-hsl), var(--ani-dark));--ani-green-light:hsla(var(--ani-green-hsl), var(--ani-light));--ani-sky-dark:hsla(var(--ani-sky-hsl), var(--ani-dark));--ani-sky-light:hsla(var(--ani-sky-hsl), var(--ani-light));--ani-blue-dark:hsla(var(--ani-blue-hsl), var(--ani-dark));--ani-blue-light:hsla(var(--ani-blue-hsl), var(--ani-light));--ani-violet-dark:hsla(var(--ani-violet-hsl), var(--ani-dark));--ani-violet-light:hsla(var(--ani-violet-hsl), var(--ani-light));--ani-pink-dark:hsla(var(--ani-pink-hsl), var(--ani-dark));--ani-pink-light:hsla(var(--ani-pink-hsl), var(--ani-light));--ani-black-dark:hsla(var(--ani-black-hsl), var(--ani-dark));--ani-black-light:hsla(var(--ani-black-hsl), var(--ani-light));--ani-gray-dark:hsla(var(--ani-gray-hsl), var(--ani-dark));--ani-gray-light:hsla(var(--ani-gray-hsl), var(--ani-light));--ani-silver-dark:hsla(var(--ani-silver-hsl), var(--ani-dark));--ani-silver-light:hsla(var(--ani-silver-hsl), var(--ani-light));--ani-white-dark:hsla(var(--ani-white-hsl), var(--ani-dark));--ani-white-light:hsla(var(--ani-white-hsl), var(--ani-light));--ani-slideT:translate(0, 10vh);--ani-slideR:translate(-10vw, 0);--ani-slideB:translate(0, -10vh);--ani-slideL:translate(10vw, 0);--ani-turn:rotate3d(0, 0, 1, 360deg);--ani-turnX:rotate3d(1, 0, 0, 360deg);--ani-turnY:rotate3d(0, 1, 0, 360deg);--ani-turnXY:rotate3d(1, 1, 0, 360deg);--ani-turnXZ:rotate3d(1, 0, 1, 360deg);--ani-turnYZ:rotate3d(0, 1, 1, 360deg);--ani-turn3D:rotate3d(1, 1, 1, 360deg);--ani-bounce:scale(-1, -1);--ani-grow:scale(0.5, 0.5);--ani-shrink:scale(1.5, 1.5);--ani-flipX:scale(1, -1);--ani-flipY:scale(-1, 1);--ani-openX:scale(1, 0);--ani-openY:scale(0, 1);--ani-flipperX:scale(0, -1);--ani-flipperY:scale(-1, 0);--ani-twistT:skew(-90deg, -90deg);--ani-twistR:skew(90deg, -90deg);--ani-twistB:skew(90deg, 90deg);--ani-twistL:skew(-90deg, 90deg)}*{--ani-target-margins:7rem}html{--ani-html-font-size:62.5%}body{--ani-body-font-size:2rem;--ani-body-line-height:1.6;--ani-body-margin:auto;--ani-body-max-width:2000px;--ani-body-overflow:break-word;--ani-body-padding:0}main{--ani-main-text-align:center}article{--ani-article-margin-bottom:20px}h1{--ani-title-font-size:calc(var(--ani-body-font-size) * 2)}h2{--ani-title-font-size:calc(var(--ani-body-font-size) * 1.8)}h3{--ani-title-font-size:calc(var(--ani-body-font-size) * 1.6)}h4{--ani-title-font-size:calc(var(--ani-body-font-size) * 1.4)}h5{--ani-title-font-size:calc(var(--ani-body-font-size) * 1.2)}h6{--ani-title-font-size:var(--ani-body-font-size)}h1,h2,h3,h4,h5,h6{--ani-title-text-align:center;--ani-title-text-transform:capitalize}a{--ani-link-outline:0;--ani-link-text-decoration:none}ul{--ani-list-margin:0 0 10px;--ani-list-padding:0;--ani-list-style:none}table{--ani-table-border-collapse:collapse;--ani-table-margin:auto;--ani-table-text-align:center;--ani-table-vertical-align:middle}code,pre{--ani-code-margin:auto;--ani-code-overflow:scroll;--ani-code-padding:10px;--ani-code-text-align:initial;--ani-code-width:100%}figure{--ani-figure-margin:0}img,video{--ani-img-max-width:100%;--ani-img-height:auto;--ani-img-object-fit:contain}[type=button],[type=reset],[type=submit],button{--ani-button-cursor:pointer}[class*=grid]{--ani-grid-max-width:100vw;--ani-grid-margin:auto}[class*=gap-]{--ani-gap1:5px;--ani-gap2:10px;--ani-gap3:20px;--ani-gap4:50px}[class*=mar-]{--ani-margin-auto:auto;--ani-margin-none:0;--ani-margin-tn:2px;--ani-margin-sm:5px;--ani-margin-md:10px;--ani-margin-lg:20px;--ani-margin-xl:50px;--ani-margin-wd:100px}[class*=bord]{--ani-border-width-sm:1px;--ani-border-width-md:2px;--ani-border-width-lg:5px;--ani-border-radius-curve:10px;--ani-border-radius-round:20px;--ani-border-radius-circle:50%}[class*=pad-]{--ani-padding-auto:auto;--ani-padding-none:0;--ani-padding-tn:2px;--ani-padding-sm:5px;--ani-padding-md:10px;--ani-padding-lg:20px;--ani-padding-xl:50px;--ani-padding-wd:100px}[class*=container]{--ani-container-max-width:100%}[class*=height-]{--ani-height-sm:20%;--ani-height-md:50%;--ani-height-lg:100%}[class*=max-h-]{--ani-max-height-sm:20%;--ani-max-height-md:50%;--ani-max-height-lg:100%}[class*=min-h-]{--ani-min-height-sm:20%;--ani-min-height-md:50%;--ani-min-height-lg:100%}[class*=width-]{--ani-width-sm:20%;--ani-width-md:50%;--ani-width-lg:100%}[class*=max-w-]{--ani-max-width-sm:20%;--ani-max-width-md:50%;--ani-max-width-lg:100%}[class*=min-w-]{--ani-min-width-sm:20%;--ani-min-width-md:50%;--ani-min-width-lg:100%}[class*=anima-]{--ani-animation-duration:2s;--ani-animation-duration-sm:500ms;--ani-animation-duration-md:1s;--ani-animation-duration-lg:2s;--ani-animation-timing-function-linear:linear;--ani-animation-timing-function-in:ease-in;--ani-animation-timing-function-out:ease-out;--ani-animation-timing-function-inout:ease-in-out;--ani-animation-timing-function-start:step-start;--ani-animation-timing-function-end:step-end;--ani-animation-iteration-count-few:2;--ani-animation-iteration-count-many:5;--ani-animation-iteration-count-loop:infinite;--ani-animation-delay-min:500ms;--ani-animation-delay-max:1s}@keyframes slideT{from{transform:var(--ani-slideT)}}@keyframes slideR{from{transform:var(--ani-slideR)}}@keyframes slideB{from{transform:var(--ani-slideB)}}@keyframes slideL{from{transform:var(--ani-slideL)}}@keyframes turn{from{transform:var(--ani-turn)}}@keyframes turnX{from{transform:var(--ani-turnX)}}@keyframes turnY{from{transform:var(--ani-turnY)}}@keyframes turnXY{from{transform:var(--ani-turnXY)}}@keyframes turnXZ{from{transform:var(--ani-turnXZ)}}@keyframes turnYZ{from{transform:var(--ani-turnYZ)}}@keyframes turn3D{from{transform:var(--ani-turn3D)}}@keyframes bounce{from{transform:var(--ani-bounce)}}@keyframes grow{from{transform:var(--ani-grow)}}@keyframes shrink{from{transform:var(--ani-shrink)}}@keyframes flipX{from{transform:var(--ani-flipX)}}@keyframes flipY{from{transform:var(--ani-flipY)}}@keyframes openX{from{transform:var(--ani-openX)}}@keyframes openY{from{transform:var(--ani-openY)}}@keyframes flipperX{from{transform:var(--ani-flipperX)}}@keyframes flipperY{from{transform:var(--ani-flipperY)}}@keyframes twistT{from{transform:var(--ani-twistT)}}@keyframes twistR{from{transform:var(--ani-twistR)}}@keyframes twistB{from{transform:var(--ani-twistB)}}@keyframes twistL{from{transform:var(--ani-twistL)}}*{box-sizing:border-box}:target{padding-top:var(--ani-target-margins);margin-top:-var(--ani-target-margins)}html{font-size:var(--ani-html-font-size);scroll-behavior:smooth}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}body{margin:var(--ani-body-margin);padding:var(--ani-body-padding);max-width:var(--ani-body-max-width);line-height:var(--ani-body-line-height);font-size:var(--ani-body-font-size);font-family:var(--ani-sans-serif);overflow-wrap:var(--ani-body-overflow)}main{text-align:var(--ani-main-text-align)}article{margin-bottom:var(--ani-article-margin-bottom)}h1,h2,h3,h4,h5,h6{font-family:var(--ani-serif);text-align:var(--ani-title-text-align);text-transform:var(--ani-title-text-transform);font-size:var(--ani-title-font-size)}a{-webkit-text-decoration:var(--ani-link-text-decoration);text-decoration:var(--ani-link-text-decoration);outline:var(--ani-link-outline)}ul{margin:var(--ani-list-margin);padding:var(--ani-list-padding);list-style:var(--ani-list-style)}table{margin:var(--ani-table-margin);border-collapse:var(--ani-table-border-collapse);text-align:var(--ani-table-text-align);vertical-align:var(--ani-table-vertical-align);font-family:var(--ani-monospace)}code,pre{font-size:1em;overflow:var(--ani-code-overflow);margin:var(--ani-code-margin);padding:var(--ani-code-padding);width:var(--ani-code-width);font-family:var(--ani-monospace);text-align:var(--ani-code-text-align)}figure{margin:var(--ani-figure-margin)}img,video{max-width:var(--ani-img-max-width);height:var(--ani-img-height);-o-object-fit:var(--ani-img-object-fit);object-fit:var(--ani-img-object-fit)}[type=button],[type=reset],[type=submit],button{cursor:var(--ani-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]{display:grid;max-width:var(--ani-grid-max-width);margin:var(--ani-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-][class*="-tn1"]{gap:var(--ani-gap1)}[class*=gap-][class*="-tn2"]{gap:var(--ani-gap2)}[class*=gap-][class*="-tn3"]{gap:var(--ani-gap3)}[class*=gap-][class*="-tn4"]{gap:var(--ani-gap4)}@media (min-width:576px){[class*=gap-][class*="-sm1"]{gap:var(--ani-gap1)}[class*=gap-][class*="-sm2"]{gap:var(--ani-gap2)}[class*=gap-][class*="-sm3"]{gap:var(--ani-gap3)}[class*=gap-][class*="-sm4"]{gap:var(--ani-gap4)}}@media (min-width:768px){[class*=gap-][class*="-md1"]{gap:var(--ani-gap1)}[class*=gap-][class*="-md2"]{gap:var(--ani-gap2)}[class*=gap-][class*="-md3"]{gap:var(--ani-gap3)}[class*=gap-][class*="-md4"]{gap:var(--ani-gap4)}}@media (min-width:992px){[class*=gap-][class*="-lg1"]{gap:var(--ani-gap1)}[class*=gap-][class*="-lg2"]{gap:var(--ani-gap2)}[class*=gap-][class*="-lg3"]{gap:var(--ani-gap3)}[class*=gap-][class*="-lg4"]{gap:var(--ani-gap4)}}@media (min-width:1200px){[class*=gap-][class*="-xl1"]{gap:var(--ani-gap1)}[class*=gap-][class*="-xl2"]{gap:var(--ani-gap2)}[class*=gap-][class*="-xl3"]{gap:var(--ani-gap3)}[class*=gap-][class*="-xl4"]{gap:var(--ani-gap4)}}@media (min-width:1600px){[class*=gap-][class*="-wd1"]{gap:var(--ani-gap1)}[class*=gap-][class*="-wd2"]{gap:var(--ani-gap2)}[class*=gap-][class*="-wd3"]{gap:var(--ani-gap3)}[class*=gap-][class*="-wd4"]{gap:var(--ani-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}}.mar-auto,.mar-auto-all>*{margin:var(--ani-margin-auto)}.mar-none,.mar-none-all>*{margin:var(--ani-margin-none)}.mar-tn,.mar-tn-all>*{margin:var(--ani-margin-tn)}.mar-sm,.mar-sm-all>*{margin:var(--ani-margin-sm)}.mar-md,.mar-md-all>*{margin:var(--ani-margin-md)}.mar-lg,.mar-lg-all>*{margin:var(--ani-margin-lg)}.mar-xl,.mar-xl-all>*{margin:var(--ani-margin-xl)}.mar-wd,.mar-wd-all>*{margin:var(--ani-margin-wd)}.bord{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(--ani-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(--ani-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(--ani-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(--ani-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(--ani-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(--ani-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(--ani-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(--ani-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:10px}.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:20px}.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%}.pad-auto,.pad-auto-all>*{padding:var(--ani-padding-auto)}.pad-none,.pad-none-all>*{padding:var(--ani-padding-none)}.pad-tn,.pad-tn-all>*{padding:var(--ani-padding-tn)}.pad-sm,.pad-sm-all>*{padding:var(--ani-padding-sm)}.pad-md,.pad-md-all>*{padding:var(--ani-padding-md)}.pad-lg,.pad-lg-all>*{padding:var(--ani-padding-lg)}.pad-xl,.pad-xl-all>*{padding:var(--ani-padding-xl)}.pad-wd,.pad-wd-all>*{padding:var(--ani-padding-wd)}[class*=container]{margin:auto;max-width:var(--ani-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%}}.height-sm,.height-sm-all>*{height:var(--ani-height-sm)}.height-md,.height-md-all>*{height:var(--ani-height-md)}.height-lg,.height-lg-all>*{height:var(--ani-height-lg)}.max-h-sm,.max-h-sm-all>*{max-height:var(--ani-max-height-sm)}.max-h-md,.max-h-md-all>*{max-height:var(--ani-max-height-md)}.max-h-lg,.max-h-lg-all>*{max-height:var(--ani-max-height-lg)}.min-h-sm,.min-h-sm-all>*{min-height:var(--ani-min-height-sm)}.min-h-md,.min-h-md-all>*{min-height:var(--ani-min-height-md)}.min-h-lg,.min-h-lg-all>*{min-height:var(--ani-min-height-lg)}.width-sm,.width-sm-all>*{width:var(--ani-width-sm)}.width-md,.width-md-all>*{width:var(--ani-width-md)}.width-lg,.width-lg-all>*{width:var(--ani-width-lg)}.max-w-sm,.max-w-sm-all>*{max-width:var(--ani-max-width-sm)}.max-w-md,.max-w-md-all>*{max-width:var(--ani-max-width-md)}.max-w-lg,.max-w-lg-all>*{max-width:var(--ani-max-width-lg)}.min-w-sm,.min-w-sm-all>*{min-width:var(--ani-min-width-sm)}.min-w-md,.min-w-md-all>*{min-width:var(--ani-min-width-md)}.min-w-lg,.min-w-lg-all>*{min-width:var(--ani-min-width-lg)}.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(--ani-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(--ani-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(--ani-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(--ani-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(--ani-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{text-align:center}.justify{text-align:justify}.left{text-align:left}.right{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}.deco{-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-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(--ani-red);text-decoration-color:var(--ani-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(--ani-orange);text-decoration-color:var(--ani-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(--ani-yellow);text-decoration-color:var(--ani-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(--ani-green);text-decoration-color:var(--ani-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(--ani-sky);text-decoration-color:var(--ani-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(--ani-blue);text-decoration-color:var(--ani-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(--ani-violet);text-decoration-color:var(--ani-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(--ani-pink);text-decoration-color:var(--ani-pink)}.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(--ani-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(--ani-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(--ani-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(--ani-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(--ani-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(--ani-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(--ani-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(--ani-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(--ani-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(--ani-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(--ani-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(--ani-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(--ani-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(--ani-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(--ani-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(--ani-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(--ani-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(--ani-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(--ani-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(--ani-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(--ani-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(--ani-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(--ani-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(--ani-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(--ani-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(--ani-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(--ani-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(--ani-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(--ani-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(--ani-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(--ani-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(--ani-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(--ani-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(--ani-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(--ani-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(--ani-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(--ani-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(--ani-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(--ani-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(--ani-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(--ani-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(--ani-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(--ani-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(--ani-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(--ani-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(--ani-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(--ani-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(--ani-white-light)}[class*=anima-]{animation-duration:var(--ani-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{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{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{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{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{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{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{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{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{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{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{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{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{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{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{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{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{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{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{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{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{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{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{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{animation-name:twistL}.anima-sm{animation-duration:var(--ani-animation-duration-sm)}.anima-md{animation-duration:var(--ani-animation-duration-md)}.anima-lg{animation-duration:var(--ani-animation-duration-lg)}.anima-linear{animation-timing-function:var(--ani-animation-timing-function-linear)}.anima-in{animation-timing-function:var(--ani-animation-timing-function-in)}.anima-out{animation-timing-function:var(--ani-animation-timing-function-out)}.anima-inout{animation-timing-function:var(--ani-animation-timing-function-inout)}.anima-start{animation-timing-function:var(--ani-animation-timing-function-start)}.anima-end{animation-timing-function:var(--ani-animation-timing-function-end)}.anima-few{animation-iteration-count:var(--ani-animation-iteration-count-few)}.anima-many{animation-iteration-count:var(--ani-animation-iteration-count-many)}.anima-loop{animation-iteration-count:var(--ani-animation-iteration-count-loop)}.anima-min{animation-delay:var(--ani-animation-delay-min)}.anima-max{animation-delay:var(--ani-animation-delay-max)}.anima-alt{animation-direction:alternate}.anima-rev{animation-direction:reverse}.anima-altrev{animation-direction:alternate-reverse} \ No newline at end of file diff --git a/dist/style.css b/dist/style.css new file mode 100644 index 0000000..ed5fa8d --- /dev/null +++ b/dist/style.css @@ -0,0 +1,273 @@ +/********** VARS **********/ +:root { + /********** FONT FAMILY **********/ + --ani-sans-serif: Helvetica, sans-serif; + --ani-serif: Times, serif; + --ani-monospace: Courier, monospace; + --ani-cursive: Mistral, cursive; + --ani-fantasy: Impact, fantasy; + /********** COLORS **********/ + /* hsl values */ + --ani-red-hsl: 348, 83%, 47%; + --ani-orange-hsl: 33, 100%, 50%; + --ani-yellow-hsl: 51, 100%, 50%; + --ani-green-hsl: 120, 61%, 50%; + --ani-sky-hsl: 195, 100%, 50%; + --ani-blue-hsl: 210, 100%, 56%; + --ani-violet-hsl: 271, 76%, 53%; + --ani-pink-hsl: 328, 100%, 54%; + --ani-black-hsl: 0, 0%, 0%; + --ani-gray-hsl: 0, 0%, 33%; + --ani-silver-hsl: 0, 0%, 67%; + --ani-white-hsl: 0, 0%, 100%; + /* opaque colors */ + --ani-red: hsl(var(--ani-red-hsl)); + --ani-orange: hsl(var(--ani-orange-hsl)); + --ani-yellow: hsl(var(--ani-yellow-hsl)); + --ani-green: hsl(var(--ani-green-hsl)); + --ani-sky: hsl(var(--ani-sky-hsl)); + --ani-blue: hsl(var(--ani-blue-hsl)); + --ani-violet: hsl(var(--ani-violet-hsl)); + --ani-pink: hsl(var(--ani-pink-hsl)); + --ani-black: hsl(var(--ani-black-hsl)); + --ani-gray: hsl(var(--ani-gray-hsl)); + --ani-silver: hsl(var(--ani-silver-hsl)); + --ani-white: hsl(var(--ani-white-hsl)); + /* opacity */ + --ani-dark: 0.8; + --ani-light: 0.2; + /* transparent colors */ + --ani-red-dark: hsla(var(--ani-red-hsl), var(--ani-dark)); + --ani-red-light: hsla(var(--ani-red-hsl), var(--ani-light)); + --ani-orange-dark: hsla(var(--ani-orange-hsl), var(--ani-dark)); + --ani-orange-light: hsla(var(--ani-orange-hsl), var(--ani-light)); + --ani-yellow-dark: hsla(var(--ani-yellow-hsl), var(--ani-dark)); + --ani-yellow-light: hsla(var(--ani-yellow-hsl), var(--ani-light)); + --ani-green-dark: hsla(var(--ani-green-hsl), var(--ani-dark)); + --ani-green-light: hsla(var(--ani-green-hsl), var(--ani-light)); + --ani-sky-dark: hsla(var(--ani-sky-hsl), var(--ani-dark)); + --ani-sky-light: hsla(var(--ani-sky-hsl), var(--ani-light)); + --ani-blue-dark: hsla(var(--ani-blue-hsl), var(--ani-dark)); + --ani-blue-light: hsla(var(--ani-blue-hsl), var(--ani-light)); + --ani-violet-dark: hsla(var(--ani-violet-hsl), var(--ani-dark)); + --ani-violet-light: hsla(var(--ani-violet-hsl), var(--ani-light)); + --ani-pink-dark: hsla(var(--ani-pink-hsl), var(--ani-dark)); + --ani-pink-light: hsla(var(--ani-pink-hsl), var(--ani-light)); + --ani-black-dark: hsla(var(--ani-black-hsl), var(--ani-dark)); + --ani-black-light: hsla(var(--ani-black-hsl), var(--ani-light)); + --ani-gray-dark: hsla(var(--ani-gray-hsl), var(--ani-dark)); + --ani-gray-light: hsla(var(--ani-gray-hsl), var(--ani-light)); + --ani-silver-dark: hsla(var(--ani-silver-hsl), var(--ani-dark)); + --ani-silver-light: hsla(var(--ani-silver-hsl), var(--ani-light)); + --ani-white-dark: hsla(var(--ani-white-hsl), var(--ani-dark)); + --ani-white-light: hsla(var(--ani-white-hsl), var(--ani-light)); + /********** TRANSFORM **********/ + --ani-slideT: translate(0, 10vh); + --ani-slideR: translate(-10vw, 0); + --ani-slideB: translate(0, -10vh); + --ani-slideL: translate(10vw, 0); + --ani-turn: rotate3d(0, 0, 1, 360deg); + --ani-turnX: rotate3d(1, 0, 0, 360deg); + --ani-turnY: rotate3d(0, 1, 0, 360deg); + --ani-turnXY: rotate3d(1, 1, 0, 360deg); + --ani-turnXZ: rotate3d(1, 0, 1, 360deg); + --ani-turnYZ: rotate3d(0, 1, 1, 360deg); + --ani-turn3D: rotate3d(1, 1, 1, 360deg); + --ani-bounce: scale(-1, -1); + --ani-grow: scale(0.5, 0.5); + --ani-shrink: scale(1.5, 1.5); + --ani-flipX: scale(1, -1); + --ani-flipY: scale(-1, 1); + --ani-openX: scale(1, 0); + --ani-openY: scale(0, 1); + --ani-flipperX: scale(0, -1); + --ani-flipperY: scale(-1, 0); + --ani-twistT: skew(-90deg, -90deg); + --ani-twistR: skew(90deg, -90deg); + --ani-twistB: skew(90deg, 90deg); + --ani-twistL: skew(-90deg, 90deg); } + +/********** TAGS **********/ +* { + --ani-target-margins: 7rem; } + +html { + --ani-html-font-size: 62.5%; } + +body { + --ani-body-font-size: 2rem; + --ani-body-line-height: 1.6; + --ani-body-margin: auto; + --ani-body-max-width: 2000px; + --ani-body-overflow: break-word; + --ani-body-padding: 0; } + +main { + --ani-main-text-align: center; } + +article { + --ani-article-margin-bottom: 20px; } + +h1 { + --ani-title-font-size: calc(var(--ani-body-font-size) * 2); } + +h2 { + --ani-title-font-size: calc(var(--ani-body-font-size) * 1.8); } + +h3 { + --ani-title-font-size: calc(var(--ani-body-font-size) * 1.6); } + +h4 { + --ani-title-font-size: calc(var(--ani-body-font-size) * 1.4); } + +h5 { + --ani-title-font-size: calc(var(--ani-body-font-size) * 1.2); } + +h6 { + --ani-title-font-size: var(--ani-body-font-size); } + +h1, +h2, +h3, +h4, +h5, +h6 { + --ani-title-text-align: center; + --ani-title-text-transform: capitalize; } + +a { + --ani-link-outline: 0; + --ani-link-text-decoration: none; } + +ul { + --ani-list-margin: 0 0 10px; + --ani-list-padding: 0; + --ani-list-style: none; } + +table { + --ani-table-border-collapse: collapse; + --ani-table-margin: auto; + --ani-table-text-align: center; + --ani-table-vertical-align: middle; } + +code, +pre { + --ani-code-margin: auto; + --ani-code-overflow: scroll; + --ani-code-padding: 10px; + --ani-code-text-align: initial; + --ani-code-width: 100%; } + +figure { + --ani-figure-margin: 0; } + +img, +video { + --ani-img-max-width: 100%; + --ani-img-height: auto; + --ani-img-object-fit: contain; } + +button, +[type="button"], +[type="reset"], +[type="submit"] { + --ani-button-cursor: pointer; } + +/********** GRID **********/ +[class*="grid"] { + --ani-grid-max-width: 100vw; + --ani-grid-margin: auto; } + +[class*="gap-"] { + --ani-gap1: 5px; + --ani-gap2: 10px; + --ani-gap3: 20px; + --ani-gap4: 50px; } + +/********** MARGIN **********/ +[class*="mar-"] { + --ani-margin-auto: auto; + --ani-margin-none: 0; + --ani-margin-tn: 2px; + --ani-margin-sm: 5px; + --ani-margin-md: 10px; + --ani-margin-lg: 20px; + --ani-margin-xl: 50px; + --ani-margin-wd: 100px; } + +/********** BORDER **********/ +[class*="bord"] { + --ani-border-width-sm: 1px; + --ani-border-width-md: 2px; + --ani-border-width-lg: 5px; + --ani-border-radius-curve: 10px; + --ani-border-radius-round: 20px; + --ani-border-radius-circle: 50%; } + +/********** PADDING **********/ +[class*="pad-"] { + --ani-padding-auto: auto; + --ani-padding-none: 0; + --ani-padding-tn: 2px; + --ani-padding-sm: 5px; + --ani-padding-md: 10px; + --ani-padding-lg: 20px; + --ani-padding-xl: 50px; + --ani-padding-wd: 100px; } + +/********** CONTAINER **********/ +[class*="container"] { + --ani-container-max-width: 100%; } + +/********** HEIGHT **********/ +[class*="height-"] { + --ani-height-sm: 20%; + --ani-height-md: 50%; + --ani-height-lg: 100%; } + +/********** MAX HEIGHT **********/ +[class*="max-h-"] { + --ani-max-height-sm: 20%; + --ani-max-height-md: 50%; + --ani-max-height-lg: 100%; } + +/********** MIN HEIGHT **********/ +[class*="min-h-"] { + --ani-min-height-sm: 20%; + --ani-min-height-md: 50%; + --ani-min-height-lg: 100%; } + +/********** WIDTH **********/ +[class*="width-"] { + --ani-width-sm: 20%; + --ani-width-md: 50%; + --ani-width-lg: 100%; } + +/********** MAX WIDTH **********/ +[class*="max-w-"] { + --ani-max-width-sm: 20%; + --ani-max-width-md: 50%; + --ani-max-width-lg: 100%; } + +[class*="min-w-"] { + --ani-min-width-sm: 20%; + --ani-min-width-md: 50%; + --ani-min-width-lg: 100%; } + +/********** ANIMATION **********/ +[class*="anima-"] { + --ani-animation-duration: 2s; + --ani-animation-duration-sm: 500ms; + --ani-animation-duration-md: 1s; + --ani-animation-duration-lg: 2s; + --ani-animation-timing-function-linear: linear; + --ani-animation-timing-function-in: ease-in; + --ani-animation-timing-function-out: ease-out; + --ani-animation-timing-function-inout: ease-in-out; + --ani-animation-timing-function-start: step-start; + --ani-animation-timing-function-end: step-end; + --ani-animation-iteration-count-few: 2; + --ani-animation-iteration-count-many: 5; + --ani-animation-iteration-count-loop: infinite; + --ani-animation-delay-min: 500ms; + --ani-animation-delay-max: 1s; } diff --git a/package.json b/package.json index 8d72bc2..a76bd3c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "animadio", - "version": "5.6.0", + "version": "5.7.0", "description": "Animadio Framework - Grid & Flexbox Layouts - Reusable & Customizable Elements - Perform Complex Animations - Controls by Radio Buttons", "keywords": [ "css library", From 470805975542c359b404ea40318784aae44e5563 Mon Sep 17 00:00:00 2001 From: Philippe Beck Date: Sun, 19 Feb 2023 00:20:04 +0400 Subject: [PATCH 13/14] Update index style for titles --- index.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index a7617f1..9bf7e67 100644 --- a/index.html +++ b/index.html @@ -10,15 +10,15 @@ From b0fda05c8abdae143acf6a82f6a233745f900261 Mon Sep 17 00:00:00 2001 From: Philippe Beck Date: Sun, 19 Feb 2023 00:22:07 +0400 Subject: [PATCH 14/14] Move main.css --- Gruntfile.js | 2 +- src/main.css | 2743 ++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 2744 insertions(+), 1 deletion(-) create mode 100644 src/main.css diff --git a/Gruntfile.js b/Gruntfile.js index f0e0079..a44a8fb 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -10,7 +10,7 @@ module.exports = function(grunt) { }, dist: { files: { - 'src/css/main.css': 'src/main.scss', + 'src/main.css': 'src/main.scss', 'dist/style.css': 'src/style.scss' } } diff --git a/src/main.css b/src/main.css new file mode 100644 index 0000000..6a07ca1 --- /dev/null +++ b/src/main.css @@ -0,0 +1,2743 @@ +/********** VARS **********/ +:root { + /********** FONT FAMILY **********/ + --ani-sans-serif: Helvetica, sans-serif; + --ani-serif: Times, serif; + --ani-monospace: Courier, monospace; + --ani-cursive: Mistral, cursive; + --ani-fantasy: Impact, fantasy; + /********** COLORS **********/ + /* hsl values */ + --ani-red-hsl: 348, 83%, 47%; + --ani-orange-hsl: 33, 100%, 50%; + --ani-yellow-hsl: 51, 100%, 50%; + --ani-green-hsl: 120, 61%, 50%; + --ani-sky-hsl: 195, 100%, 50%; + --ani-blue-hsl: 210, 100%, 56%; + --ani-violet-hsl: 271, 76%, 53%; + --ani-pink-hsl: 328, 100%, 54%; + --ani-black-hsl: 0, 0%, 0%; + --ani-gray-hsl: 0, 0%, 33%; + --ani-silver-hsl: 0, 0%, 67%; + --ani-white-hsl: 0, 0%, 100%; + /* opaque colors */ + --ani-red: hsl(var(--ani-red-hsl)); + --ani-orange: hsl(var(--ani-orange-hsl)); + --ani-yellow: hsl(var(--ani-yellow-hsl)); + --ani-green: hsl(var(--ani-green-hsl)); + --ani-sky: hsl(var(--ani-sky-hsl)); + --ani-blue: hsl(var(--ani-blue-hsl)); + --ani-violet: hsl(var(--ani-violet-hsl)); + --ani-pink: hsl(var(--ani-pink-hsl)); + --ani-black: hsl(var(--ani-black-hsl)); + --ani-gray: hsl(var(--ani-gray-hsl)); + --ani-silver: hsl(var(--ani-silver-hsl)); + --ani-white: hsl(var(--ani-white-hsl)); + /* opacity */ + --ani-dark: 0.8; + --ani-light: 0.2; + /* transparent colors */ + --ani-red-dark: hsla(var(--ani-red-hsl), var(--ani-dark)); + --ani-red-light: hsla(var(--ani-red-hsl), var(--ani-light)); + --ani-orange-dark: hsla(var(--ani-orange-hsl), var(--ani-dark)); + --ani-orange-light: hsla(var(--ani-orange-hsl), var(--ani-light)); + --ani-yellow-dark: hsla(var(--ani-yellow-hsl), var(--ani-dark)); + --ani-yellow-light: hsla(var(--ani-yellow-hsl), var(--ani-light)); + --ani-green-dark: hsla(var(--ani-green-hsl), var(--ani-dark)); + --ani-green-light: hsla(var(--ani-green-hsl), var(--ani-light)); + --ani-sky-dark: hsla(var(--ani-sky-hsl), var(--ani-dark)); + --ani-sky-light: hsla(var(--ani-sky-hsl), var(--ani-light)); + --ani-blue-dark: hsla(var(--ani-blue-hsl), var(--ani-dark)); + --ani-blue-light: hsla(var(--ani-blue-hsl), var(--ani-light)); + --ani-violet-dark: hsla(var(--ani-violet-hsl), var(--ani-dark)); + --ani-violet-light: hsla(var(--ani-violet-hsl), var(--ani-light)); + --ani-pink-dark: hsla(var(--ani-pink-hsl), var(--ani-dark)); + --ani-pink-light: hsla(var(--ani-pink-hsl), var(--ani-light)); + --ani-black-dark: hsla(var(--ani-black-hsl), var(--ani-dark)); + --ani-black-light: hsla(var(--ani-black-hsl), var(--ani-light)); + --ani-gray-dark: hsla(var(--ani-gray-hsl), var(--ani-dark)); + --ani-gray-light: hsla(var(--ani-gray-hsl), var(--ani-light)); + --ani-silver-dark: hsla(var(--ani-silver-hsl), var(--ani-dark)); + --ani-silver-light: hsla(var(--ani-silver-hsl), var(--ani-light)); + --ani-white-dark: hsla(var(--ani-white-hsl), var(--ani-dark)); + --ani-white-light: hsla(var(--ani-white-hsl), var(--ani-light)); + /********** TRANSFORM **********/ + --ani-slideT: translate(0, 10vh); + --ani-slideR: translate(-10vw, 0); + --ani-slideB: translate(0, -10vh); + --ani-slideL: translate(10vw, 0); + --ani-turn: rotate3d(0, 0, 1, 360deg); + --ani-turnX: rotate3d(1, 0, 0, 360deg); + --ani-turnY: rotate3d(0, 1, 0, 360deg); + --ani-turnXY: rotate3d(1, 1, 0, 360deg); + --ani-turnXZ: rotate3d(1, 0, 1, 360deg); + --ani-turnYZ: rotate3d(0, 1, 1, 360deg); + --ani-turn3D: rotate3d(1, 1, 1, 360deg); + --ani-bounce: scale(-1, -1); + --ani-grow: scale(0.5, 0.5); + --ani-shrink: scale(1.5, 1.5); + --ani-flipX: scale(1, -1); + --ani-flipY: scale(-1, 1); + --ani-openX: scale(1, 0); + --ani-openY: scale(0, 1); + --ani-flipperX: scale(0, -1); + --ani-flipperY: scale(-1, 0); + --ani-twistT: skew(-90deg, -90deg); + --ani-twistR: skew(90deg, -90deg); + --ani-twistB: skew(90deg, 90deg); + --ani-twistL: skew(-90deg, 90deg); } + +/********** TAGS **********/ +* { + --ani-target-margins: 7rem; } + +html { + --ani-html-font-size: 62.5%; } + +body { + --ani-body-font-size: 2rem; + --ani-body-line-height: 1.6; + --ani-body-margin: auto; + --ani-body-max-width: 2000px; + --ani-body-overflow: break-word; + --ani-body-padding: 0; } + +main { + --ani-main-text-align: center; } + +article { + --ani-article-margin-bottom: 20px; } + +h1 { + --ani-title-font-size: calc(var(--ani-body-font-size) * 2); } + +h2 { + --ani-title-font-size: calc(var(--ani-body-font-size) * 1.8); } + +h3 { + --ani-title-font-size: calc(var(--ani-body-font-size) * 1.6); } + +h4 { + --ani-title-font-size: calc(var(--ani-body-font-size) * 1.4); } + +h5 { + --ani-title-font-size: calc(var(--ani-body-font-size) * 1.2); } + +h6 { + --ani-title-font-size: var(--ani-body-font-size); } + +h1, +h2, +h3, +h4, +h5, +h6 { + --ani-title-text-align: center; + --ani-title-text-transform: capitalize; } + +a { + --ani-link-outline: 0; + --ani-link-text-decoration: none; } + +ul { + --ani-list-margin: 0 0 10px; + --ani-list-padding: 0; + --ani-list-style: none; } + +table { + --ani-table-border-collapse: collapse; + --ani-table-margin: auto; + --ani-table-text-align: center; + --ani-table-vertical-align: middle; } + +code, +pre { + --ani-code-margin: auto; + --ani-code-overflow: scroll; + --ani-code-padding: 10px; + --ani-code-text-align: initial; + --ani-code-width: 100%; } + +figure { + --ani-figure-margin: 0; } + +img, +video { + --ani-img-max-width: 100%; + --ani-img-height: auto; + --ani-img-object-fit: contain; } + +button, +[type="button"], +[type="reset"], +[type="submit"] { + --ani-button-cursor: pointer; } + +/********** GRID **********/ +[class*="grid"] { + --ani-grid-max-width: 100vw; + --ani-grid-margin: auto; } + +[class*="gap-"] { + --ani-gap1: 5px; + --ani-gap2: 10px; + --ani-gap3: 20px; + --ani-gap4: 50px; } + +/********** MARGIN **********/ +[class*="mar-"] { + --ani-margin-auto: auto; + --ani-margin-none: 0; + --ani-margin-tn: 2px; + --ani-margin-sm: 5px; + --ani-margin-md: 10px; + --ani-margin-lg: 20px; + --ani-margin-xl: 50px; + --ani-margin-wd: 100px; } + +/********** BORDER **********/ +[class*="bord"] { + --ani-border-width-sm: 1px; + --ani-border-width-md: 2px; + --ani-border-width-lg: 5px; + --ani-border-radius-curve: 10px; + --ani-border-radius-round: 20px; + --ani-border-radius-circle: 50%; } + +/********** PADDING **********/ +[class*="pad-"] { + --ani-padding-auto: auto; + --ani-padding-none: 0; + --ani-padding-tn: 2px; + --ani-padding-sm: 5px; + --ani-padding-md: 10px; + --ani-padding-lg: 20px; + --ani-padding-xl: 50px; + --ani-padding-wd: 100px; } + +/********** CONTAINER **********/ +[class*="container"] { + --ani-container-max-width: 100%; } + +/********** HEIGHT **********/ +[class*="height-"] { + --ani-height-sm: 20%; + --ani-height-md: 50%; + --ani-height-lg: 100%; } + +/********** MAX HEIGHT **********/ +[class*="max-h-"] { + --ani-max-height-sm: 20%; + --ani-max-height-md: 50%; + --ani-max-height-lg: 100%; } + +/********** MIN HEIGHT **********/ +[class*="min-h-"] { + --ani-min-height-sm: 20%; + --ani-min-height-md: 50%; + --ani-min-height-lg: 100%; } + +/********** WIDTH **********/ +[class*="width-"] { + --ani-width-sm: 20%; + --ani-width-md: 50%; + --ani-width-lg: 100%; } + +/********** MAX WIDTH **********/ +[class*="max-w-"] { + --ani-max-width-sm: 20%; + --ani-max-width-md: 50%; + --ani-max-width-lg: 100%; } + +[class*="min-w-"] { + --ani-min-width-sm: 20%; + --ani-min-width-md: 50%; + --ani-min-width-lg: 100%; } + +/********** ANIMATION **********/ +[class*="anima-"] { + --ani-animation-duration: 2s; + --ani-animation-duration-sm: 500ms; + --ani-animation-duration-md: 1s; + --ani-animation-duration-lg: 2s; + --ani-animation-timing-function-linear: linear; + --ani-animation-timing-function-in: ease-in; + --ani-animation-timing-function-out: ease-out; + --ani-animation-timing-function-inout: ease-in-out; + --ani-animation-timing-function-start: step-start; + --ani-animation-timing-function-end: step-end; + --ani-animation-iteration-count-few: 2; + --ani-animation-iteration-count-many: 5; + --ani-animation-iteration-count-loop: infinite; + --ani-animation-delay-min: 500ms; + --ani-animation-delay-max: 1s; } + +@keyframes slideT { + from { + transform: var(--ani-slideT); } } + +@keyframes slideR { + from { + transform: var(--ani-slideR); } } + +@keyframes slideB { + from { + transform: var(--ani-slideB); } } + +@keyframes slideL { + from { + transform: var(--ani-slideL); } } + +@keyframes turn { + from { + transform: var(--ani-turn); } } + +@keyframes turnX { + from { + transform: var(--ani-turnX); } } + +@keyframes turnY { + from { + transform: var(--ani-turnY); } } + +@keyframes turnXY { + from { + transform: var(--ani-turnXY); } } + +@keyframes turnXZ { + from { + transform: var(--ani-turnXZ); } } + +@keyframes turnYZ { + from { + transform: var(--ani-turnYZ); } } + +@keyframes turn3D { + from { + transform: var(--ani-turn3D); } } + +@keyframes bounce { + from { + transform: var(--ani-bounce); } } + +@keyframes grow { + from { + transform: var(--ani-grow); } } + +@keyframes shrink { + from { + transform: var(--ani-shrink); } } + +@keyframes flipX { + from { + transform: var(--ani-flipX); } } + +@keyframes flipY { + from { + transform: var(--ani-flipY); } } + +@keyframes openX { + from { + transform: var(--ani-openX); } } + +@keyframes openY { + from { + transform: var(--ani-openY); } } + +@keyframes flipperX { + from { + transform: var(--ani-flipperX); } } + +@keyframes flipperY { + from { + transform: var(--ani-flipperY); } } + +@keyframes twistT { + from { + transform: var(--ani-twistT); } } + +@keyframes twistR { + from { + transform: var(--ani-twistR); } } + +@keyframes twistB { + from { + transform: var(--ani-twistB); } } + +@keyframes twistL { + from { + transform: var(--ani-twistL); } } + +/********** TAGS **********/ +* { + box-sizing: border-box; } + *:target { + padding-top: var(--ani-target-margins); + margin-top: -var(--ani-target-margins); } + +html { + font-size: var(--ani-html-font-size); + scroll-behavior: smooth; } + +@media (prefers-reduced-motion: reduce) { + html { + scroll-behavior: auto; } } + +body { + margin: var(--ani-body-margin); + padding: var(--ani-body-padding); + max-width: var(--ani-body-max-width); + line-height: var(--ani-body-line-height); + font-size: var(--ani-body-font-size); + font-family: var(--ani-sans-serif); + overflow-wrap: var(--ani-body-overflow); } + +main { + text-align: var(--ani-main-text-align); } + +article { + margin-bottom: var(--ani-article-margin-bottom); } + +h1, +h2, +h3, +h4, +h5, +h6 { + font-family: var(--ani-serif); + text-align: var(--ani-title-text-align); + text-transform: var(--ani-title-text-transform); + font-size: var(--ani-title-font-size); } + +a { + text-decoration: var(--ani-link-text-decoration); + outline: var(--ani-link-outline); } + +ul { + margin: var(--ani-list-margin); + padding: var(--ani-list-padding); + list-style: var(--ani-list-style); } + +table { + margin: var(--ani-table-margin); + border-collapse: var(--ani-table-border-collapse); + text-align: var(--ani-table-text-align); + vertical-align: var(--ani-table-vertical-align); + font-family: var(--ani-monospace); } + +code, +pre { + font-size: 1em; + overflow: var(--ani-code-overflow); + margin: var(--ani-code-margin); + padding: var(--ani-code-padding); + width: var(--ani-code-width); + font-family: var(--ani-monospace); + text-align: var(--ani-code-text-align); } + +figure { + margin: var(--ani-figure-margin); } + +img, +video { + max-width: var(--ani-img-max-width); + height: var(--ani-img-height); + object-fit: var(--ani-img-object-fit); } + +button, +[type="button"], +[type="reset"], +[type="submit"] { + cursor: var(--ani-button-cursor); } + +/********** FLEX **********/ +[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; } + +/********** FLEX ITEM **********/ +[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; } + +/********** GRID **********/ +[class*="grid"] { + display: grid; + max-width: var(--ani-grid-max-width); + margin: var(--ani-grid-margin); } + +/********** GRID TEMPLATE **********/ +[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); } } + +/********** GAP **********/ +[class*="gap-"][class*="-tn1"] { + gap: var(--ani-gap1); } + +[class*="gap-"][class*="-tn2"] { + gap: var(--ani-gap2); } + +[class*="gap-"][class*="-tn3"] { + gap: var(--ani-gap3); } + +[class*="gap-"][class*="-tn4"] { + gap: var(--ani-gap4); } + +@media (min-width: 576px) { + [class*="gap-"][class*="-sm1"] { + gap: var(--ani-gap1); } + [class*="gap-"][class*="-sm2"] { + gap: var(--ani-gap2); } + [class*="gap-"][class*="-sm3"] { + gap: var(--ani-gap3); } + [class*="gap-"][class*="-sm4"] { + gap: var(--ani-gap4); } } + +@media (min-width: 768px) { + [class*="gap-"][class*="-md1"] { + gap: var(--ani-gap1); } + [class*="gap-"][class*="-md2"] { + gap: var(--ani-gap2); } + [class*="gap-"][class*="-md3"] { + gap: var(--ani-gap3); } + [class*="gap-"][class*="-md4"] { + gap: var(--ani-gap4); } } + +@media (min-width: 992px) { + [class*="gap-"][class*="-lg1"] { + gap: var(--ani-gap1); } + [class*="gap-"][class*="-lg2"] { + gap: var(--ani-gap2); } + [class*="gap-"][class*="-lg3"] { + gap: var(--ani-gap3); } + [class*="gap-"][class*="-lg4"] { + gap: var(--ani-gap4); } } + +@media (min-width: 1200px) { + [class*="gap-"][class*="-xl1"] { + gap: var(--ani-gap1); } + [class*="gap-"][class*="-xl2"] { + gap: var(--ani-gap2); } + [class*="gap-"][class*="-xl3"] { + gap: var(--ani-gap3); } + [class*="gap-"][class*="-xl4"] { + gap: var(--ani-gap4); } } + +@media (min-width: 1600px) { + [class*="gap-"][class*="-wd1"] { + gap: var(--ani-gap1); } + [class*="gap-"][class*="-wd2"] { + gap: var(--ani-gap2); } + [class*="gap-"][class*="-wd3"] { + gap: var(--ani-gap3); } + [class*="gap-"][class*="-wd4"] { + gap: var(--ani-gap4); } } + +/********** PLACE CONTENT **********/ +.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; } } + +/********** PLACE ITEMS **********/ +.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; } } + +/********** PLACE-SELF **********/ +.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; } } + +/********** MARGIN **********/ +.mar-auto, +.mar-auto-all > * { + margin: var(--ani-margin-auto); } + +.mar-none, +.mar-none-all > * { + margin: var(--ani-margin-none); } + +.mar-tn, +.mar-tn-all > * { + margin: var(--ani-margin-tn); } + +.mar-sm, +.mar-sm-all > * { + margin: var(--ani-margin-sm); } + +.mar-md, +.mar-md-all > * { + margin: var(--ani-margin-md); } + +.mar-lg, +.mar-lg-all > * { + margin: var(--ani-margin-lg); } + +.mar-xl, +.mar-xl-all > * { + margin: var(--ani-margin-xl); } + +.mar-wd, +.mar-wd-all > * { + margin: var(--ani-margin-wd); } + +/********** BORDER **********/ +.bord { + border-style: solid; } + +/********** BORDER STYLE **********/ +.bord-dash, +.bord-dash-all > *, +.bord-dash-on:hover, +.bord-dash-on:focus, +*:hover > .bord-dash-in, +*:focus > .bord-dash-in, +.bord-dash-one > *:hover, +.bord-dash-one > *:focus, +.bord-dash-many:hover > *, +.bord-dash-many:focus > * { + border-style: dashed; } + +.bord-dot, +.bord-dot-all > *, +.bord-dot-on:hover, +.bord-dot-on:focus, +*:hover > .bord-dot-in, +*:focus > .bord-dot-in, +.bord-dot-one > *:hover, +.bord-dot-one > *:focus, +.bord-dot-many:hover > *, +.bord-dot-many:focus > * { + border-style: dotted; } + +.bord-double, +.bord-double-all > *, +.bord-double-on:hover, +.bord-double-on:focus, +*:hover > .bord-double-in, +*:focus > .bord-double-in, +.bord-double-one > *:hover, +.bord-double-one > *:focus, +.bord-double-many:hover > *, +.bord-double-many:focus > * { + border-style: double; } + +.bord-groove, +.bord-groove-all > *, +.bord-groove-on:hover, +.bord-groove-on:focus, +*:hover > .bord-groove-in, +*:focus > .bord-groove-in, +.bord-groove-one > *:hover, +.bord-groove-one > *:focus, +.bord-groove-many:hover > *, +.bord-groove-many:focus > * { + border-style: groove; } + +.bord-ridge, +.bord-ridge-all > *, +.bord-ridge-on:hover, +.bord-ridge-on:focus, +*:hover > .bord-ridge-in, +*:focus > .bord-ridge-in, +.bord-ridge-one > *:hover, +.bord-ridge-one > *:focus, +.bord-ridge-many:hover > *, +.bord-ridge-many:focus > * { + border-style: ridge; } + +.bord-in, +.bord-in-all > *, +.bord-in-on:hover, +.bord-in-on:focus, +*:hover > .bord-in-in, +*:focus > .bord-in-in, +.bord-in-one > *:hover, +.bord-in-one > *:focus, +.bord-in-many:hover > *, +.bord-in-many:focus > * { + border-style: inset; } + +.bord-out, +.bord-out-all > *, +.bord-out-on:hover, +.bord-out-on:focus, +*:hover > .bord-out-in, +*:focus > .bord-out-in, +.bord-out-one > *:hover, +.bord-out-one > *:focus, +.bord-out-many:hover > *, +.bord-out-many:focus > * { + border-style: outset; } + +/********** BORDER WIDTH **********/ +.bord-sm, +.bord-sm-all > *, +.bord-sm-on:hover, +.bord-sm-on:focus, +*:hover > .bord-sm-in, +*:focus > .bord-sm-in, +.bord-sm-one > *:hover, +.bord-sm-one > *:focus, +.bord-sm-many:hover > *, +.bord-sm-many:focus > * { + border-width: 1px; } + +.bord-md, +.bord-md-all > *, +.bord-md-on:hover, +.bord-md-on:focus, +*:hover > .bord-md-in, +*:focus > .bord-md-in, +.bord-md-one > *:hover, +.bord-md-one > *:focus, +.bord-md-many:hover > *, +.bord-md-many:focus > * { + border-width: 2px; } + +.bord-lg, +.bord-lg-all > *, +.bord-lg-on:hover, +.bord-lg-on:focus, +*:hover > .bord-lg-in, +*:focus > .bord-lg-in, +.bord-lg-one > *:hover, +.bord-lg-one > *:focus, +.bord-lg-many:hover > *, +.bord-lg-many:focus > * { + border-width: 5px; } + +/********** BORDER COLOR **********/ +.bord-red, +.bord-red-all > *, +.bord-red-on:hover, +.bord-red-on:focus, +*:hover > .bord-red-in, +*:focus > .bord-red-in, +.bord-red-one > *:hover, +.bord-red-one > *:focus, +.bord-red-many:hover > *, +.bord-red-many:focus > * { + border-color: var(--ani-red); } + +.bord-orange, +.bord-orange-all > *, +.bord-orange-on:hover, +.bord-orange-on:focus, +*:hover > .bord-orange-in, +*:focus > .bord-orange-in, +.bord-orange-one > *:hover, +.bord-orange-one > *:focus, +.bord-orange-many:hover > *, +.bord-orange-many:focus > * { + border-color: var(--ani-orange); } + +.bord-yellow, +.bord-yellow-all > *, +.bord-yellow-on:hover, +.bord-yellow-on:focus, +*:hover > .bord-yellow-in, +*:focus > .bord-yellow-in, +.bord-yellow-one > *:hover, +.bord-yellow-one > *:focus, +.bord-yellow-many:hover > *, +.bord-yellow-many:focus > * { + border-color: var(--ani-yellow); } + +.bord-green, +.bord-green-all > *, +.bord-green-on:hover, +.bord-green-on:focus, +*:hover > .bord-green-in, +*:focus > .bord-green-in, +.bord-green-one > *:hover, +.bord-green-one > *:focus, +.bord-green-many:hover > *, +.bord-green-many:focus > * { + border-color: var(--ani-green); } + +.bord-sky, +.bord-sky-all > *, +.bord-sky-on:hover, +.bord-sky-on:focus, +*:hover > .bord-sky-in, +*:focus > .bord-sky-in, +.bord-sky-one > *:hover, +.bord-sky-one > *:focus, +.bord-sky-many:hover > *, +.bord-sky-many:focus > * { + border-color: var(--ani-sky); } + +.bord-blue, +.bord-blue-all > *, +.bord-blue-on:hover, +.bord-blue-on:focus, +*:hover > .bord-blue-in, +*:focus > .bord-blue-in, +.bord-blue-one > *:hover, +.bord-blue-one > *:focus, +.bord-blue-many:hover > *, +.bord-blue-many:focus > * { + border-color: var(--ani-blue); } + +.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(--ani-violet); } + +.bord-pink, +.bord-pink-all > *, +.bord-pink-on:hover, +.bord-pink-on:focus, +*:hover > .bord-pink-in, +*:focus > .bord-pink-in, +.bord-pink-one > *:hover, +.bord-pink-one > *:focus, +.bord-pink-many:hover > *, +.bord-pink-many:focus > * { + border-color: var(--ani-pink); } + +/********** BORDER RADIUS **********/ +.bord-curve, +.bord-curve-all > *, +.bord-curve-on:hover, +.bord-curve-on:focus, +*:hover > .bord-curve-in, +*:focus > .bord-curve-in, +.bord-curve-one > *:hover, +.bord-curve-one > *:focus, +.bord-curve-many:hover > *, +.bord-curve-many:focus > * { + border-radius: 10px; } + +.bord-round, +.bord-round-all > *, +.bord-round-on:hover, +.bord-round-on:focus, +*:hover > .bord-round-in, +*:focus > .bord-round-in, +.bord-round-one > *:hover, +.bord-round-one > *:focus, +.bord-round-many:hover > *, +.bord-round-many:focus > * { + border-radius: 20px; } + +.bord-circle, +.bord-circle-all > *, +.bord-circle-on:hover, +.bord-circle-on:focus, +*:hover > .bord-circle-in, +*:focus > .bord-circle-in, +.bord-circle-one > *:hover, +.bord-circle-one > *:focus, +.bord-circle-many:hover > *, +.bord-circle-many:focus > * { + border-radius: 50%; } + +/********** PADDING **********/ +.pad-auto, +.pad-auto-all > * { + padding: var(--ani-padding-auto); } + +.pad-none, +.pad-none-all > * { + padding: var(--ani-padding-none); } + +.pad-tn, +.pad-tn-all > * { + padding: var(--ani-padding-tn); } + +.pad-sm, +.pad-sm-all > * { + padding: var(--ani-padding-sm); } + +.pad-md, +.pad-md-all > * { + padding: var(--ani-padding-md); } + +.pad-lg, +.pad-lg-all > * { + padding: var(--ani-padding-lg); } + +.pad-xl, +.pad-xl-all > * { + padding: var(--ani-padding-xl); } + +.pad-wd, +.pad-wd-all > * { + padding: var(--ani-padding-wd); } + +/********** CONTAINER **********/ +[class*="container"] { + margin: auto; + max-width: var(--ani-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%; } } + +/********** HEIGHT **********/ +.height-sm, +.height-sm-all > * { + height: var(--ani-height-sm); } + +.height-md, +.height-md-all > * { + height: var(--ani-height-md); } + +.height-lg, +.height-lg-all > * { + height: var(--ani-height-lg); } + +/********** MAX HEIGHT **********/ +.max-h-sm, +.max-h-sm-all > * { + max-height: var(--ani-max-height-sm); } + +.max-h-md, +.max-h-md-all > * { + max-height: var(--ani-max-height-md); } + +.max-h-lg, +.max-h-lg-all > * { + max-height: var(--ani-max-height-lg); } + +/********** MIN HEIGHT **********/ +.min-h-sm, +.min-h-sm-all > * { + min-height: var(--ani-min-height-sm); } + +.min-h-md, +.min-h-md-all > * { + min-height: var(--ani-min-height-md); } + +.min-h-lg, +.min-h-lg-all > * { + min-height: var(--ani-min-height-lg); } + +/********** WIDTH **********/ +.width-sm, +.width-sm-all > * { + width: var(--ani-width-sm); } + +.width-md, +.width-md-all > * { + width: var(--ani-width-md); } + +.width-lg, +.width-lg-all > * { + width: var(--ani-width-lg); } + +/********** MAX WIDTH **********/ +.max-w-sm, +.max-w-sm-all > * { + max-width: var(--ani-max-width-sm); } + +.max-w-md, +.max-w-md-all > * { + max-width: var(--ani-max-width-md); } + +.max-w-lg, +.max-w-lg-all > * { + max-width: var(--ani-max-width-lg); } + +/********** MIN WIDTH **********/ +.min-w-sm, +.min-w-sm-all > * { + min-width: var(--ani-min-width-sm); } + +.min-w-md, +.min-w-md-all > * { + min-width: var(--ani-min-width-md); } + +.min-w-lg, +.min-w-lg-all > * { + min-width: var(--ani-min-width-lg); } + +/********** FONT FAMILY **********/ +.sans-serif, +.sans-serif-all > *, +.sans-serif-on:hover, +.sans-serif-on:focus, +*:hover > .sans-serif-in, +*:focus > .sans-serif-in, +.sans-serif-one > *:hover, +.sans-serif-one > *:focus, +.sans-serif-many:hover > *, +.sans-serif-many:focus > * { + font-family: var(--ani-sans-serif); } + +.serif, +.serif-all > *, +.serif-on:hover, +.serif-on:focus, +*:hover > .serif-in, +*:focus > .serif-in, +.serif-one > *:hover, +.serif-one > *:focus, +.serif-many:hover > *, +.serif-many:focus > * { + font-family: var(--ani-serif); } + +.monospace, +.monospace-all > *, +.monospace-on:hover, +.monospace-on:focus, +*:hover > .monospace-in, +*:focus > .monospace-in, +.monospace-one > *:hover, +.monospace-one > *:focus, +.monospace-many:hover > *, +.monospace-many:focus > * { + font-family: var(--ani-monospace); } + +.cursive, +.cursive-all > *, +.cursive-on:hover, +.cursive-on:focus, +*:hover > .cursive-in, +*:focus > .cursive-in, +.cursive-one > *:hover, +.cursive-one > *:focus, +.cursive-many:hover > *, +.cursive-many:focus > * { + font-family: var(--ani-cursive); } + +.fantasy, +.fantasy-all > *, +.fantasy-on:hover, +.fantasy-on:focus, +*:hover > .fantasy-in, +*:focus > .fantasy-in, +.fantasy-one > *:hover, +.fantasy-one > *:focus, +.fantasy-many:hover > *, +.fantasy-many:focus > * { + font-family: var(--ani-fantasy); } + +/********** FONT **********/ +.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; } + +.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 **********/ +.center { + text-align: center; } + +.justify { + text-align: justify; } + +.left { + text-align: left; } + +.right { + text-align: right; } + +/********** TEXT TRANSFORM **********/ +.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; } + +.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; } + +.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 **********/ +.deco { + text-decoration-line: underline; } + +.deco-over, +.deco-over-all > *, +.deco-over-on:hover, +.deco-over-on:focus, +*:hover > .deco-over-in, +*:focus > .deco-over-in, +.deco-over-one > *:hover, +.deco-over-one > *:focus, +.deco-over-many:hover > *, +.deco-over-many:focus > * { + text-decoration-line: overline; } + +.deco-through, +.deco-through-all > *, +.deco-through-on:hover, +.deco-through-on:focus, +*:hover > .deco-through-in, +*:focus > .deco-through-in, +.deco-through-one > *:hover, +.deco-through-one > *:focus, +.deco-through-many:hover > *, +.deco-through-many:focus > * { + text-decoration-line: line-through; } + +/********** TEXT DECORATION STYLE **********/ +.deco-dash, +.deco-dash-all > *, +.deco-dash-on:hover, +.deco-dash-on:focus, +*:hover > .deco-dash-in, +*:focus > .deco-dash-in, +.deco-dash-one > *:hover, +.deco-dash-one > *:focus, +.deco-dash-many:hover > *, +.deco-dash-many:focus > * { + text-decoration-style: dashed; } + +.deco-dot, +.deco-dot-all > *, +.deco-dot-on:hover, +.deco-dot-on:focus, +*:hover > .deco-dot-in, +*:focus > .deco-dot-in, +.deco-dot-one > *:hover, +.deco-dot-one > *:focus, +.deco-dot-many:hover > *, +.deco-dot-many:focus > * { + text-decoration-style: dotted; } + +.deco-double, +.deco-double-all > *, +.deco-double-on:hover, +.deco-double-on:focus, +*:hover > .deco-double-in, +*:focus > .deco-double-in, +.deco-double-one > *:hover, +.deco-double-one > *:focus, +.deco-double-many:hover > *, +.deco-double-many:focus > * { + text-decoration-style: double; } + +.deco-wavy, +.deco-wavy-all > *, +.deco-wavy-on:hover, +.deco-wavy-on:focus, +*:hover > .deco-wavy-in, +*:focus > .deco-wavy-in, +.deco-wavy-one > *:hover, +.deco-wavy-one > *:focus, +.deco-wavy-many:hover > *, +.deco-wavy-many:focus > * { + text-decoration-style: wavy; } + +/********** TEXT DECORATION COLOR **********/ +.deco-red, +.deco-red-all > *, +.deco-red-on:hover, +.deco-red-on:focus, +*:hover > .deco-red-in, +*:focus > .deco-red-in, +.deco-red-one > *:hover, +.deco-red-one > *:focus, +.deco-red-many:hover > *, +.deco-red-many:focus > * { + text-decoration-color: var(--ani-red); } + +.deco-orange, +.deco-orange-all > *, +.deco-orange-on:hover, +.deco-orange-on:focus, +*:hover > .deco-orange-in, +*:focus > .deco-orange-in, +.deco-orange-one > *:hover, +.deco-orange-one > *:focus, +.deco-orange-many:hover > *, +.deco-orange-many:focus > * { + text-decoration-color: var(--ani-orange); } + +.deco-yellow, +.deco-yellow-all > *, +.deco-yellow-on:hover, +.deco-yellow-on:focus, +*:hover > .deco-yellow-in, +*:focus > .deco-yellow-in, +.deco-yellow-one > *:hover, +.deco-yellow-one > *:focus, +.deco-yellow-many:hover > *, +.deco-yellow-many:focus > * { + text-decoration-color: var(--ani-yellow); } + +.deco-green, +.deco-green-all > *, +.deco-green-on:hover, +.deco-green-on:focus, +*:hover > .deco-green-in, +*:focus > .deco-green-in, +.deco-green-one > *:hover, +.deco-green-one > *:focus, +.deco-green-many:hover > *, +.deco-green-many:focus > * { + text-decoration-color: var(--ani-green); } + +.deco-sky, +.deco-sky-all > *, +.deco-sky-on:hover, +.deco-sky-on:focus, +*:hover > .deco-sky-in, +*:focus > .deco-sky-in, +.deco-sky-one > *:hover, +.deco-sky-one > *:focus, +.deco-sky-many:hover > *, +.deco-sky-many:focus > * { + text-decoration-color: var(--ani-sky); } + +.deco-blue, +.deco-blue-all > *, +.deco-blue-on:hover, +.deco-blue-on:focus, +*:hover > .deco-blue-in, +*:focus > .deco-blue-in, +.deco-blue-one > *:hover, +.deco-blue-one > *:focus, +.deco-blue-many:hover > *, +.deco-blue-many:focus > * { + text-decoration-color: var(--ani-blue); } + +.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 > * { + text-decoration-color: var(--ani-violet); } + +.deco-pink, +.deco-pink-all > *, +.deco-pink-on:hover, +.deco-pink-on:focus, +*:hover > .deco-pink-in, +*:focus > .deco-pink-in, +.deco-pink-one > *:hover, +.deco-pink-one > *:focus, +.deco-pink-many:hover > *, +.deco-pink-many:focus > * { + text-decoration-color: var(--ani-pink); } + +/********** COLOR **********/ +.red, +.red-all > *, +.red-on:hover, +.red-on:focus, +*:hover > .red-in, +*:focus > .red-in, +.red-one > *:hover, +.red-one > *:focus, +.red-many:hover > *, +.red-many:focus > * { + color: var(--ani-red); } + +.orange, +.orange-all > *, +.orange-on:hover, +.orange-on:focus, +*:hover > .orange-in, +*:focus > .orange-in, +.orange-one > *:hover, +.orange-one > *:focus, +.orange-many:hover > *, +.orange-many:focus > * { + color: var(--ani-orange); } + +.yellow, +.yellow-all > *, +.yellow-on:hover, +.yellow-on:focus, +*:hover > .yellow-in, +*:focus > .yellow-in, +.yellow-one > *:hover, +.yellow-one > *:focus, +.yellow-many:hover > *, +.yellow-many:focus > * { + color: var(--ani-yellow); } + +.green, +.green-all > *, +.green-on:hover, +.green-on:focus, +*:hover > .green-in, +*:focus > .green-in, +.green-one > *:hover, +.green-one > *:focus, +.green-many:hover > *, +.green-many:focus > * { + color: var(--ani-green); } + +.sky, +.sky-all > *, +.sky-on:hover, +.sky-on:focus, +*:hover > .sky-in, +*:focus > .sky-in, +.sky-one > *:hover, +.sky-one > *:focus, +.sky-many:hover > *, +.sky-many:focus > * { + color: var(--ani-sky); } + +.blue, +.blue-all > *, +.blue-on:hover, +.blue-on:focus, +*:hover > .blue-in, +*:focus > .blue-in, +.blue-one > *:hover, +.blue-one > *:focus, +.blue-many:hover > *, +.blue-many:focus > * { + color: var(--ani-blue); } + +.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(--ani-violet); } + +.pink, +.pink-all > *, +.pink-on:hover, +.pink-on:focus, +*:hover > .pink-in, +*:focus > .pink-in, +.pink-one > *:hover, +.pink-one > *:focus, +.pink-many:hover > *, +.pink-many:focus > * { + color: var(--ani-pink); } + +.black, +.black-all > *, +.black-on:hover, +.black-on:focus, +*:hover > .black-in, +*:focus > .black-in, +.black-one > *:hover, +.black-one > *:focus, +.black-many:hover > *, +.black-many:focus > * { + color: var(--ani-black); } + +.gray, +.gray-all > *, +.gray-on:hover, +.gray-on:focus, +*:hover > .gray-in, +*:focus > .gray-in, +.gray-one > *:hover, +.gray-one > *:focus, +.gray-many:hover > *, +.gray-many:focus > * { + color: var(--ani-gray); } + +.silver, +.silver-all > *, +.silver-on:hover, +.silver-on:focus, +*:hover > .silver-in, +*:focus > .silver-in, +.silver-one > *:hover, +.silver-one > *:focus, +.silver-many:hover > *, +.silver-many:focus > * { + color: var(--ani-silver); } + +.white, +.white-all > *, +.white-on:hover, +.white-on:focus, +*:hover > .white-in, +*:focus > .white-in, +.white-one > *:hover, +.white-one > *:focus, +.white-many:hover > *, +.white-many:focus > * { + color: var(--ani-white); } + +/********** BACKGROUND COLOR **********/ +.bg-red, +.bg-red-all > *, +.bg-red-on:hover, +.bg-red-on:focus, +*:hover > .bg-red-in, +*:focus > .bg-red-in, +.bg-red-one > *:hover, +.bg-red-one > *:focus, +.bg-red-many:hover > *, +.bg-red-many:focus > * { + background-color: var(--ani-red); } + +.bg-red-dark, +.bg-red-dark-all > *, +.bg-red-dark-on:hover, +.bg-red-dark-on:focus, +*:hover > .bg-red-dark-in, +*:focus > .bg-red-dark-in, +.bg-red-dark-one > *:hover, +.bg-red-dark-one > *:focus, +.bg-red-dark-many:hover > *, +.bg-red-dark-many:focus > * { + background-color: var(--ani-red-dark); } + +.bg-red-light, +.bg-red-light-all > *, +.bg-red-light-on:hover, +.bg-red-light-on:focus, +*:hover > .bg-red-light-in, +*:focus > .bg-red-light-in, +.bg-red-light-one > *:hover, +.bg-red-light-one > *:focus, +.bg-red-light-many:hover > *, +.bg-red-light-many:focus > * { + background-color: var(--ani-red-light); } + +.bg-orange, +.bg-orange-all > *, +.bg-orange-on:hover, +.bg-orange-on:focus, +*:hover > .bg-orange-in, +*:focus > .bg-orange-in, +.bg-orange-one > *:hover, +.bg-orange-one > *:focus, +.bg-orange-many:hover > *, +.bg-orange-many:focus > * { + background-color: var(--ani-orange); } + +.bg-orange-dark, +.bg-orange-dark-all > *, +.bg-orange-dark-on:hover, +.bg-orange-dark-on:focus, +*:hover > .bg-orange-dark-in, +*:focus > .bg-orange-dark-in, +.bg-orange-dark-one > *:hover, +.bg-orange-dark-one > *:focus, +.bg-orange-dark-many:hover > *, +.bg-orange-dark-many:focus > * { + background-color: var(--ani-orange-dark); } + +.bg-orange-light, +.bg-orange-light-all > *, +.bg-orange-light-on:hover, +.bg-orange-light-on:focus, +*:hover > .bg-orange-light-in, +*:focus > .bg-orange-light-in, +.bg-orange-light-one > *:hover, +.bg-orange-light-one > *:focus, +.bg-orange-light-many:hover > *, +.bg-orange-light-many:focus > * { + background-color: var(--ani-orange-light); } + +.bg-yellow, +.bg-yellow-all > *, +.bg-yellow-on:hover, +.bg-yellow-on:focus, +*:hover > .bg-yellow-in, +*:focus > .bg-yellow-in, +.bg-yellow-one > *:hover, +.bg-yellow-one > *:focus, +.bg-yellow-many:hover > *, +.bg-yellow-many:focus > * { + background-color: var(--ani-yellow); } + +.bg-yellow-dark, +.bg-yellow-dark-all > *, +.bg-yellow-dark-on:hover, +.bg-yellow-dark-on:focus, +*:hover > .bg-yellow-dark-in, +*:focus > .bg-yellow-dark-in, +.bg-yellow-dark-one > *:hover, +.bg-yellow-dark-one > *:focus, +.bg-yellow-dark-many:hover > *, +.bg-yellow-dark-many:focus > * { + background-color: var(--ani-yellow-dark); } + +.bg-yellow-light, +.bg-yellow-light-all > *, +.bg-yellow-light-on:hover, +.bg-yellow-light-on:focus, +*:hover > .bg-yellow-light-in, +*:focus > .bg-yellow-light-in, +.bg-yellow-light-one > *:hover, +.bg-yellow-light-one > *:focus, +.bg-yellow-light-many:hover > *, +.bg-yellow-light-many:focus > * { + background-color: var(--ani-yellow-light); } + +.bg-green, +.bg-green-all > *, +.bg-green-on:hover, +.bg-green-on:focus, +*:hover > .bg-green-in, +*:focus > .bg-green-in, +.bg-green-one > *:hover, +.bg-green-one > *:focus, +.bg-green-many:hover > *, +.bg-green-many:focus > * { + background-color: var(--ani-green); } + +.bg-green-dark, +.bg-green-dark-all > *, +.bg-green-dark-on:hover, +.bg-green-dark-on:focus, +*:hover > .bg-green-dark-in, +*:focus > .bg-green-dark-in, +.bg-green-dark-one > *:hover, +.bg-green-dark-one > *:focus, +.bg-green-dark-many:hover > *, +.bg-green-dark-many:focus > * { + background-color: var(--ani-green-dark); } + +.bg-green-light, +.bg-green-light-all > *, +.bg-green-light-on:hover, +.bg-green-light-on:focus, +*:hover > .bg-green-light-in, +*:focus > .bg-green-light-in, +.bg-green-light-one > *:hover, +.bg-green-light-one > *:focus, +.bg-green-light-many:hover > *, +.bg-green-light-many:focus > * { + background-color: var(--ani-green-light); } + +.bg-sky, +.bg-sky-all > *, +.bg-sky-on:hover, +.bg-sky-on:focus, +*:hover > .bg-sky-in, +*:focus > .bg-sky-in, +.bg-sky-one > *:hover, +.bg-sky-one > *:focus, +.bg-sky-many:hover > *, +.bg-sky-many:focus > * { + background-color: var(--ani-sky); } + +.bg-sky-dark, +.bg-sky-dark-all > *, +.bg-sky-dark-on:hover, +.bg-sky-dark-on:focus, +*:hover > .bg-sky-dark-in, +*:focus > .bg-sky-dark-in, +.bg-sky-dark-one > *:hover, +.bg-sky-dark-one > *:focus, +.bg-sky-dark-many:hover > *, +.bg-sky-dark-many:focus > * { + background-color: var(--ani-sky-dark); } + +.bg-sky-light, +.bg-sky-light-all > *, +.bg-sky-light-on:hover, +.bg-sky-light-on:focus, +*:hover > .bg-sky-light-in, +*:focus > .bg-sky-light-in, +.bg-sky-light-one > *:hover, +.bg-sky-light-one > *:focus, +.bg-sky-light-many:hover > *, +.bg-sky-light-many:focus > * { + background-color: var(--ani-sky-light); } + +.bg-blue, +.bg-blue-all > *, +.bg-blue-on:hover, +.bg-blue-on:focus, +*:hover > .bg-blue-in, +*:focus > .bg-blue-in, +.bg-blue-one > *:hover, +.bg-blue-one > *:focus, +.bg-blue-many:hover > *, +.bg-blue-many:focus > * { + background-color: var(--ani-blue); } + +.bg-blue-dark, +.bg-blue-dark-all > *, +.bg-blue-dark-on:hover, +.bg-blue-dark-on:focus, +*:hover > .bg-blue-dark-in, +*:focus > .bg-blue-dark-in, +.bg-blue-dark-one > *:hover, +.bg-blue-dark-one > *:focus, +.bg-blue-dark-many:hover > *, +.bg-blue-dark-many:focus > * { + background-color: var(--ani-blue-dark); } + +.bg-blue-light, +.bg-blue-light-all > *, +.bg-blue-light-on:hover, +.bg-blue-light-on:focus, +*:hover > .bg-blue-light-in, +*:focus > .bg-blue-light-in, +.bg-blue-light-one > *:hover, +.bg-blue-light-one > *:focus, +.bg-blue-light-many:hover > *, +.bg-blue-light-many:focus > * { + background-color: var(--ani-blue-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(--ani-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(--ani-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(--ani-violet-light); } + +.bg-pink, +.bg-pink-all > *, +.bg-pink-on:hover, +.bg-pink-on:focus, +*:hover > .bg-pink-in, +*:focus > .bg-pink-in, +.bg-pink-one > *:hover, +.bg-pink-one > *:focus, +.bg-pink-many:hover > *, +.bg-pink-many:focus > * { + background-color: var(--ani-pink); } + +.bg-pink-dark, +.bg-pink-dark-all > *, +.bg-pink-dark-on:hover, +.bg-pink-dark-on:focus, +*:hover > .bg-pink-dark-in, +*:focus > .bg-pink-dark-in, +.bg-pink-dark-one > *:hover, +.bg-pink-dark-one > *:focus, +.bg-pink-dark-many:hover > *, +.bg-pink-dark-many:focus > * { + background-color: var(--ani-pink-dark); } + +.bg-pink-light, +.bg-pink-light-all > *, +.bg-pink-light-on:hover, +.bg-pink-light-on:focus, +*:hover > .bg-pink-light-in, +*:focus > .bg-pink-light-in, +.bg-pink-light-one > *:hover, +.bg-pink-light-one > *:focus, +.bg-pink-light-many:hover > *, +.bg-pink-light-many:focus > * { + background-color: var(--ani-pink-light); } + +.bg-black, +.bg-black-all > *, +.bg-black-on:hover, +.bg-black-on:focus, +*:hover > .bg-black-in, +*:focus > .bg-black-in, +.bg-black-one > *:hover, +.bg-black-one > *:focus, +.bg-black-many:hover > *, +.bg-black-many:focus > * { + background-color: var(--ani-black); } + +.bg-black-dark, +.bg-black-dark-all > *, +.bg-black-dark-on:hover, +.bg-black-dark-on:focus, +*:hover > .bg-black-dark-in, +*:focus > .bg-black-dark-in, +.bg-black-dark-one > *:hover, +.bg-black-dark-one > *:focus, +.bg-black-dark-many:hover > *, +.bg-black-dark-many:focus > * { + background-color: var(--ani-black-dark); } + +.bg-black-light, +.bg-black-light-all > *, +.bg-black-light-on:hover, +.bg-black-light-on:focus, +*:hover > .bg-black-light-in, +*:focus > .bg-black-light-in, +.bg-black-light-one > *:hover, +.bg-black-light-one > *:focus, +.bg-black-light-many:hover > *, +.bg-black-light-many:focus > * { + background-color: var(--ani-black-light); } + +.bg-gray, +.bg-gray-all > *, +.bg-gray-on:hover, +.bg-gray-on:focus, +*:hover > .bg-gray-in, +*:focus > .bg-gray-in, +.bg-gray-one > *:hover, +.bg-gray-one > *:focus, +.bg-gray-many:hover > *, +.bg-gray-many:focus > * { + background-color: var(--ani-gray); } + +.bg-gray-dark, +.bg-gray-dark-all > *, +.bg-gray-dark-on:hover, +.bg-gray-dark-on:focus, +*:hover > .bg-gray-dark-in, +*:focus > .bg-gray-dark-in, +.bg-gray-dark-one > *:hover, +.bg-gray-dark-one > *:focus, +.bg-gray-dark-many:hover > *, +.bg-gray-dark-many:focus > * { + background-color: var(--ani-gray-dark); } + +.bg-gray-light, +.bg-gray-light-all > *, +.bg-gray-light-on:hover, +.bg-gray-light-on:focus, +*:hover > .bg-gray-light-in, +*:focus > .bg-gray-light-in, +.bg-gray-light-one > *:hover, +.bg-gray-light-one > *:focus, +.bg-gray-light-many:hover > *, +.bg-gray-light-many:focus > * { + background-color: var(--ani-gray-light); } + +.bg-silver, +.bg-silver-all > *, +.bg-silver-on:hover, +.bg-silver-on:focus, +*:hover > .bg-silver-in, +*:focus > .bg-silver-in, +.bg-silver-one > *:hover, +.bg-silver-one > *:focus, +.bg-silver-many:hover > *, +.bg-silver-many:focus > * { + background-color: var(--ani-silver); } + +.bg-silver-dark, +.bg-silver-dark-all > *, +.bg-silver-dark-on:hover, +.bg-silver-dark-on:focus, +*:hover > .bg-silver-dark-in, +*:focus > .bg-silver-dark-in, +.bg-silver-dark-one > *:hover, +.bg-silver-dark-one > *:focus, +.bg-silver-dark-many:hover > *, +.bg-silver-dark-many:focus > * { + background-color: var(--ani-silver-dark); } + +.bg-silver-light, +.bg-silver-light-all > *, +.bg-silver-light-on:hover, +.bg-silver-light-on:focus, +*:hover > .bg-silver-light-in, +*:focus > .bg-silver-light-in, +.bg-silver-light-one > *:hover, +.bg-silver-light-one > *:focus, +.bg-silver-light-many:hover > *, +.bg-silver-light-many:focus > * { + background-color: var(--ani-silver-light); } + +.bg-white, +.bg-white-all > *, +.bg-white-on:hover, +.bg-white-on:focus, +*:hover > .bg-white-in, +*:focus > .bg-white-in, +.bg-white-one > *:hover, +.bg-white-one > *:focus, +.bg-white-many:hover > *, +.bg-white-many:focus > * { + background-color: var(--ani-white); } + +.bg-white-dark, +.bg-white-dark-all > *, +.bg-white-dark-on:hover, +.bg-white-dark-on:focus, +*:hover > .bg-white-dark-in, +*:focus > .bg-white-dark-in, +.bg-white-dark-one > *:hover, +.bg-white-dark-one > *:focus, +.bg-white-dark-many:hover > *, +.bg-white-dark-many:focus > * { + background-color: var(--ani-white-dark); } + +.bg-white-light, +.bg-white-light-all > *, +.bg-white-light-on:hover, +.bg-white-light-on:focus, +*:hover > .bg-white-light-in, +*:focus > .bg-white-light-in, +.bg-white-light-one > *:hover, +.bg-white-light-one > *:focus, +.bg-white-light-many:hover > *, +.bg-white-light-many:focus > * { + background-color: var(--ani-white-light); } + +/********** ANIMATION **********/ +[class*="anima-"] { + animation-duration: var(--ani-animation-duration); } + +/********** ANIMATION NAME **********/ +.anima-slideT, +.anima-slideT-all > *, +.anima-slideT-on:hover, +.anima-slideT-on:focus, +*:hover > .anima-slideT-in, +*:focus > .anima-slideT-in, +.anima-slideT-one > *:hover, +.anima-slideT-one > *:focus, +.anima-slideT-many:hover > *, +.anima-slideT-many:focus > * { + animation-name: slideT; } + +.anima-slideR, +.anima-slideR-all > *, +.anima-slideR-on:hover, +.anima-slideR-on:focus, +*:hover > .anima-slideR-in, +*:focus > .anima-slideR-in, +.anima-slideR-one > *:hover, +.anima-slideR-one > *:focus, +.anima-slideR-many:hover > *, +.anima-slideR-many:focus > * { + animation-name: slideR; } + +.anima-slideB, +.anima-slideB-all > *, +.anima-slideB-on:hover, +.anima-slideB-on:focus, +*:hover > .anima-slideB-in, +*:focus > .anima-slideB-in, +.anima-slideB-one > *:hover, +.anima-slideB-one > *:focus, +.anima-slideB-many:hover > *, +.anima-slideB-many:focus > * { + animation-name: slideB; } + +.anima-slideL, +.anima-slideL-all > *, +.anima-slideL-on:hover, +.anima-slideL-on:focus, +*:hover > .anima-slideL-in, +*:focus > .anima-slideL-in, +.anima-slideL-one > *:hover, +.anima-slideL-one > *:focus, +.anima-slideL-many:hover > *, +.anima-slideL-many:focus > * { + animation-name: slideL; } + +.anima-turn, +.anima-turn-all > *, +.anima-turn-on:hover, +.anima-turn-on:focus, +*:hover > .anima-turn-in, +*:focus > .anima-turn-in, +.anima-turn-one > *:hover, +.anima-turn-one > *:focus, +.anima-turn-many:hover > *, +.anima-turn-many:focus > * { + animation-name: turn; } + +.anima-turnX, +.anima-turnX-all > *, +.anima-turnX-on:hover, +.anima-turnX-on:focus, +*:hover > .anima-turnX-in, +*:focus > .anima-turnX-in, +.anima-turnX-one > *:hover, +.anima-turnX-one > *:focus, +.anima-turnX-many:hover > *, +.anima-turnX-many:focus > * { + animation-name: turnX; } + +.anima-turnY, +.anima-turnY-all > *, +.anima-turnY-on:hover, +.anima-turnY-on:focus, +*:hover > .anima-turnY-in, +*:focus > .anima-turnY-in, +.anima-turnY-one > *:hover, +.anima-turnY-one > *:focus, +.anima-turnY-many:hover > *, +.anima-turnY-many:focus > * { + animation-name: turnY; } + +.anima-turnXY, +.anima-turnXY-all > *, +.anima-turnXY-on:hover, +.anima-turnXY-on:focus, +*:hover > .anima-turnXY-in, +*:focus > .anima-turnXY-in, +.anima-turnXY-one > *:hover, +.anima-turnXY-one > *:focus, +.anima-turnXY-many:hover > *, +.anima-turnXY-many:focus > * { + animation-name: turnXY; } + +.anima-turnXZ, +.anima-turnXZ-all > *, +.anima-turnXZ-on:hover, +.anima-turnXZ-on:focus, +*:hover > .anima-turnXZ-in, +*:focus > .anima-turnXZ-in, +.anima-turnXZ-one > *:hover, +.anima-turnXZ-one > *:focus, +.anima-turnXZ-many:hover > *, +.anima-turnXZ-many:focus > * { + animation-name: turnXZ; } + +.anima-turnYZ, +.anima-turnYZ-all > *, +.anima-turnYZ-on:hover, +.anima-turnYZ-on:focus, +*:hover > .anima-turnYZ-in, +*:focus > .anima-turnYZ-in, +.anima-turnYZ-one > *:hover, +.anima-turnYZ-one > *:focus, +.anima-turnYZ-many:hover > *, +.anima-turnYZ-many:focus > * { + animation-name: turnYZ; } + +.anima-turn3D, +.anima-turn3D-all > *, +.anima-turn3D-on:hover, +.anima-turn3D-on:focus, +*:hover > .anima-turn3D-in, +*:focus > .anima-turn3D-in, +.anima-turn3D-one > *:hover, +.anima-turn3D-one > *:focus, +.anima-turn3D-many:hover > *, +.anima-turn3D-many:focus > * { + animation-name: turn3D; } + +.anima-bounce, +.anima-bounce-all > *, +.anima-bounce-on:hover, +.anima-bounce-on:focus, +*:hover > .anima-bounce-in, +*:focus > .anima-bounce-in, +.anima-bounce-one > *:hover, +.anima-bounce-one > *:focus, +.anima-bounce-many:hover > *, +.anima-bounce-many:focus > * { + animation-name: bounce; } + +.anima-grow, +.anima-grow-all > *, +.anima-grow-on:hover, +.anima-grow-on:focus, +*:hover > .anima-grow-in, +*:focus > .anima-grow-in, +.anima-grow-one > *:hover, +.anima-grow-one > *:focus, +.anima-grow-many:hover > *, +.anima-grow-many:focus > * { + animation-name: grow; } + +.anima-shrink, +.anima-shrink-all > *, +.anima-shrink-on:hover, +.anima-shrink-on:focus, +*:hover > .anima-shrink-in, +*:focus > .anima-shrink-in, +.anima-shrink-one > *:hover, +.anima-shrink-one > *:focus, +.anima-shrink-many:hover > *, +.anima-shrink-many:focus > * { + animation-name: shrink; } + +.anima-flipX, +.anima-flipX-all > *, +.anima-flipX-on:hover, +.anima-flipX-on:focus, +*:hover > .anima-flipX-in, +*:focus > .anima-flipX-in, +.anima-flipX-one > *:hover, +.anima-flipX-one > *:focus, +.anima-flipX-many:hover > *, +.anima-flipX-many:focus > * { + animation-name: flipX; } + +.anima-flipY, +.anima-flipY-all > *, +.anima-flipY-on:hover, +.anima-flipY-on:focus, +*:hover > .anima-flipY-in, +*:focus > .anima-flipY-in, +.anima-flipY-one > *:hover, +.anima-flipY-one > *:focus, +.anima-flipY-many:hover > *, +.anima-flipY-many:focus > * { + animation-name: flipY; } + +.anima-openX, +.anima-openX-all > *, +.anima-openX-on:hover, +.anima-openX-on:focus, +*:hover > .anima-openX-in, +*:focus > .anima-openX-in, +.anima-openX-one > *:hover, +.anima-openX-one > *:focus, +.anima-openX-many:hover > *, +.anima-openX-many:focus > * { + animation-name: openX; } + +.anima-openY, +.anima-openY-all > *, +.anima-openY-on:hover, +.anima-openY-on:focus, +*:hover > .anima-openY-in, +*:focus > .anima-openY-in, +.anima-openY-one > *:hover, +.anima-openY-one > *:focus, +.anima-openY-many:hover > *, +.anima-openY-many:focus > * { + animation-name: openY; } + +.anima-flipperX, +.anima-flipperX-all > *, +.anima-flipperX-on:hover, +.anima-flipperX-on:focus, +*:hover > .anima-flipperX-in, +*:focus > .anima-flipperX-in, +.anima-flipperX-one > *:hover, +.anima-flipperX-one > *:focus, +.anima-flipperX-many:hover > *, +.anima-flipperX-many:focus > * { + animation-name: flipperX; } + +.anima-flipperY, +.anima-flipperY-all > *, +.anima-flipperY-on:hover, +.anima-flipperY-on:focus, +*:hover > .anima-flipperY-in, +*:focus > .anima-flipperY-in, +.anima-flipperY-one > *:hover, +.anima-flipperY-one > *:focus, +.anima-flipperY-many:hover > *, +.anima-flipperY-many:focus > * { + animation-name: flipperY; } + +.anima-twistT, +.anima-twistT-all > *, +.anima-twistT-on:hover, +.anima-twistT-on:focus, +*:hover > .anima-twistT-in, +*:focus > .anima-twistT-in, +.anima-twistT-one > *:hover, +.anima-twistT-one > *:focus, +.anima-twistT-many:hover > *, +.anima-twistT-many:focus > * { + animation-name: twistT; } + +.anima-twistR, +.anima-twistR-all > *, +.anima-twistR-on:hover, +.anima-twistR-on:focus, +*:hover > .anima-twistR-in, +*:focus > .anima-twistR-in, +.anima-twistR-one > *:hover, +.anima-twistR-one > *:focus, +.anima-twistR-many:hover > *, +.anima-twistR-many:focus > * { + animation-name: twistR; } + +.anima-twistB, +.anima-twistB-all > *, +.anima-twistB-on:hover, +.anima-twistB-on:focus, +*:hover > .anima-twistB-in, +*:focus > .anima-twistB-in, +.anima-twistB-one > *:hover, +.anima-twistB-one > *:focus, +.anima-twistB-many:hover > *, +.anima-twistB-many:focus > * { + animation-name: twistB; } + +.anima-twistL, +.anima-twistL-all > *, +.anima-twistL-on:hover, +.anima-twistL-on:focus, +*:hover > .anima-twistL-in, +*:focus > .anima-twistL-in, +.anima-twistL-one > *:hover, +.anima-twistL-one > *:focus, +.anima-twistL-many:hover > *, +.anima-twistL-many:focus > * { + animation-name: twistL; } + +/********** ANIMATION OPTIONS **********/ +.anima-sm { + animation-duration: var(--ani-animation-duration-sm); } + +.anima-md { + animation-duration: var(--ani-animation-duration-md); } + +.anima-lg { + animation-duration: var(--ani-animation-duration-lg); } + +.anima-linear { + animation-timing-function: var(--ani-animation-timing-function-linear); } + +.anima-in { + animation-timing-function: var(--ani-animation-timing-function-in); } + +.anima-out { + animation-timing-function: var(--ani-animation-timing-function-out); } + +.anima-inout { + animation-timing-function: var(--ani-animation-timing-function-inout); } + +.anima-start { + animation-timing-function: var(--ani-animation-timing-function-start); } + +.anima-end { + animation-timing-function: var(--ani-animation-timing-function-end); } + +.anima-few { + animation-iteration-count: var(--ani-animation-iteration-count-few); } + +.anima-many { + animation-iteration-count: var(--ani-animation-iteration-count-many); } + +.anima-loop { + animation-iteration-count: var(--ani-animation-iteration-count-loop); } + +.anima-min { + animation-delay: var(--ani-animation-delay-min); } + +.anima-max { + animation-delay: var(--ani-animation-delay-max); } + +.anima-alt { + animation-direction: alternate; } + +.anima-rev { + animation-direction: reverse; } + +.anima-altrev { + animation-direction: alternate-reverse; }