├── docs
    ├── layout
    │   ├── footer.js
    │   └── header.js
    ├── images
    │   ├── gnpc.png
    │   ├── gpha.gif
    │   ├── rab.jfif
    │   ├── rap.jpg
    │   ├── sark.jpg
    │   ├── tv3.jpg
    │   ├── tv3.png
    │   ├── bg-mic.png
    │   ├── blacko.jpg
    │   ├── cosco.png
    │   ├── logo1.jpg
    │   ├── reggae.jpg
    │   ├── Highlife-.jpg
    │   ├── Hip-Life.jpg
    │   ├── afrobeat.jpeg
    │   ├── cocoboard.jpg
    │   ├── cocobod.jpg
    │   ├── highlife.png
    │   ├── mic-gray.png
    │   ├── vodafone.png
    │   ├── microphone.png
    │   ├── black_sherif.jpg
    │   ├── bwim_concert.jpg
    │   ├── home-bg-desk.png
    │   ├── kidi_artiste.jpg
    │   ├── speaker-back.png
    │   ├── sarkodie_artiste.jpg
    │   ├── titlebackground.png
    │   ├── black_sherif_artise.jpg
    │   ├── kwame_eugen_artiste.jpg
    │   ├── mobile background.png
    │   ├── stonebwoy_artiste.jpg
    │   └── king_promise_artiste.jpg
    ├── input.css
    ├── Navbar.js
    ├── index.css
    ├── features.js
    ├── aboutme.html
    ├── index.html
    └── dist
    │   └── output.css
├── .gitignore
├── .vscode
    └── settings.json
├── tailwind.config.js
├── .hintrc
├── .eslintrc.json
├── package.json
├── LICENSE
├── .stylelintrc.json
├── _config.yml
├── .github
    └── workflows
    │   └── linters.yml
└── README.md


/docs/layout/footer.js:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | tREADME.md


--------------------------------------------------------------------------------
/docs/images/gnpc.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shafiuyushawu/Online-Ticket/HEAD/docs/images/gnpc.png


--------------------------------------------------------------------------------
/docs/images/gpha.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shafiuyushawu/Online-Ticket/HEAD/docs/images/gpha.gif


--------------------------------------------------------------------------------
/docs/images/rab.jfif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shafiuyushawu/Online-Ticket/HEAD/docs/images/rab.jfif


--------------------------------------------------------------------------------
/docs/images/rap.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shafiuyushawu/Online-Ticket/HEAD/docs/images/rap.jpg


--------------------------------------------------------------------------------
/docs/images/sark.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shafiuyushawu/Online-Ticket/HEAD/docs/images/sark.jpg


--------------------------------------------------------------------------------
/docs/images/tv3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shafiuyushawu/Online-Ticket/HEAD/docs/images/tv3.jpg


--------------------------------------------------------------------------------
/docs/images/tv3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shafiuyushawu/Online-Ticket/HEAD/docs/images/tv3.png


--------------------------------------------------------------------------------
/docs/images/bg-mic.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shafiuyushawu/Online-Ticket/HEAD/docs/images/bg-mic.png


--------------------------------------------------------------------------------
/docs/images/blacko.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shafiuyushawu/Online-Ticket/HEAD/docs/images/blacko.jpg


--------------------------------------------------------------------------------
/docs/images/cosco.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shafiuyushawu/Online-Ticket/HEAD/docs/images/cosco.png


--------------------------------------------------------------------------------
/docs/images/logo1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shafiuyushawu/Online-Ticket/HEAD/docs/images/logo1.jpg


--------------------------------------------------------------------------------
/docs/images/reggae.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shafiuyushawu/Online-Ticket/HEAD/docs/images/reggae.jpg


--------------------------------------------------------------------------------
/docs/images/Highlife-.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shafiuyushawu/Online-Ticket/HEAD/docs/images/Highlife-.jpg


--------------------------------------------------------------------------------
/docs/images/Hip-Life.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shafiuyushawu/Online-Ticket/HEAD/docs/images/Hip-Life.jpg


--------------------------------------------------------------------------------
/docs/images/afrobeat.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shafiuyushawu/Online-Ticket/HEAD/docs/images/afrobeat.jpeg


--------------------------------------------------------------------------------
/docs/images/cocoboard.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shafiuyushawu/Online-Ticket/HEAD/docs/images/cocoboard.jpg


--------------------------------------------------------------------------------
/docs/images/cocobod.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shafiuyushawu/Online-Ticket/HEAD/docs/images/cocobod.jpg


--------------------------------------------------------------------------------
/docs/images/highlife.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shafiuyushawu/Online-Ticket/HEAD/docs/images/highlife.png


--------------------------------------------------------------------------------
/docs/images/mic-gray.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shafiuyushawu/Online-Ticket/HEAD/docs/images/mic-gray.png


--------------------------------------------------------------------------------
/docs/images/vodafone.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shafiuyushawu/Online-Ticket/HEAD/docs/images/vodafone.png


--------------------------------------------------------------------------------
/docs/images/microphone.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shafiuyushawu/Online-Ticket/HEAD/docs/images/microphone.png


--------------------------------------------------------------------------------
/docs/images/black_sherif.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shafiuyushawu/Online-Ticket/HEAD/docs/images/black_sherif.jpg


--------------------------------------------------------------------------------
/docs/images/bwim_concert.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shafiuyushawu/Online-Ticket/HEAD/docs/images/bwim_concert.jpg


--------------------------------------------------------------------------------
/docs/images/home-bg-desk.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shafiuyushawu/Online-Ticket/HEAD/docs/images/home-bg-desk.png


--------------------------------------------------------------------------------
/docs/images/kidi_artiste.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shafiuyushawu/Online-Ticket/HEAD/docs/images/kidi_artiste.jpg


--------------------------------------------------------------------------------
/docs/images/speaker-back.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shafiuyushawu/Online-Ticket/HEAD/docs/images/speaker-back.png


--------------------------------------------------------------------------------
/docs/images/sarkodie_artiste.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shafiuyushawu/Online-Ticket/HEAD/docs/images/sarkodie_artiste.jpg


--------------------------------------------------------------------------------
/docs/images/titlebackground.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shafiuyushawu/Online-Ticket/HEAD/docs/images/titlebackground.png


--------------------------------------------------------------------------------
/docs/images/black_sherif_artise.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shafiuyushawu/Online-Ticket/HEAD/docs/images/black_sherif_artise.jpg


--------------------------------------------------------------------------------
/docs/images/kwame_eugen_artiste.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shafiuyushawu/Online-Ticket/HEAD/docs/images/kwame_eugen_artiste.jpg


--------------------------------------------------------------------------------
/docs/images/mobile background.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shafiuyushawu/Online-Ticket/HEAD/docs/images/mobile background.png


--------------------------------------------------------------------------------
/docs/images/stonebwoy_artiste.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shafiuyushawu/Online-Ticket/HEAD/docs/images/stonebwoy_artiste.jpg


--------------------------------------------------------------------------------
/docs/images/king_promise_artiste.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shafiuyushawu/Online-Ticket/HEAD/docs/images/king_promise_artiste.jpg


--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 |     "livePreview.defaultPreviewPath": "/src/index.html",
3 |     "css.validate": false,
4 |     "less.validate": false,
5 |     "scss.validate": false
6 | }


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | const daisyui = require('daisyui');
 2 | 
 3 | /** @type {import('tailwindcss').Config} */
 4 | module.exports = {
 5 |   content: ['./src/**/*.{html,js}'],
 6 |   theme: {
 7 |     extend: {},
 8 |   },
 9 |   plugins: [daisyui],
10 | };
11 | 


--------------------------------------------------------------------------------
/docs/input.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | @tailwind components;
 3 | @tailwind utilities;
 4 | 
 5 | @import url('https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700;900&display=swap');
 6 | 
 7 | ul li a {
 8 |   @apply rounded py-[7px] px-[13px] text-[17px]
 9 |     transition-all duration-300;
10 | }
11 | 


--------------------------------------------------------------------------------
/docs/Navbar.js:
--------------------------------------------------------------------------------
 1 | function Menu(e) {
 2 |   const menuList = document.querySelector('#nav_ul');
 3 |   if (e.name === 'menu') {
 4 |     e.name = 'close';
 5 |     menuList.classList.add('top-[80px]');
 6 |     menuList.classList.add('opacity-100');
 7 |   } else {
 8 |     e.name = 'menu';
 9 |     menuList.classList.remove('top-[80px]');
10 |     menuList.classList.remove('opacity-100');
11 |   }
12 | }
13 | 
14 | Menu();
15 | 


--------------------------------------------------------------------------------
/.hintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |     "connector": {
 3 |         "name": "local",
 4 |         "options": {
 5 |             "pattern": [
 6 |                 "**",
 7 |                 "!.git/**",
 8 |                 "!node_modules/**"
 9 |             ]
10 |         }
11 |     },
12 |     "extends": [
13 |         "development"
14 |     ],
15 |     "formatters": [
16 |         "stylish"
17 |     ],
18 |     "hints": [
19 |         "button-type",
20 |         "disown-opener",
21 |         "html-checker",
22 |         "meta-charset-utf-8",
23 |         "meta-viewport",
24 |         "no-inline-styles:error"
25 |     ]
26 | }


--------------------------------------------------------------------------------
/.eslintrc.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "env": {
 3 |         "browser": true,
 4 |         "es6": true,
 5 |         "jest": true
 6 |     },
 7 |     "parser": "babel-eslint",
 8 |     "parserOptions": {
 9 |         "ecmaVersion": 2018,
10 |         "sourceType": "module"
11 |     },
12 |     "extends": [
13 |         "airbnb-base"
14 |     ],
15 |     "rules": {
16 |         "no-shadow": "off",
17 |         "no-param-reassign": "off",
18 |         "eol-last": "off",
19 |         "import/extensions": [
20 |             1,
21 |             {
22 |                 "js": "always",
23 |                 "json": "always"
24 |             }
25 |         ]
26 |     },
27 |     "ignorePatterns": [
28 |         "dist/",
29 |         "build/"
30 |     ]
31 | }


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "Capstone",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "keywords": [],
10 |   "author": "",
11 |   "license": "ISC",
12 |   "devDependencies": {
13 |     "babel-eslint": "^10.1.0",
14 |     "eslint": "^7.32.0",
15 |     "eslint-config-airbnb-base": "^14.2.1",
16 |     "eslint-plugin-import": "^2.27.5",
17 |     "hint": "^7.1.3",
18 |     "stylelint": "^13.13.1",
19 |     "stylelint-config-standard": "^21.0.0",
20 |     "stylelint-csstree-validator": "^1.9.0",
21 |     "stylelint-scss": "^3.21.0",
22 |     "tailwindcss": "^3.2.6"
23 |   },
24 |   "dependencies": {
25 |     "daisyui": "^2.50.0"
26 |   }
27 | }


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2023 Shafiuyushawu
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/.stylelintrc.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "extends": [
 3 |         "stylelint-config-standard"
 4 |     ],
 5 |     "plugins": [
 6 |         "stylelint-scss",
 7 |         "stylelint-csstree-validator"
 8 |     ],
 9 |     "rules": {
10 |         "at-rule-no-unknown": [
11 |             true,
12 |             {
13 |                 "ignoreAtRules": [
14 |                     "tailwind",
15 |                     "apply",
16 |                     "variants",
17 |                     "responsive",
18 |                     "screen"
19 |                 ]
20 |             }
21 |         ],
22 |         "scss/at-rule-no-unknown": [
23 |             true,
24 |             {
25 |                 "ignoreAtRules": [
26 |                     "tailwind",
27 |                     "apply",
28 |                     "variants",
29 |                     "responsive",
30 |                     "screen"
31 |                 ]
32 |             }
33 |         ],
34 |         "csstree/validator": true
35 |     },
36 |     "ignoreFiles": [
37 |         "build/**",
38 |         "docs/dist/**",
39 |         "/docs/dist/**",
40 |         "/docs/dist/output.css",
41 |         "**/reset*.css",
42 |         "**/bootstrap*.css",
43 |         "**/*.js",
44 |         "**/*.jsx"
45 |     ]
46 | }


--------------------------------------------------------------------------------
/_config.yml:
--------------------------------------------------------------------------------
 1 | # change the followings to match your Github username and repo name
 2 | baseurl: "/Online-Ticket" # the name of your github repo
 3 | url: "https://shafiuyushawu.github.io" # the url of your github pages
 4 | 
 5 | # site information used in page title, meta data etc.
 6 | title: "Tailpages: Tailwind + Github Pages"
 7 | description: A Github Pages (Jekyll) template based on TailwindCSS
 8 | 
 9 | # color theme for links
10 | theme-color: indigo # indigo|yellow|pink|green|stone|
11 | 
12 | # homepage information
13 | author: Satoshi Nakamoto
14 | author-bio: Creator of Bitcoin # change to false to hide
15 | author-image: 279.png # file must be in the /assets/img/ folder
16 | 
17 | # navigation menu
18 | show-nav-menu: true
19 | 
20 | nav-menu:
21 |   - text: About
22 |     permalink: about
23 |   - text: Bitcoin
24 |     permalink: bitcoin
25 |   - text: Blog
26 |     permalink: blog
27 | 
28 | # use false to turn off any social media links
29 | twitter: https://twitter.com/
30 | facebook: https://facebook.com/
31 | instagram: https://instagram.com/
32 | github: https://github.com/
33 | linkedin: https://linkedin.com/
34 | medium: false
35 | google-scholar: false
36 | email: false
37 | 
38 | # footer information
39 | footer-msg: "Powered by Tailpages"
40 | footer-msg-link: https://github.com/harrywang/tailpages
41 | 
42 | # google analytics
43 | google-analytics: G-WCRC1TC2V5
44 | 
45 | # jekyll plugins - no need to change
46 | plugins:
47 |   - jekyll-seo-tag
48 | 


--------------------------------------------------------------------------------
/docs/index.css:
--------------------------------------------------------------------------------
 1 | @import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');
 2 | 
 3 | #main__section {
 4 |   background-image: url("./images/mobile\ background.png");
 5 |   background-size: 100% 100%;
 6 |   background-position: center;
 7 |   background-repeat: no-repeat;
 8 | }
 9 | 
10 | #home {
11 |   margin: 0 8%;
12 | }
13 | 
14 | #home1 {
15 |   margin: 0 8%;
16 | }
17 | 
18 | #venue {
19 |   margin: 10px 0 10px 0;
20 | }
21 | 
22 | #location {
23 |   margin-top: 5px;
24 | }
25 | 
26 | #aboutImgTxt1 {
27 |   position: relative;
28 |   top: -130px;
29 | }
30 | 
31 | #programSection {
32 |   padding: 0 10%;
33 | }
34 | 
35 | #hoverProgram:hover {
36 |   border: 1px solid #d3d3d3;
37 | }
38 | 
39 | #sponsors {
40 |   display: grid;
41 |   grid-template-columns: auto auto auto;
42 |   justify-content: center;
43 |   align-items: center;
44 |   align-content: center;
45 | }
46 | 
47 | #homeTitle {
48 |   background-image: url('./images/titlebackground.png');
49 |   background-repeat: repeat;
50 |   -webkit-background-clip: text;
51 |   -webkit-text-fill-color: transparent;
52 |   -webkit-font-smoothing: antialiased;
53 | }
54 | 
55 | @media screen and (min-width: 768px) {
56 |   #main__section {
57 |     background-image: url("./images/home-bg-desk.png");
58 |     background-size: cover;
59 |     background-position: top;
60 |   }
61 | 
62 |   #home1 {
63 |     margin: 0 15%;
64 |   }
65 | 
66 |   .description {
67 |     width: 50%;
68 |     margin-top: 0;
69 |   }
70 | 
71 |   #feature__container {
72 |     display: grid;
73 |     grid-template-columns: auto auto;
74 |   }
75 | 
76 |   #program__section {
77 |     display: flex;
78 |     flex-direction: row;
79 |   }
80 | 
81 |   #aboutImgTxt1 {
82 |     position: relative;
83 |     top: -10px;
84 |     right: 240px;
85 |   }
86 | 
87 |   #programBtn {
88 |     height: 800px;
89 |   }
90 | 
91 |   #programSection {
92 |     height: 400px;
93 |   }
94 | }
95 | 


--------------------------------------------------------------------------------
/.github/workflows/linters.yml:
--------------------------------------------------------------------------------
 1 | name: Linters
 2 | 
 3 | on: pull_request
 4 | 
 5 | env:
 6 |   FORCE_COLOR: 1
 7 | 
 8 | jobs:
 9 |   lighthouse:
10 |     name: Lighthouse
11 |     runs-on: ubuntu-22.04
12 |     steps:
13 |       - uses: actions/checkout@v2
14 |       - uses: actions/setup-node@v1
15 |         with:
16 |           node-version: "12.x"
17 |       - name: Setup Lighthouse
18 |         run: npm install -g @lhci/cli@0.7.x
19 |       - name: Lighthouse Report
20 |         run: lhci autorun --upload.target=temporary-public-storage --collect.staticDistDir=.
21 |   webhint:
22 |     name: Webhint
23 |     runs-on: ubuntu-22.04
24 |     steps:
25 |       - uses: actions/checkout@v2
26 |       - uses: actions/setup-node@v1
27 |         with:
28 |           node-version: "12.x"
29 |       - name: Setup Webhint
30 |         run: |
31 |           npm install --save-dev hint@7.x
32 |           [ -f .hintrc ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/html-css-js/.hintrc
33 |       - name: Webhint Report
34 |         run: npx hint .
35 |   stylelint:
36 |     name: Stylelint
37 |     runs-on: ubuntu-22.04
38 |     steps:
39 |       - uses: actions/checkout@v2
40 |       - uses: actions/setup-node@v1
41 |         with:
42 |           node-version: "12.x"
43 |       - name: Setup Stylelint
44 |         run: |
45 |           npm install --save-dev stylelint@13.x stylelint-scss@3.x stylelint-config-standard@21.x stylelint-csstree-validator@1.x
46 |           [ -f .stylelintrc.json ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/html-css-js/.stylelintrc.json
47 |       - name: Stylelint Report
48 |         run: npx stylelint "**/*.{css,scss}"
49 |   eslint:
50 |     name: ESLint
51 |     runs-on: ubuntu-22.04
52 |     steps:
53 |       - uses: actions/checkout@v2
54 |       - uses: actions/setup-node@v1
55 |         with:
56 |           node-version: "12.x"
57 |       - name: Setup ESLint
58 |         run: |
59 |           npm install --save-dev eslint@7.x eslint-config-airbnb-base@14.x eslint-plugin-import@2.x babel-eslint@10.x
60 |           [ -f .eslintrc.json ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/html-css-js/.eslintrc.json
61 |       - name: ESLint Report
62 |         run: npx eslint .
63 |   nodechecker:
64 |     name: node_modules checker
65 |     runs-on: ubuntu-22.04
66 |     steps:
67 |       - uses: actions/checkout@v2
68 |       - name: Check node_modules existence
69 |         run: |
70 |           if [ -d "node_modules/" ]; then echo -e "\e[1;31mThe node_modules/ folder was pushed to the repo. Please remove it from the GitHub repository and try again."; echo -e "\e[1;32mYou can set up a .gitignore file with this folder included on it to prevent this from happening in the future." && exit 1; fi
71 | 


--------------------------------------------------------------------------------
/docs/features.js:
--------------------------------------------------------------------------------
  1 | const dataArr = [
  2 |   {
  3 |     name: 'Black Sherif',
  4 |     img: './images/black_sherif_artise.jpg',
  5 |     profession: 'Afro beat, Singer and Rapper',
  6 |     description:
  7 |       "Mohammed Ismail Sherif Kwaku Frimpong professionally known as Black Sherif, is a Ghanaian singer and rapper. He gained popularity in 2021 with his song 'First Sermon' in May 2021. This was followed up with 'Second Sermon' in July. ",
  8 |   },
  9 |   {
 10 |     name: 'Sarkodie',
 11 |     img: './images/sarkodie_artiste.jpg',
 12 |     profession: 'Rapper',
 13 |     description:
 14 |       "Michael Owusu Addo known professionally as Sarkodie, is a Ghanaian rapper, songwriter, and entrepreneur from Tema. His contributions to the Ghanaian music industry have earned him numerous accolades, including the Vodafone Ghana Music Award for 'Artiste of the Decade'",
 15 |   },
 16 |   {
 17 |     name: 'King Promise',
 18 |     img: './images/king_promise_artiste.jpg',
 19 |     profession: 'Singer, Song writer',
 20 |     description:
 21 |       'Gregory Bortey Newman, who goes by the stage name King Promise is a Ghanaian highlife and afrobeats singer-songwriter. He is a signee of Legacy Life Entertainment record Label and is known for several songs like Oh yeah, Selfish, Tokyo among others.',
 22 |   },
 23 |   {
 24 |     name: 'Kidi',
 25 |     img: './images/kidi_artiste.jpg',
 26 |     profession: 'Singer',
 27 |     description:
 28 |       'Dennis Nana Dwamena, better known as KiDi, is a Ghanaian high-life and afrobeats singer-songwriter. He is signed to Lynx Entertainment and is best known for his global hit single Touch It. The remix features American rapper Tyga and has received massive streaming across the world.',
 29 |   },
 30 |   {
 31 |     name: 'Kwame Eugen',
 32 |     img: './images/kwame_eugen_artiste.jpg',
 33 |     profession: 'Hip Life Singer, Song writter',
 34 |     description:
 35 |       "Eugene Kwame Marfo, who goes by the stage name Kuami Eugene is a Ghanaian High-life and Afrobeat singer-songwriter. He is signed to Lynx Entertainment and Empire Distribution and is known for several songs, including 'Angela', 'Wish Me Well', 'Ohemaa' and many others.",
 36 |   },
 37 |   {
 38 |     name: 'Stonebwoy',
 39 |     img: './images/stonebwoy_artiste.jpg',
 40 |     profession: 'Dancehall, Reggae',
 41 |     description:
 42 |       'Livingstone Etse Satekla, better known by his stage name Stonebwoy, is a Ghanaian Afropop, dancehall and reggae musician. He is the CEO of Burniton Music Group. He won the Best International Act: Africa category at the 2015 BET Awards and Artist of the Year at the 2015 Ghana Music Awards.',
 43 |   },
 44 | ];
 45 | 
 46 | const featureSection = document.querySelector(
 47 |   'body main #feature__section #feature__container',
 48 | );
 49 | const featureTittle = document.querySelector(
 50 |   'body main #feature__section #feature__tittle',
 51 | );
 52 | 
 53 | const titleDiv = document.createElement('div');
 54 | titleDiv.className = 'flex flex-col items-center justify-center gap-2 ';
 55 | const tittle = document.createElement('h2');
 56 | tittle.innerHTML = 'Feartures Artiste';
 57 | tittle.className = 'mt-5 text-2xl text-center';
 58 | const tittleBar = document.createElement('div');
 59 | tittleBar.className = 'h-1 w-10 bg-[#ec5242]';
 60 | 
 61 | featureTittle.appendChild(titleDiv);
 62 | titleDiv.appendChild(tittle);
 63 | titleDiv.appendChild(tittleBar);
 64 | 
 65 | for (let data = 0; data < dataArr.length; data += 1) {
 66 |   const mainDiv = document.createElement('div');
 67 |   mainDiv.className = 'flex mt-10 ';
 68 |   featureSection.appendChild(mainDiv);
 69 | 
 70 |   const profileDiv = document.createElement('div');
 71 |   profileDiv.className = 'w-[40%]';
 72 | 
 73 |   const profileImg = document.createElement('img');
 74 |   profileImg.setAttribute('src', dataArr[data].img);
 75 |   profileImg.className = ' w-[100%]  p-5';
 76 | 
 77 |   mainDiv.appendChild(profileDiv);
 78 |   profileDiv.appendChild(profileImg);
 79 | 
 80 |   const textDiv = document.createElement('div');
 81 |   textDiv.className = 'w-[60%]  items-center md:mt-20 ';
 82 |   const textTittle = document.createElement('h3');
 83 |   textTittle.innerHTML = dataArr[data].name;
 84 |   textTittle.className = 'text-xl ';
 85 |   const profession = document.createElement('h4');
 86 |   profession.innerHTML = dataArr[data].profession;
 87 |   profession.className = 'text-[#ec5242] italic';
 88 |   const divBar = document.createElement('div');
 89 |   divBar.className = 'h-1 w-12 bg-[#d3d3d3]';
 90 |   const description = document.createElement('span');
 91 |   description.innerHTML = dataArr[data].description;
 92 |   description.className = 'text-[13px]';
 93 | 
 94 |   mainDiv.appendChild(textDiv);
 95 |   textDiv.appendChild(textTittle);
 96 |   textDiv.appendChild(profession);
 97 |   textDiv.appendChild(divBar);
 98 |   textDiv.appendChild(description);
 99 | }
100 | 


--------------------------------------------------------------------------------
/docs/layout/header.js:
--------------------------------------------------------------------------------
  1 | const navData = {
  2 |   icons: {
  3 |     facebook: 'fa-brands fa-facebook-f',
  4 |     twitter: 'fa-brands fa-twitter',
  5 |   },
  6 |   text: {
  7 |     language: 'English',
  8 |     page: 'My Page',
  9 |     logout: 'Logout',
 10 |   },
 11 | };
 12 | 
 13 | const header = document.querySelector('body header');
 14 | 
 15 | const navbar = document.createElement('navbar');
 16 | navbar.className = 'fixed top-0 left-0 bg-white w-full drop-shadow-xl';
 17 | 
 18 | const topDiv = document.createElement('div');
 19 | topDiv.className = ' w-[100%] bg-[#272a31] h-[30px]';
 20 | 
 21 | const ul = document.createElement('ul');
 22 | ul.className = ' flex justify-end list-none   gap-x-3 text-[#d3d3d3]';
 23 | ul.id = 'topnav__ul';
 24 | 
 25 | const li = document.createElement('li');
 26 | li.className = '';
 27 | const a = document.createElement('a');
 28 | a.className = '';
 29 | const i = document.createElement('i');
 30 | i.className = navData.icons.facebook;
 31 | 
 32 | const li2 = document.createElement('li');
 33 | li2.className = '';
 34 | const a2 = document.createElement('a');
 35 | a2.className = '';
 36 | const i2 = document.createElement('i');
 37 | i2.className = navData.icons.twitter;
 38 | 
 39 | const li3 = document.createElement('li');
 40 | li2.className = '';
 41 | const a3 = document.createElement('a');
 42 | a3.innerHTML = navData.text.language;
 43 | 
 44 | const li4 = document.createElement('li');
 45 | li4.className = '';
 46 | const a4 = document.createElement('a');
 47 | a4.innerHTML = navData.text.page;
 48 | 
 49 | const li5 = document.createElement('li');
 50 | li5.className = '';
 51 | const a5 = document.createElement('a');
 52 | a5.innerHTML = navData.text.logout;
 53 | 
 54 | header.appendChild(navbar);
 55 | navbar.appendChild(topDiv);
 56 | topDiv.appendChild(ul);
 57 | ul.appendChild(li);
 58 | li.appendChild(a);
 59 | a.appendChild(i);
 60 | 
 61 | ul.appendChild(li2);
 62 | li2.appendChild(a2);
 63 | a2.appendChild(i2);
 64 | 
 65 | ul.appendChild(li3);
 66 | li3.appendChild(a3);
 67 | 
 68 | ul.appendChild(li4);
 69 | li4.appendChild(a4);
 70 | 
 71 | ul.appendChild(li5);
 72 | li5.appendChild(a5);
 73 | 
 74 | // navbar
 75 | 
 76 | const container = document.createElement('div');
 77 | container.className = 'flex flex-column';
 78 | 
 79 | const iconDiv = document.createElement('div');
 80 | iconDiv.className = 'flex items-center';
 81 | 
 82 | container.className = 'container m-auto flex justify-between items-center text-black md:justify-start';
 83 | 
 84 | const hamburger = document.createElement('div');
 85 | hamburger.id = 'hamburger';
 86 | hamburger.className = 'hamburger block md:hidden py-3 px-4 mx-2 rounded focus:outline-none hover:bg-gra-200 justify-start';
 87 | const bar1 = document.createElement('div');
 88 | bar1.className = 'bar w-6 h-1 bg-gray-600 mb-1';
 89 | const bar2 = document.createElement('div');
 90 | bar2.className = 'bar w-6 h-1 bg-gray-600 mb-1';
 91 | const bar3 = document.createElement('div');
 92 | bar3.className = 'bar w-6 h-1 bg-gray-600 mb-1';
 93 | 
 94 | const icon = document.createElement('i');
 95 | icon.className = 'hidden l-8 py-4 text-xl font-bold md:block';
 96 | icon.innerHTML = 'IBNSCO';
 97 | 
 98 | const menuDiv = document.createElement('div');
 99 | menuDiv.className = '';
100 | 
101 | const ulnav = document.createElement('ul');
102 | ulnav.id = 'navMenu';
103 | ulnav.className = ' md:flex items-center  text-base font-semibold cursor-pointer md:block ';
104 | const linav1 = document.createElement('li');
105 | linav1.className = 'py-4 px-6';
106 | const anav1 = document.createElement('a');
107 | anav1.innerHTML = 'About';
108 | 
109 | const linav2 = document.createElement('li');
110 | linav2.className = 'py-4 px-6';
111 | const anav2 = document.createElement('a');
112 | anav2.innerHTML = 'Program';
113 | 
114 | const linav3 = document.createElement('li');
115 | linav3.className = 'py-4 px-6';
116 | const anav3 = document.createElement('a');
117 | anav3.innerHTML = 'Connect Live';
118 | 
119 | const linav4 = document.createElement('li');
120 | linav4.className = 'py-4 px-6';
121 | const anav4 = document.createElement('a');
122 | anav4.innerHTML = 'News';
123 | 
124 | const linav5 = document.createElement('li');
125 | linav5.className = 'py-4 px-6';
126 | const anav5 = document.createElement('a');
127 | anav5.innerHTML = 'Buy Tickets';
128 | 
129 | header.appendChild(navbar);
130 | navbar.appendChild(container);
131 | container.appendChild(iconDiv);
132 | iconDiv.appendChild(icon);
133 | iconDiv.appendChild(hamburger);
134 | hamburger.appendChild(bar1);
135 | hamburger.appendChild(bar2);
136 | hamburger.appendChild(bar3);
137 | 
138 | container.appendChild(ulnav);
139 | ulnav.appendChild(linav1);
140 | linav1.appendChild(anav1);
141 | 
142 | ulnav.appendChild(linav2);
143 | linav2.appendChild(anav2);
144 | 
145 | ulnav.appendChild(linav3);
146 | linav3.appendChild(anav3);
147 | 
148 | ulnav.appendChild(linav4);
149 | linav4.appendChild(anav4);
150 | 
151 | ulnav.appendChild(linav5);
152 | linav5.appendChild(anav5);
153 | 
154 | const toggleNavbar = document.querySelector('#navMenu');
155 | const toggleHamburger = document.querySelector('#hamburger');
156 | 
157 | toggleHamburger.addEventListener('click', () => {
158 |   toggleHamburger.classList.toggle('active');
159 |   toggleNavbar.classList.toggle('active');
160 | });
161 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | <a name="readme-top"></a>
  2 | 
  3 | <!--
  4 | HOW TO USE:
  5 | This is an example of how you may give instructions on setting up your project locally.
  6 | 
  7 | Modify this file to match your project and remove sections that don't apply.
  8 | 
  9 | REQUIRED SECTIONS:
 10 | - Table of Contents
 11 | - About the Project
 12 |   - Built With
 13 |   - Live Demo
 14 | - Getting Started
 15 | - Authors
 16 | - Future Features
 17 | - Contributing
 18 | - Show your support
 19 | - Acknowledgements
 20 | - License
 21 | 
 22 | OPTIONAL SECTIONS:
 23 | - FAQ
 24 | 
 25 | After you're finished please remove all the comments and instructions!
 26 | -->
 27 | 
 28 | <div align="center">
 29 |   <!-- You are encouraged to replace this logo with your own! Otherwise you can also remove it. -->
 30 |   <!-- <img src="" alt="logo" width="140"  height="auto" /> -->
 31 |   <br />
 32 | 
 33 | </div>
 34 | 
 35 | <!-- TABLE OF CONTENTS -->
 36 | 
 37 | # 📗 Table of Contents
 38 | 
 39 | - [📖 About the Project](#about-project)
 40 |   - [🛠 Built With](#built-with)
 41 |     - [Tech Stack](#tech-stack)
 42 |     - [Key Features](#key-features)
 43 |   - [🚀 Live Demo](#live-demo)
 44 | - [💻 Getting Started](#getting-started)
 45 |   - [Setup](#setup)
 46 |   - [Prerequisites](#prerequisites)
 47 |   - [Install](#install)
 48 |   - [Usage](#usage)
 49 |   - [Run tests](#run-tests)
 50 |   - [Deployment](#triangular_flag_on_post-deployment)
 51 | - [👥 Authors](#authors)
 52 | - [🔭 Future Features](#future-features)
 53 | - [🤝 Contributing](#contributing)
 54 | - [⭐️ Show your support](#support)
 55 | - [🙏 Acknowledgements](#acknowledgements)
 56 | - [📝 License](#license)
 57 | 
 58 | <!-- PROJECT DESCRIPTION -->
 59 | 
 60 | # 📖 [Online Ticket] <a name="about-project"></a>
 61 | > This is my first capstone project. I design a web page for purchasing tickets online to attend programes, shows, concert parties, etc.
 62 | > The project was based on Cindy Shin's design.
 63 | 
 64 | ## 🛠 Built With 
 65 | 
 66 | - CSS, 
 67 | - Tailwind CSS
 68 | - Daisyui
 69 | - Html
 70 | - Javascript
 71 | 
 72 | ### Tech Stack <a name="tech-stack">N/A</a>
 73 | 
 74 | <details>
 75 |   <summary>Client</summary>
 76 |   <ul>
 77 |     <li><a href="#">N/A</a></li>
 78 |   </ul>
 79 | </details>
 80 | 
 81 | <details>
 82 |   <summary>Server</summary>
 83 |   <ul>
 84 |     <li><a href="#">N/A</a></li>
 85 |   </ul>
 86 | </details>
 87 | 
 88 | <details>
 89 | <summary>Database</summary>
 90 |   <ul>
 91 |     <li><a href="#">N/A</a></li>
 92 |   </ul>
 93 | </details>
 94 | 
 95 | <!-- Features -->
 96 | 
 97 | ### Key Features <a name="key-features"></a>
 98 | 
 99 | - **N/A**
100 | 
101 | <p align="right">(<a href="#readme-top">back to top</a>)</p>
102 | 
103 | <!-- LIVE DEMO -->
104 | 
105 | ## 🚀 Live Demo <a name="live-demo"></a>
106 | 
107 | - **GitHub Pages:**
108 | 
109 | - https://shafiuyushawu.github.io/Online-Ticket/
110 | 
111 | <p align="right">(<a href="#readme-top">back to top</a>)</p>
112 | 
113 | 
114 | ## 📺 Presentation <a name="presentation"></a>
115 | 
116 | - https://www.loom.com/share/77da53f65e794e9b974477cda147133d
117 | 
118 | <!-- GETTING STARTED -->
119 | 
120 | ## 💻 Getting Started <a name="getting-started"></a>
121 | 
122 | > To get this locally 
123 | - You need git installed on your system
124 | - Run in your terminal git clone https://github.com/shafiuyushawu/Online-Ticket-
125 | - Cd to the local directory
126 | - Run these commands to install the follwing packages.
127 |     1. `npm install -D tailwindcss` to initialize tailwind css via `npm`
128 |     2. `npx tailwindcss init` to create `tailwind.config.js`
129 |     3. `npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch`
130 |     4. `npm install daisyui` to install daisyui packages.
131 |    
132 |     5. Copy below and paste it in `tailwind.config.js` file in the root folder to replace the whole content.
133 | 
134 |     /** @type {import('tailwindcss').Config} */
135 |             module.exports = {
136 |             content: ['./src/**/*.{html,js}'],
137 |             theme: {
138 |                 extend: {},
139 |             },
140 |             plugins: [require('daisyui')],
141 |         };
142 | 
143 | 
144 |  To get a local copy up and running follow these simple example steps.
145 | 
146 | ### Prerequisites
147 | 
148 | 
149 | <!--
150 | Example command:
151 | 
152 | ```sh
153 |  gem install rails
154 | ```
155 |  -->
156 | 
157 | ### Setup
158 | 
159 | Clone this repository to your desired folder:
160 | git clone https://github.com/shafiuyushawu/Online-Ticket
161 | 
162 | <!--
163 | Example commands:
164 | 
165 | ```sh
166 |   cd my-folder
167 |   git clone git@github.com:myaccount/my-project.git
168 | ```
169 | --->
170 | 
171 | ### Install
172 | 
173 | Install this project with:
174 | 
175 | **NPM Install**
176 | 
177 | <!--
178 | Example command:
179 | 
180 | ```sh
181 |   cd my-project
182 |   gem install
183 | ```
184 | --->
185 | 
186 | ### Usage
187 | 
188 | To run the project, execute the following command: **N/A**
189 | 
190 | <!--
191 | Example command:
192 | 
193 | ```sh
194 |   rails server
195 | ```
196 | --->
197 | 
198 | ### Run tests
199 | 
200 | To run tests, run the following command:
201 | 
202 | - npx hint . 
203 | - npx stylelint "\*_/_.{css,scss}"
204 | - npx eslint .
205 | 
206 | <!--
207 | Example command:
208 | 
209 | ```sh
210 |   bin/rails test test/models/article_test.rb
211 | ```
212 | --->
213 | 
214 | ### Deployment
215 | 
216 | You can deploy this project using: **N/A**
217 | 
218 | <!--
219 | Example:
220 | 
221 | ```sh
222 | 
223 | ```
224 |  -->
225 | 
226 | <p align="right">(<a href="#readme-top">back to top</a>)</p>
227 | <!-- AUTHOR -->
228 | 
229 | ## 👥 Author: <a name="authors">Shafiu Ibn Yushawu</a>
230 | 
231 | 👤 **Author**
232 | 
233 | - GitHub: [@shafiuyushawu](https://github.com/shafiuyushawu)
234 | - Twitter: [@shafiuyushawu](https://twitter.com/shafiuyushawu)
235 | - LinkedIn: [shafiuyushawu](https://www.linkedin.com/in/shafiu-ibn-yushawu-610883164/)
236 | 
237 | <p align="right">(<a href="#readme-top">back to top</a>)</p>
238 | <!-- FUTURE FEATURES -->
239 | 
240 | ## 🔭 Future Features <a name="future-features"></a>
241 | 
242 | - [ ] **[Create features for desktop responsiveness]**
243 | 
244 | <p align="right">(<a href="#readme-top">back to top</a>)</p>
245 | 
246 | <!-- CONTRIBUTING -->
247 | 
248 | ## 🤝 Contributing <a name="contributing"></a>
249 | 
250 | Contributions, issues, and feature requests are welcome!
251 | 
252 | <p align="right">(<a href="#readme-top">back to top</a>)</p>
253 | 
254 | <!-- SUPPORT -->
255 | 
256 | ## ⭐️ Show your support <a name="support"></a>
257 | 
258 | If you like this project, kindly follow me on GitHub 😊
259 | 
260 | <p align="right">(<a href="#readme-top">back to top</a>)</p>
261 | 
262 | <!-- ACKNOWLEDGEMENTS -->
263 | 
264 | ## 🙏 Acknowledgments <a name="acknowledgements"></a>
265 | 
266 | - Hat tip to Cindy whose design was used
267 | 
268 | 
269 | <p align="right">(<a href="#readme-top">back to top</a>)</p>
270 | <!-- LICENSE -->
271 | 
272 | ## 📝 License <a name="license"></a>
273 | 
274 | This project is [MIT](./LICENSE) licensed.
275 | 
276 | <p align="right">(<a href="#readme-top">back to top</a>)</p>
277 | 


--------------------------------------------------------------------------------
/docs/aboutme.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en" data-theme="light">
  3 | 
  4 | <head>
  5 |   <meta charset="UTF-8" />
  6 |   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  7 |   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  8 |   <title>About</title>
  9 |   <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
 10 |   <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
 11 |   <link rel="stylesheet" href="./index.css" />
 12 |   <link rel="stylesheet" href="./dist/output.css">
 13 | </head>
 14 | 
 15 | 
 16 | <body class="font-[Lato]">
 17 |   <div class="w-full bg-[#272a31] text-white hidden md:block">
 18 |     <ul class=" mr-[13%] flex justify-end">
 19 |       <li class="mx-1 my-6 md:my-0">
 20 |         <a href="#" class="text-xl duration-500 hover:text-[#ec5242]"><ion-icon name="logo-facebook"></ion-icon></a>
 21 |       </li>
 22 |       <li class="mx-1 my-6 md:my-0">
 23 |         <a href="#" class="text-xl duration-500 hover:text-[#ec5242]"><ion-icon name="logo-twitter"></ion-icon></a>
 24 |       </li>
 25 |       <li class="mx-1 my-6 md:my-0">
 26 |         <a href="#" class="text-xl duration-500 hover:text-[#ec5242]">English</a>
 27 |       </li>
 28 |       <li class="mx-1 my-6 md:my-0">
 29 |         <a href="#" class="text-xl duration-500 hover:text-[#ec5242]">My Page</a>
 30 |       </li>
 31 |       <li class="mx-1 my-6 md:my-0">
 32 |         <a href="#" class="text-xl duration-500 hover:text-[#ec5242]">Logout</a>
 33 |       </li>
 34 |     </ul>
 35 |   </div>
 36 |   <nav class="p-5 bg-white shadow md:flex md:items-center md:justify-around">
 37 |     <div class="flex items-center justify-between">
 38 |       <span class="hidden text-2xl cursor-pointer text-Center md:block">
 39 |         <a href="./index.html">
 40 |           <ion-icon name="mic-outline" class="text-[#ec5242] text-3xl text-center items-center"></ion-icon>
 41 |           <span class="text-4xl">IBNSCO</span>
 42 |         </a>
 43 |       </span>
 44 |       <span class="block mx-2 text-3xl cursor-pointer md:hidden">
 45 |         <ion-icon name="menu" onclick="Menu(this)"></ion-icon>
 46 |       </span>
 47 |     </div>
 48 | 
 49 |     <ul id="nav_ul"
 50 |       class="text-sl md:flex md:items-center z-[1] bg-white md:bg-white md:z-auto md:static absolute bg-white w-full left-0 md:w-auto md:py-0 py-4 md:pl-0 pl-7 md:opacity-100 opacity-0 top-[-400px] transition-all ease-in duration-500">
 51 |       <li class="block mx-1 my-6 md:my-0 md:hidden">
 52 |         <a href="./index.html">
 53 |           <ion-icon name="mic-outline" class="text-[#ec5242] text-3xl text-center items-center"></ion-icon>
 54 |           <span class="text-4xl">IBNSCO</span>
 55 |         </a>
 56 |       </li>
 57 |       <li class="mx-1 my-6 md:my-0">
 58 |         <a href="./aboutme.html" class="text-xl duration-500 hover:text-[#ec5242]">About</a>
 59 |       </li>
 60 |       <li class="mx-1 my-6 md:my-0">
 61 |         <a href="#" class="text-xl duration-500 hover:text-[#ec5242]">Program</a>
 62 |       </li>
 63 |       <li class="mx-1 my-6 md:my-0">
 64 |         <a href="#" class="text-xl duration-500 hover:text-[#ec5242]">Features</a>
 65 |       </li>
 66 |       <li class="mx-1 my-6 md:my-0">
 67 |         <a href="#" class="text-xl duration-500 hover:text-[#ec5242]">Stream live</a>
 68 |       </li>
 69 |       <li class="mx-1 my-6 md:my-0">
 70 |         <a href="#" class="text-xl duration-500 hover:text-[#ec5242]">Gallery</a>
 71 |       </li>
 72 | 
 73 |       <button
 74 |         class="btn btn-outline hover:bg-[#ec5242] text-[#ec5242] border-4 hover:border-[#ec5242] duration-500 px-6 py-2 mx-1">
 75 |         Buy Ticket
 76 |       </button>
 77 |       <h2 class=""></h2>
 78 |     </ul>
 79 |   </nav>
 80 |   <main class="items-center text-center">
 81 |     <section id='main__section'>
 82 |       <div id="home1" class="md:h-[80vh] ">
 83 |         <div class="items-center ">
 84 |           <h1 class="text-xl text-[#ec5242] font-light  md:text-2xl">"Hello! Making ticketing easy"</h1>
 85 |           <span id="homeTitle" class=" text-[#ec5242] md:text-5xl font-extrabold text-3xl">
 86 |             Smart way to book your ticket to events with so much convinience, 2023
 87 |           </span>
 88 |           <div class="bg-white border-2 border-x-white"></div>
 89 |           <p class=" text-[#272a31] text-xsm mt-10 mb-5 md:mt-10">Mozama Disco is an
 90 |             art
 91 |             of LIFE for the youth of Ghana and beyond the world.
 92 |             A combination of ARTS, FASHION, AND MUSIC from different backgrounds forming the army of Blacko Tribe.
 93 |             Mozama Disco is also intended to inculcate a spirit of adventure, co-operation, creation of excellence in
 94 |             the
 95 |             domain of art and culture and feelings of fraternity, patriotism, unity and brotherhood.
 96 |           </p>
 97 | 
 98 |           <p class="mt-10">
 99 |             Kindly contact us per Email for any further questions about IBNSCO Online Ticketing 2023! <br>
100 |             <span class="underline cursor-pointer">ibnsco@gmail.com</span>
101 |           </p>
102 |           <div class="flex flex-col items-center justify-center gap-2 mt-10 ">
103 |             <p class="text-xl font-bold ">Creativer Commons IBNSCO Online Ticketing</p>
104 |             <div class="h-1 bg-[#ec5242] w-10"></div>
105 |           </div>
106 | 
107 |           <p>
108 |             The logo of IBNSCO Online Ticketing 2023 was decided through the logo competition from Janaury to Febuary
109 |           </p>
110 |         </div>
111 | 
112 |         <div class="flex justify-center gap-5 items-center  text-black border-b-[#525050] ">
113 |           <img src="./images/logo1.jpg" alt="no internet" class="w-2/4 md:w-[32%]">
114 |         </div>
115 |       </div>
116 |       </div>
117 |     </section>
118 |     <section id="home1" class="flex flex-col items-center justify-center mt-20 text-center">
119 |       <div class="flex flex-col items-center justify-center">
120 |         <p class="mt-10 text-xl font-bold">IBNSCO Online Ticketing past events </p>
121 |         <div class="h-1 bg-[#ec5242] w-10"></div>
122 |       </div>
123 | 
124 |       <p class="flex mt-5 text-sm">Take a look at the lat tow IBNSCO Online Tickets which took place in Accra
125 |         Internation Conference and Nationa Theatre</p>
126 |       <div class="flex flex-col items-center justify-center gap-1 mt-10 md:flex md:flex-row">
127 |         <img src="./images/blacko.jpg" alt="no internet" class="w-[100%] md:w-[50%] md:h-[50%] z-[-1]">
128 |         <p id="aboutImgTxt1" class="text-xl font-light text-white "><span
129 |             class="text-3xl font-extrabold md:text-5xl">2023</span><br>VGMA AWARDS
130 |         </p>
131 | 
132 |         <img src="./images/sark.jpg" alt="no internet" class="w-[100%] md:w-[50  %] md:h-[50%] z-[-1]" />
133 |         <p id="aboutImgTxt1" class="text-xl font-light text-white"><span
134 |             class="text-3xl font-extrabold md:text-5xl">2023</span><br>BWIM CONCERT
135 |         </p>
136 |       </div>
137 |     </section>
138 |     <section class="grid grid-rows-1 gap-5 mt-20 block md:hidden  bg-[#272a31]">
139 |       <div class="flex flex-col items-center justify-center gap-2 ">
140 |         <h2 class="text-3xl text-center text-white">Sponsors</h2>
141 |         <div class="h-1 bg-[#ec5242] w-10"></div>
142 |       </div>
143 |       <div id="sponsors" class="mt-5 md:flex md:justify-center item-center ">
144 |         <img src="./images/gnpc.png" alt="no internet" height="50%" width="50%" class="mr-10 ">
145 |         <img src="./images/cosco.png" alt="no internet" height="10%" width="50%" class="mr-10">
146 |         <img src="./images/tv3.jpg" alt="no internet" height="10%" width="50%" class="mr-10">
147 |         <img src="./images//gpha.gif" alt="no internet" height="10%" width="50%" class="mr-10">
148 |         <img src="./images/cocobod.jpg" alt="no internet" height="10%" width="50%" class="mr-10">
149 |       </div>
150 |     </section>
151 | 
152 |     <footer class="mt-0 md:mt-20">
153 |       <div
154 |         class="flex justify-center gap-5 items-center bg-white text-[#272a31]  md:bg-[#272a31] md:text-white h-[24vh] ">
155 |         <span class="text-xl cursor-pointer text-Center">
156 |           </i><ion-icon name="mic-outline" class="text-[#ec5242] text-2xl text-center items-center"></ion-icon>
157 |           IBNSCO
158 |         </span>
159 |         <span class="text-sm md:text-xl">
160 |           Ghana online tickets for programs <br> Copyright &#169 2023 All rights
161 |         </span>
162 |       </div>
163 |     </footer>
164 |     <script src="./features.js"></script>
165 |     <script src="./Navbar.js"></script>
166 | </body>
167 | 
168 | </html>


--------------------------------------------------------------------------------
/docs/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en" data-theme="light">
  3 | 
  4 | <head>
  5 |   <meta charset="UTF-8" />
  6 |   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  7 |   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  8 |   <title>Online Ticket</title>
  9 |   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" />
 10 |   <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
 11 |   <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
 12 |   <link rel="stylesheet" href="./index.css" />
 13 |   <link rel="stylesheet" href="./dist/output.css">
 14 | </head>
 15 | 
 16 | <body class="font-[Lato]">
 17 |   <div class="w-full bg-[#272a31] text-white hidden md:block">
 18 |     <ul class=" mr-[13%] flex justify-end">
 19 |       <li class="mx-1 my-6 md:my-0">
 20 |         <a href="#" class="text-xl duration-500 hover:text-[#ec5242]"><ion-icon name="logo-facebook"></ion-icon></a>
 21 |       </li>
 22 |       <li class="mx-1 my-6 md:my-0">
 23 |         <a href="#" class="text-xl duration-500 hover:text-[#ec5242]"><ion-icon name="logo-twitter"></ion-icon></a>
 24 |       </li>
 25 |       <li class="mx-1 my-6 md:my-0">
 26 |         <a href="#" class="text-xl duration-500 hover:text-[#ec5242]">English</a>
 27 |       </li>
 28 |       <li class="mx-1 my-6 md:my-0">
 29 |         <a href="#" class="text-xl duration-500 hover:text-[#ec5242]">My Page</a>
 30 |       </li>
 31 |       <li class="mx-1 my-6 md:my-0">
 32 |         <a href="#" class="text-xl duration-500 hover:text-[#ec5242]">Logout</a>
 33 |       </li>
 34 |     </ul>
 35 |   </div>
 36 |   <nav class="p-5 bg-white shadow md:flex md:items-center md:justify-around">
 37 |     <div class="flex items-center justify-between">
 38 |       <span class="hidden text-2xl cursor-pointer text-Center md:block">
 39 |         <a href="./index.html">
 40 |           <ion-icon name="mic-outline" class="text-[#ec5242] text-3xl text-center items-center"></ion-icon>
 41 |           <span class="text-4xl">IBNSCO</span>
 42 |         </a>
 43 |       </span>
 44 |       <span class="block mx-2 text-3xl cursor-pointer md:hidden">
 45 |         <ion-icon name="menu" onclick="Menu(this)"></ion-icon>
 46 |       </span>
 47 |     </div>
 48 | 
 49 |     <ul id="nav_ul"
 50 |       class="text-sl md:flex md:items-center z-[1] bg-white md:bg-white md:z-auto md:static absolute bg-white w-full left-0 md:w-auto md:py-0 py-4 md:pl-0 pl-7 md:opacity-100 opacity-0 top-[-400px] transition-all ease-in duration-500">
 51 |       <li class="block mx-1 my-6 md:my-0 md:hidden">
 52 |         <a href="./index.html">
 53 |           <ion-icon name="mic-outline" class="text-[#ec5242] text-3xl text-center items-center"></ion-icon>
 54 |           <span class="text-4xl">IBNSCO</span>
 55 |         </a>
 56 |       </li>
 57 |       <li class="mx-1 my-6 md:my-0">
 58 |         <a href="./aboutme.html" class="text-xl duration-500 hover:text-[#ec5242]">About</a>
 59 |       </li>
 60 |       <li class="mx-1 my-6 md:my-0">
 61 |         <a href="#" class="text-xl duration-500 hover:text-[#ec5242]">Program</a>
 62 |       </li>
 63 |       <li class="mx-1 my-6 md:my-0">
 64 |         <a href="#" class="text-xl duration-500 hover:text-[#ec5242]">Features</a>
 65 |       </li>
 66 |       <li class="mx-1 my-6 md:my-0">
 67 |         <a href="#" class="text-xl duration-500 hover:text-[#ec5242]">Stream live</a>
 68 |       </li>
 69 |       <li class="mx-1 my-6 md:my-0">
 70 |         <a href="#" class="text-xl duration-500 hover:text-[#ec5242]">Gallery</a>
 71 |       </li>
 72 | 
 73 |       <button
 74 |         class="btn btn-outline hover:bg-[#ec5242] text-[#ec5242] border-4 hover:border-[#ec5242] duration-500 px-6 py-2 mx-1">
 75 |         Buy Ticket
 76 |       </button>
 77 |       <h2 class=""></h2>
 78 |     </ul>
 79 |   </nav>
 80 |   <main>
 81 |     <section id='main__section'>
 82 |       <div id="home" class="md:h-[720px] ">
 83 |         <div class=" text-[#ec5242] md:flex flex-row flex-2   mb-5 md:mb-10">
 84 |           <div class="text-start">
 85 |             <h1 class="items-center mt-5 text-xl font-light md:text-5xl">
 86 |               "Black Sherif"
 87 |             </h1>
 88 |             <span id="homeTitle" class="text-3xl font-extrabold md:text-7xl">The Genesis Edition<br />
 89 |               Global Concert <br />
 90 |               2023
 91 |             </span>
 92 |           </div>
 93 |           <div class="">
 94 |             <img src="./images/mic-gray.png" alt="no internet" width="100%"
 95 |               class="top-0 items-center hidden md:block" />
 96 |           </div>
 97 |         </div>
 98 |         <div class="bg-[#f2f2f2] border-2 border-[#d3d3d3] description text-[#272a31] text-xsm mb-5 md:mb-10">
 99 |           <p>
100 |             Leading up to the main concert in December 2023, we bring you “ The
101 |             Genesis ” a thrilling experience with Ghana’s favorite poster boy
102 |             Black Sherif.
103 |           </p>
104 |         </div>
105 |         <div id="venue">
106 |           <span id="date" class="text-2xl font-extrabold font-\[Lato\]">2023.03.17 (FRI) ~ 19(SUN)</span>
107 |           <p id="location" class="text-xl">@Accra Internation Conference</p>
108 |         </div>
109 |       </div>
110 |     </section>
111 | 
112 |     <section id="programSection" class="mx-auto bg-[#525050]   p-5">
113 |       <div class="flex flex-col items-center justify-center gap-2 mb-5">
114 |         <h2 class="text-2xl text-center text-white">Main Program</h2>
115 |         <div class="h-1 bg-[#ec5242] w-10"></div>
116 |       </div>
117 |       <ul class="" id="program__section">
118 |         <li id="hoverProgram" class="items-center shadow-lg bg-[#252525] mx-1 mt-8 md:w-[20%]">
119 |           <div class="flex flex-row items-center gap-2 p-5 md:flex-col">
120 |             <div class="flex justify-center rounded-sm overflow-hidden items-center w-[50px] md:w-[12%]">
121 |               <img src="./images/rap.jpg" alt="no internet" class="" />
122 |             </div>
123 |             <p
124 |               class="text-[#ec5242] text-sm md:text-2xl flex justify-center items-center w-[20%] md:w-[100%] md:text-center">
125 |               Hipop
126 |             </p>
127 |             <p class="text-white text-[10px] w-[50%] md:w-[100%] m-0 justify-justify md:text-center md:text-[14px]">
128 |               Hip hop music or hip-hop music, also known as rap music and formerly known as disco rap, is a genre of
129 |               popular music
130 |             </p>
131 |           </div>
132 |         </li>
133 |         <li id="hoverProgram" class="items-center shadow-lg bg-[#252525] mx-1 mt-8 md:w-[20%]">
134 |           <div class="flex flex-row items-center gap-2 p-5 md:flex-col">
135 |             <div class="flex justify-center rounded-sm overflow-hidden items-center w-[50px] md:w-[11%]">
136 |               <img src="./images/afrobeat.jpeg" alt="no internet" class="" />
137 |             </div>
138 |             <p
139 |               class="text-[#ec5242] text-sm md:text-2xl flex justify-center items-center w-[20%] md:w-[100%] md:text-center">
140 |               Afro Beat
141 |             </p>
142 |             <p class="text-white text-[10px] w-[50%] md:w-[100%] m-0 justify-justify md:text-center md:text-[14px]">
143 |               Afrobeat is a Nigerian music genre that involves the combination of West African musical styles and
144 |               American funk, jazz
145 |             </p>
146 |           </div>
147 |         </li>
148 |         <li id="hoverProgram" class="items-center shadow-lg bg-[#252525] mx-1 mt-8 md:w-[20%]">
149 |           <div class="flex flex-row items-center gap-2 p-5 md:flex-col">
150 |             <div class="flex justify-center rounded-sm overflow-hidden items-center w-[50px] md:w-[12%]">
151 |               <img src="./images/Highlife-.jpg" alt="no internet" class="" />
152 |             </div>
153 |             <p
154 |               class="text-[#ec5242] text-sm md:text-2xl flex justify-center items-center w-[20%] md:w-[100%] md:text-center">
155 |               High Life
156 |             </p>
157 |             <p class="text-white text-[10px] w-[50%] md:w-[100%] m-0 justify-justify md:text-center md:text-[14px]">
158 |               Highlife is a music genre that started in present-day Ghana in the 19th century, during its history as a
159 |               colony of the
160 |             </p>
161 |           </div>
162 |         </li>
163 |         <li id="hoverProgram" class="items-center shadow-lg bg-[#252525] mx-1 mt-8 md:w-[20%]">
164 |           <div class="flex flex-row items-center gap-2 p-5 md:flex-col">
165 |             <div class="flex justify-center rounded-sm overflow-hidden items-center w-[50px] md:w-[12%]">
166 |               <img src="./images/reggae.jpg" alt="no internet" class="" />
167 |             </div>
168 |             <p
169 |               class="text-[#ec5242] text-sm md:text-2xl flex justify-center items-center w-[20%] md:w-[100%] md:text-center">
170 |               Reggae
171 |             </p>
172 |             <p class="text-white text-[10px] w-[50%] md:w-[100%] m-0 justify-justify md:text-center md:text-[14px]">
173 |               Reggae is a music genre that originated in Jamaica in the late 1960s. The term also denotes the modern
174 |             </p>
175 |           </div>
176 |         </li>
177 |         <li id="hoverProgram" class="items-center shadow-lg bg-[#252525] mx-1 mt-8 md:w-[20%]">
178 |           <div class="flex flex-row items-center gap-2 p-5 md:flex-col">
179 |             <div class="flex justify-center rounded-sm overflow-hidden items-center w-[50px] md:w-[12%]">
180 |               <img src="./images/rab.jfif" alt="no internet" class="" />
181 |             </div>
182 |             <p
183 |               class="text-[#ec5242] text-sm md:text-2xl flex justify-center items-center w-[20%] md:w-[100%] md:text-center">
184 |               R & B
185 |             </p>
186 |             <p class="text-white text-[10px] w-[50%] md:w-[100%] m-0 justify-justify md:text-center md:text-[14px]">
187 |               Rhythm and blues, frequently abbreviated as R&B or R'n'B, is a genre of popular music that originated in
188 |             </p>
189 |           </div>
190 |         </li>
191 |       </ul>
192 |       <div class="hidden mt-8 text-center text-white underline cursor-pointer md:block">
193 |         <span>SEE THE WHOLE PROGRAM</span>
194 |       </div>
195 |       <div class="flex items-center justify-center block mt-10 md:hidden">
196 |         <button id="programBtn"
197 |           class="btn bg-[#ec5242] hover:text-white hover:bg-[#ec5242] font-light text-center text-sm mb-5">
198 |           Connect Live
199 |         </button>
200 |       </div>
201 |     </section>
202 | 
203 |     <section class="" id="feature__section">
204 |       <div id="feature__tittle"></div>
205 |       <div id="feature__container" class=""></div>
206 |     </section>
207 |     <section class="grid grid-rows-1 gap-5 mt-20 md grid-rows-5 h-[24vh] hidden md:block bg-[#272a31]">
208 |       <div class="flex flex-col items-center justify-center gap-2 mt-10">
209 |         <h2 class="text-3xl text-center text-white">Sponsors</h2>
210 |         <div class="h-1 bg-[#ec5242] w-10"></div>
211 |       </div>
212 |       <div class="flex justify-center mt-10 item-center">
213 |         <img src="./images/gnpc.png" alt="no internet" height="5%" width="5%" class="mr-10 ">
214 |         <img src="./images/cosco.png" alt="no internet" height="5%" width="5%" class="mr-10">
215 |         <img src="./images/tv3.jpg" alt="no internet" height="5%" width="5%" class="mr-10">
216 |         <img src="./images//gpha.gif" alt="no internet" height="5%" width="5%" class="mr-10">
217 |         <img src="./images/cocobod.jpg" alt="no internet" height="5%" width="5%" class="mr-10">
218 |       </div>
219 |     </section>
220 |   </main>
221 |   <footer>
222 |     <div class="flex justify-center gap-5 items-center h-[24vh] ">
223 |       <span class="hidden cursor-pointer text-7xl text-Center md:block">
224 |         </i><ion-icon name="mic-outline" class="text-[#ec5242] text-5xl text-center items-center"></ion-icon>
225 |         IBNSCO
226 |       </span>
227 |       <span class="hidden text-xl md:block">
228 |         Ghana online tickets for programs Copyright &#169 2023 All rights
229 |       </span>
230 |     </div>
231 |   </footer>
232 |   <script src="./features.js"></script>
233 |   <script src="./Navbar.js"></script>
234 | </body>
235 | 
236 | </html>


--------------------------------------------------------------------------------
/docs/dist/output.css:
--------------------------------------------------------------------------------
   1 | /*
   2 | ! tailwindcss v3.2.6 | MIT License | https://tailwindcss.com
   3 | */
   4 | 
   5 | /*
   6 | 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
   7 | 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
   8 | */
   9 | 
  10 | *,
  11 | ::before,
  12 | ::after {
  13 |   box-sizing: border-box;
  14 | 
  15 |   /* 1 */
  16 |   border-width: 0;
  17 | 
  18 |   /* 2 */
  19 |   border-style: solid;
  20 | 
  21 |   /* 2 */
  22 |   border-color: #e5e7eb;
  23 | 
  24 |   /* 2 */
  25 | }
  26 | 
  27 | ::before,
  28 | ::after {
  29 |   --tw-content: '';
  30 | }
  31 | 
  32 | /*
  33 | 1. Use a consistent sensible line-height in all browsers.
  34 | 2. Prevent adjustments of font size after orientation changes in iOS.
  35 | 3. Use a more readable tab size.
  36 | 4. Use the user's configured `sans` font-family by default.
  37 | 5. Use the user's configured `sans` font-feature-settings by default.
  38 | */
  39 | 
  40 | html {
  41 |   line-height: 1.5;
  42 | 
  43 |   /* 1 */
  44 |   -webkit-text-size-adjust: 100%;
  45 | 
  46 |   /* 2 */
  47 |   -moz-tab-size: 4;
  48 | 
  49 |   /* 3 */
  50 |   -o-tab-size: 4;
  51 |   tab-size: 4;
  52 | 
  53 |   /* 3 */
  54 |   font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  55 | 
  56 |   /* 4 */
  57 |   font-feature-settings: normal;
  58 | 
  59 |   /* 5 */
  60 | }
  61 | 
  62 | /*
  63 | 1. Remove the margin in all browsers.
  64 | 2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
  65 | */
  66 | 
  67 | body {
  68 |   margin: 0;
  69 | 
  70 |   /* 1 */
  71 |   line-height: inherit;
  72 | 
  73 |   /* 2 */
  74 | }
  75 | 
  76 | /*
  77 | 1. Add the correct height in Firefox.
  78 | 2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
  79 | 3. Ensure horizontal rules are visible by default.
  80 | */
  81 | 
  82 | hr {
  83 |   height: 0;
  84 | 
  85 |   /* 1 */
  86 |   color: inherit;
  87 | 
  88 |   /* 2 */
  89 |   border-top-width: 1px;
  90 | 
  91 |   /* 3 */
  92 | }
  93 | 
  94 | /*
  95 | Add the correct text decoration in Chrome, Edge, and Safari.
  96 | */
  97 | 
  98 | abbr:where([title]) {
  99 |   -webkit-text-decoration: underline dotted;
 100 |   text-decoration: underline dotted;
 101 | }
 102 | 
 103 | /*
 104 | Remove the default font size and weight for headings.
 105 | */
 106 | 
 107 | h1,
 108 | h2,
 109 | h3,
 110 | h4,
 111 | h5,
 112 | h6 {
 113 |   font-size: inherit;
 114 |   font-weight: inherit;
 115 | }
 116 | 
 117 | /*
 118 | Reset links to optimize for opt-in styling instead of opt-out.
 119 | */
 120 | 
 121 | a {
 122 |   color: inherit;
 123 |   text-decoration: inherit;
 124 | }
 125 | 
 126 | /*
 127 | Add the correct font weight in Edge and Safari.
 128 | */
 129 | 
 130 | b,
 131 | strong {
 132 |   font-weight: bolder;
 133 | }
 134 | 
 135 | /*
 136 | 1. Use the user's configured `mono` font family by default.
 137 | 2. Correct the odd `em` font sizing in all browsers.
 138 | */
 139 | 
 140 | code,
 141 | kbd,
 142 | samp,
 143 | pre {
 144 |   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 145 | 
 146 |   /* 1 */
 147 |   font-size: 1em;
 148 | 
 149 |   /* 2 */
 150 | }
 151 | 
 152 | /*
 153 | Add the correct font size in all browsers.
 154 | */
 155 | 
 156 | small {
 157 |   font-size: 80%;
 158 | }
 159 | 
 160 | /*
 161 | Prevent `sub` and `sup` elements from affecting the line height in all browsers.
 162 | */
 163 | 
 164 | sub,
 165 | sup {
 166 |   font-size: 75%;
 167 |   line-height: 0;
 168 |   position: relative;
 169 |   vertical-align: baseline;
 170 | }
 171 | 
 172 | sub {
 173 |   bottom: -0.25em;
 174 | }
 175 | 
 176 | sup {
 177 |   top: -0.5em;
 178 | }
 179 | 
 180 | /*
 181 | 1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
 182 | 2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
 183 | 3. Remove gaps between table borders by default.
 184 | */
 185 | 
 186 | table {
 187 |   text-indent: 0;
 188 | 
 189 |   /* 1 */
 190 |   border-color: inherit;
 191 | 
 192 |   /* 2 */
 193 |   border-collapse: collapse;
 194 | 
 195 |   /* 3 */
 196 | }
 197 | 
 198 | /*
 199 | 1. Change the font styles in all browsers.
 200 | 2. Remove the margin in Firefox and Safari.
 201 | 3. Remove default padding in all browsers.
 202 | */
 203 | 
 204 | button,
 205 | input,
 206 | optgroup,
 207 | select,
 208 | textarea {
 209 |   font-family: inherit;
 210 | 
 211 |   /* 1 */
 212 |   font-size: 100%;
 213 | 
 214 |   /* 1 */
 215 |   font-weight: inherit;
 216 | 
 217 |   /* 1 */
 218 |   line-height: inherit;
 219 | 
 220 |   /* 1 */
 221 |   color: inherit;
 222 | 
 223 |   /* 1 */
 224 |   margin: 0;
 225 | 
 226 |   /* 2 */
 227 |   padding: 0;
 228 | 
 229 |   /* 3 */
 230 | }
 231 | 
 232 | /*
 233 | Remove the inheritance of text transform in Edge and Firefox.
 234 | */
 235 | 
 236 | button,
 237 | select {
 238 |   text-transform: none;
 239 | }
 240 | 
 241 | /*
 242 | 1. Correct the inability to style clickable types in iOS and Safari.
 243 | 2. Remove default button styles.
 244 | */
 245 | 
 246 | button,
 247 | [type='button'],
 248 | [type='reset'],
 249 | [type='submit'] {
 250 |   -webkit-appearance: button;
 251 | 
 252 |   /* 1 */
 253 |   background-color: transparent;
 254 | 
 255 |   /* 2 */
 256 |   background-image: none;
 257 | 
 258 |   /* 2 */
 259 | }
 260 | 
 261 | /*
 262 | Use the modern Firefox focus style for all focusable elements.
 263 | */
 264 | 
 265 | :-moz-focusring {
 266 |   outline: auto;
 267 | }
 268 | 
 269 | /*
 270 | Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
 271 | */
 272 | 
 273 | :-moz-ui-invalid {
 274 |   box-shadow: none;
 275 | }
 276 | 
 277 | /*
 278 | Add the correct vertical alignment in Chrome and Firefox.
 279 | */
 280 | 
 281 | progress {
 282 |   vertical-align: baseline;
 283 | }
 284 | 
 285 | /*
 286 | Correct the cursor style of increment and decrement buttons in Safari.
 287 | */
 288 | 
 289 | ::-webkit-inner-spin-button,
 290 | ::-webkit-outer-spin-button {
 291 |   height: auto;
 292 | }
 293 | 
 294 | /*
 295 | 1. Correct the odd appearance in Chrome and Safari.
 296 | 2. Correct the outline style in Safari.
 297 | */
 298 | 
 299 | [type='search'] {
 300 |   -webkit-appearance: textfield;
 301 | 
 302 |   /* 1 */
 303 |   outline-offset: -2px;
 304 | 
 305 |   /* 2 */
 306 | }
 307 | 
 308 | /*
 309 | Remove the inner padding in Chrome and Safari on macOS.
 310 | */
 311 | 
 312 | ::-webkit-search-decoration {
 313 |   -webkit-appearance: none;
 314 | }
 315 | 
 316 | /*
 317 | 1. Correct the inability to style clickable types in iOS and Safari.
 318 | 2. Change font properties to `inherit` in Safari.
 319 | */
 320 | 
 321 | ::-webkit-file-upload-button {
 322 |   -webkit-appearance: button;
 323 | 
 324 |   /* 1 */
 325 |   font: inherit;
 326 | 
 327 |   /* 2 */
 328 | }
 329 | 
 330 | /*
 331 | Add the correct display in Chrome and Safari.
 332 | */
 333 | 
 334 | summary {
 335 |   display: list-item;
 336 | }
 337 | 
 338 | /*
 339 | Removes the default spacing and border for appropriate elements.
 340 | */
 341 | 
 342 | blockquote,
 343 | dl,
 344 | dd,
 345 | h1,
 346 | h2,
 347 | h3,
 348 | h4,
 349 | h5,
 350 | h6,
 351 | hr,
 352 | figure,
 353 | p,
 354 | pre {
 355 |   margin: 0;
 356 | }
 357 | 
 358 | fieldset {
 359 |   margin: 0;
 360 |   padding: 0;
 361 | }
 362 | 
 363 | legend {
 364 |   padding: 0;
 365 | }
 366 | 
 367 | ol,
 368 | ul,
 369 | menu {
 370 |   list-style: none;
 371 |   margin: 0;
 372 |   padding: 0;
 373 | }
 374 | 
 375 | /*
 376 | Prevent resizing textareas horizontally by default.
 377 | */
 378 | 
 379 | textarea {
 380 |   resize: vertical;
 381 | }
 382 | 
 383 | /*
 384 | 1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
 385 | 2. Set the default placeholder color to the user's configured gray 400 color.
 386 | */
 387 | 
 388 | input::-moz-placeholder,
 389 | textarea::-moz-placeholder {
 390 |   opacity: 1;
 391 | 
 392 |   /* 1 */
 393 |   color: #9ca3af;
 394 | 
 395 |   /* 2 */
 396 | }
 397 | 
 398 | input::placeholder,
 399 | textarea::placeholder {
 400 |   opacity: 1;
 401 | 
 402 |   /* 1 */
 403 |   color: #9ca3af;
 404 | 
 405 |   /* 2 */
 406 | }
 407 | 
 408 | /*
 409 | Set the default cursor for buttons.
 410 | */
 411 | 
 412 | button,
 413 | [role="button"] {
 414 |   cursor: pointer;
 415 | }
 416 | 
 417 | /*
 418 | Make sure disabled buttons don't get the pointer cursor.
 419 | */
 420 | 
 421 | :disabled {
 422 |   cursor: default;
 423 | }
 424 | 
 425 | /*
 426 | 1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
 427 | 2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
 428 |    This can trigger a poorly considered lint error in some tools but is included by design.
 429 | */
 430 | 
 431 | img,
 432 | svg,
 433 | video,
 434 | canvas,
 435 | audio,
 436 | iframe,
 437 | embed,
 438 | object {
 439 |   display: block;
 440 | 
 441 |   /* 1 */
 442 |   vertical-align: middle;
 443 | 
 444 |   /* 2 */
 445 | }
 446 | 
 447 | /*
 448 | Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
 449 | */
 450 | 
 451 | img,
 452 | video {
 453 |   max-width: 100%;
 454 |   height: auto;
 455 | }
 456 | 
 457 | /* Make elements with the HTML hidden attribute stay hidden by default */
 458 | 
 459 | [hidden] {
 460 |   display: none;
 461 | }
 462 | 
 463 | :root,
 464 | [data-theme] {
 465 |   background-color: hsla(var(--b1) / var(--tw-bg-opacity, 1));
 466 |   color: hsla(var(--bc) / var(--tw-text-opacity, 1));
 467 | }
 468 | 
 469 | html {
 470 |   -webkit-tap-highlight-color: transparent;
 471 | }
 472 | 
 473 | :root {
 474 |   color-scheme: light;
 475 | 
 476 |   --pf: 258.89 94.378% 40.941%;
 477 |   --sf: 314 100% 37.647%;
 478 |   --af: 174 60% 40.784%;
 479 |   --nf: 219 14.085% 22.275%;
 480 |   --in: 198 93% 60%;
 481 |   --su: 158 64% 52%;
 482 |   --wa: 43 96% 56%;
 483 |   --er: 0 91% 71%;
 484 |   --inc: 198 100% 12%;
 485 |   --suc: 158 100% 10%;
 486 |   --wac: 43 100% 11%;
 487 |   --erc: 0 100% 14%;
 488 |   --rounded-box: 1rem;
 489 |   --rounded-btn: 0.5rem;
 490 |   --rounded-badge: 1.9rem;
 491 |   --animation-btn: 0.25s;
 492 |   --animation-input: 0.2s;
 493 |   --btn-text-case: uppercase;
 494 |   --btn-focus-scale: 0.95;
 495 |   --border-btn: 1px;
 496 |   --tab-border: 1px;
 497 |   --tab-radius: 0.5rem;
 498 |   --p: 258.89 94.378% 51.176%;
 499 |   --pc: 0 0% 100%;
 500 |   --s: 314 100% 47.059%;
 501 |   --sc: 0 0% 100%;
 502 |   --a: 174 60% 50.98%;
 503 |   --ac: 174.71 43.59% 15.294%;
 504 |   --n: 219 14.085% 27.843%;
 505 |   --nc: 0 0% 100%;
 506 |   --b1: 0 0% 100%;
 507 |   --b2: 0 0% 94.902%;
 508 |   --b3: 180 1.9608% 90%;
 509 |   --bc: 215 27.907% 16.863%;
 510 | }
 511 | 
 512 | @media (prefers-color-scheme: dark) {
 513 |   :root {
 514 |     color-scheme: dark;
 515 | 
 516 |     --pf: 262.35 80.315% 40.157%;
 517 |     --sf: 315.75 70.196% 40%;
 518 |     --af: 174.69 70.335% 32.784%;
 519 |     --in: 198 93% 60%;
 520 |     --su: 158 64% 52%;
 521 |     --wa: 43 96% 56%;
 522 |     --er: 0 91% 71%;
 523 |     --inc: 198 100% 12%;
 524 |     --suc: 158 100% 10%;
 525 |     --wac: 43 100% 11%;
 526 |     --erc: 0 100% 14%;
 527 |     --rounded-box: 1rem;
 528 |     --rounded-btn: 0.5rem;
 529 |     --rounded-badge: 1.9rem;
 530 |     --animation-btn: 0.25s;
 531 |     --animation-input: 0.2s;
 532 |     --btn-text-case: uppercase;
 533 |     --btn-focus-scale: 0.95;
 534 |     --border-btn: 1px;
 535 |     --tab-border: 1px;
 536 |     --tab-radius: 0.5rem;
 537 |     --p: 262.35 80.315% 50.196%;
 538 |     --pc: 0 0% 100%;
 539 |     --s: 315.75 70.196% 50%;
 540 |     --sc: 0 0% 100%;
 541 |     --a: 174.69 70.335% 40.98%;
 542 |     --ac: 0 0% 100%;
 543 |     --n: 218.18 18.033% 11.961%;
 544 |     --nf: 222.86 17.073% 8.0392%;
 545 |     --nc: 220 13.376% 69.216%;
 546 |     --b1: 220 17.647% 20%;
 547 |     --b2: 220 17.241% 17.059%;
 548 |     --b3: 218.57 17.949% 15.294%;
 549 |     --bc: 220 13.376% 69.216%;
 550 |   }
 551 | }
 552 | 
 553 | [data-theme=light] {
 554 |   color-scheme: light;
 555 | 
 556 |   --pf: 258.89 94.378% 40.941%;
 557 |   --sf: 314 100% 37.647%;
 558 |   --af: 174 60% 40.784%;
 559 |   --nf: 219 14.085% 22.275%;
 560 |   --in: 198 93% 60%;
 561 |   --su: 158 64% 52%;
 562 |   --wa: 43 96% 56%;
 563 |   --er: 0 91% 71%;
 564 |   --inc: 198 100% 12%;
 565 |   --suc: 158 100% 10%;
 566 |   --wac: 43 100% 11%;
 567 |   --erc: 0 100% 14%;
 568 |   --rounded-box: 1rem;
 569 |   --rounded-btn: 0.5rem;
 570 |   --rounded-badge: 1.9rem;
 571 |   --animation-btn: 0.25s;
 572 |   --animation-input: 0.2s;
 573 |   --btn-text-case: uppercase;
 574 |   --btn-focus-scale: 0.95;
 575 |   --border-btn: 1px;
 576 |   --tab-border: 1px;
 577 |   --tab-radius: 0.5rem;
 578 |   --p: 258.89 94.378% 51.176%;
 579 |   --pc: 0 0% 100%;
 580 |   --s: 314 100% 47.059%;
 581 |   --sc: 0 0% 100%;
 582 |   --a: 174 60% 50.98%;
 583 |   --ac: 174.71 43.59% 15.294%;
 584 |   --n: 219 14.085% 27.843%;
 585 |   --nc: 0 0% 100%;
 586 |   --b1: 0 0% 100%;
 587 |   --b2: 0 0% 94.902%;
 588 |   --b3: 180 1.9608% 90%;
 589 |   --bc: 215 27.907% 16.863%;
 590 | }
 591 | 
 592 | [data-theme=dark] {
 593 |   color-scheme: dark;
 594 | 
 595 |   --pf: 262.35 80.315% 40.157%;
 596 |   --sf: 315.75 70.196% 40%;
 597 |   --af: 174.69 70.335% 32.784%;
 598 |   --in: 198 93% 60%;
 599 |   --su: 158 64% 52%;
 600 |   --wa: 43 96% 56%;
 601 |   --er: 0 91% 71%;
 602 |   --inc: 198 100% 12%;
 603 |   --suc: 158 100% 10%;
 604 |   --wac: 43 100% 11%;
 605 |   --erc: 0 100% 14%;
 606 |   --rounded-box: 1rem;
 607 |   --rounded-btn: 0.5rem;
 608 |   --rounded-badge: 1.9rem;
 609 |   --animation-btn: 0.25s;
 610 |   --animation-input: 0.2s;
 611 |   --btn-text-case: uppercase;
 612 |   --btn-focus-scale: 0.95;
 613 |   --border-btn: 1px;
 614 |   --tab-border: 1px;
 615 |   --tab-radius: 0.5rem;
 616 |   --p: 262.35 80.315% 50.196%;
 617 |   --pc: 0 0% 100%;
 618 |   --s: 315.75 70.196% 50%;
 619 |   --sc: 0 0% 100%;
 620 |   --a: 174.69 70.335% 40.98%;
 621 |   --ac: 0 0% 100%;
 622 |   --n: 218.18 18.033% 11.961%;
 623 |   --nf: 222.86 17.073% 8.0392%;
 624 |   --nc: 220 13.376% 69.216%;
 625 |   --b1: 220 17.647% 20%;
 626 |   --b2: 220 17.241% 17.059%;
 627 |   --b3: 218.57 17.949% 15.294%;
 628 |   --bc: 220 13.376% 69.216%;
 629 | }
 630 | 
 631 | [data-theme=cupcake] {
 632 |   color-scheme: light;
 633 | 
 634 |   --pf: 183.03 47.368% 47.216%;
 635 |   --sf: 338.25 71.429% 62.431%;
 636 |   --af: 39 84.112% 46.431%;
 637 |   --nf: 280 46.479% 11.137%;
 638 |   --in: 198 93% 60%;
 639 |   --su: 158 64% 52%;
 640 |   --wa: 43 96% 56%;
 641 |   --er: 0 91% 71%;
 642 |   --pc: 183.03 100% 11.804%;
 643 |   --sc: 338.25 100% 15.608%;
 644 |   --ac: 39 100% 11.608%;
 645 |   --nc: 280 82.688% 82.784%;
 646 |   --inc: 198 100% 12%;
 647 |   --suc: 158 100% 10%;
 648 |   --wac: 43 100% 11%;
 649 |   --erc: 0 100% 14%;
 650 |   --rounded-box: 1rem;
 651 |   --rounded-badge: 1.9rem;
 652 |   --animation-btn: 0.25s;
 653 |   --animation-input: 0.2s;
 654 |   --btn-text-case: uppercase;
 655 |   --btn-focus-scale: 0.95;
 656 |   --border-btn: 1px;
 657 |   --p: 183.03 47.368% 59.02%;
 658 |   --s: 338.25 71.429% 78.039%;
 659 |   --a: 39 84.112% 58.039%;
 660 |   --n: 280 46.479% 13.922%;
 661 |   --b1: 24 33.333% 97.059%;
 662 |   --b2: 26.667 21.951% 91.961%;
 663 |   --b3: 22.5 14.286% 89.02%;
 664 |   --bc: 280 46.479% 13.922%;
 665 |   --rounded-btn: 1.9rem;
 666 |   --tab-border: 2px;
 667 |   --tab-radius: 0.5rem;
 668 | }
 669 | 
 670 | [data-theme=bumblebee] {
 671 |   color-scheme: light;
 672 | 
 673 |   --pf: 41.124 74.167% 42.353%;
 674 |   --sf: 49.901 94.393% 46.431%;
 675 |   --af: 240 33.333% 11.294%;
 676 |   --nf: 240 33.333% 11.294%;
 677 |   --b2: 0 0% 90%;
 678 |   --b3: 0 0% 81%;
 679 |   --in: 198 93% 60%;
 680 |   --su: 158 64% 52%;
 681 |   --wa: 43 96% 56%;
 682 |   --er: 0 91% 71%;
 683 |   --bc: 0 0% 20%;
 684 |   --ac: 240 60.274% 82.824%;
 685 |   --nc: 240 60.274% 82.824%;
 686 |   --inc: 198 100% 12%;
 687 |   --suc: 158 100% 10%;
 688 |   --wac: 43 100% 11%;
 689 |   --erc: 0 100% 14%;
 690 |   --rounded-box: 1rem;
 691 |   --rounded-btn: 0.5rem;
 692 |   --rounded-badge: 1.9rem;
 693 |   --animation-btn: 0.25s;
 694 |   --animation-input: 0.2s;
 695 |   --btn-text-case: uppercase;
 696 |   --btn-focus-scale: 0.95;
 697 |   --border-btn: 1px;
 698 |   --tab-border: 1px;
 699 |   --tab-radius: 0.5rem;
 700 |   --p: 41.124 74.167% 52.941%;
 701 |   --pc: 240 33.333% 14.118%;
 702 |   --s: 49.901 94.393% 58.039%;
 703 |   --sc: 240 33.333% 14.118%;
 704 |   --a: 240 33.333% 14.118%;
 705 |   --n: 240 33.333% 14.118%;
 706 |   --b1: 0 0% 100%;
 707 | }
 708 | 
 709 | [data-theme=emerald] {
 710 |   color-scheme: light;
 711 | 
 712 |   --pf: 141.18 50% 48%;
 713 |   --sf: 218.88 96.078% 48%;
 714 |   --af: 9.8901 81.25% 44.863%;
 715 |   --nf: 219.23 20.312% 20.078%;
 716 |   --b2: 0 0% 90%;
 717 |   --b3: 0 0% 81%;
 718 |   --in: 198 93% 60%;
 719 |   --su: 158 64% 52%;
 720 |   --wa: 43 96% 56%;
 721 |   --er: 0 91% 71%;
 722 |   --inc: 198 100% 12%;
 723 |   --suc: 158 100% 10%;
 724 |   --wac: 43 100% 11%;
 725 |   --erc: 0 100% 14%;
 726 |   --rounded-box: 1rem;
 727 |   --rounded-btn: 0.5rem;
 728 |   --rounded-badge: 1.9rem;
 729 |   --btn-text-case: uppercase;
 730 |   --border-btn: 1px;
 731 |   --tab-border: 1px;
 732 |   --tab-radius: 0.5rem;
 733 |   --p: 141.18 50% 60%;
 734 |   --pc: 151.11 28.421% 18.627%;
 735 |   --s: 218.88 96.078% 60%;
 736 |   --sc: 210 20% 98.039%;
 737 |   --a: 9.8901 81.25% 56.078%;
 738 |   --ac: 210 20% 98.039%;
 739 |   --n: 219.23 20.312% 25.098%;
 740 |   --nc: 210 20% 98.039%;
 741 |   --b1: 0 0% 100%;
 742 |   --bc: 219.23 20.312% 25.098%;
 743 |   --animation-btn: 0;
 744 |   --animation-input: 0;
 745 |   --btn-focus-scale: 1;
 746 | }
 747 | 
 748 | [data-theme=corporate] {
 749 |   color-scheme: light;
 750 | 
 751 |   --pf: 229.09 95.652% 51.137%;
 752 |   --sf: 214.91 26.316% 47.216%;
 753 |   --af: 154.2 49.02% 48%;
 754 |   --nf: 233.33 27.273% 10.353%;
 755 |   --b2: 0 0% 90%;
 756 |   --b3: 0 0% 81%;
 757 |   --in: 198 93% 60%;
 758 |   --su: 158 64% 52%;
 759 |   --wa: 43 96% 56%;
 760 |   --er: 0 91% 71%;
 761 |   --pc: 229.09 100% 92.784%;
 762 |   --sc: 214.91 100% 11.804%;
 763 |   --ac: 154.2 100% 12%;
 764 |   --inc: 198 100% 12%;
 765 |   --suc: 158 100% 10%;
 766 |   --wac: 43 100% 11%;
 767 |   --erc: 0 100% 14%;
 768 |   --btn-text-case: uppercase;
 769 |   --border-btn: 1px;
 770 |   --tab-border: 1px;
 771 |   --tab-radius: 0.5rem;
 772 |   --p: 229.09 95.652% 63.922%;
 773 |   --s: 214.91 26.316% 59.02%;
 774 |   --a: 154.2 49.02% 60%;
 775 |   --n: 233.33 27.273% 12.941%;
 776 |   --nc: 210 38.462% 94.902%;
 777 |   --b1: 0 0% 100%;
 778 |   --bc: 233.33 27.273% 12.941%;
 779 |   --rounded-box: 0.25rem;
 780 |   --rounded-btn: 0.125rem;
 781 |   --rounded-badge: 0.125rem;
 782 |   --animation-btn: 0;
 783 |   --animation-input: 0;
 784 |   --btn-focus-scale: 1;
 785 | }
 786 | 
 787 | [data-theme=synthwave] {
 788 |   color-scheme: dark;
 789 | 
 790 |   --pf: 320.73 69.62% 55.216%;
 791 |   --sf: 197.03 86.592% 51.922%;
 792 |   --af: 48 89.041% 45.647%;
 793 |   --nf: 253.22 60.825% 15.216%;
 794 |   --b2: 253.85 59.091% 23.294%;
 795 |   --b3: 253.85 59.091% 20.965%;
 796 |   --pc: 320.73 100% 13.804%;
 797 |   --sc: 197.03 100% 12.98%;
 798 |   --ac: 48 100% 11.412%;
 799 |   --rounded-box: 1rem;
 800 |   --rounded-btn: 0.5rem;
 801 |   --rounded-badge: 1.9rem;
 802 |   --animation-btn: 0.25s;
 803 |   --animation-input: 0.2s;
 804 |   --btn-text-case: uppercase;
 805 |   --btn-focus-scale: 0.95;
 806 |   --border-btn: 1px;
 807 |   --tab-border: 1px;
 808 |   --tab-radius: 0.5rem;
 809 |   --p: 320.73 69.62% 69.02%;
 810 |   --s: 197.03 86.592% 64.902%;
 811 |   --a: 48 89.041% 57.059%;
 812 |   --n: 253.22 60.825% 19.02%;
 813 |   --nc: 260 60% 98.039%;
 814 |   --b1: 253.85 59.091% 25.882%;
 815 |   --bc: 260 60% 98.039%;
 816 |   --in: 199.13 86.957% 63.922%;
 817 |   --inc: 257.45 63.218% 17.059%;
 818 |   --su: 168.1 74.233% 68.039%;
 819 |   --suc: 257.45 63.218% 17.059%;
 820 |   --wa: 48 89.041% 57.059%;
 821 |   --wac: 257.45 63.218% 17.059%;
 822 |   --er: 351.85 73.636% 56.863%;
 823 |   --erc: 260 60% 98.039%;
 824 | }
 825 | 
 826 | [data-theme=retro] {
 827 |   color-scheme: light;
 828 | 
 829 |   --pf: 2.6667 73.77% 60.863%;
 830 |   --sf: 144.62 27.273% 57.569%;
 831 |   --af: 49.024 67.213% 60.863%;
 832 |   --nf: 41.667 16.822% 33.569%;
 833 |   --inc: 221.21 100% 90.667%;
 834 |   --suc: 142.13 100% 87.255%;
 835 |   --wac: 32.133 100% 8.7451%;
 836 |   --erc: 0 100% 90.118%;
 837 |   --animation-btn: 0.25s;
 838 |   --animation-input: 0.2s;
 839 |   --btn-text-case: uppercase;
 840 |   --btn-focus-scale: 0.95;
 841 |   --border-btn: 1px;
 842 |   --tab-border: 1px;
 843 |   --tab-radius: 0.5rem;
 844 |   --p: 2.6667 73.77% 76.078%;
 845 |   --pc: 345 5.2632% 14.902%;
 846 |   --s: 144.62 27.273% 71.961%;
 847 |   --sc: 345 5.2632% 14.902%;
 848 |   --a: 49.024 67.213% 76.078%;
 849 |   --ac: 345 5.2632% 14.902%;
 850 |   --n: 41.667 16.822% 41.961%;
 851 |   --nc: 45 47.059% 80%;
 852 |   --b1: 45 47.059% 80%;
 853 |   --b2: 45.283 37.063% 71.961%;
 854 |   --b3: 42.188 35.955% 65.098%;
 855 |   --bc: 345 5.2632% 14.902%;
 856 |   --in: 221.21 83.193% 53.333%;
 857 |   --su: 142.13 76.216% 36.275%;
 858 |   --wa: 32.133 94.619% 43.725%;
 859 |   --er: 0 72.222% 50.588%;
 860 |   --rounded-box: 0.4rem;
 861 |   --rounded-btn: 0.4rem;
 862 |   --rounded-badge: 0.4rem;
 863 | }
 864 | 
 865 | [data-theme=cyberpunk] {
 866 |   color-scheme: light;
 867 | 
 868 |   --pf: 344.78 100% 58.353%;
 869 |   --sf: 195.12 80.392% 56%;
 870 |   --af: 276 74.324% 56.784%;
 871 |   --nf: 57.273 100% 10.353%;
 872 |   --b2: 56 100% 45%;
 873 |   --b3: 56 100% 40.5%;
 874 |   --in: 198 93% 60%;
 875 |   --su: 158 64% 52%;
 876 |   --wa: 43 96% 56%;
 877 |   --er: 0 91% 71%;
 878 |   --bc: 56 100% 10%;
 879 |   --pc: 344.78 100% 14.588%;
 880 |   --sc: 195.12 100% 14%;
 881 |   --ac: 276 100% 14.196%;
 882 |   --inc: 198 100% 12%;
 883 |   --suc: 158 100% 10%;
 884 |   --wac: 43 100% 11%;
 885 |   --erc: 0 100% 14%;
 886 |   --animation-btn: 0.25s;
 887 |   --animation-input: 0.2s;
 888 |   --btn-text-case: uppercase;
 889 |   --btn-focus-scale: 0.95;
 890 |   --border-btn: 1px;
 891 |   --tab-border: 1px;
 892 | 
 893 |   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
 894 | 
 895 |   --p: 344.78 100% 72.941%;
 896 |   --s: 195.12 80.392% 70%;
 897 |   --a: 276 74.324% 70.98%;
 898 |   --n: 57.273 100% 12.941%;
 899 |   --nc: 56 100% 50%;
 900 |   --b1: 56 100% 50%;
 901 |   --rounded-box: 0;
 902 |   --rounded-btn: 0;
 903 |   --rounded-badge: 0;
 904 |   --tab-radius: 0;
 905 | }
 906 | 
 907 | [data-theme=valentine] {
 908 |   color-scheme: light;
 909 | 
 910 |   --pf: 353.23 73.81% 53.647%;
 911 |   --sf: 254.12 86.441% 61.49%;
 912 |   --af: 181.41 55.556% 56%;
 913 |   --nf: 336 42.857% 38.431%;
 914 |   --b2: 318.46 46.429% 80.118%;
 915 |   --b3: 318.46 46.429% 72.106%;
 916 |   --pc: 353.23 100% 13.412%;
 917 |   --sc: 254.12 100% 15.373%;
 918 |   --ac: 181.41 100% 14%;
 919 |   --inc: 221.21 100% 90.667%;
 920 |   --suc: 142.13 100% 87.255%;
 921 |   --wac: 32.133 100% 8.7451%;
 922 |   --erc: 0 100% 90.118%;
 923 |   --rounded-box: 1rem;
 924 |   --rounded-badge: 1.9rem;
 925 |   --animation-btn: 0.25s;
 926 |   --animation-input: 0.2s;
 927 |   --btn-text-case: uppercase;
 928 |   --btn-focus-scale: 0.95;
 929 |   --border-btn: 1px;
 930 |   --tab-border: 1px;
 931 |   --tab-radius: 0.5rem;
 932 |   --p: 353.23 73.81% 67.059%;
 933 |   --s: 254.12 86.441% 76.863%;
 934 |   --a: 181.41 55.556% 70%;
 935 |   --n: 336 42.857% 48.039%;
 936 |   --nc: 318.46 46.429% 89.02%;
 937 |   --b1: 318.46 46.429% 89.02%;
 938 |   --bc: 343.64 38.462% 28.039%;
 939 |   --in: 221.21 83.193% 53.333%;
 940 |   --su: 142.13 76.216% 36.275%;
 941 |   --wa: 32.133 94.619% 43.725%;
 942 |   --er: 0 72.222% 50.588%;
 943 |   --rounded-btn: 1.9rem;
 944 | }
 945 | 
 946 | [data-theme=halloween] {
 947 |   color-scheme: dark;
 948 | 
 949 |   --pf: 31.927 89.344% 41.725%;
 950 |   --sf: 271.22 45.794% 33.569%;
 951 |   --af: 91.071 100% 26.353%;
 952 |   --nf: 180 3.5714% 8.7843%;
 953 |   --b2: 0 0% 11.647%;
 954 |   --b3: 0 0% 10.482%;
 955 |   --bc: 0 0% 82.588%;
 956 |   --sc: 271.22 100% 88.392%;
 957 |   --ac: 91.071 100% 6.5882%;
 958 |   --nc: 180 4.8458% 82.196%;
 959 |   --inc: 221.21 100% 90.667%;
 960 |   --suc: 142.13 100% 87.255%;
 961 |   --wac: 32.133 100% 8.7451%;
 962 |   --erc: 0 100% 90.118%;
 963 |   --rounded-box: 1rem;
 964 |   --rounded-btn: 0.5rem;
 965 |   --rounded-badge: 1.9rem;
 966 |   --animation-btn: 0.25s;
 967 |   --animation-input: 0.2s;
 968 |   --btn-text-case: uppercase;
 969 |   --btn-focus-scale: 0.95;
 970 |   --border-btn: 1px;
 971 |   --tab-border: 1px;
 972 |   --tab-radius: 0.5rem;
 973 |   --p: 31.927 89.344% 52.157%;
 974 |   --pc: 180 7.3171% 8.0392%;
 975 |   --s: 271.22 45.794% 41.961%;
 976 |   --a: 91.071 100% 32.941%;
 977 |   --n: 180 3.5714% 10.98%;
 978 |   --b1: 0 0% 12.941%;
 979 |   --in: 221.21 83.193% 53.333%;
 980 |   --su: 142.13 76.216% 36.275%;
 981 |   --wa: 32.133 94.619% 43.725%;
 982 |   --er: 0 72.222% 50.588%;
 983 | }
 984 | 
 985 | [data-theme=garden] {
 986 |   color-scheme: light;
 987 | 
 988 |   --pf: 138.86 15.982% 34.353%;
 989 |   --sf: 96.923 37.143% 74.51%;
 990 |   --af: 0 67.742% 75.137%;
 991 |   --nf: 0 3.9106% 28.078%;
 992 |   --b2: 0 4.3478% 81.882%;
 993 |   --b3: 0 4.3478% 73.694%;
 994 |   --in: 198 93% 60%;
 995 |   --su: 158 64% 52%;
 996 |   --wa: 43 96% 56%;
 997 |   --er: 0 91% 71%;
 998 |   --pc: 138.86 100% 88.588%;
 999 |   --inc: 198 100% 12%;
1000 |   --suc: 158 100% 10%;
1001 |   --wac: 43 100% 11%;
1002 |   --erc: 0 100% 14%;
1003 |   --rounded-box: 1rem;
1004 |   --rounded-btn: 0.5rem;
1005 |   --rounded-badge: 1.9rem;
1006 |   --animation-btn: 0.25s;
1007 |   --animation-input: 0.2s;
1008 |   --btn-text-case: uppercase;
1009 |   --btn-focus-scale: 0.95;
1010 |   --border-btn: 1px;
1011 |   --tab-border: 1px;
1012 |   --tab-radius: 0.5rem;
1013 |   --p: 138.86 15.982% 42.941%;
1014 |   --s: 96.923 37.143% 93.137%;
1015 |   --sc: 96 32.468% 15.098%;
1016 |   --a: 0 67.742% 93.922%;
1017 |   --ac: 0 21.951% 16.078%;
1018 |   --n: 0 3.9106% 35.098%;
1019 |   --nc: 0 4.3478% 90.98%;
1020 |   --b1: 0 4.3478% 90.98%;
1021 |   --bc: 0 3.2258% 6.0784%;
1022 | }
1023 | 
1024 | [data-theme=forest] {
1025 |   color-scheme: dark;
1026 | 
1027 |   --pf: 141.04 71.963% 33.569%;
1028 |   --sf: 140.98 74.694% 38.431%;
1029 |   --af: 35.148 68.98% 41.569%;
1030 |   --nf: 0 9.6774% 4.8627%;
1031 |   --b2: 0 12.195% 7.2353%;
1032 |   --b3: 0 12.195% 6.5118%;
1033 |   --in: 198 93% 60%;
1034 |   --su: 158 64% 52%;
1035 |   --wa: 43 96% 56%;
1036 |   --er: 0 91% 71%;
1037 |   --bc: 0 11.727% 81.608%;
1038 |   --sc: 140.98 100% 9.6078%;
1039 |   --ac: 35.148 100% 10.392%;
1040 |   --nc: 0 6.8894% 81.216%;
1041 |   --inc: 198 100% 12%;
1042 |   --suc: 158 100% 10%;
1043 |   --wac: 43 100% 11%;
1044 |   --erc: 0 100% 14%;
1045 |   --rounded-box: 1rem;
1046 |   --rounded-badge: 1.9rem;
1047 |   --animation-btn: 0.25s;
1048 |   --animation-input: 0.2s;
1049 |   --btn-text-case: uppercase;
1050 |   --btn-focus-scale: 0.95;
1051 |   --border-btn: 1px;
1052 |   --tab-border: 1px;
1053 |   --tab-radius: 0.5rem;
1054 |   --p: 141.04 71.963% 41.961%;
1055 |   --pc: 140.66 100% 88.039%;
1056 |   --s: 140.98 74.694% 48.039%;
1057 |   --a: 35.148 68.98% 51.961%;
1058 |   --n: 0 9.6774% 6.0784%;
1059 |   --b1: 0 12.195% 8.0392%;
1060 |   --rounded-btn: 1.9rem;
1061 | }
1062 | 
1063 | [data-theme=aqua] {
1064 |   color-scheme: dark;
1065 | 
1066 |   --pf: 181.79 92.857% 39.529%;
1067 |   --sf: 274.41 30.909% 45.49%;
1068 |   --af: 47.059 100% 64%;
1069 |   --nf: 205.4 53.725% 40%;
1070 |   --b2: 218.61 52.511% 38.647%;
1071 |   --b3: 218.61 52.511% 34.782%;
1072 |   --bc: 218.61 100% 88.588%;
1073 |   --sc: 274.41 100% 91.373%;
1074 |   --ac: 47.059 100% 16%;
1075 |   --nc: 205.4 100% 90%;
1076 |   --inc: 221.21 100% 90.667%;
1077 |   --suc: 142.13 100% 87.255%;
1078 |   --wac: 32.133 100% 8.7451%;
1079 |   --erc: 0 100% 90.118%;
1080 |   --rounded-box: 1rem;
1081 |   --rounded-btn: 0.5rem;
1082 |   --rounded-badge: 1.9rem;
1083 |   --animation-btn: 0.25s;
1084 |   --animation-input: 0.2s;
1085 |   --btn-text-case: uppercase;
1086 |   --btn-focus-scale: 0.95;
1087 |   --border-btn: 1px;
1088 |   --tab-border: 1px;
1089 |   --tab-radius: 0.5rem;
1090 |   --p: 181.79 92.857% 49.412%;
1091 |   --pc: 181.41 100% 16.667%;
1092 |   --s: 274.41 30.909% 56.863%;
1093 |   --a: 47.059 100% 80%;
1094 |   --n: 205.4 53.725% 50%;
1095 |   --b1: 218.61 52.511% 42.941%;
1096 |   --in: 221.21 83.193% 53.333%;
1097 |   --su: 142.13 76.216% 36.275%;
1098 |   --wa: 32.133 94.619% 43.725%;
1099 |   --er: 0 72.222% 50.588%;
1100 | }
1101 | 
1102 | [data-theme=lofi] {
1103 |   color-scheme: light;
1104 | 
1105 |   --pf: 0 0% 4.0784%;
1106 |   --sf: 0 1.9608% 8%;
1107 |   --af: 0 0% 11.922%;
1108 |   --nf: 0 0% 0%;
1109 |   --btn-text-case: uppercase;
1110 |   --border-btn: 1px;
1111 |   --tab-border: 1px;
1112 |   --p: 0 0% 5.098%;
1113 |   --pc: 0 0% 100%;
1114 |   --s: 0 1.9608% 10%;
1115 |   --sc: 0 0% 100%;
1116 |   --a: 0 0% 14.902%;
1117 |   --ac: 0 0% 100%;
1118 |   --n: 0 0% 0%;
1119 |   --nc: 0 0% 100%;
1120 |   --b1: 0 0% 100%;
1121 |   --b2: 0 0% 94.902%;
1122 |   --b3: 0 1.9608% 90%;
1123 |   --bc: 0 0% 0%;
1124 |   --in: 212.35 100% 47.647%;
1125 |   --inc: 0 0% 100%;
1126 |   --su: 136.84 72.152% 46.471%;
1127 |   --suc: 0 0% 100%;
1128 |   --wa: 4.5614 100% 66.471%;
1129 |   --wac: 0 0% 100%;
1130 |   --er: 325.05 77.6% 49.02%;
1131 |   --erc: 0 0% 100%;
1132 |   --rounded-box: 0.25rem;
1133 |   --rounded-btn: 0.125rem;
1134 |   --rounded-badge: 0.125rem;
1135 |   --animation-btn: 0;
1136 |   --animation-input: 0;
1137 |   --btn-focus-scale: 1;
1138 |   --tab-radius: 0;
1139 | }
1140 | 
1141 | [data-theme=pastel] {
1142 |   color-scheme: light;
1143 | 
1144 |   --pf: 283.64 21.569% 64%;
1145 |   --sf: 351.63 70.492% 70.431%;
1146 |   --af: 158.49 54.639% 64.784%;
1147 |   --nf: 198.62 43.719% 48.784%;
1148 |   --in: 198 93% 60%;
1149 |   --su: 158 64% 52%;
1150 |   --wa: 43 96% 56%;
1151 |   --er: 0 91% 71%;
1152 |   --bc: 0 0% 20%;
1153 |   --pc: 283.64 59.314% 16%;
1154 |   --sc: 351.63 100% 17.608%;
1155 |   --ac: 158.49 100% 16.196%;
1156 |   --nc: 198.62 100% 12.196%;
1157 |   --inc: 198 100% 12%;
1158 |   --suc: 158 100% 10%;
1159 |   --wac: 43 100% 11%;
1160 |   --erc: 0 100% 14%;
1161 |   --rounded-box: 1rem;
1162 |   --rounded-badge: 1.9rem;
1163 |   --animation-btn: 0.25s;
1164 |   --animation-input: 0.2s;
1165 |   --btn-text-case: uppercase;
1166 |   --btn-focus-scale: 0.95;
1167 |   --border-btn: 1px;
1168 |   --tab-border: 1px;
1169 |   --tab-radius: 0.5rem;
1170 |   --p: 283.64 21.569% 80%;
1171 |   --s: 351.63 70.492% 88.039%;
1172 |   --a: 158.49 54.639% 80.98%;
1173 |   --n: 198.62 43.719% 60.98%;
1174 |   --b1: 0 0% 100%;
1175 |   --b2: 210 20% 98.039%;
1176 |   --b3: 216 12.195% 83.922%;
1177 |   --rounded-btn: 1.9rem;
1178 | }
1179 | 
1180 | [data-theme=fantasy] {
1181 |   color-scheme: light;
1182 | 
1183 |   --pf: 296.04 82.813% 20.078%;
1184 |   --sf: 200 100% 29.647%;
1185 |   --af: 30.894 94.378% 40.941%;
1186 |   --nf: 215 27.907% 13.49%;
1187 |   --b2: 0 0% 90%;
1188 |   --b3: 0 0% 81%;
1189 |   --in: 198 93% 60%;
1190 |   --su: 158 64% 52%;
1191 |   --wa: 43 96% 56%;
1192 |   --er: 0 91% 71%;
1193 |   --pc: 296.04 100% 85.02%;
1194 |   --sc: 200 100% 87.412%;
1195 |   --ac: 30.894 100% 10.235%;
1196 |   --nc: 215 62.264% 83.373%;
1197 |   --inc: 198 100% 12%;
1198 |   --suc: 158 100% 10%;
1199 |   --wac: 43 100% 11%;
1200 |   --erc: 0 100% 14%;
1201 |   --rounded-box: 1rem;
1202 |   --rounded-btn: 0.5rem;
1203 |   --rounded-badge: 1.9rem;
1204 |   --animation-btn: 0.25s;
1205 |   --animation-input: 0.2s;
1206 |   --btn-text-case: uppercase;
1207 |   --btn-focus-scale: 0.95;
1208 |   --border-btn: 1px;
1209 |   --tab-border: 1px;
1210 |   --tab-radius: 0.5rem;
1211 |   --p: 296.04 82.813% 25.098%;
1212 |   --s: 200 100% 37.059%;
1213 |   --a: 30.894 94.378% 51.176%;
1214 |   --n: 215 27.907% 16.863%;
1215 |   --b1: 0 0% 100%;
1216 |   --bc: 215 27.907% 16.863%;
1217 | }
1218 | 
1219 | [data-theme=wireframe] {
1220 |   color-scheme: light;
1221 | 
1222 |   --pf: 0 0% 57.725%;
1223 |   --sf: 0 0% 57.725%;
1224 |   --af: 0 0% 57.725%;
1225 |   --nf: 0 0% 73.725%;
1226 |   --bc: 0 0% 20%;
1227 |   --pc: 0 0% 14.431%;
1228 |   --sc: 0 0% 14.431%;
1229 |   --ac: 0 0% 14.431%;
1230 |   --nc: 0 0% 18.431%;
1231 |   --inc: 240 100% 90%;
1232 |   --suc: 120 100% 85.02%;
1233 |   --wac: 60 100% 10%;
1234 |   --erc: 0 100% 90%;
1235 |   --animation-btn: 0.25s;
1236 |   --animation-input: 0.2s;
1237 |   --btn-text-case: uppercase;
1238 |   --btn-focus-scale: 0.95;
1239 |   --border-btn: 1px;
1240 |   --tab-border: 1px;
1241 | 
1242 |   font-family: Chalkboard, comic sans ms, "sanssecondaryerif";
1243 | 
1244 |   --p: 0 0% 72.157%;
1245 |   --s: 0 0% 72.157%;
1246 |   --a: 0 0% 72.157%;
1247 |   --n: 0 0% 92.157%;
1248 |   --b1: 0 0% 100%;
1249 |   --b2: 0 0% 93.333%;
1250 |   --b3: 0 0% 86.667%;
1251 |   --in: 240 100% 50%;
1252 |   --su: 120 100% 25.098%;
1253 |   --wa: 60 30.196% 50%;
1254 |   --er: 0 100% 50%;
1255 |   --rounded-box: 0.2rem;
1256 |   --rounded-btn: 0.2rem;
1257 |   --rounded-badge: 0.2rem;
1258 |   --tab-radius: 0.2rem;
1259 | }
1260 | 
1261 | [data-theme=black] {
1262 |   color-scheme: dark;
1263 | 
1264 |   --pf: 0 1.9608% 16%;
1265 |   --sf: 0 1.9608% 16%;
1266 |   --af: 0 1.9608% 16%;
1267 |   --bc: 0 0% 80%;
1268 |   --pc: 0 5.3922% 84%;
1269 |   --sc: 0 5.3922% 84%;
1270 |   --ac: 0 5.3922% 84%;
1271 |   --nc: 0 2.5404% 83.02%;
1272 |   --inc: 240 100% 90%;
1273 |   --suc: 120 100% 85.02%;
1274 |   --wac: 60 100% 10%;
1275 |   --erc: 0 100% 90%;
1276 |   --border-btn: 1px;
1277 |   --tab-border: 1px;
1278 |   --p: 0 1.9608% 20%;
1279 |   --s: 0 1.9608% 20%;
1280 |   --a: 0 1.9608% 20%;
1281 |   --b1: 0 0% 0%;
1282 |   --b2: 0 0% 5.098%;
1283 |   --b3: 0 1.9608% 10%;
1284 |   --n: 0 1.2987% 15.098%;
1285 |   --nf: 0 1.9608% 20%;
1286 |   --in: 240 100% 50%;
1287 |   --su: 120 100% 25.098%;
1288 |   --wa: 60 100% 50%;
1289 |   --er: 0 100% 50%;
1290 |   --rounded-box: 0;
1291 |   --rounded-btn: 0;
1292 |   --rounded-badge: 0;
1293 |   --animation-btn: 0;
1294 |   --animation-input: 0;
1295 |   --btn-text-case: lowercase;
1296 |   --btn-focus-scale: 1;
1297 |   --tab-radius: 0;
1298 | }
1299 | 
1300 | [data-theme=luxury] {
1301 |   color-scheme: dark;
1302 | 
1303 |   --pf: 0 0% 80%;
1304 |   --sf: 218.4 54.348% 14.431%;
1305 |   --af: 318.62 21.805% 20.863%;
1306 |   --nf: 270 4.3478% 7.2157%;
1307 |   --pc: 0 0% 20%;
1308 |   --sc: 218.4 100% 83.608%;
1309 |   --ac: 318.62 84.615% 85.216%;
1310 |   --inc: 202.35 100% 14%;
1311 |   --suc: 89.007 100% 10.392%;
1312 |   --wac: 53.906 100% 12.706%;
1313 |   --erc: 0 100% 14.353%;
1314 |   --rounded-box: 1rem;
1315 |   --rounded-btn: 0.5rem;
1316 |   --rounded-badge: 1.9rem;
1317 |   --animation-btn: 0.25s;
1318 |   --animation-input: 0.2s;
1319 |   --btn-text-case: uppercase;
1320 |   --btn-focus-scale: 0.95;
1321 |   --border-btn: 1px;
1322 |   --tab-border: 1px;
1323 |   --tab-radius: 0.5rem;
1324 |   --p: 0 0% 100%;
1325 |   --s: 218.4 54.348% 18.039%;
1326 |   --a: 318.62 21.805% 26.078%;
1327 |   --n: 270 4.3478% 9.0196%;
1328 |   --nc: 37.083 67.29% 58.039%;
1329 |   --b1: 240 10% 3.9216%;
1330 |   --b2: 270 4.3478% 9.0196%;
1331 |   --b3: 270 2.1739% 18.039%;
1332 |   --bc: 37.083 67.29% 58.039%;
1333 |   --in: 202.35 100% 70%;
1334 |   --su: 89.007 61.633% 51.961%;
1335 |   --wa: 53.906 68.817% 63.529%;
1336 |   --er: 0 100% 71.765%;
1337 | }
1338 | 
1339 | [data-theme=dracula] {
1340 |   color-scheme: dark;
1341 | 
1342 |   --pf: 325.52 100% 58.98%;
1343 |   --sf: 264.71 89.474% 62.118%;
1344 |   --af: 31.02 100% 56.941%;
1345 |   --nf: 229.57 15.033% 24%;
1346 |   --b2: 231.43 14.894% 16.588%;
1347 |   --b3: 231.43 14.894% 14.929%;
1348 |   --pc: 325.52 100% 14.745%;
1349 |   --sc: 264.71 100% 15.529%;
1350 |   --ac: 31.02 100% 14.235%;
1351 |   --nc: 229.57 70.868% 86%;
1352 |   --inc: 190.53 100% 15.373%;
1353 |   --suc: 135.18 100% 12.941%;
1354 |   --wac: 64.909 100% 15.294%;
1355 |   --erc: 0 100% 93.333%;
1356 |   --rounded-box: 1rem;
1357 |   --rounded-btn: 0.5rem;
1358 |   --rounded-badge: 1.9rem;
1359 |   --animation-btn: 0.25s;
1360 |   --animation-input: 0.2s;
1361 |   --btn-text-case: uppercase;
1362 |   --btn-focus-scale: 0.95;
1363 |   --border-btn: 1px;
1364 |   --tab-border: 1px;
1365 |   --tab-radius: 0.5rem;
1366 |   --p: 325.52 100% 73.725%;
1367 |   --s: 264.71 89.474% 77.647%;
1368 |   --a: 31.02 100% 71.176%;
1369 |   --n: 229.57 15.033% 30%;
1370 |   --b1: 231.43 14.894% 18.431%;
1371 |   --bc: 60 30% 96.078%;
1372 |   --in: 190.53 96.61% 76.863%;
1373 |   --su: 135.18 94.444% 64.706%;
1374 |   --wa: 64.909 91.667% 76.471%;
1375 |   --er: 0 100% 66.667%;
1376 | }
1377 | 
1378 | [data-theme=cmyk] {
1379 |   color-scheme: light;
1380 | 
1381 |   --pf: 202.72 83.251% 48.157%;
1382 |   --sf: 335.25 77.67% 47.686%;
1383 |   --af: 56.195 100% 47.843%;
1384 |   --nf: 0 0% 8.1569%;
1385 |   --b2: 0 0% 90%;
1386 |   --b3: 0 0% 81%;
1387 |   --bc: 0 0% 20%;
1388 |   --pc: 202.72 100% 12.039%;
1389 |   --sc: 335.25 100% 91.922%;
1390 |   --ac: 56.195 100% 11.961%;
1391 |   --nc: 0 0% 82.039%;
1392 |   --inc: 192.2 100% 10.431%;
1393 |   --suc: 291.06 100% 87.608%;
1394 |   --wac: 25.027 100% 11.333%;
1395 |   --erc: 3.956 100% 91.137%;
1396 |   --rounded-box: 1rem;
1397 |   --rounded-btn: 0.5rem;
1398 |   --rounded-badge: 1.9rem;
1399 |   --animation-btn: 0.25s;
1400 |   --animation-input: 0.2s;
1401 |   --btn-text-case: uppercase;
1402 |   --btn-focus-scale: 0.95;
1403 |   --border-btn: 1px;
1404 |   --tab-border: 1px;
1405 |   --tab-radius: 0.5rem;
1406 |   --p: 202.72 83.251% 60.196%;
1407 |   --s: 335.25 77.67% 59.608%;
1408 |   --a: 56.195 100% 59.804%;
1409 |   --n: 0 0% 10.196%;
1410 |   --b1: 0 0% 100%;
1411 |   --in: 192.2 48.361% 52.157%;
1412 |   --su: 291.06 48.454% 38.039%;
1413 |   --wa: 25.027 84.615% 56.667%;
1414 |   --er: 3.956 80.531% 55.686%;
1415 | }
1416 | 
1417 | [data-theme=autumn] {
1418 |   color-scheme: light;
1419 | 
1420 |   --pf: 344.23 95.804% 22.431%;
1421 |   --sf: 0.44444 63.38% 46.588%;
1422 |   --af: 27.477 56.021% 50.039%;
1423 |   --nf: 22.105 17.117% 34.824%;
1424 |   --b2: 0 0% 85.059%;
1425 |   --b3: 0 0% 76.553%;
1426 |   --bc: 0 0% 18.902%;
1427 |   --pc: 344.23 100% 85.608%;
1428 |   --sc: 0.44444 100% 91.647%;
1429 |   --ac: 27.477 100% 12.51%;
1430 |   --nc: 22.105 100% 88.706%;
1431 |   --inc: 186.94 100% 9.9216%;
1432 |   --suc: 164.59 100% 8.6275%;
1433 |   --wac: 30.141 100% 9.9216%;
1434 |   --erc: 353.6 100% 89.765%;
1435 |   --rounded-box: 1rem;
1436 |   --rounded-btn: 0.5rem;
1437 |   --rounded-badge: 1.9rem;
1438 |   --animation-btn: 0.25s;
1439 |   --animation-input: 0.2s;
1440 |   --btn-text-case: uppercase;
1441 |   --btn-focus-scale: 0.95;
1442 |   --border-btn: 1px;
1443 |   --tab-border: 1px;
1444 |   --tab-radius: 0.5rem;
1445 |   --p: 344.23 95.804% 28.039%;
1446 |   --s: 0.44444 63.38% 58.235%;
1447 |   --a: 27.477 56.021% 62.549%;
1448 |   --n: 22.105 17.117% 43.529%;
1449 |   --b1: 0 0% 94.51%;
1450 |   --in: 186.94 47.826% 49.608%;
1451 |   --su: 164.59 33.636% 43.137%;
1452 |   --wa: 30.141 84.19% 49.608%;
1453 |   --er: 353.6 79.116% 48.824%;
1454 | }
1455 | 
1456 | [data-theme=business] {
1457 |   color-scheme: dark;
1458 | 
1459 |   --pf: 210 64.103% 24.471%;
1460 |   --sf: 200 12.931% 43.608%;
1461 |   --af: 12.515 79.512% 47.843%;
1462 |   --nf: 212.73 13.58% 12.706%;
1463 |   --b2: 0 0% 11.294%;
1464 |   --b3: 0 0% 10.165%;
1465 |   --bc: 0 0% 82.51%;
1466 |   --pc: 210 100% 86.118%;
1467 |   --sc: 200 100% 10.902%;
1468 |   --ac: 12.515 100% 11.961%;
1469 |   --nc: 212.73 28.205% 83.176%;
1470 |   --inc: 199.15 100% 88.353%;
1471 |   --suc: 144 100% 11.137%;
1472 |   --wac: 39.231 100% 12.078%;
1473 |   --erc: 6.3415 100% 88.667%;
1474 |   --animation-btn: 0.25s;
1475 |   --animation-input: 0.2s;
1476 |   --btn-text-case: uppercase;
1477 |   --btn-focus-scale: 0.95;
1478 |   --border-btn: 1px;
1479 |   --tab-border: 1px;
1480 |   --tab-radius: 0.5rem;
1481 |   --p: 210 64.103% 30.588%;
1482 |   --s: 200 12.931% 54.51%;
1483 |   --a: 12.515 79.512% 59.804%;
1484 |   --n: 212.73 13.58% 15.882%;
1485 |   --b1: 0 0% 12.549%;
1486 |   --in: 199.15 100% 41.765%;
1487 |   --su: 144 30.973% 55.686%;
1488 |   --wa: 39.231 64.356% 60.392%;
1489 |   --er: 6.3415 55.656% 43.333%;
1490 |   --rounded-box: 0.25rem;
1491 |   --rounded-btn: 0.125rem;
1492 |   --rounded-badge: 0.125rem;
1493 | }
1494 | 
1495 | [data-theme=acid] {
1496 |   color-scheme: light;
1497 | 
1498 |   --pf: 302.59 100% 40%;
1499 |   --sf: 27.294 100% 40%;
1500 |   --af: 72 98.425% 40.157%;
1501 |   --nf: 238.42 43.182% 13.804%;
1502 |   --b2: 0 0% 88.235%;
1503 |   --b3: 0 0% 79.412%;
1504 |   --bc: 0 0% 19.608%;
1505 |   --pc: 302.59 100% 90%;
1506 |   --sc: 27.294 100% 10%;
1507 |   --ac: 72 100% 10.039%;
1508 |   --nc: 238.42 99.052% 83.451%;
1509 |   --inc: 209.85 100% 11.569%;
1510 |   --suc: 148.87 100% 11.608%;
1511 |   --wac: 52.574 100% 11.451%;
1512 |   --erc: 0.78261 100% 89.02%;
1513 |   --animation-btn: 0.25s;
1514 |   --animation-input: 0.2s;
1515 |   --btn-text-case: uppercase;
1516 |   --btn-focus-scale: 0.95;
1517 |   --border-btn: 1px;
1518 |   --tab-border: 1px;
1519 |   --tab-radius: 0.5rem;
1520 |   --p: 302.59 100% 50%;
1521 |   --s: 27.294 100% 50%;
1522 |   --a: 72 98.425% 50.196%;
1523 |   --n: 238.42 43.182% 17.255%;
1524 |   --b1: 0 0% 98.039%;
1525 |   --in: 209.85 91.628% 57.843%;
1526 |   --su: 148.87 49.533% 58.039%;
1527 |   --wa: 52.574 92.661% 57.255%;
1528 |   --er: 0.78261 100% 45.098%;
1529 |   --rounded-box: 1.25rem;
1530 |   --rounded-btn: 1rem;
1531 |   --rounded-badge: 1rem;
1532 | }
1533 | 
1534 | [data-theme=lemonade] {
1535 |   color-scheme: light;
1536 | 
1537 |   --pf: 88.8 96.154% 24.471%;
1538 |   --sf: 60 80.952% 43.765%;
1539 |   --af: 62.553 79.661% 70.745%;
1540 |   --nf: 238.42 43.182% 13.804%;
1541 |   --b2: 0 0% 90%;
1542 |   --b3: 0 0% 81%;
1543 |   --bc: 0 0% 20%;
1544 |   --pc: 88.8 100% 86.118%;
1545 |   --sc: 60 100% 10.941%;
1546 |   --ac: 62.553 100% 17.686%;
1547 |   --nc: 238.42 99.052% 83.451%;
1548 |   --inc: 191.61 79.118% 16.902%;
1549 |   --suc: 74.458 100% 15.725%;
1550 |   --wac: 50.182 100% 15.059%;
1551 |   --erc: 0.98361 100% 16.588%;
1552 |   --rounded-box: 1rem;
1553 |   --rounded-btn: 0.5rem;
1554 |   --rounded-badge: 1.9rem;
1555 |   --animation-btn: 0.25s;
1556 |   --animation-input: 0.2s;
1557 |   --btn-text-case: uppercase;
1558 |   --btn-focus-scale: 0.95;
1559 |   --border-btn: 1px;
1560 |   --tab-border: 1px;
1561 |   --tab-radius: 0.5rem;
1562 |   --p: 88.8 96.154% 30.588%;
1563 |   --s: 60 80.952% 54.706%;
1564 |   --a: 62.553 79.661% 88.431%;
1565 |   --n: 238.42 43.182% 17.255%;
1566 |   --b1: 0 0% 100%;
1567 |   --in: 191.61 39.241% 84.51%;
1568 |   --su: 74.458 76.147% 78.627%;
1569 |   --wa: 50.182 87.302% 75.294%;
1570 |   --er: 0.98361 70.115% 82.941%;
1571 | }
1572 | 
1573 | [data-theme=night] {
1574 |   color-scheme: dark;
1575 | 
1576 |   --pf: 198.44 93.204% 47.686%;
1577 |   --sf: 234.45 89.474% 59.137%;
1578 |   --af: 328.85 85.621% 56%;
1579 |   --b2: 222.22 47.368% 10.059%;
1580 |   --b3: 222.22 47.368% 9.0529%;
1581 |   --bc: 222.22 65.563% 82.235%;
1582 |   --pc: 198.44 100% 11.922%;
1583 |   --sc: 234.45 100% 14.784%;
1584 |   --ac: 328.85 100% 14%;
1585 |   --nc: 217.24 75.772% 83.49%;
1586 |   --inc: 198.46 100% 9.6078%;
1587 |   --suc: 172.46 100% 10.078%;
1588 |   --wac: 40.61 100% 12.706%;
1589 |   --erc: 350.94 100% 14.235%;
1590 |   --rounded-box: 1rem;
1591 |   --rounded-btn: 0.5rem;
1592 |   --rounded-badge: 1.9rem;
1593 |   --animation-btn: 0.25s;
1594 |   --animation-input: 0.2s;
1595 |   --btn-text-case: uppercase;
1596 |   --btn-focus-scale: 0.95;
1597 |   --border-btn: 1px;
1598 |   --tab-border: 1px;
1599 |   --tab-radius: 0.5rem;
1600 |   --p: 198.44 93.204% 59.608%;
1601 |   --s: 234.45 89.474% 73.922%;
1602 |   --a: 328.85 85.621% 70%;
1603 |   --n: 217.24 32.584% 17.451%;
1604 |   --nf: 217.06 30.357% 21.961%;
1605 |   --b1: 222.22 47.368% 11.176%;
1606 |   --in: 198.46 90.204% 48.039%;
1607 |   --su: 172.46 66.008% 50.392%;
1608 |   --wa: 40.61 88.172% 63.529%;
1609 |   --er: 350.94 94.558% 71.176%;
1610 | }
1611 | 
1612 | [data-theme=coffee] {
1613 |   color-scheme: dark;
1614 | 
1615 |   --pf: 29.583 66.667% 46.118%;
1616 |   --sf: 182.4 24.752% 15.843%;
1617 |   --af: 194.19 74.4% 19.608%;
1618 |   --nf: 300 20% 4.7059%;
1619 |   --b2: 306 18.519% 9.5294%;
1620 |   --b3: 306 18.519% 8.5765%;
1621 |   --pc: 29.583 100% 11.529%;
1622 |   --sc: 182.4 67.237% 83.961%;
1623 |   --ac: 194.19 100% 84.902%;
1624 |   --nc: 300 13.75% 81.176%;
1625 |   --inc: 171.15 100% 13.451%;
1626 |   --suc: 92.5 100% 12.471%;
1627 |   --wac: 43.125 100% 13.725%;
1628 |   --erc: 9.7561 100% 14.941%;
1629 |   --rounded-box: 1rem;
1630 |   --rounded-btn: 0.5rem;
1631 |   --rounded-badge: 1.9rem;
1632 |   --animation-btn: 0.25s;
1633 |   --animation-input: 0.2s;
1634 |   --btn-text-case: uppercase;
1635 |   --btn-focus-scale: 0.95;
1636 |   --border-btn: 1px;
1637 |   --tab-border: 1px;
1638 |   --tab-radius: 0.5rem;
1639 |   --p: 29.583 66.667% 57.647%;
1640 |   --s: 182.4 24.752% 19.804%;
1641 |   --a: 194.19 74.4% 24.51%;
1642 |   --n: 300 20% 5.8824%;
1643 |   --b1: 306 18.519% 10.588%;
1644 |   --bc: 36.667 8.3333% 42.353%;
1645 |   --in: 171.15 36.527% 67.255%;
1646 |   --su: 92.5 25% 62.353%;
1647 |   --wa: 43.125 100% 68.627%;
1648 |   --er: 9.7561 95.349% 74.706%;
1649 | }
1650 | 
1651 | [data-theme=winter] {
1652 |   color-scheme: light;
1653 | 
1654 |   --pf: 211.79 100% 40.627%;
1655 |   --sf: 246.92 47.273% 34.51%;
1656 |   --af: 310.41 49.388% 41.569%;
1657 |   --nf: 217.02 92.157% 8%;
1658 |   --pc: 211.79 100% 90.157%;
1659 |   --sc: 246.92 100% 88.627%;
1660 |   --ac: 310.41 100% 90.392%;
1661 |   --nc: 217.02 100% 82%;
1662 |   --inc: 191.54 100% 15.608%;
1663 |   --suc: 181.5 100% 13.255%;
1664 |   --wac: 32.308 100% 16.706%;
1665 |   --erc: 0 100% 14.431%;
1666 |   --rounded-box: 1rem;
1667 |   --rounded-btn: 0.5rem;
1668 |   --rounded-badge: 1.9rem;
1669 |   --animation-btn: 0.25s;
1670 |   --animation-input: 0.2s;
1671 |   --btn-text-case: uppercase;
1672 |   --btn-focus-scale: 0.95;
1673 |   --border-btn: 1px;
1674 |   --tab-border: 1px;
1675 |   --tab-radius: 0.5rem;
1676 |   --p: 211.79 100% 50.784%;
1677 |   --s: 246.92 47.273% 43.137%;
1678 |   --a: 310.41 49.388% 51.961%;
1679 |   --n: 217.02 92.157% 10%;
1680 |   --b1: 0 0% 100%;
1681 |   --b2: 216.92 100% 97.451%;
1682 |   --b3: 218.82 43.59% 92.353%;
1683 |   --bc: 214.29 30.061% 31.961%;
1684 |   --in: 191.54 92.857% 78.039%;
1685 |   --su: 181.5 46.512% 66.275%;
1686 |   --wa: 32.308 61.905% 83.529%;
1687 |   --er: 0 63.38% 72.157%;
1688 | }
1689 | 
1690 | *,
1691 | ::before,
1692 | ::after {
1693 |   --tw-border-spacing-x: 0;
1694 |   --tw-border-spacing-y: 0;
1695 |   --tw-translate-x: 0;
1696 |   --tw-translate-y: 0;
1697 |   --tw-rotate: 0;
1698 |   --tw-skew-x: 0;
1699 |   --tw-skew-y: 0;
1700 |   --tw-scale-x: 1;
1701 |   --tw-scale-y: 1;
1702 |   --tw-pan-x: ;
1703 |   --tw-pan-y: ;
1704 |   --tw-pinch-zoom: ;
1705 |   --tw-scroll-snap-strictness: proximity;
1706 |   --tw-ordinal: ;
1707 |   --tw-slashed-zero: ;
1708 |   --tw-numeric-figure: ;
1709 |   --tw-numeric-spacing: ;
1710 |   --tw-numeric-fraction: ;
1711 |   --tw-ring-inset: ;
1712 |   --tw-ring-offset-width: 0;
1713 |   --tw-ring-offset-color: #fff;
1714 |   --tw-ring-color: rgb(59 130 246 / 0.5);
1715 |   --tw-ring-offset-shadow: 0 0 #0000;
1716 |   --tw-ring-shadow: 0 0 #0000;
1717 |   --tw-shadow: 0 0 #0000;
1718 |   --tw-shadow-colored: 0 0 #0000;
1719 |   --tw-blur: ;
1720 |   --tw-brightness: ;
1721 |   --tw-contrast: ;
1722 |   --tw-grayscale: ;
1723 |   --tw-hue-rotate: ;
1724 |   --tw-invert: ;
1725 |   --tw-saturate: ;
1726 |   --tw-sepia: ;
1727 |   --tw-drop-shadow: ;
1728 |   --tw-backdrop-blur: ;
1729 |   --tw-backdrop-brightness: ;
1730 |   --tw-backdrop-contrast: ;
1731 |   --tw-backdrop-grayscale: ;
1732 |   --tw-backdrop-hue-rotate: ;
1733 |   --tw-backdrop-invert: ;
1734 |   --tw-backdrop-opacity: ;
1735 |   --tw-backdrop-saturate: ;
1736 |   --tw-backdrop-sepia: ;
1737 | }
1738 | 
1739 | ::backdrop {
1740 |   --tw-border-spacing-x: 0;
1741 |   --tw-border-spacing-y: 0;
1742 |   --tw-translate-x: 0;
1743 |   --tw-translate-y: 0;
1744 |   --tw-rotate: 0;
1745 |   --tw-skew-x: 0;
1746 |   --tw-skew-y: 0;
1747 |   --tw-scale-x: 1;
1748 |   --tw-scale-y: 1;
1749 |   --tw-pan-x: ;
1750 |   --tw-pan-y: ;
1751 |   --tw-pinch-zoom: ;
1752 |   --tw-scroll-snap-strictness: proximity;
1753 |   --tw-ordinal: ;
1754 |   --tw-slashed-zero: ;
1755 |   --tw-numeric-figure: ;
1756 |   --tw-numeric-spacing: ;
1757 |   --tw-numeric-fraction: ;
1758 |   --tw-ring-inset: ;
1759 |   --tw-ring-offset-width: 0;
1760 |   --tw-ring-offset-color: #fff;
1761 |   --tw-ring-color: rgb(59 130 246 / 0.5);
1762 |   --tw-ring-offset-shadow: 0 0 #0000;
1763 |   --tw-ring-shadow: 0 0 #0000;
1764 |   --tw-shadow: 0 0 #0000;
1765 |   --tw-shadow-colored: 0 0 #0000;
1766 |   --tw-blur: ;
1767 |   --tw-brightness: ;
1768 |   --tw-contrast: ;
1769 |   --tw-grayscale: ;
1770 |   --tw-hue-rotate: ;
1771 |   --tw-invert: ;
1772 |   --tw-saturate: ;
1773 |   --tw-sepia: ;
1774 |   --tw-drop-shadow: ;
1775 |   --tw-backdrop-blur: ;
1776 |   --tw-backdrop-brightness: ;
1777 |   --tw-backdrop-contrast: ;
1778 |   --tw-backdrop-grayscale: ;
1779 |   --tw-backdrop-hue-rotate: ;
1780 |   --tw-backdrop-invert: ;
1781 |   --tw-backdrop-opacity: ;
1782 |   --tw-backdrop-saturate: ;
1783 |   --tw-backdrop-sepia: ;
1784 | }
1785 | 
1786 | .container {
1787 |   width: 100%;
1788 | }
1789 | 
1790 | @media (min-width: 640px) {
1791 |   .container {
1792 |     max-width: 640px;
1793 |   }
1794 | }
1795 | 
1796 | @media (min-width: 768px) {
1797 |   .container {
1798 |     max-width: 768px;
1799 |   }
1800 | }
1801 | 
1802 | @media (min-width: 1024px) {
1803 |   .container {
1804 |     max-width: 1024px;
1805 |   }
1806 | }
1807 | 
1808 | @media (min-width: 1280px) {
1809 |   .container {
1810 |     max-width: 1280px;
1811 |   }
1812 | }
1813 | 
1814 | @media (min-width: 1536px) {
1815 |   .container {
1816 |     max-width: 1536px;
1817 |   }
1818 | }
1819 | 
1820 | .btn {
1821 |   display: inline-flex;
1822 |   flex-shrink: 0;
1823 |   cursor: pointer;
1824 |   -webkit-user-select: none;
1825 |   -moz-user-select: none;
1826 |   user-select: none;
1827 |   flex-wrap: wrap;
1828 |   align-items: center;
1829 |   justify-content: center;
1830 |   border-color: transparent;
1831 |   border-color: hsl(var(--n) / var(--tw-border-opacity));
1832 |   text-align: center;
1833 |   transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
1834 |   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
1835 |   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
1836 |   transition-duration: 200ms;
1837 |   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1838 |   border-radius: var(--rounded-btn, 0.5rem);
1839 |   height: 3rem;
1840 |   padding-left: 1rem;
1841 |   padding-right: 1rem;
1842 |   font-size: 0.875rem;
1843 |   line-height: 1.25rem;
1844 |   line-height: 1em;
1845 |   min-height: 3rem;
1846 |   font-weight: 600;
1847 |   text-transform: uppercase;
1848 |   text-transform: var(--btn-text-case, uppercase);
1849 |   -webkit-text-decoration-line: none;
1850 |   text-decoration-line: none;
1851 |   border-width: var(--border-btn, 1px);
1852 |   animation: button-pop var(--animation-btn, 0.25s) ease-out;
1853 | 
1854 |   --tw-border-opacity: 1;
1855 |   --tw-bg-opacity: 1;
1856 | 
1857 |   background-color: hsl(var(--n) / var(--tw-bg-opacity));
1858 | 
1859 |   --tw-text-opacity: 1;
1860 | 
1861 |   color: hsl(var(--nc) / var(--tw-text-opacity));
1862 | }
1863 | 
1864 | .btn-disabled,
1865 | .btn[disabled] {
1866 |   pointer-events: none;
1867 | }
1868 | 
1869 | .btn.loading,
1870 | .btn.loading:hover {
1871 |   pointer-events: none;
1872 | }
1873 | 
1874 | .btn.loading::before {
1875 |   margin-right: 0.5rem;
1876 |   height: 1rem;
1877 |   width: 1rem;
1878 |   border-radius: 9999px;
1879 |   border-width: 2px;
1880 |   animation: spin 2s linear infinite;
1881 |   content: "";
1882 |   border-top-color: transparent;
1883 |   border-left-color: transparent;
1884 |   border-bottom-color: currentColor;
1885 |   border-right-color: currentColor;
1886 | }
1887 | 
1888 | @media (prefers-reduced-motion: reduce) {
1889 |   .btn.loading::before {
1890 |     animation: spin 10s linear infinite;
1891 |   }
1892 | }
1893 | 
1894 | @keyframes spin {
1895 |   from {
1896 |     transform: rotate(0deg);
1897 |   }
1898 | 
1899 |   to {
1900 |     transform: rotate(360deg);
1901 |   }
1902 | }
1903 | 
1904 | .btn-group > input[type="radio"].btn {
1905 |   -webkit-appearance: none;
1906 |   -moz-appearance: none;
1907 |   appearance: none;
1908 | }
1909 | 
1910 | .btn-group > input[type="radio"].btn::before {
1911 |   content: attr(data-title);
1912 | }
1913 | 
1914 | .footer {
1915 |   display: grid;
1916 |   width: 100%;
1917 |   grid-auto-flow: row;
1918 |   place-items: start;
1919 |   row-gap: 2.5rem;
1920 |   -moz-column-gap: 1rem;
1921 |   column-gap: 1rem;
1922 |   font-size: 0.875rem;
1923 |   line-height: 1.25rem;
1924 | }
1925 | 
1926 | .footer > * {
1927 |   display: grid;
1928 |   place-items: start;
1929 |   gap: 0.5rem;
1930 | }
1931 | 
1932 | @media (min-width: 48rem) {
1933 |   .footer {
1934 |     grid-auto-flow: column;
1935 |   }
1936 | 
1937 |   .footer-center {
1938 |     grid-auto-flow: row dense;
1939 |   }
1940 | }
1941 | 
1942 | .link {
1943 |   cursor: pointer;
1944 |   -webkit-text-decoration-line: underline;
1945 |   text-decoration-line: underline;
1946 | }
1947 | 
1948 | .menu {
1949 |   display: flex;
1950 |   flex-direction: column;
1951 |   flex-wrap: wrap;
1952 | }
1953 | 
1954 | .menu.horizontal {
1955 |   display: inline-flex;
1956 |   flex-direction: row;
1957 | }
1958 | 
1959 | .menu.horizontal :where(li) {
1960 |   flex-direction: row;
1961 | }
1962 | 
1963 | :where(.menu li) {
1964 |   position: relative;
1965 |   display: flex;
1966 |   flex-shrink: 0;
1967 |   flex-direction: column;
1968 |   flex-wrap: wrap;
1969 |   align-items: stretch;
1970 | }
1971 | 
1972 | .menu :where(li:not(.menu-title)) > :where(*:not(ul)) {
1973 |   display: flex;
1974 | }
1975 | 
1976 | .menu :where(li:not(.disabled):not(.menu-title)) > :where(*:not(ul)) {
1977 |   cursor: pointer;
1978 |   -webkit-user-select: none;
1979 |   -moz-user-select: none;
1980 |   user-select: none;
1981 |   align-items: center;
1982 |   outline: 2px solid transparent;
1983 |   outline-offset: 2px;
1984 | }
1985 | 
1986 | .menu > :where(li > *:not(ul):focus) {
1987 |   outline: 2px solid transparent;
1988 |   outline-offset: 2px;
1989 | }
1990 | 
1991 | .menu > :where(li.disabled > *:not(ul):focus) {
1992 |   cursor: auto;
1993 | }
1994 | 
1995 | .menu > :where(li) :where(ul) {
1996 |   display: flex;
1997 |   flex-direction: column;
1998 |   align-items: stretch;
1999 | }
2000 | 
2001 | .menu > :where(li) > :where(ul) {
2002 |   position: absolute;
2003 |   display: none;
2004 |   top: initial;
2005 |   left: 100%;
2006 |   border-top-left-radius: inherit;
2007 |   border-top-right-radius: inherit;
2008 |   border-bottom-right-radius: inherit;
2009 |   border-bottom-left-radius: inherit;
2010 | }
2011 | 
2012 | .menu > :where(li:hover) > :where(ul) {
2013 |   display: flex;
2014 | }
2015 | 
2016 | .menu > :where(li:focus) > :where(ul) {
2017 |   display: flex;
2018 | }
2019 | 
2020 | .navbar {
2021 |   display: flex;
2022 |   align-items: center;
2023 |   padding: var(--navbar-padding, 0.5rem);
2024 |   min-height: 4rem;
2025 |   width: 100%;
2026 | }
2027 | 
2028 | :where(.navbar > *) {
2029 |   display: inline-flex;
2030 |   align-items: center;
2031 | }
2032 | 
2033 | .toggle {
2034 |   flex-shrink: 0;
2035 | 
2036 |   --tglbg: hsl(var(--b1));
2037 |   --handleoffset: 1.5rem;
2038 |   --handleoffsetcalculator: calc(var(--handleoffset) * -1);
2039 |   --togglehandleborder: 0 0;
2040 | 
2041 |   height: 1.5rem;
2042 |   width: 3rem;
2043 |   cursor: pointer;
2044 |   -webkit-appearance: none;
2045 |   -moz-appearance: none;
2046 |   appearance: none;
2047 |   border-width: 1px;
2048 |   border-color: hsl(var(--bc) / var(--tw-border-opacity));
2049 | 
2050 |   --tw-border-opacity: 0.2;
2051 | 
2052 |   background-color: hsl(var(--bc) / var(--tw-bg-opacity));
2053 | 
2054 |   --tw-bg-opacity: 0.5;
2055 | 
2056 |   transition-duration: 300ms;
2057 |   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
2058 |   border-radius: var(--rounded-badge, 1.9rem);
2059 |   transition: background, box-shadow var(--animation-input, 0.2s) ease-in-out;
2060 |   box-shadow: var(--handleoffsetcalculator) 0 0 2px var(--tglbg) inset, 0 0 0 2px var(--tglbg) inset, var(--togglehandleborder);
2061 | }
2062 | 
2063 | .btn-outline .badge {
2064 |   --tw-border-opacity: 1;
2065 | 
2066 |   border-color: hsl(var(--nf, var(--n)) / var(--tw-border-opacity));
2067 | 
2068 |   --tw-text-opacity: 1;
2069 | 
2070 |   color: hsl(var(--nc) / var(--tw-text-opacity));
2071 | }
2072 | 
2073 | .btn-outline.btn-primary .badge {
2074 |   --tw-border-opacity: 1;
2075 | 
2076 |   border-color: hsl(var(--p) / var(--tw-border-opacity));
2077 | 
2078 |   --tw-bg-opacity: 1;
2079 | 
2080 |   background-color: hsl(var(--p) / var(--tw-bg-opacity));
2081 | 
2082 |   --tw-text-opacity: 1;
2083 | 
2084 |   color: hsl(var(--pc) / var(--tw-text-opacity));
2085 | }
2086 | 
2087 | .btn-outline.btn-secondary .badge {
2088 |   --tw-border-opacity: 1;
2089 | 
2090 |   border-color: hsl(var(--s) / var(--tw-border-opacity));
2091 | 
2092 |   --tw-bg-opacity: 1;
2093 | 
2094 |   background-color: hsl(var(--s) / var(--tw-bg-opacity));
2095 | 
2096 |   --tw-text-opacity: 1;
2097 | 
2098 |   color: hsl(var(--sc) / var(--tw-text-opacity));
2099 | }
2100 | 
2101 | .btn-outline.btn-accent .badge {
2102 |   --tw-border-opacity: 1;
2103 | 
2104 |   border-color: hsl(var(--a) / var(--tw-border-opacity));
2105 | 
2106 |   --tw-bg-opacity: 1;
2107 | 
2108 |   background-color: hsl(var(--a) / var(--tw-bg-opacity));
2109 | 
2110 |   --tw-text-opacity: 1;
2111 | 
2112 |   color: hsl(var(--ac) / var(--tw-text-opacity));
2113 | }
2114 | 
2115 | .btn-outline .badge.outline {
2116 |   --tw-border-opacity: 1;
2117 | 
2118 |   border-color: hsl(var(--nf, var(--n)) / var(--tw-border-opacity));
2119 |   background-color: transparent;
2120 | }
2121 | 
2122 | .btn-outline.btn-primary .badge-outline {
2123 |   --tw-border-opacity: 1;
2124 | 
2125 |   border-color: hsl(var(--p) / var(--tw-border-opacity));
2126 |   background-color: transparent;
2127 | 
2128 |   --tw-text-opacity: 1;
2129 | 
2130 |   color: hsl(var(--p) / var(--tw-text-opacity));
2131 | }
2132 | 
2133 | .btn-outline.btn-secondary .badge-outline {
2134 |   --tw-border-opacity: 1;
2135 | 
2136 |   border-color: hsl(var(--s) / var(--tw-border-opacity));
2137 |   background-color: transparent;
2138 | 
2139 |   --tw-text-opacity: 1;
2140 | 
2141 |   color: hsl(var(--s) / var(--tw-text-opacity));
2142 | }
2143 | 
2144 | .btn-outline.btn-accent .badge-outline {
2145 |   --tw-border-opacity: 1;
2146 | 
2147 |   border-color: hsl(var(--a) / var(--tw-border-opacity));
2148 |   background-color: transparent;
2149 | 
2150 |   --tw-text-opacity: 1;
2151 | 
2152 |   color: hsl(var(--a) / var(--tw-text-opacity));
2153 | }
2154 | 
2155 | .btn-outline.btn-info .badge-outline {
2156 |   --tw-border-opacity: 1;
2157 | 
2158 |   border-color: hsl(var(--in) / var(--tw-border-opacity));
2159 |   background-color: transparent;
2160 | 
2161 |   --tw-text-opacity: 1;
2162 | 
2163 |   color: hsl(var(--in) / var(--tw-text-opacity));
2164 | }
2165 | 
2166 | .btn-outline.btn-success .badge-outline {
2167 |   --tw-border-opacity: 1;
2168 | 
2169 |   border-color: hsl(var(--su) / var(--tw-border-opacity));
2170 |   background-color: transparent;
2171 | 
2172 |   --tw-text-opacity: 1;
2173 | 
2174 |   color: hsl(var(--su) / var(--tw-text-opacity));
2175 | }
2176 | 
2177 | .btn-outline.btn-warning .badge-outline {
2178 |   --tw-border-opacity: 1;
2179 | 
2180 |   border-color: hsl(var(--wa) / var(--tw-border-opacity));
2181 |   background-color: transparent;
2182 | 
2183 |   --tw-text-opacity: 1;
2184 | 
2185 |   color: hsl(var(--wa) / var(--tw-text-opacity));
2186 | }
2187 | 
2188 | .btn-outline.btn-error .badge-outline {
2189 |   --tw-border-opacity: 1;
2190 | 
2191 |   border-color: hsl(var(--er) / var(--tw-border-opacity));
2192 |   background-color: transparent;
2193 | 
2194 |   --tw-text-opacity: 1;
2195 | 
2196 |   color: hsl(var(--er) / var(--tw-text-opacity));
2197 | }
2198 | 
2199 | .btn-outline:hover .badge {
2200 |   --tw-border-opacity: 1;
2201 | 
2202 |   border-color: hsl(var(--b2, var(--b1)) / var(--tw-border-opacity));
2203 | 
2204 |   --tw-bg-opacity: 1;
2205 | 
2206 |   background-color: hsl(var(--b2, var(--b1)) / var(--tw-bg-opacity));
2207 | 
2208 |   --tw-text-opacity: 1;
2209 | 
2210 |   color: hsl(var(--bc) / var(--tw-text-opacity));
2211 | }
2212 | 
2213 | .btn-outline:hover .badge.outline {
2214 |   --tw-border-opacity: 1;
2215 | 
2216 |   border-color: hsl(var(--b2, var(--b1)) / var(--tw-border-opacity));
2217 | 
2218 |   --tw-text-opacity: 1;
2219 | 
2220 |   color: hsl(var(--nc) / var(--tw-text-opacity));
2221 | }
2222 | 
2223 | .btn-outline.btn-primary:hover .badge {
2224 |   --tw-border-opacity: 1;
2225 | 
2226 |   border-color: hsl(var(--pc) / var(--tw-border-opacity));
2227 | 
2228 |   --tw-bg-opacity: 1;
2229 | 
2230 |   background-color: hsl(var(--pc) / var(--tw-bg-opacity));
2231 | 
2232 |   --tw-text-opacity: 1;
2233 | 
2234 |   color: hsl(var(--p) / var(--tw-text-opacity));
2235 | }
2236 | 
2237 | .btn-outline.btn-primary:hover .badge.outline {
2238 |   --tw-border-opacity: 1;
2239 | 
2240 |   border-color: hsl(var(--pc) / var(--tw-border-opacity));
2241 | 
2242 |   --tw-bg-opacity: 1;
2243 | 
2244 |   background-color: hsl(var(--pf, var(--p)) / var(--tw-bg-opacity));
2245 | 
2246 |   --tw-text-opacity: 1;
2247 | 
2248 |   color: hsl(var(--pc) / var(--tw-text-opacity));
2249 | }
2250 | 
2251 | .btn-outline.btn-secondary:hover .badge {
2252 |   --tw-border-opacity: 1;
2253 | 
2254 |   border-color: hsl(var(--sc) / var(--tw-border-opacity));
2255 | 
2256 |   --tw-bg-opacity: 1;
2257 | 
2258 |   background-color: hsl(var(--sc) / var(--tw-bg-opacity));
2259 | 
2260 |   --tw-text-opacity: 1;
2261 | 
2262 |   color: hsl(var(--s) / var(--tw-text-opacity));
2263 | }
2264 | 
2265 | .btn-outline.btn-secondary:hover .badge.outline {
2266 |   --tw-border-opacity: 1;
2267 | 
2268 |   border-color: hsl(var(--sc) / var(--tw-border-opacity));
2269 | 
2270 |   --tw-bg-opacity: 1;
2271 | 
2272 |   background-color: hsl(var(--sf, var(--s)) / var(--tw-bg-opacity));
2273 | 
2274 |   --tw-text-opacity: 1;
2275 | 
2276 |   color: hsl(var(--sc) / var(--tw-text-opacity));
2277 | }
2278 | 
2279 | .btn-outline.btn-accent:hover .badge {
2280 |   --tw-border-opacity: 1;
2281 | 
2282 |   border-color: hsl(var(--ac) / var(--tw-border-opacity));
2283 | 
2284 |   --tw-bg-opacity: 1;
2285 | 
2286 |   background-color: hsl(var(--ac) / var(--tw-bg-opacity));
2287 | 
2288 |   --tw-text-opacity: 1;
2289 | 
2290 |   color: hsl(var(--a) / var(--tw-text-opacity));
2291 | }
2292 | 
2293 | .btn-outline.btn-accent:hover .badge.outline {
2294 |   --tw-border-opacity: 1;
2295 | 
2296 |   border-color: hsl(var(--ac) / var(--tw-border-opacity));
2297 | 
2298 |   --tw-bg-opacity: 1;
2299 | 
2300 |   background-color: hsl(var(--af, var(--a)) / var(--tw-bg-opacity));
2301 | 
2302 |   --tw-text-opacity: 1;
2303 | 
2304 |   color: hsl(var(--ac) / var(--tw-text-opacity));
2305 | }
2306 | 
2307 | .btm-nav > *:where(.active) {
2308 |   border-top-width: 2px;
2309 | 
2310 |   --tw-bg-opacity: 1;
2311 | 
2312 |   background-color: hsl(var(--b1) / var(--tw-bg-opacity));
2313 | }
2314 | 
2315 | .btn:active:hover,
2316 | .btn:active:focus {
2317 |   animation: none;
2318 |   transform: scale(var(--btn-focus-scale, 0.95));
2319 | }
2320 | 
2321 | .btn:hover,
2322 | .btn-active {
2323 |   --tw-border-opacity: 1;
2324 | 
2325 |   border-color: hsl(var(--nf, var(--n)) / var(--tw-border-opacity));
2326 | 
2327 |   --tw-bg-opacity: 1;
2328 | 
2329 |   background-color: hsl(var(--nf, var(--n)) / var(--tw-bg-opacity));
2330 | }
2331 | 
2332 | .btn:focus-visible {
2333 |   outline: 2px solid hsl(var(--nf));
2334 |   outline-offset: 2px;
2335 | }
2336 | 
2337 | .btn.glass:hover,
2338 | .btn.glass.btn-active {
2339 |   --glass-opacity: 25%;
2340 |   --glass-border-opacity: 15%;
2341 | }
2342 | 
2343 | .btn.glass:focus-visible {
2344 |   outline: 2px solid currentColor;
2345 | }
2346 | 
2347 | .btn-outline {
2348 |   border-color: currentColor;
2349 |   background-color: transparent;
2350 | 
2351 |   --tw-text-opacity: 1;
2352 | 
2353 |   color: hsl(var(--bc) / var(--tw-text-opacity));
2354 | }
2355 | 
2356 | .btn-outline:hover,
2357 | .btn-outline.btn-active {
2358 |   --tw-border-opacity: 1;
2359 | 
2360 |   border-color: hsl(var(--bc) / var(--tw-border-opacity));
2361 | 
2362 |   --tw-bg-opacity: 1;
2363 | 
2364 |   background-color: hsl(var(--bc) / var(--tw-bg-opacity));
2365 | 
2366 |   --tw-text-opacity: 1;
2367 | 
2368 |   color: hsl(var(--b1) / var(--tw-text-opacity));
2369 | }
2370 | 
2371 | .btn-outline.btn-primary {
2372 |   --tw-text-opacity: 1;
2373 | 
2374 |   color: hsl(var(--p) / var(--tw-text-opacity));
2375 | }
2376 | 
2377 | .btn-outline.btn-primary:hover,
2378 | .btn-outline.btn-primary.btn-active {
2379 |   --tw-border-opacity: 1;
2380 | 
2381 |   border-color: hsl(var(--pf, var(--p)) / var(--tw-border-opacity));
2382 | 
2383 |   --tw-bg-opacity: 1;
2384 | 
2385 |   background-color: hsl(var(--pf, var(--p)) / var(--tw-bg-opacity));
2386 | 
2387 |   --tw-text-opacity: 1;
2388 | 
2389 |   color: hsl(var(--pc) / var(--tw-text-opacity));
2390 | }
2391 | 
2392 | .btn-outline.btn-secondary {
2393 |   --tw-text-opacity: 1;
2394 | 
2395 |   color: hsl(var(--s) / var(--tw-text-opacity));
2396 | }
2397 | 
2398 | .btn-outline.btn-secondary:hover,
2399 | .btn-outline.btn-secondary.btn-active {
2400 |   --tw-border-opacity: 1;
2401 | 
2402 |   border-color: hsl(var(--sf, var(--s)) / var(--tw-border-opacity));
2403 | 
2404 |   --tw-bg-opacity: 1;
2405 | 
2406 |   background-color: hsl(var(--sf, var(--s)) / var(--tw-bg-opacity));
2407 | 
2408 |   --tw-text-opacity: 1;
2409 | 
2410 |   color: hsl(var(--sc) / var(--tw-text-opacity));
2411 | }
2412 | 
2413 | .btn-outline.btn-accent {
2414 |   --tw-text-opacity: 1;
2415 | 
2416 |   color: hsl(var(--a) / var(--tw-text-opacity));
2417 | }
2418 | 
2419 | .btn-outline.btn-accent:hover,
2420 | .btn-outline.btn-accent.btn-active {
2421 |   --tw-border-opacity: 1;
2422 | 
2423 |   border-color: hsl(var(--af, var(--a)) / var(--tw-border-opacity));
2424 | 
2425 |   --tw-bg-opacity: 1;
2426 | 
2427 |   background-color: hsl(var(--af, var(--a)) / var(--tw-bg-opacity));
2428 | 
2429 |   --tw-text-opacity: 1;
2430 | 
2431 |   color: hsl(var(--ac) / var(--tw-text-opacity));
2432 | }
2433 | 
2434 | .btn-outline.btn-success {
2435 |   --tw-text-opacity: 1;
2436 | 
2437 |   color: hsl(var(--su) / var(--tw-text-opacity));
2438 | }
2439 | 
2440 | .btn-outline.btn-success:hover,
2441 | .btn-outline.btn-success.btn-active {
2442 |   --tw-border-opacity: 1;
2443 | 
2444 |   border-color: hsl(var(--su) / var(--tw-border-opacity));
2445 | 
2446 |   --tw-bg-opacity: 1;
2447 | 
2448 |   background-color: hsl(var(--su) / var(--tw-bg-opacity));
2449 | 
2450 |   --tw-text-opacity: 1;
2451 | 
2452 |   color: hsl(var(--suc, var(--nc)) / var(--tw-text-opacity));
2453 | }
2454 | 
2455 | .btn-outline.btn-info {
2456 |   --tw-text-opacity: 1;
2457 | 
2458 |   color: hsl(var(--in) / var(--tw-text-opacity));
2459 | }
2460 | 
2461 | .btn-outline.btn-info:hover,
2462 | .btn-outline.btn-info.btn-active {
2463 |   --tw-border-opacity: 1;
2464 | 
2465 |   border-color: hsl(var(--in) / var(--tw-border-opacity));
2466 | 
2467 |   --tw-bg-opacity: 1;
2468 | 
2469 |   background-color: hsl(var(--in) / var(--tw-bg-opacity));
2470 | 
2471 |   --tw-text-opacity: 1;
2472 | 
2473 |   color: hsl(var(--inc, var(--nc)) / var(--tw-text-opacity));
2474 | }
2475 | 
2476 | .btn-outline.btn-warning {
2477 |   --tw-text-opacity: 1;
2478 | 
2479 |   color: hsl(var(--wa) / var(--tw-text-opacity));
2480 | }
2481 | 
2482 | .btn-outline.btn-warning:hover,
2483 | .btn-outline.btn-warning.btn-active {
2484 |   --tw-border-opacity: 1;
2485 | 
2486 |   border-color: hsl(var(--wa) / var(--tw-border-opacity));
2487 | 
2488 |   --tw-bg-opacity: 1;
2489 | 
2490 |   background-color: hsl(var(--wa) / var(--tw-bg-opacity));
2491 | 
2492 |   --tw-text-opacity: 1;
2493 | 
2494 |   color: hsl(var(--wac, var(--nc)) / var(--tw-text-opacity));
2495 | }
2496 | 
2497 | .btn-outline.btn-error {
2498 |   --tw-text-opacity: 1;
2499 | 
2500 |   color: hsl(var(--er) / var(--tw-text-opacity));
2501 | }
2502 | 
2503 | .btn-outline.btn-error:hover,
2504 | .btn-outline.btn-error.btn-active {
2505 |   --tw-border-opacity: 1;
2506 | 
2507 |   border-color: hsl(var(--er) / var(--tw-border-opacity));
2508 | 
2509 |   --tw-bg-opacity: 1;
2510 | 
2511 |   background-color: hsl(var(--er) / var(--tw-bg-opacity));
2512 | 
2513 |   --tw-text-opacity: 1;
2514 | 
2515 |   color: hsl(var(--erc, var(--nc)) / var(--tw-text-opacity));
2516 | }
2517 | 
2518 | .btn-disabled,
2519 | .btn-disabled:hover,
2520 | .btn[disabled],
2521 | .btn[disabled]:hover {
2522 |   --tw-border-opacity: 0;
2523 | 
2524 |   background-color: hsl(var(--n) / var(--tw-bg-opacity));
2525 | 
2526 |   --tw-bg-opacity: 0.2;
2527 | 
2528 |   color: hsl(var(--bc) / var(--tw-text-opacity));
2529 | 
2530 |   --tw-text-opacity: 0.2;
2531 | }
2532 | 
2533 | .btn.loading.btn-square::before,
2534 | .btn.loading.btn-circle::before {
2535 |   margin-right: 0;
2536 | }
2537 | 
2538 | .btn.loading.btn-xl::before,
2539 | .btn.loading.btn-lg::before {
2540 |   height: 1.25rem;
2541 |   width: 1.25rem;
2542 | }
2543 | 
2544 | .btn.loading.btn-sm::before,
2545 | .btn.loading.btn-xs::before {
2546 |   height: 0.75rem;
2547 |   width: 0.75rem;
2548 | }
2549 | 
2550 | .btn-group > input[type="radio"]:checked.btn,
2551 | .btn-group > .btn-active {
2552 |   --tw-border-opacity: 1;
2553 | 
2554 |   border-color: hsl(var(--p) / var(--tw-border-opacity));
2555 | 
2556 |   --tw-bg-opacity: 1;
2557 | 
2558 |   background-color: hsl(var(--p) / var(--tw-bg-opacity));
2559 | 
2560 |   --tw-text-opacity: 1;
2561 | 
2562 |   color: hsl(var(--pc) / var(--tw-text-opacity));
2563 | }
2564 | 
2565 | .btn-group > input[type="radio"]:checked.btn:focus-visible,
2566 | .btn-group > .btn-active:focus-visible {
2567 |   outline: 2px solid hsl(var(--p));
2568 | }
2569 | 
2570 | @keyframes button-pop {
2571 |   0% {
2572 |     transform: scale(var(--btn-focus-scale, 0.95));
2573 |   }
2574 | 
2575 |   40% {
2576 |     transform: scale(1.02);
2577 |   }
2578 | 
2579 |   100% {
2580 |     transform: scale(1);
2581 |   }
2582 | }
2583 | 
2584 | @keyframes checkmark {
2585 |   0% {
2586 |     background-position-y: 5px;
2587 |   }
2588 | 
2589 |   50% {
2590 |     background-position-y: -2px;
2591 |   }
2592 | 
2593 |   100% {
2594 |     background-position-y: 0;
2595 |   }
2596 | }
2597 | 
2598 | .link:focus {
2599 |   outline: 2px solid transparent;
2600 |   outline-offset: 2px;
2601 | }
2602 | 
2603 | .link:focus-visible {
2604 |   outline: 2px solid currentColor;
2605 |   outline-offset: 2px;
2606 | }
2607 | 
2608 | .menu.horizontal > li.bordered > a,
2609 | .menu.horizontal > li.bordered > button,
2610 | .menu.horizontal > li.bordered > span {
2611 |   border-left-width: 0;
2612 |   border-bottom-width: 4px;
2613 | 
2614 |   --tw-border-opacity: 1;
2615 | 
2616 |   border-color: hsl(var(--p) / var(--tw-border-opacity));
2617 | }
2618 | 
2619 | .menu[class*=" px-"]:not(.menu[class*=" px-0"]) li > *,
2620 | .menu[class^="px-"]:not(.menu[class^="px-0"]) li > *,
2621 | .menu[class*=" p-"]:not(.menu[class*=" p-0"]) li > *,
2622 | .menu[class^="p-"]:not(.menu[class^="p-0"]) li > * {
2623 |   border-radius: var(--rounded-btn, 0.5rem);
2624 | }
2625 | 
2626 | .menu :where(li.bordered > *) {
2627 |   border-left-width: 4px;
2628 | 
2629 |   --tw-border-opacity: 1;
2630 | 
2631 |   border-color: hsl(var(--p) / var(--tw-border-opacity));
2632 | }
2633 | 
2634 | .menu :where(li) > :where(*:not(ul)) {
2635 |   gap: 0.75rem;
2636 |   padding-left: 1rem;
2637 |   padding-right: 1rem;
2638 |   padding-top: 0.75rem;
2639 |   padding-bottom: 0.75rem;
2640 |   color: currentColor;
2641 | }
2642 | 
2643 | .menu :where(li:not(.menu-title):not(:empty)) > :where(*:not(ul):focus),
2644 | .menu :where(li:not(.menu-title):not(:empty)) > :where(*:not(ul):hover) {
2645 |   background-color: hsl(var(--bc) / var(--tw-bg-opacity));
2646 | 
2647 |   --tw-bg-opacity: 0.1;
2648 | }
2649 | 
2650 | .menu :where(li:not(.menu-title):not(:empty)) > :where(:not(ul).active),
2651 | .menu :where(li:not(.menu-title):not(:empty)) > :where(*:not(ul):active) {
2652 |   --tw-bg-opacity: 1;
2653 | 
2654 |   background-color: hsl(var(--p) / var(--tw-bg-opacity));
2655 | 
2656 |   --tw-text-opacity: 1;
2657 | 
2658 |   color: hsl(var(--pc) / var(--tw-text-opacity));
2659 | }
2660 | 
2661 | .menu :where(li:empty) {
2662 |   margin-left: 1rem;
2663 |   margin-right: 1rem;
2664 |   margin-top: 0.5rem;
2665 |   margin-bottom: 0.5rem;
2666 |   height: 1px;
2667 |   background-color: hsl(var(--bc) / var(--tw-bg-opacity));
2668 | 
2669 |   --tw-bg-opacity: 0.1;
2670 | }
2671 | 
2672 | .menu li.disabled > * {
2673 |   -webkit-user-select: none;
2674 |   -moz-user-select: none;
2675 |   user-select: none;
2676 |   color: hsl(var(--bc) / var(--tw-text-opacity));
2677 | 
2678 |   --tw-text-opacity: 0.2;
2679 | }
2680 | 
2681 | .menu li.disabled > *:hover {
2682 |   background-color: transparent;
2683 | }
2684 | 
2685 | .menu li.hover-bordered a {
2686 |   border-left-width: 4px;
2687 |   border-color: transparent;
2688 | }
2689 | 
2690 | .menu li.hover-bordered a:hover {
2691 |   --tw-border-opacity: 1;
2692 | 
2693 |   border-color: hsl(var(--p) / var(--tw-border-opacity));
2694 | }
2695 | 
2696 | .menu.compact li > a,
2697 | .menu.compact li > span {
2698 |   padding-top: 0.5rem;
2699 |   padding-bottom: 0.5rem;
2700 |   font-size: 0.875rem;
2701 |   line-height: 1.25rem;
2702 | }
2703 | 
2704 | .menu .menu-title {
2705 |   font-size: 0.75rem;
2706 |   line-height: 1rem;
2707 |   font-weight: 700;
2708 |   opacity: 0.4;
2709 | }
2710 | 
2711 | .menu .menu-title > * {
2712 |   padding-top: 0.25rem;
2713 |   padding-bottom: 0.25rem;
2714 | }
2715 | 
2716 | .menu :where(li:not(.disabled)) > :where(*:not(ul)) {
2717 |   outline: 2px solid transparent;
2718 |   outline-offset: 2px;
2719 |   transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
2720 |   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
2721 |   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
2722 |   transition-duration: 200ms;
2723 |   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
2724 | }
2725 | 
2726 | .menu > :where(li:first-child) {
2727 |   border-top-left-radius: inherit;
2728 |   border-top-right-radius: inherit;
2729 |   border-bottom-right-radius: unset;
2730 |   border-bottom-left-radius: unset;
2731 | }
2732 | 
2733 | .menu > :where(li:first-child) > :where(:not(ul)) {
2734 |   border-top-left-radius: inherit;
2735 |   border-top-right-radius: inherit;
2736 |   border-bottom-right-radius: unset;
2737 |   border-bottom-left-radius: unset;
2738 | }
2739 | 
2740 | .menu > :where(li:last-child) {
2741 |   border-top-left-radius: unset;
2742 |   border-top-right-radius: unset;
2743 |   border-bottom-right-radius: inherit;
2744 |   border-bottom-left-radius: inherit;
2745 | }
2746 | 
2747 | .menu > :where(li:last-child) > :where(:not(ul)) {
2748 |   border-top-left-radius: unset;
2749 |   border-top-right-radius: unset;
2750 |   border-bottom-right-radius: inherit;
2751 |   border-bottom-left-radius: inherit;
2752 | }
2753 | 
2754 | .menu > :where(li) > :where(ul) :where(li) {
2755 |   width: 100%;
2756 |   white-space: nowrap;
2757 | }
2758 | 
2759 | .menu > :where(li) > :where(ul) :where(li) :where(ul) {
2760 |   padding-left: 1rem;
2761 | }
2762 | 
2763 | .menu > :where(li) > :where(ul) :where(li) > :where(:not(ul)) {
2764 |   width: 100%;
2765 |   white-space: nowrap;
2766 | }
2767 | 
2768 | .menu > :where(li) > :where(ul) > :where(li:first-child) {
2769 |   border-top-left-radius: inherit;
2770 |   border-top-right-radius: inherit;
2771 |   border-bottom-right-radius: unset;
2772 |   border-bottom-left-radius: unset;
2773 | }
2774 | 
2775 | .menu > :where(li) > :where(ul) > :where(li:first-child) > :where(:not(ul)) {
2776 |   border-top-left-radius: inherit;
2777 |   border-top-right-radius: inherit;
2778 |   border-bottom-right-radius: unset;
2779 |   border-bottom-left-radius: unset;
2780 | }
2781 | 
2782 | .menu > :where(li) > :where(ul) > :where(li:last-child) {
2783 |   border-top-left-radius: unset;
2784 |   border-top-right-radius: unset;
2785 |   border-bottom-right-radius: inherit;
2786 |   border-bottom-left-radius: inherit;
2787 | }
2788 | 
2789 | .menu > :where(li) > :where(ul) > :where(li:last-child) > :where(:not(ul)) {
2790 |   border-top-left-radius: unset;
2791 |   border-top-right-radius: unset;
2792 |   border-bottom-right-radius: inherit;
2793 |   border-bottom-left-radius: inherit;
2794 | }
2795 | 
2796 | @keyframes progress-loading {
2797 |   50% {
2798 |     left: 107%;
2799 |   }
2800 | }
2801 | 
2802 | @keyframes radiomark {
2803 |   0% {
2804 |     box-shadow: 0 0 0 12px hsl(var(--b1)) inset, 0 0 0 12px hsl(var(--b1)) inset;
2805 |   }
2806 | 
2807 |   50% {
2808 |     box-shadow: 0 0 0 3px hsl(var(--b1)) inset, 0 0 0 3px hsl(var(--b1)) inset;
2809 |   }
2810 | 
2811 |   100% {
2812 |     box-shadow: 0 0 0 4px hsl(var(--b1)) inset, 0 0 0 4px hsl(var(--b1)) inset;
2813 |   }
2814 | }
2815 | 
2816 | @keyframes rating-pop {
2817 |   0% {
2818 |     transform: translateY(-0.125em);
2819 |   }
2820 | 
2821 |   40% {
2822 |     transform: translateY(-0.125em);
2823 |   }
2824 | 
2825 |   100% {
2826 |     transform: translateY(0);
2827 |   }
2828 | }
2829 | 
2830 | .table tr.active th,
2831 | .table tr.active td,
2832 | .table tr.active:nth-child(even) th,
2833 | .table tr.active:nth-child(even) td {
2834 |   --tw-bg-opacity: 1;
2835 | 
2836 |   background-color: hsl(var(--b3, var(--b2)) / var(--tw-bg-opacity));
2837 | }
2838 | 
2839 | @keyframes toast-pop {
2840 |   0% {
2841 |     transform: scale(0.9);
2842 |     opacity: 0;
2843 |   }
2844 | 
2845 |   100% {
2846 |     transform: scale(1);
2847 |     opacity: 1;
2848 |   }
2849 | }
2850 | 
2851 | [dir="rtl"] .toggle {
2852 |   --handleoffsetcalculator: calc(var(--handleoffset) * 1);
2853 | }
2854 | 
2855 | .toggle:focus-visible {
2856 |   outline: 2px solid hsl(var(--bc));
2857 |   outline-offset: 2px;
2858 | }
2859 | 
2860 | .toggle:checked,
2861 | .toggle[checked="true"],
2862 | .toggle[aria-checked=true] {
2863 |   --handleoffsetcalculator: var(--handleoffset);
2864 |   --tw-border-opacity: 1;
2865 |   --tw-bg-opacity: 1;
2866 | }
2867 | 
2868 | [dir="rtl"] .toggle:checked,
2869 | [dir="rtl"] .toggle[checked="true"],
2870 | [dir="rtl"] .toggle[aria-checked=true] {
2871 |   --handleoffsetcalculator: calc(var(--handleoffset) * -1);
2872 | }
2873 | 
2874 | .toggle:indeterminate {
2875 |   --tw-border-opacity: 1;
2876 |   --tw-bg-opacity: 1;
2877 | 
2878 |   box-shadow: calc(var(--handleoffset) / 2) 0 0 2px var(--tglbg) inset, calc(var(--handleoffset) / -2) 0 0 2px var(--tglbg) inset, 0 0 0 2px var(--tglbg) inset;
2879 | }
2880 | 
2881 | [dir="rtl"] .toggle:indeterminate {
2882 |   box-shadow: calc(var(--handleoffset) / 2) 0 0 2px var(--tglbg) inset, calc(var(--handleoffset) / -2) 0 0 2px var(--tglbg) inset, 0 0 0 2px var(--tglbg) inset;
2883 | }
2884 | 
2885 | .toggle:disabled {
2886 |   cursor: not-allowed;
2887 | 
2888 |   --tw-border-opacity: 1;
2889 | 
2890 |   border-color: hsl(var(--bc) / var(--tw-border-opacity));
2891 |   background-color: transparent;
2892 |   opacity: 0.3;
2893 | 
2894 |   --togglehandleborder: 0 0 0 3px hsl(var(--bc)) inset, var(--handleoffsetcalculator) 0 0 3px hsl(var(--bc)) inset;
2895 | }
2896 | 
2897 | .btm-nav-xs > *:where(.active) {
2898 |   border-top-width: 1px;
2899 | }
2900 | 
2901 | .btm-nav-sm > *:where(.active) {
2902 |   border-top-width: 2px;
2903 | }
2904 | 
2905 | .btm-nav-md > *:where(.active) {
2906 |   border-top-width: 2px;
2907 | }
2908 | 
2909 | .btm-nav-lg > *:where(.active) {
2910 |   border-top-width: 4px;
2911 | }
2912 | 
2913 | .avatar.online::before {
2914 |   content: "";
2915 |   position: absolute;
2916 |   z-index: 10;
2917 |   display: block;
2918 |   border-radius: 9999px;
2919 | 
2920 |   --tw-bg-opacity: 1;
2921 | 
2922 |   background-color: hsl(var(--su) / var(--tw-bg-opacity));
2923 |   width: 15%;
2924 |   height: 15%;
2925 |   top: 7%;
2926 |   right: 7%;
2927 |   box-shadow: 0 0 0 2px hsl(var(--b1));
2928 | }
2929 | 
2930 | .btn-group .btn:not(:first-child):not(:last-child),
2931 | .btn-group.btn-group-horizontal .btn:not(:first-child):not(:last-child) {
2932 |   border-top-left-radius: 0;
2933 |   border-top-right-radius: 0;
2934 |   border-bottom-left-radius: 0;
2935 |   border-bottom-right-radius: 0;
2936 | }
2937 | 
2938 | .btn-group .btn:first-child:not(:last-child),
2939 | .btn-group.btn-group-horizontal .btn:first-child:not(:last-child) {
2940 |   margin-left: -1px;
2941 |   margin-top: -0;
2942 |   border-top-left-radius: var(--rounded-btn, 0.5rem);
2943 |   border-top-right-radius: 0;
2944 |   border-bottom-left-radius: var(--rounded-btn, 0.5rem);
2945 |   border-bottom-right-radius: 0;
2946 | }
2947 | 
2948 | .btn-group .btn:last-child:not(:first-child),
2949 | .btn-group.btn-group-horizontal .btn:last-child:not(:first-child) {
2950 |   border-top-left-radius: 0;
2951 |   border-top-right-radius: var(--rounded-btn, 0.5rem);
2952 |   border-bottom-left-radius: 0;
2953 |   border-bottom-right-radius: var(--rounded-btn, 0.5rem);
2954 | }
2955 | 
2956 | .btn-group.btn-group-vertical .btn:first-child:not(:last-child) {
2957 |   margin-left: -0;
2958 |   margin-top: -1px;
2959 |   border-top-left-radius: var(--rounded-btn, 0.5rem);
2960 |   border-top-right-radius: var(--rounded-btn, 0.5rem);
2961 |   border-bottom-left-radius: 0;
2962 |   border-bottom-right-radius: 0;
2963 | }
2964 | 
2965 | .btn-group.btn-group-vertical .btn:last-child:not(:first-child) {
2966 |   border-top-left-radius: 0;
2967 |   border-top-right-radius: 0;
2968 |   border-bottom-left-radius: var(--rounded-btn, 0.5rem);
2969 |   border-bottom-right-radius: var(--rounded-btn, 0.5rem);
2970 | }
2971 | 
2972 | .fixed {
2973 |   position: fixed;
2974 | }
2975 | 
2976 | .absolute {
2977 |   position: absolute;
2978 | }
2979 | 
2980 | .left-0 {
2981 |   left: 0;
2982 | }
2983 | 
2984 | .top-0 {
2985 |   top: 0;
2986 | }
2987 | 
2988 | .top-\[-400px\] {
2989 |   top: -400px;
2990 | }
2991 | 
2992 | .top-\[80px\] {
2993 |   top: 80px;
2994 | }
2995 | 
2996 | .z-\[-1\] {
2997 |   z-index: -1;
2998 | }
2999 | 
3000 | .z-\[1\] {
3001 |   z-index: 1;
3002 | }
3003 | 
3004 | .m-0 {
3005 |   margin: 0;
3006 | }
3007 | 
3008 | .m-auto {
3009 |   margin: auto;
3010 | }
3011 | 
3012 | .mx-1 {
3013 |   margin-left: 0.25rem;
3014 |   margin-right: 0.25rem;
3015 | }
3016 | 
3017 | .mx-2 {
3018 |   margin-left: 0.5rem;
3019 |   margin-right: 0.5rem;
3020 | }
3021 | 
3022 | .mx-auto {
3023 |   margin-left: auto;
3024 |   margin-right: auto;
3025 | }
3026 | 
3027 | .my-6 {
3028 |   margin-top: 1.5rem;
3029 |   margin-bottom: 1.5rem;
3030 | }
3031 | 
3032 | .mb-1 {
3033 |   margin-bottom: 0.25rem;
3034 | }
3035 | 
3036 | .mb-5 {
3037 |   margin-bottom: 1.25rem;
3038 | }
3039 | 
3040 | .mr-10 {
3041 |   margin-right: 2.5rem;
3042 | }
3043 | 
3044 | .mr-\[13\%\] {
3045 |   margin-right: 13%;
3046 | }
3047 | 
3048 | .mt-0 {
3049 |   margin-top: 0;
3050 | }
3051 | 
3052 | .mt-10 {
3053 |   margin-top: 2.5rem;
3054 | }
3055 | 
3056 | .mt-14 {
3057 |   margin-top: 3.5rem;
3058 | }
3059 | 
3060 | .mt-20 {
3061 |   margin-top: 5rem;
3062 | }
3063 | 
3064 | .mt-24 {
3065 |   margin-top: 6rem;
3066 | }
3067 | 
3068 | .mt-5 {
3069 |   margin-top: 1.25rem;
3070 | }
3071 | 
3072 | .mt-8 {
3073 |   margin-top: 2rem;
3074 | }
3075 | 
3076 | .block {
3077 |   display: block;
3078 | }
3079 | 
3080 | .flex {
3081 |   display: flex;
3082 | }
3083 | 
3084 | .grid {
3085 |   display: grid;
3086 | }
3087 | 
3088 | .hidden {
3089 |   display: none;
3090 | }
3091 | 
3092 | .h-1 {
3093 |   height: 0.25rem;
3094 | }
3095 | 
3096 | .h-\[24vh\] {
3097 |   height: 24vh;
3098 | }
3099 | 
3100 | .h-\[30px\] {
3101 |   height: 30px;
3102 | }
3103 | 
3104 | .w-10 {
3105 |   width: 2.5rem;
3106 | }
3107 | 
3108 | .w-12 {
3109 |   width: 3rem;
3110 | }
3111 | 
3112 | .w-2\/4 {
3113 |   width: 50%;
3114 | }
3115 | 
3116 | .w-6 {
3117 |   width: 1.5rem;
3118 | }
3119 | 
3120 | .w-\[100\%\] {
3121 |   width: 100%;
3122 | }
3123 | 
3124 | .w-\[20\%\] {
3125 |   width: 20%;
3126 | }
3127 | 
3128 | .w-\[40\%\] {
3129 |   width: 40%;
3130 | }
3131 | 
3132 | .w-\[50\%\] {
3133 |   width: 50%;
3134 | }
3135 | 
3136 | .w-\[50px\] {
3137 |   width: 50px;
3138 | }
3139 | 
3140 | .w-\[60\%\] {
3141 |   width: 60%;
3142 | }
3143 | 
3144 | .w-full {
3145 |   width: 100%;
3146 | }
3147 | 
3148 | .cursor-pointer {
3149 |   cursor: pointer;
3150 | }
3151 | 
3152 | .list-none {
3153 |   list-style-type: none;
3154 | }
3155 | 
3156 | .grid-rows-1 {
3157 |   grid-template-rows: repeat(1, minmax(0, 1fr));
3158 | }
3159 | 
3160 | .grid-rows-5 {
3161 |   grid-template-rows: repeat(5, minmax(0, 1fr));
3162 | }
3163 | 
3164 | .flex-row {
3165 |   flex-direction: row;
3166 | }
3167 | 
3168 | .flex-col {
3169 |   flex-direction: column;
3170 | }
3171 | 
3172 | .items-center {
3173 |   align-items: center;
3174 | }
3175 | 
3176 | .justify-start {
3177 |   justify-content: flex-start;
3178 | }
3179 | 
3180 | .justify-end {
3181 |   justify-content: flex-end;
3182 | }
3183 | 
3184 | .justify-center {
3185 |   justify-content: center;
3186 | }
3187 | 
3188 | .justify-between {
3189 |   justify-content: space-between;
3190 | }
3191 | 
3192 | .gap-1 {
3193 |   gap: 0.25rem;
3194 | }
3195 | 
3196 | .gap-2 {
3197 |   gap: 0.5rem;
3198 | }
3199 | 
3200 | .gap-5 {
3201 |   gap: 1.25rem;
3202 | }
3203 | 
3204 | .gap-x-3 {
3205 |   -moz-column-gap: 0.75rem;
3206 |   column-gap: 0.75rem;
3207 | }
3208 | 
3209 | .overflow-hidden {
3210 |   overflow: hidden;
3211 | }
3212 | 
3213 | .rounded {
3214 |   border-radius: 0.25rem;
3215 | }
3216 | 
3217 | .rounded-sm {
3218 |   border-radius: 0.125rem;
3219 | }
3220 | 
3221 | .border-2 {
3222 |   border-width: 2px;
3223 | }
3224 | 
3225 | .border-4 {
3226 |   border-width: 4px;
3227 | }
3228 | 
3229 | .border-\[\#d3d3d3\] {
3230 |   --tw-border-opacity: 1;
3231 | 
3232 |   border-color: rgb(211 211 211 / var(--tw-border-opacity));
3233 | }
3234 | 
3235 | .border-b-\[\#525050\] {
3236 |   --tw-border-opacity: 1;
3237 | 
3238 |   border-bottom-color: rgb(82 80 80 / var(--tw-border-opacity));
3239 | }
3240 | 
3241 | .bg-\[\#252525\] {
3242 |   --tw-bg-opacity: 1;
3243 | 
3244 |   background-color: rgb(37 37 37 / var(--tw-bg-opacity));
3245 | }
3246 | 
3247 | .bg-\[\#272a31\] {
3248 |   --tw-bg-opacity: 1;
3249 | 
3250 |   background-color: rgb(39 42 49 / var(--tw-bg-opacity));
3251 | }
3252 | 
3253 | .bg-\[\#525050\] {
3254 |   --tw-bg-opacity: 1;
3255 | 
3256 |   background-color: rgb(82 80 80 / var(--tw-bg-opacity));
3257 | }
3258 | 
3259 | .bg-\[\#d3d3d3\] {
3260 |   --tw-bg-opacity: 1;
3261 | 
3262 |   background-color: rgb(211 211 211 / var(--tw-bg-opacity));
3263 | }
3264 | 
3265 | .bg-\[\#ec5242\] {
3266 |   --tw-bg-opacity: 1;
3267 | 
3268 |   background-color: rgb(236 82 66 / var(--tw-bg-opacity));
3269 | }
3270 | 
3271 | .bg-\[\#f2f2f2\] {
3272 |   --tw-bg-opacity: 1;
3273 | 
3274 |   background-color: rgb(242 242 242 / var(--tw-bg-opacity));
3275 | }
3276 | 
3277 | .bg-gray-600 {
3278 |   --tw-bg-opacity: 1;
3279 | 
3280 |   background-color: rgb(75 85 99 / var(--tw-bg-opacity));
3281 | }
3282 | 
3283 | .bg-white {
3284 |   --tw-bg-opacity: 1;
3285 | 
3286 |   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
3287 | }
3288 | 
3289 | .p-5 {
3290 |   padding: 1.25rem;
3291 | }
3292 | 
3293 | .px-24 {
3294 |   padding-left: 6rem;
3295 |   padding-right: 6rem;
3296 | }
3297 | 
3298 | .px-4 {
3299 |   padding-left: 1rem;
3300 |   padding-right: 1rem;
3301 | }
3302 | 
3303 | .px-6 {
3304 |   padding-left: 1.5rem;
3305 |   padding-right: 1.5rem;
3306 | }
3307 | 
3308 | .py-10 {
3309 |   padding-top: 2.5rem;
3310 |   padding-bottom: 2.5rem;
3311 | }
3312 | 
3313 | .py-2 {
3314 |   padding-top: 0.5rem;
3315 |   padding-bottom: 0.5rem;
3316 | }
3317 | 
3318 | .py-3 {
3319 |   padding-top: 0.75rem;
3320 |   padding-bottom: 0.75rem;
3321 | }
3322 | 
3323 | .py-4 {
3324 |   padding-top: 1rem;
3325 |   padding-bottom: 1rem;
3326 | }
3327 | 
3328 | .pl-7 {
3329 |   padding-left: 1.75rem;
3330 | }
3331 | 
3332 | .text-center {
3333 |   text-align: center;
3334 | }
3335 | 
3336 | .text-start {
3337 |   text-align: start;
3338 | }
3339 | 
3340 | .font-\[Lato\] {
3341 |   font-family: Lato;
3342 | }
3343 | 
3344 | .text-2xl {
3345 |   font-size: 1.5rem;
3346 |   line-height: 2rem;
3347 | }
3348 | 
3349 | .text-3xl {
3350 |   font-size: 1.875rem;
3351 |   line-height: 2.25rem;
3352 | }
3353 | 
3354 | .text-4xl {
3355 |   font-size: 2.25rem;
3356 |   line-height: 2.5rem;
3357 | }
3358 | 
3359 | .text-5xl {
3360 |   font-size: 3rem;
3361 |   line-height: 1;
3362 | }
3363 | 
3364 | .text-7xl {
3365 |   font-size: 4.5rem;
3366 |   line-height: 1;
3367 | }
3368 | 
3369 | .text-\[10px\] {
3370 |   font-size: 10px;
3371 | }
3372 | 
3373 | .text-\[13px\] {
3374 |   font-size: 13px;
3375 | }
3376 | 
3377 | .text-base {
3378 |   font-size: 1rem;
3379 |   line-height: 1.5rem;
3380 | }
3381 | 
3382 | .text-sm {
3383 |   font-size: 0.875rem;
3384 |   line-height: 1.25rem;
3385 | }
3386 | 
3387 | .text-xl {
3388 |   font-size: 1.25rem;
3389 |   line-height: 1.75rem;
3390 | }
3391 | 
3392 | .font-bold {
3393 |   font-weight: 700;
3394 | }
3395 | 
3396 | .font-extrabold {
3397 |   font-weight: 800;
3398 | }
3399 | 
3400 | .font-light {
3401 |   font-weight: 300;
3402 | }
3403 | 
3404 | .font-semibold {
3405 |   font-weight: 600;
3406 | }
3407 | 
3408 | .italic {
3409 |   font-style: italic;
3410 | }
3411 | 
3412 | .text-\[\#272a31\] {
3413 |   --tw-text-opacity: 1;
3414 | 
3415 |   color: rgb(39 42 49 / var(--tw-text-opacity));
3416 | }
3417 | 
3418 | .text-\[\#d3d3d3\] {
3419 |   --tw-text-opacity: 1;
3420 | 
3421 |   color: rgb(211 211 211 / var(--tw-text-opacity));
3422 | }
3423 | 
3424 | .text-\[\#ec5242\] {
3425 |   --tw-text-opacity: 1;
3426 | 
3427 |   color: rgb(236 82 66 / var(--tw-text-opacity));
3428 | }
3429 | 
3430 | .text-black {
3431 |   --tw-text-opacity: 1;
3432 | 
3433 |   color: rgb(0 0 0 / var(--tw-text-opacity));
3434 | }
3435 | 
3436 | .text-white {
3437 |   --tw-text-opacity: 1;
3438 | 
3439 |   color: rgb(255 255 255 / var(--tw-text-opacity));
3440 | }
3441 | 
3442 | .underline {
3443 |   -webkit-text-decoration-line: underline;
3444 |   text-decoration-line: underline;
3445 | }
3446 | 
3447 | .opacity-0 {
3448 |   opacity: 0;
3449 | }
3450 | 
3451 | .opacity-100 {
3452 |   opacity: 1;
3453 | }
3454 | 
3455 | .shadow {
3456 |   --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
3457 |   --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
3458 | 
3459 |   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
3460 | }
3461 | 
3462 | .shadow-lg {
3463 |   --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
3464 |   --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
3465 | 
3466 |   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
3467 | }
3468 | 
3469 | .drop-shadow-xl {
3470 |   --tw-drop-shadow: drop-shadow(0 20px 13px rgb(0 0 0 / 0.03)) drop-shadow(0 8px 5px rgb(0 0 0 / 0.08));
3471 | 
3472 |   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
3473 | }
3474 | 
3475 | .transition-all {
3476 |   transition-property: all;
3477 |   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
3478 |   transition-duration: 150ms;
3479 | }
3480 | 
3481 | .duration-500 {
3482 |   transition-duration: 500ms;
3483 | }
3484 | 
3485 | .ease-in {
3486 |   transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
3487 | }
3488 | 
3489 | ul li a {
3490 |   border-radius: 0.25rem;
3491 |   padding-top: 7px;
3492 |   padding-bottom: 7px;
3493 |   padding-left: 13px;
3494 |   padding-right: 13px;
3495 |   font-size: 17px;
3496 |   transition-property: all;
3497 |   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
3498 |   transition-duration: 300ms;
3499 | }
3500 | 
3501 | .hover\:border-\[\#ec5242\]:hover {
3502 |   --tw-border-opacity: 1;
3503 | 
3504 |   border-color: rgb(236 82 66 / var(--tw-border-opacity));
3505 | }
3506 | 
3507 | .hover\:bg-\[\#ec5242\]:hover {
3508 |   --tw-bg-opacity: 1;
3509 | 
3510 |   background-color: rgb(236 82 66 / var(--tw-bg-opacity));
3511 | }
3512 | 
3513 | .hover\:text-\[\#ec5242\]:hover {
3514 |   --tw-text-opacity: 1;
3515 | 
3516 |   color: rgb(236 82 66 / var(--tw-text-opacity));
3517 | }
3518 | 
3519 | .hover\:text-white:hover {
3520 |   --tw-text-opacity: 1;
3521 | 
3522 |   color: rgb(255 255 255 / var(--tw-text-opacity));
3523 | }
3524 | 
3525 | .focus\:outline-none:focus {
3526 |   outline: 2px solid transparent;
3527 |   outline-offset: 2px;
3528 | }
3529 | 
3530 | @media (min-width: 768px) {
3531 |   .md\:static {
3532 |     position: static;
3533 |   }
3534 | 
3535 |   .md\:z-auto {
3536 |     z-index: auto;
3537 |   }
3538 | 
3539 |   .md\:my-0 {
3540 |     margin-top: 0;
3541 |     margin-bottom: 0;
3542 |   }
3543 | 
3544 |   .md\:mb-10 {
3545 |     margin-bottom: 2.5rem;
3546 |   }
3547 | 
3548 |   .md\:mt-10 {
3549 |     margin-top: 2.5rem;
3550 |   }
3551 | 
3552 |   .md\:mt-20 {
3553 |     margin-top: 5rem;
3554 |   }
3555 | 
3556 |   .md\:block {
3557 |     display: block;
3558 |   }
3559 | 
3560 |   .md\:flex {
3561 |     display: flex;
3562 |   }
3563 | 
3564 |   .md\:hidden {
3565 |     display: none;
3566 |   }
3567 | 
3568 |   .md\:h-\[50\%\] {
3569 |     height: 50%;
3570 |   }
3571 | 
3572 |   .md\:h-\[720px\] {
3573 |     height: 720px;
3574 |   }
3575 | 
3576 |   .md\:h-\[80vh\] {
3577 |     height: 80vh;
3578 |   }
3579 | 
3580 |   .md\:w-\[100\%\] {
3581 |     width: 100%;
3582 |   }
3583 | 
3584 |   .md\:w-\[11\%\] {
3585 |     width: 11%;
3586 |   }
3587 | 
3588 |   .md\:w-\[12\%\] {
3589 |     width: 12%;
3590 |   }
3591 | 
3592 |   .md\:w-\[20\%\] {
3593 |     width: 20%;
3594 |   }
3595 | 
3596 |   .md\:w-\[32\%\] {
3597 |     width: 32%;
3598 |   }
3599 | 
3600 |   .md\:w-\[50\%\] {
3601 |     width: 50%;
3602 |   }
3603 | 
3604 |   .md\:w-auto {
3605 |     width: auto;
3606 |   }
3607 | 
3608 |   .md\:flex-row {
3609 |     flex-direction: row;
3610 |   }
3611 | 
3612 |   .md\:flex-col {
3613 |     flex-direction: column;
3614 |   }
3615 | 
3616 |   .md\:items-center {
3617 |     align-items: center;
3618 |   }
3619 | 
3620 |   .md\:justify-start {
3621 |     justify-content: flex-start;
3622 |   }
3623 | 
3624 |   .md\:justify-center {
3625 |     justify-content: center;
3626 |   }
3627 | 
3628 |   .md\:justify-around {
3629 |     justify-content: space-around;
3630 |   }
3631 | 
3632 |   .md\:bg-\[\#272a31\] {
3633 |     --tw-bg-opacity: 1;
3634 | 
3635 |     background-color: rgb(39 42 49 / var(--tw-bg-opacity));
3636 |   }
3637 | 
3638 |   .md\:bg-white {
3639 |     --tw-bg-opacity: 1;
3640 | 
3641 |     background-color: rgb(255 255 255 / var(--tw-bg-opacity));
3642 |   }
3643 | 
3644 |   .md\:py-0 {
3645 |     padding-top: 0;
3646 |     padding-bottom: 0;
3647 |   }
3648 | 
3649 |   .md\:pl-0 {
3650 |     padding-left: 0;
3651 |   }
3652 | 
3653 |   .md\:text-center {
3654 |     text-align: center;
3655 |   }
3656 | 
3657 |   .md\:text-2xl {
3658 |     font-size: 1.5rem;
3659 |     line-height: 2rem;
3660 |   }
3661 | 
3662 |   .md\:text-5xl {
3663 |     font-size: 3rem;
3664 |     line-height: 1;
3665 |   }
3666 | 
3667 |   .md\:text-7xl {
3668 |     font-size: 4.5rem;
3669 |     line-height: 1;
3670 |   }
3671 | 
3672 |   .md\:text-\[14px\] {
3673 |     font-size: 14px;
3674 |   }
3675 | 
3676 |   .md\:text-xl {
3677 |     font-size: 1.25rem;
3678 |     line-height: 1.75rem;
3679 |   }
3680 | 
3681 |   .md\:text-white {
3682 |     --tw-text-opacity: 1;
3683 | 
3684 |     color: rgb(255 255 255 / var(--tw-text-opacity));
3685 |   }
3686 | 
3687 |   .md\:opacity-100 {
3688 |     opacity: 1;
3689 |   }
3690 | }
3691 | 


--------------------------------------------------------------------------------